igniteui-webcomponents 4.3.0 → 4.4.0

package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  color: var(--header-text-color);\n  padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/header/dropdown-header.indigo.css.d.ts

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

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  color: var(--header-text-color);
+  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+}`;
+//# sourceMappingURL=dropdown-header.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  color: var(--header-text-color);\n  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/header/dropdown-header.material.css.d.ts

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

package/components/dropdown/themes/light/header/dropdown-header.material.css.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  color: var(--header-text-color);
+  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+}`;
+//# sourceMappingURL=dropdown-header.material.css.js.map

package/components/dropdown/themes/light/header/dropdown-header.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  color: var(--header-text-color);\n  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/item/dropdown-item.base.css.d.ts

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

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

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium: min(
+      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+  );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--ig-scrollbar-thumb-background);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  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);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+  outline-style: none;
+  padding-inline: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+}
+
+:host([disabled]) {
+  cursor: default;
+  pointer-events: none;
+}
+
+::slotted(*) {
+  font: inherit;
+}
+
+[part=content] {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+[part=prefix],
+[part=suffix] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+[name=prefix]::slotted(*) {
+  -webkit-margin-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+          margin-inline-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+}
+
+[name=suffix]::slotted(*) {
+  -webkit-margin-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+          margin-inline-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+}`;
+//# sourceMappingURL=dropdown-item.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGvB,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\n:host {\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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: 100%;\n  white-space: nowrap;\n  position: relative;\n  cursor: pointer;\n  outline-style: none;\n  padding-inline: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host([disabled]) {\n  cursor: default;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  width: 100%;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=prefix],\n[part=suffix] {\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=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.d.ts

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

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 1px);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+
+:host([active]),
+:host(:hover) {
+  background: var(--hover-item-background);
+  color: var(--hover-item-text-color);
+}
+
+:host([active]) {
+  background: var(--focused-item-background);
+  color: var(--focused-item-text-color);
+}
+
+:host([selected]) {
+  background: var(--selected-item-background);
+  color: var(--selected-item-text-color);
+}
+
+:host([selected]:hover),
+:host([selected][active]) {
+  background: var(--selected-hover-item-background);
+  color: var(--selected-hover-item-text-color);
+}
+
+:host([disabled]) {
+  background: var(--disabled-item-background);
+  color: var(--disabled-item-text-color);
+}`;
+//# sourceMappingURL=dropdown-item.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 1px);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n  background: var(--hover-item-background);\n  color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n  background: var(--focused-item-background);\n  color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n  background: var(--selected-item-background);\n  color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n  background: var(--selected-hover-item-background);\n  color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n  background: var(--disabled-item-background);\n  color: var(--disabled-item-text-color);\n}`;\n"]}

package/components/dropdown/themes/light/item/dropdown-item.fluent.css.d.ts

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

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

@@ -0,0 +1,55 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+  padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+}
+
+:host([active]),
+:host(:hover) {
+  background: var(--hover-item-background);
+  color: var(--hover-item-text-color);
+}
+
+:host([active]) {
+  background: var(--focused-item-background);
+  color: var(--focused-item-text-color);
+}
+
+:host([selected]) {
+  background: var(--selected-item-background);
+  color: var(--selected-item-text-color);
+}
+
+:host([selected]:hover),
+:host([selected][active]) {
+  background: var(--selected-hover-item-background);
+  color: var(--selected-hover-item-text-color);
+}
+
+:host([disabled]) {
+  background: var(--disabled-item-background);
+  color: var(--disabled-item-text-color);
+}`;
+//# sourceMappingURL=dropdown-item.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n  padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([active]),\n:host(:hover) {\n  background: var(--hover-item-background);\n  color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n  background: var(--focused-item-background);\n  color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n  background: var(--selected-item-background);\n  color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n  background: var(--selected-hover-item-background);\n  color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n  background: var(--disabled-item-background);\n  color: var(--disabled-item-text-color);\n}`;\n"]}

package/components/dropdown/themes/light/item/dropdown-item.indigo.css.d.ts

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

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+
+:host([active]),
+:host(:hover) {
+  background: var(--hover-item-background);
+  color: var(--hover-item-text-color);
+}
+
+:host([active]) {
+  background: var(--focused-item-background);
+  color: var(--focused-item-text-color);
+}
+
+:host([selected]) {
+  background: var(--selected-item-background);
+  color: var(--selected-item-text-color);
+}
+
+:host([selected]:hover),
+:host([selected][active]) {
+  background: var(--selected-hover-item-background);
+  color: var(--selected-hover-item-text-color);
+}
+
+:host([disabled]) {
+  background: var(--disabled-item-background);
+  color: var(--disabled-item-text-color);
+}`;
+//# sourceMappingURL=dropdown-item.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n  background: var(--hover-item-background);\n  color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n  background: var(--focused-item-background);\n  color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n  background: var(--selected-item-background);\n  color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n  background: var(--selected-hover-item-background);\n  color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n  background: var(--disabled-item-background);\n  color: var(--disabled-item-text-color);\n}`;\n"]}

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

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

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+
+:host([active]),
+:host(:hover) {
+  background: var(--hover-item-background);
+  color: var(--hover-item-text-color);
+}
+
+:host([active]) {
+  background: var(--focused-item-background);
+  color: var(--focused-item-text-color);
+}
+
+:host([selected]) {
+  background: var(--selected-item-background);
+  color: var(--selected-item-text-color);
+}
+
+:host([selected]:hover),
+:host([selected][active]) {
+  background: var(--selected-hover-item-background);
+  color: var(--selected-hover-item-text-color);
+}
+
+:host([disabled]) {
+  background: var(--disabled-item-background);
+  color: var(--disabled-item-text-color);
+}`;
+//# sourceMappingURL=dropdown-item.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-dropdown-border-width, 0);\n  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n  background: var(--hover-item-background);\n  color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n  background: var(--focused-item-background);\n  color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n  background: var(--selected-item-background);\n  color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n  background: var(--selected-hover-item-background);\n  color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n  background: var(--disabled-item-background);\n  color: var(--disabled-item-text-color);\n}`;\n"]}

package/components/expansion-panel/expansion-panel.js

@@ -70,7 +70,7 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
         const animation = dir === 'open' ? growVerIn : growVerOut;
         const [_, event] = await Promise.all([
             this.animationPlayer.stopAll(),
-            this.animationPlayer.play(animation),
+            this.animationPlayer.play(animation()),
         ]);
         return event.type === 'finish';
     }

package/components/expansion-panel/expansion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,eAAe,EACf,SAAS,EACT,UAAU,GACX,MAAM,2BAA2B,CAAC;AAEnC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAiCnC,IAAqB,0BAA0B,kCAA/C,MAAqB,0BAA2B,SAAQ,iBAAiB,CAGvE,UAAU,CAAC;IAHb;;QAcS,SAAI,GAAG,KAAK,CAAC;QAOb,aAAQ,GAAG,KAAK,CAAC;QAOjB,sBAAiB,GAA6B,OAAO,CAAC;IAqM/D,CAAC;IA3LiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO;YACV,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACvB,uBAAuB,4BAA0B,CAAC,SAAS,EAAE,EAAE,CAAC;IACpE,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,WAAY,CAAC,KAAK,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,QAAQ,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE;YAC/B,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM;gBACT,IAAI,KAAK,CAAC,MAAM,EAAE;oBAChB,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;gBACD,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,IAAI;gBACP,IAAI,KAAK,CAAC,MAAM,EAAE;oBAChB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB;gBACD,MAAM;YACR,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACzD,MAAM;SACT;IACH,CAAC;IAEO,KAAK,CAAC,eAAe,CAAC,GAAqB;QACjD,MAAM,SAAS,GAAG,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;QAE1D,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;SACrC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAMO,KAAK,CAAC,aAAa;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,IAAI,GAAG;YACX,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI;SACb,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAEnD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,MAAM,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE;YACtC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;SAC/C;IACH,CAAC;IAMO,KAAK,CAAC,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,MAAM,IAAI,GAAG;YACX,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI;SACb,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAEnD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,IAAI,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE;YACvC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;SAC/C;IACH,CAAC;IAGM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IAGM,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SAC9B;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB;;;;;;KAMrE,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,OAAQ;;yBAEF,IAAI,CAAC,IAAI;yBACT,IAAI,CAAC,QAAQ;yBACb,IAAI,CAAC,OAAQ;mBACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;iBAC5B,IAAI,CAAC,aAAa;mBAChB,IAAI,CAAC,aAAa;;UAE3B,IAAI,CAAC,iBAAiB,EAAE;;;;;;KAM7B,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,OAAQ;2BACA,IAAI,CAAC,OAAQ;sBAClB,CAAC,IAAI,CAAC,IAAI;;;;KAI3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;IACnE,CAAC;;AA5NsB,kCAAO,GAAG,qBAAqB,AAAxB,CAAyB;AACzC,iCAAM,GAAG,MAAM,AAAT,CAAU;AACN,oCAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;AAQ7C;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACvB;AAOb;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;qEACA;AAGnD;IADT,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC;+DACI;AAG1B;IADT,KAAK,CAAC,mBAAmB,EAAE,IAAI,CAAC;gEACI;AAlClB,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,0BAA0B,CAiO9C;eAjOoB,0BAA0B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n  AnimationPlayer,\n  growVerIn,\n  growVerOut,\n} from '../../animations/index.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = styles;\n  private static readonly increment = createCounter();\n  private animationPlayer!: AnimationPlayer;\n\n  /**\n   * Indicates whether the contents of the control should be visible.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public open = false;\n\n  /**\n   * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /**\n   * The indicator position of the expansion panel.\n   * @attr indicator-position\n   */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n  @query('[part~=\"header\"]', true)\n  protected panelHeader!: HTMLElement;\n\n  @query('[part~=\"content\"]', true)\n  protected panelContent!: HTMLElement;\n\n  private panelId!: string;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.panelId =\n      this.getAttribute('id') ||\n      `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n  }\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this.panelContent);\n  }\n\n  private handleClicked() {\n    this.panelHeader!.focus();\n\n    if (this.open) {\n      this.closeWithEvent();\n    } else {\n      this.openWithEvent();\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key.toLowerCase()) {\n      case 'arrowdown':\n      case 'down':\n        if (event.altKey) {\n          this.openWithEvent();\n        }\n        break;\n      case 'arrowup':\n      case 'up':\n        if (event.altKey) {\n          this.closeWithEvent();\n        }\n        break;\n      case 'enter':\n      case ' ':\n        this.open ? this.closeWithEvent() : this.openWithEvent();\n        break;\n    }\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? growVerIn : growVerOut;\n\n    const [_, event] = await Promise.all([\n      this.animationPlayer.stopAll(),\n      this.animationPlayer.play(animation),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  /**\n   * @private\n   * Opens the panel.\n   */\n  private async openWithEvent() {\n    if (this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcOpening', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = true;\n\n    if (await this.toggleAnimation('open')) {\n      this.emitEvent('igcOpened', { detail: this });\n    }\n  }\n\n  /**\n   * @private\n   * Closes the panel.\n   */\n  private async closeWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcClosing', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = false;\n\n    if (await this.toggleAnimation('close')) {\n      this.emitEvent('igcClosed', { detail: this });\n    }\n  }\n\n  /** Toggles panel open state. */\n  public toggle(): void {\n    this.open ? this.hide() : this.show();\n  }\n\n  /** Hides the panel content. */\n  public hide(): void {\n    if (this.open) {\n      this.toggleAnimation('close');\n    }\n\n    this.open = false;\n  }\n\n  /** Shows the panel content. */\n  public show(): void {\n    if (!this.open) {\n      this.toggleAnimation('open');\n    }\n\n    this.open = true;\n  }\n\n  private indicatorTemplate() {\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <igc-icon\n            name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            collection=\"internal\"\n          >\n          </igc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  private headerTemplate() {\n    return html`\n      <div\n        part=\"header\"\n        id=\"${this.panelId!}-header\"\n        role=\"button\"\n        aria-expanded=\"${this.open}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-controls=\"${this.panelId!}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleClicked}\n        @keydown=${this.handleKeydown}\n      >\n        ${this.indicatorTemplate()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private contentTemplate() {\n    return html`\n      <div\n        part=\"content\"\n        role=\"region\"\n        id=\"${this.panelId!}-content\"\n        aria-labelledby=\"${this.panelId!}-header\"\n        aria-hidden=${!this.open}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}
+{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n  AnimationPlayer,\n  growVerIn,\n  growVerOut,\n} from '../../animations/index.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = styles;\n  private static readonly increment = createCounter();\n  private animationPlayer!: AnimationPlayer;\n\n  /**\n   * Indicates whether the contents of the control should be visible.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public open = false;\n\n  /**\n   * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /**\n   * The indicator position of the expansion panel.\n   * @attr indicator-position\n   */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n  @query('[part~=\"header\"]', true)\n  protected panelHeader!: HTMLElement;\n\n  @query('[part~=\"content\"]', true)\n  protected panelContent!: HTMLElement;\n\n  private panelId!: string;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.panelId =\n      this.getAttribute('id') ||\n      `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n  }\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this.panelContent);\n  }\n\n  private handleClicked() {\n    this.panelHeader!.focus();\n\n    if (this.open) {\n      this.closeWithEvent();\n    } else {\n      this.openWithEvent();\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key.toLowerCase()) {\n      case 'arrowdown':\n      case 'down':\n        if (event.altKey) {\n          this.openWithEvent();\n        }\n        break;\n      case 'arrowup':\n      case 'up':\n        if (event.altKey) {\n          this.closeWithEvent();\n        }\n        break;\n      case 'enter':\n      case ' ':\n        this.open ? this.closeWithEvent() : this.openWithEvent();\n        break;\n    }\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? growVerIn : growVerOut;\n\n    const [_, event] = await Promise.all([\n      this.animationPlayer.stopAll(),\n      this.animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  /**\n   * @private\n   * Opens the panel.\n   */\n  private async openWithEvent() {\n    if (this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcOpening', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = true;\n\n    if (await this.toggleAnimation('open')) {\n      this.emitEvent('igcOpened', { detail: this });\n    }\n  }\n\n  /**\n   * @private\n   * Closes the panel.\n   */\n  private async closeWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcClosing', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = false;\n\n    if (await this.toggleAnimation('close')) {\n      this.emitEvent('igcClosed', { detail: this });\n    }\n  }\n\n  /** Toggles panel open state. */\n  public toggle(): void {\n    this.open ? this.hide() : this.show();\n  }\n\n  /** Hides the panel content. */\n  public hide(): void {\n    if (this.open) {\n      this.toggleAnimation('close');\n    }\n\n    this.open = false;\n  }\n\n  /** Shows the panel content. */\n  public show(): void {\n    if (!this.open) {\n      this.toggleAnimation('open');\n    }\n\n    this.open = true;\n  }\n\n  private indicatorTemplate() {\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <igc-icon\n            name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            collection=\"internal\"\n          >\n          </igc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  private headerTemplate() {\n    return html`\n      <div\n        part=\"header\"\n        id=\"${this.panelId!}-header\"\n        role=\"button\"\n        aria-expanded=\"${this.open}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-controls=\"${this.panelId!}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleClicked}\n        @keydown=${this.handleKeydown}\n      >\n        ${this.indicatorTemplate()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private contentTemplate() {\n    return html`\n      <div\n        part=\"content\"\n        role=\"region\"\n        id=\"${this.panelId!}-content\"\n        aria-labelledby=\"${this.panelId!}-header\"\n        aria-hidden=${!this.open}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}

package/components/expansion-panel/themes/light/expansion-panel.base.css.js

@@ -27,12 +27,21 @@ export const styles = css `:host {
   background: var(--ig-scrollbar-thumb-background);
 }
 
+:host([hidden]),
 [hidden] {
   display: none !important;
 }
-
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
+  --header-background: var(--ig-expansion-panel-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --body-background: var(--ig-expansion-panel-body-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-focus-background: var(--ig-expansion-panel-header-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --header-title-color: var(--ig-expansion-panel-header-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --header-description-color: var(--ig-expansion-panel-header-description-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --header-icon-color: var(--ig-expansion-panel-header-icon-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --body-color: var(--ig-expansion-panel-body-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-color: var(--ig-expansion-panel-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --expanded-margin: var(--ig-expansion-panel-expanded-margin, 0.5rem);
+  --border-radius: var(--ig-expansion-panel-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1rem), 1rem));
   --lines-clamped: 1;
   color: hsla(var(--ig-gray-900), var(--ig-gray-a));
   background: hsla(var(--ig-surface-500), var(--ig-surface-a));
@@ -45,6 +54,7 @@ export const styles = css `:host {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  border-radius: var(--border-radius);
 }
 
 [part=header] {
@@ -114,8 +124,7 @@ export const styles = css `:host {
   margin-top: var(--ig-subtitle-2-margin-top);
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
   white-space: nowrap;
-  -o-text-overflow: ellipsis;
-     text-overflow: ellipsis;
+  text-overflow: ellipsis;
   overflow: hidden;
 }