igniteui-webcomponents 4.4.0 → 4.5.0

package/components/list/themes/light/list-header.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-header.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-header.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  background: inherit;\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n  font-family: var(--ig-overline-font-family, var(--ig-font-family));\n  font-size: var(--ig-overline-font-size);\n  font-weight: var(--ig-overline-font-weight);\n  font-style: var(--ig-overline-font-style);\n  line-height: var(--ig-overline-line-height);\n  letter-spacing: var(--ig-overline-letter-spacing);\n  text-transform: var(--ig-overline-text-transform);\n  margin-top: var(--ig-overline-margin-top);\n  margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n::slotted(*) {\n  font: inherit;\n  margin: inherit;\n}`;\n"]}
+{"version":3,"file":"list-header.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-header.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  font-family: var(--ig-overline-font-family, var(--ig-font-family));\n  font-size: var(--ig-overline-font-size);\n  font-weight: var(--ig-overline-font-weight);\n  font-style: var(--ig-overline-font-style);\n  line-height: var(--ig-overline-line-height);\n  letter-spacing: var(--ig-overline-letter-spacing);\n  text-transform: var(--ig-overline-text-transform);\n  margin-top: var(--ig-overline-margin-top);\n  margin-bottom: var(--ig-overline-margin-bottom);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  color: var(--header-text-color);\n  background: var(--header-background);\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n::slotted(*) {\n  font: inherit;\n  margin: inherit;\n}`;\n"]}

package/components/list/themes/light/list-header.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/list/themes/light/list-header.bootstrap.css.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));
+  --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, var(--ig-gray-900-contrast));
+  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), 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-300), 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));
+  background: var(--header-background);
+  color: var(--header-text-color);
+}`;
+//# sourceMappingURL=list-header.bootstrap.css.js.map

package/components/list/themes/light/list-header.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, var(--ig-gray-900-contrast));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-list-border-width, 0.0625rem);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  background: var(--header-background);\n  color: var(--header-text-color);\n}`;\n"]}

package/components/list/themes/light/list-header.indigo.css.js

@@ -1,5 +1,31 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  color: hsla(var(--ig-primary-500), var(--ig-primary-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-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-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-primary-50), var(--ig-primary-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-primary-50), var(--ig-primary-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, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-action-color-hover: var(--ig-list-item-action-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-action-color-active: var(--ig-list-item-action-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-subtitle-color: var(--ig-list-item-subtitle-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --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.0833333333) * 1.5rem), 1.5rem));
+  background: var(--header-background);
+  color: var(--header-text-color);
 }`;
 //# sourceMappingURL=list-header.indigo.css.js.map

package/components/list/themes/light/list-header.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-header.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;EAEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}`;\n"]}
+{"version":3,"file":"list-header.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-active: var(--ig-list-item-action-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));\n  background: var(--header-background);\n  color: var(--header-text-color);\n}`;\n"]}

package/components/list/themes/light/list-item.base.css.js

@@ -1,30 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --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-200), var(--ig-gray-a)));
-  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), 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));
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -32,18 +7,13 @@ export const styles = css `:host {
       -ms-flex-align: center;
           align-items: center;
   position: relative;
-  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
   -webkit-transition: background 0.15s ease-out;
   transition: background 0.15s ease-out;
   padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
   padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
-  border-radius: var(--item-border-radius);
 }
-
-:host(:hover),
-:host(:focus-within) {
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+:host ::slotted(igc-avatar) {
+  --ig-size: 1;
 }
 
 ::slotted(*) {
@@ -103,6 +73,5 @@ export const styles = css `:host {
   text-transform: var(--ig-caption-text-transform);
   margin-top: var(--ig-caption-margin-top);
   margin-bottom: var(--ig-caption-margin-bottom);
-  opacity: 0.74;
 }`;
 //# sourceMappingURL=list-item.base.css.js.map

package/components/list/themes/light/list-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-transition: background 0.15s ease-out;\n  transition: background 0.15s ease-out;\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n::slotted(*) {\n  margin: 0;\n  font: inherit;\n  opacity: inherit;\n}\n\n[part=content] {\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[part=title] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}\n\n[part=subtitle] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  opacity: 0.74;\n}`;\n"]}
+{"version":3,"file":"list-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  -webkit-transition: background 0.15s ease-out;\n  transition: background 0.15s ease-out;\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n:host ::slotted(igc-avatar) {\n  --ig-size: 1;\n}\n\n::slotted(*) {\n  margin: 0;\n  font: inherit;\n  opacity: inherit;\n}\n\n[part=content] {\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[part=title] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}\n\n[part=subtitle] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}`;\n"]}

package/components/list/themes/light/list-item.bootstrap.css.js

@@ -25,21 +25,25 @@ export const styles = css `:host {
   --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));
-  background: var(--ig-gray-900-contrast);
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  border-bottom: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+  color: var(--item-text-color);
+  background: var(--item-background);
+  border-bottom: 0.0625rem solid var(--border-color);
   border-radius: var(--item-border-radius);
 }
 
 :host(:hover),
 :host(:focus-within) {
-  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  background: var(--item-background-hover);
 }
 
 :host(:last-of-type) {
   border-bottom: none;
 }
 
+::slotted(igc-icon) {
+  color: var(--item-action-color);
+}
+
 [part=title] {
   font-family: var(--ig-body-1-font-family, var(--ig-font-family));
   font-size: var(--ig-body-1-font-size);
@@ -50,6 +54,7 @@ export const styles = css `:host {
   text-transform: var(--ig-body-1-text-transform);
   margin-top: var(--ig-body-1-margin-top);
   margin-bottom: var(--ig-body-1-margin-bottom);
+  color: var(--item-title-color);
 }
 
 [part=subtitle] {
@@ -62,5 +67,6 @@ export const styles = css `:host {
   text-transform: var(--ig-subtitle-1-text-transform);
   margin-top: var(--ig-subtitle-1-margin-top);
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
+  color: var(--item-subtitle-color);
 }`;
 //# sourceMappingURL=list-item.bootstrap.css.js.map

package/components/list/themes/light/list-item.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, var(--ig-gray-900-contrast));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-list-border-width, 0.0625rem);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  background: var(--ig-gray-900-contrast);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  border-bottom: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host(:last-of-type) {\n  border-bottom: none;\n}\n\n[part=title] {\n  font-family: var(--ig-body-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-1-font-size);\n  font-weight: var(--ig-body-1-font-weight);\n  font-style: var(--ig-body-1-font-style);\n  line-height: var(--ig-body-1-line-height);\n  letter-spacing: var(--ig-body-1-letter-spacing);\n  text-transform: var(--ig-body-1-text-transform);\n  margin-top: var(--ig-body-1-margin-top);\n  margin-bottom: var(--ig-body-1-margin-bottom);\n}\n\n[part=subtitle] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}
+{"version":3,"file":"list-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, var(--ig-gray-900-contrast));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-list-border-width, 0.0625rem);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  color: var(--item-text-color);\n  background: var(--item-background);\n  border-bottom: 0.0625rem solid var(--border-color);\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-background-hover);\n}\n\n:host(:last-of-type) {\n  border-bottom: none;\n}\n\n::slotted(igc-icon) {\n  color: var(--item-action-color);\n}\n\n[part=title] {\n  font-family: var(--ig-body-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-1-font-size);\n  font-weight: var(--ig-body-1-font-weight);\n  font-style: var(--ig-body-1-font-style);\n  line-height: var(--ig-body-1-line-height);\n  letter-spacing: var(--ig-body-1-letter-spacing);\n  text-transform: var(--ig-body-1-text-transform);\n  margin-top: var(--ig-body-1-margin-top);\n  margin-bottom: var(--ig-body-1-margin-bottom);\n  color: var(--item-title-color);\n}\n\n[part=subtitle] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: var(--item-subtitle-color);\n}`;\n"]}

package/components/list/themes/light/list-item.fluent.css.js

@@ -1,17 +1,5 @@
 import { css } from 'lit';
-export const styles = css `[part=title] {
-  font-family: var(--ig-caption-font-family, var(--ig-font-family));
-  font-size: var(--ig-caption-font-size);
-  font-weight: var(--ig-caption-font-weight);
-  font-style: var(--ig-caption-font-style);
-  line-height: var(--ig-caption-line-height);
-  letter-spacing: var(--ig-caption-letter-spacing);
-  text-transform: var(--ig-caption-text-transform);
-  margin-top: var(--ig-caption-margin-top);
-  margin-bottom: var(--ig-caption-margin-bottom);
-}
-
-:host {
+export const styles = css `:host {
   --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)));
@@ -37,16 +25,39 @@ export const styles = css `[part=title] {
   --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));
-  border-bottom: 0.0625rem solid hsla(var(--ig-gray-100), var(--ig-gray-a));
+  color: var(--item-text-color);
+  background: var(--item-background);
+  border-bottom: 0.0625rem solid var(--border-color);
   border-radius: var(--item-border-radius);
 }
 
 :host(:hover),
 :host(:focus-within) {
-  background: var(--item-hover-bg, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  background: var(--item-background-hover);
 }
 
 :host(:last-of-type) {
   border-bottom: none;
+}
+
+::slotted(igc-icon) {
+  color: var(--item-action-color);
+}
+
+[part=title] {
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+  color: var(--item-title-color);
+}
+
+[part=subtitle] {
+  color: var(--item-subtitle-color);
 }`;
 //# sourceMappingURL=list-item.fluent.css.js.map

package/components/list/themes/light/list-item.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=title] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\n:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  border-bottom: 0.0625rem solid hsla(var(--ig-gray-100), var(--ig-gray-a));\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-hover-bg, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n\n:host(:last-of-type) {\n  border-bottom: none;\n}`;\n"]}
+{"version":3,"file":"list-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  color: var(--item-text-color);\n  background: var(--item-background);\n  border-bottom: 0.0625rem solid var(--border-color);\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-background-hover);\n}\n\n:host(:last-of-type) {\n  border-bottom: none;\n}\n\n::slotted(igc-icon) {\n  color: var(--item-action-color);\n}\n\n[part=title] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: var(--item-title-color);\n}\n\n[part=subtitle] {\n  color: var(--item-subtitle-color);\n}`;\n"]}

package/components/list/themes/light/list-item.indigo.css.js

@@ -25,10 +25,25 @@ export const styles = css `:host {
   --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.0833333333) * 1.5rem), 1.5rem));
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  color: var(--item-text-color);
+  background: var(--item-background);
   border-radius: var(--item-border-radius);
 }
-:host [part=subtitle] {
+
+:host(:hover),
+:host(:focus-within) {
+  background: var(--item-background-hover);
+}
+
+::slotted(igc-icon) {
+  color: var(--item-action-color);
+}
+
+[part=title] {
+  color: var(--item-title-color);
+}
+
+[part=subtitle] {
   font-family: var(--ig-body-2-font-family, var(--ig-font-family));
   font-size: var(--ig-body-2-font-size);
   font-weight: var(--ig-body-2-font-weight);
@@ -38,11 +53,6 @@ export const styles = css `:host {
   text-transform: var(--ig-body-2-text-transform);
   margin-top: var(--ig-body-2-margin-top);
   margin-bottom: var(--ig-body-2-margin-bottom);
-  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
-}
-
-:host(:hover),
-:host(:focus-within) {
-  background: var(--item-hover-bg, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  color: var(--item-subtitle-color);
 }`;
 //# sourceMappingURL=list-item.indigo.css.js.map

package/components/list/themes/light/list-item.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-active: var(--ig-list-item-action-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  border-radius: var(--item-border-radius);\n}\n:host [part=subtitle] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-hover-bg, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n}`;\n"]}
+{"version":3,"file":"list-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-action-color-active: var(--ig-list-item-action-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));\n  color: var(--item-text-color);\n  background: var(--item-background);\n  border-radius: var(--item-border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-background-hover);\n}\n\n::slotted(igc-icon) {\n  color: var(--item-action-color);\n}\n\n[part=title] {\n  color: var(--item-title-color);\n}\n\n[part=subtitle] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: var(--item-subtitle-color);\n}`;\n"]}

package/components/list/themes/light/list-item.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/list/themes/light/list-item.material.css.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --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-200), var(--ig-gray-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), 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));
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+  background: var(--item-background);
+}
+
+::slotted(igc-icon) {
+  color: var(--item-action-color);
+}
+
+:host(:hover),
+:host(:focus-within) {
+  background: var(--item-background-hover);
+}
+
+[part=title] {
+  color: var(--item-title-color);
+}
+
+[part=subtitle] {
+  color: var(--item-subtitle-color);
+}`;
+//# sourceMappingURL=list-item.material.css.js.map

package/components/list/themes/light/list-item.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.material.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n  background: var(--item-background);\n}\n\n::slotted(igc-icon) {\n  color: var(--item-action-color);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--item-background-hover);\n}\n\n[part=title] {\n  color: var(--item-title-color);\n}\n\n[part=subtitle] {\n  color: var(--item-subtitle-color);\n}`;\n"]}

package/components/list/themes/light/list.base.css.js

@@ -67,19 +67,7 @@ export const styles = css `:host {
   font-family: var(--ig-font-family);
   overflow: hidden auto;
   height: auto;
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+  background: var(--background);
   border-radius: var(--border-radius);
-}
-
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
 }`;
 //# sourceMappingURL=list.base.css.js.map

package/components/list/themes/light/list.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: column nowrap;\n          flex-flow: column nowrap;\n  font-family: var(--ig-font-family);\n  overflow: hidden auto;\n  height: auto;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  border-radius: var(--border-radius);\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}`;\n"]}
+{"version":3,"file":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, transparent);\n  --border-width: var(--ig-list-border-width, 0);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: column nowrap;\n          flex-flow: column nowrap;\n  font-family: var(--ig-font-family);\n  overflow: hidden auto;\n  height: auto;\n  background: var(--background);\n  border-radius: var(--border-radius);\n}`;\n"]}

package/components/list/themes/light/list.bootstrap.css.js

@@ -25,8 +25,8 @@ export const styles = css `:host {
   --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));
-  background: var(--ig-gray-900-contrast);
-  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: var(--background);
+  border: 0.0625rem solid var(--border-color);
   border-radius: var(--border-radius);
 }`;
 //# sourceMappingURL=list.bootstrap.css.js.map

package/components/list/themes/light/list.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, var(--ig-gray-900-contrast));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-list-border-width, 0.0625rem);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  background: var(--ig-gray-900-contrast);\n  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-radius: var(--border-radius);\n}`;\n"]}
+{"version":3,"file":"list.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-background: var(--ig-list-header-background, var(--ig-gray-900-contrast));\n  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-background: var(--ig-list-item-background, var(--ig-gray-900-contrast));\n  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-title-color: var(--ig-list-item-title-color, 'currentColor');\n  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');\n  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');\n  --item-action-color: var(--ig-list-item-action-color, 'currentColor');\n  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');\n  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');\n  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');\n  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');\n  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');\n  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');\n  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');\n  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');\n  --border-color: var(--ig-list-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-list-border-width, 0.0625rem);\n  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));\n  background: var(--background);\n  border: 0.0625rem solid var(--border-color);\n  border-radius: var(--border-radius);\n}`;\n"]}

package/components/mask-input/mask-input.d.ts

@@ -1,5 +1,5 @@
-import { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';
 import { Validator } from '../common/validators.js';
+import { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';
 /**
  * A masked input is an input field where a developer can control user input and format the visible value,
  * based on configurable rules
@@ -24,6 +24,7 @@ import { Validator } from '../common/validators.js';
  */
 export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     static readonly tagName = "igc-mask-input";
+    static register(): void;
     protected validators: Validator<this>[];
     protected _value: string;
     /**

package/components/mask-input/mask-input.js

@@ -8,12 +8,13 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { watch } from '../common/decorators/watch.js';
 import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
-import { partNameMap } from '../common/util.js';
-import { IgcMaskInputBaseComponent } from './mask-input-base.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
 import messages from '../common/localization/validation-en.js';
+import { partNameMap } from '../common/util.js';
 import { requiredValidator } from '../common/validators.js';
+import { IgcMaskInputBaseComponent } from './mask-input-base.js';
 class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     constructor() {
         super(...arguments);
@@ -31,6 +32,9 @@ class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
         this._value = '';
         this.valueMode = 'raw';
     }
+    static register() {
+        registerComponent(this);
+    }
     get value() {
         return this.valueMode !== 'raw' ? this.maskedValue : this._value;
     }