igniteui-webcomponents 4.5.0-beta.1 → 4.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.base.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmLvB,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  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: top;\n}\n:host igc-icon {\n  --size: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1.25rem, -1 * 1.25rem), var(--is-small, 1) * max(1rem, -1 * 1rem));\n}\n\n:host button {\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: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  font-family: var(--ig-font-family);\n  border-style: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  cursor: pointer;\n  padding: max(var(--is-large, 1) * max(12px, -1 * 12px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n:host button[disabled] {\n  pointer-events: none;\n}\n\n:host([variant=primary]) button,\n:host([selected][variant=primary]) button:not([disabled]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n:host([variant=primary]) button:hover,\n:host([selected][variant=primary]) button:not([disabled]):hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=primary]) button:focus,\n:host([selected][variant=primary]) button:not([disabled]):focus {\n  background: hsla(var(--ig-primary-800), var(--ig-primary-a));\n  color: var(--ig-primary-800-contrast);\n}\n\n:host([variant=info]) button,\n:host([selected][variant=info]) button:not([disabled]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n:host([variant=info]) button:hover,\n:host([selected][variant=info]) button:not([disabled]):hover {\n  background: hsla(var(--ig-info-600), var(--ig-info-a));\n  color: var(--ig-info-600-contrast);\n}\n:host([variant=info]) button:focus,\n:host([selected][variant=info]) button:not([disabled]):focus {\n  background: hsla(var(--ig-info-800), var(--ig-info-a));\n  color: var(--ig-info-800-contrast);\n}\n\n:host([variant=success]) button,\n:host([selected][variant=success]) button:not([disabled]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n:host([variant=success]) button:hover,\n:host([selected][variant=success]) button:not([disabled]):hover {\n  background: hsla(var(--ig-success-600), var(--ig-success-a));\n  color: var(--ig-success-600-contrast);\n}\n:host([variant=success]) button:focus,\n:host([selected][variant=success]) button:not([disabled]):focus {\n  background: hsla(var(--ig-success-800), var(--ig-success-a));\n  color: var(--ig-success-800-contrast);\n}\n\n:host([variant=warning]) button,\n:host([selected][variant=warning]) button:not([disabled]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n:host([variant=warning]) button:hover,\n:host([selected][variant=warning]) button:not([disabled]):hover {\n  background: hsla(var(--ig-warn-600), var(--ig-warn-a));\n  color: var(--ig-warn-600-contrast);\n}\n:host([variant=warning]) button:focus,\n:host([selected][variant=warning]) button:not([disabled]):focus {\n  background: hsla(var(--ig-warn-800), var(--ig-warn-a));\n  color: var(--ig-warn-800-contrast);\n}\n\n:host([variant=danger]) button,\n:host([selected][variant=danger]) button:not([disabled]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n:host([variant=danger]) button:hover,\n:host([selected][variant=danger]) button:not([disabled]):hover {\n  background: hsla(var(--ig-error-600), var(--ig-error-a));\n  color: var(--ig-error-600-contrast);\n}\n:host([variant=danger]) button:focus,\n:host([selected][variant=danger]) button:not([disabled]):focus {\n  background: hsla(var(--ig-error-800), var(--ig-error-a));\n  color: var(--ig-error-800-contrast);\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[part=prefix] {\n  -webkit-margin-end: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n[part=suffix] {\n  -webkit-margin-start: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n::slotted(*) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}`;\n"]}

package/components/chip/themes/light/chip.bootstrap.css.d.ts

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

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

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-0));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, var(--ig-gray-200-contrast));
+  --background: var(--ig-chip-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --border-color: var(--ig-chip-border-color, transparent);
+  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));
+  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-chip-hover-border-color, transparent);
+  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-400-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-border-color: var(--ig-chip-focus-border-color, transparent);
+  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-gray-300-contrast));
+  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --selected-border-color: var(--ig-chip-selected-border-color, transparent);
+  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-gray-400-contrast));
+  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);
+  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-gray-400-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);
+  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1rem), 1rem));
+  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));
+}
+
+:host button {
+  border-radius: var(--border-radius);
+  background: var(--background);
+  color: var(--text-color);
+  height: var(--size);
+}
+:host button:hover {
+  background: var(--hover-background);
+  color: var(--hover-text-color);
+}
+:host button:focus {
+  outline: 0.125rem solid var(--focus-outline-color);
+  background: var(--focus-background);
+  color: var(--focus-text-color);
+}
+:host button[disabled] {
+  background: var(--disabled-background);
+  color: var(--disabled-text-color);
+}
+
+:host([variant=primary]) button,
+:host([variant=primary]) button:focus,
+:host([variant=primary]) button:hover,
+:host([selected][variant=primary]) button:not([disabled]) {
+  color: var(--ig-primary-700-contrast);
+}
+
+:host([variant=primary]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-primary-200), var(--ig-primary-a));
+}
+
+:host([variant=info]) button,
+:host([variant=info]) button:focus,
+:host([variant=info]) button:hover,
+:host([selected][variant=info]) button:not([disabled]) {
+  color: var(--ig-info-700-contrast);
+}
+
+:host([variant=info]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-info-200), var(--ig-info-a));
+}
+
+:host([variant=success]) button,
+:host([variant=success]) button:focus,
+:host([variant=success]) button:hover,
+:host([selected][variant=success]) button:not([disabled]) {
+  color: var(--ig-success-700-contrast);
+}
+
+:host([variant=success]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-success-200), var(--ig-success-a));
+}
+
+:host([variant=warning]) button,
+:host([variant=warning]) button:focus,
+:host([variant=warning]) button:hover,
+:host([selected][variant=warning]) button:not([disabled]) {
+  color: var(--ig-warn-700-contrast);
+}
+
+:host([variant=warning]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-warn-200), var(--ig-warn-a));
+}
+
+:host([variant=danger]) button,
+:host([variant=danger]) button:focus,
+:host([variant=danger]) button:hover,
+:host([selected][variant=danger]) button:not([disabled]) {
+  color: var(--ig-error-700-contrast);
+}
+
+:host([variant=danger]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-error-200), var(--ig-error-a));
+}`;
+//# sourceMappingURL=chip.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.bootstrap.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  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-0));\n  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');\n  --focus-outline-color: var(--ig-chip-focus-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');\n  --text-color: var(--ig-chip-text-color, var(--ig-gray-200-contrast));\n  --background: var(--ig-chip-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --border-color: var(--ig-chip-border-color, transparent);\n  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));\n  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-chip-hover-border-color, transparent);\n  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-400-contrast));\n  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --focus-border-color: var(--ig-chip-focus-border-color, transparent);\n  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-gray-300-contrast));\n  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --selected-border-color: var(--ig-chip-selected-border-color, transparent);\n  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-gray-400-contrast));\n  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);\n  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-gray-400-contrast));\n  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);\n  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1rem), 1rem));\n  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));\n}\n\n:host button {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--text-color);\n  height: var(--size);\n}\n:host button:hover {\n  background: var(--hover-background);\n  color: var(--hover-text-color);\n}\n:host button:focus {\n  outline: 0.125rem solid var(--focus-outline-color);\n  background: var(--focus-background);\n  color: var(--focus-text-color);\n}\n:host button[disabled] {\n  background: var(--disabled-background);\n  color: var(--disabled-text-color);\n}\n\n:host([variant=primary]) button,\n:host([variant=primary]) button:focus,\n:host([variant=primary]) button:hover,\n:host([selected][variant=primary]) button:not([disabled]) {\n  color: var(--ig-primary-700-contrast);\n}\n\n:host([variant=primary]) button:focus {\n  outline: 0.125rem solid hsla(var(--ig-primary-200), var(--ig-primary-a));\n}\n\n:host([variant=info]) button,\n:host([variant=info]) button:focus,\n:host([variant=info]) button:hover,\n:host([selected][variant=info]) button:not([disabled]) {\n  color: var(--ig-info-700-contrast);\n}\n\n:host([variant=info]) button:focus {\n  outline: 0.125rem solid hsla(var(--ig-info-200), var(--ig-info-a));\n}\n\n:host([variant=success]) button,\n:host([variant=success]) button:focus,\n:host([variant=success]) button:hover,\n:host([selected][variant=success]) button:not([disabled]) {\n  color: var(--ig-success-700-contrast);\n}\n\n:host([variant=success]) button:focus {\n  outline: 0.125rem solid hsla(var(--ig-success-200), var(--ig-success-a));\n}\n\n:host([variant=warning]) button,\n:host([variant=warning]) button:focus,\n:host([variant=warning]) button:hover,\n:host([selected][variant=warning]) button:not([disabled]) {\n  color: var(--ig-warn-700-contrast);\n}\n\n:host([variant=warning]) button:focus {\n  outline: 0.125rem solid hsla(var(--ig-warn-200), var(--ig-warn-a));\n}\n\n:host([variant=danger]) button,\n:host([variant=danger]) button:focus,\n:host([variant=danger]) button:hover,\n:host([selected][variant=danger]) button:not([disabled]) {\n  color: var(--ig-error-700-contrast);\n}\n\n:host([variant=danger]) button:focus {\n  outline: 0.125rem solid hsla(var(--ig-error-200), var(--ig-error-a));\n}`;\n"]}

package/components/chip/themes/light/chip.fluent.css.d.ts

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

package/components/chip/themes/light/chip.fluent.css.js

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-2));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, transparent);
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --background: var(--ig-chip-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --border-color: var(--ig-chip-border-color, transparent);
+  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-200-contrast));
+  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-chip-hover-border-color, transparent);
+  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-primary-700-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-border-color: var(--ig-chip-focus-border-color, transparent);
+  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-primary-700-contrast));
+  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-border-color: var(--ig-chip-selected-border-color, transparent);
+  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-primary-700-contrast));
+  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);
+  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-primary-700-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);
+  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));
+  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));
+}
+
+:host button {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+  border-radius: var(--border-radius);
+  background: var(--background);
+  color: var(--text-color);
+  outline: none;
+  height: var(--size);
+}
+:host button:hover {
+  background: var(--hover-background);
+  color: var(--hover-text-color);
+}
+:host button:focus {
+  background: var(--focus-background);
+  color: var(--focus-text-color);
+}
+:host button[disabled] {
+  background: var(--disabled-background);
+  color: var(--disabled-text-color);
+}
+
+:host([selected]) button:not([disabled]) {
+  background: var(--selected-background);
+  color: var(--selected-text-color);
+}
+:host([selected]) button:not([disabled]):hover {
+  background: var(--hover-selected-background);
+}
+:host([selected]) button:not([disabled]):focus {
+  background: var(--focus-selected-background);
+}`;
+//# sourceMappingURL=chip.fluent.css.js.map

package/components/chip/themes/light/chip.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.fluent.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  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-2));\n  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');\n  --focus-outline-color: var(--ig-chip-focus-outline-color, transparent);\n  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);\n  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');\n  --text-color: var(--ig-chip-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --background: var(--ig-chip-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --border-color: var(--ig-chip-border-color, transparent);\n  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-200-contrast));\n  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-chip-hover-border-color, transparent);\n  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-primary-700-contrast));\n  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --focus-border-color: var(--ig-chip-focus-border-color, transparent);\n  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-primary-700-contrast));\n  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --selected-border-color: var(--ig-chip-selected-border-color, transparent);\n  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-primary-700-contrast));\n  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);\n  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-primary-700-contrast));\n  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);\n  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));\n  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));\n}\n\n:host button {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--text-color);\n  outline: none;\n  height: var(--size);\n}\n:host button:hover {\n  background: var(--hover-background);\n  color: var(--hover-text-color);\n}\n:host button:focus {\n  background: var(--focus-background);\n  color: var(--focus-text-color);\n}\n:host button[disabled] {\n  background: var(--disabled-background);\n  color: var(--disabled-text-color);\n}\n\n:host([selected]) button:not([disabled]) {\n  background: var(--selected-background);\n  color: var(--selected-text-color);\n}\n:host([selected]) button:not([disabled]):hover {\n  background: var(--hover-selected-background);\n}\n:host([selected]) button:not([disabled]):focus {\n  background: var(--focus-selected-background);\n}`;\n"]}

package/components/chip/themes/light/chip.indigo.css.d.ts

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

package/components/chip/themes/light/chip.indigo.css.js

@@ -0,0 +1,172 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-1));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --background: var(--ig-chip-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-chip-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));
+  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-chip-hover-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-500-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --focus-border-color: var(--ig-chip-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-primary-500-contrast));
+  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-border-color: var(--ig-chip-selected-border-color, transparent);
+  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-primary-400-contrast));
+  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);
+  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-primary-500-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);
+  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));
+  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));
+}
+
+:host button {
+  border-radius: var(--border-radius);
+  border: 0.0625rem solid var(--border-color);
+  background: var(--background);
+  color: var(--text-color);
+  height: var(--size);
+}
+:host button:hover {
+  background: var(--hover-background);
+  color: var(--hover-text-color);
+}
+:host button:focus {
+  background: var(--focus-background);
+  color: var(--focus-text-color);
+  outline: 0.1875rem solid var(--focus-outline-color);
+}
+:host button[disabled] {
+  border-color: var(--disabled-border-color);
+  background: var(--disabled-background);
+  color: var(--disabled-text-color);
+}
+
+:host([selected]) button:not([disabled]) {
+  border-color: transparent;
+  background: var(--selected-background);
+  color: var(--selected-text-color);
+}
+:host([selected]) button:not([disabled]):hover {
+  background: var(--hover-selected-background);
+}
+:host([selected]) button:not([disabled]):focus {
+  outline: 0.1875rem solid var(--focus-selected-outline-color);
+}
+
+:host([variant=primary]) button,
+:host([selected][variant=primary]) button:not([disabled]) {
+  border-color: transparent;
+}
+:host([variant=primary]) button:hover,
+:host([selected][variant=primary]) button:not([disabled]):hover {
+  background: hsla(var(--ig-primary-400), var(--ig-primary-a));
+  color: var(--ig-primary-400-contrast);
+}
+:host([variant=primary]) button:focus,
+:host([selected][variant=primary]) button:not([disabled]):focus {
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  color: var(--ig-primary-500-contrast);
+  outline: 0.1875rem solid var(--focus-selected-outline-color);
+}
+
+:host([variant=primary]) button[disabled] {
+  background: hsla(var(--ig-primary-200), var(--ig-primary-a));
+  color: var(--ig-primary-400-contrast);
+}
+
+:host([variant=info]) button,
+:host([selected][variant=info]) button:not([disabled]) {
+  border-color: transparent;
+}
+:host([variant=info]) button:hover,
+:host([selected][variant=info]) button:not([disabled]):hover {
+  background: hsla(var(--ig-info-400), var(--ig-info-a));
+  color: var(--ig-info-400-contrast);
+}
+:host([variant=info]) button:focus,
+:host([selected][variant=info]) button:not([disabled]):focus {
+  background: hsla(var(--ig-info-500), var(--ig-info-a));
+  color: var(--ig-info-500-contrast);
+  outline: 0.1875rem solid hsla(var(--ig-info-200), var(--ig-info-a));
+}
+
+:host([variant=info]) button[disabled] {
+  background: hsla(var(--ig-info-200), var(--ig-info-a));
+  color: var(--ig-info-400-contrast);
+}
+
+:host([variant=success]) button,
+:host([selected][variant=success]) button:not([disabled]) {
+  border-color: transparent;
+}
+:host([variant=success]) button:hover,
+:host([selected][variant=success]) button:not([disabled]):hover {
+  background: hsla(var(--ig-success-400), var(--ig-success-a));
+  color: var(--ig-success-400-contrast);
+}
+:host([variant=success]) button:focus,
+:host([selected][variant=success]) button:not([disabled]):focus {
+  background: hsla(var(--ig-success-500), var(--ig-success-a));
+  color: var(--ig-success-500-contrast);
+  outline: 0.1875rem solid hsla(var(--ig-success-200), var(--ig-success-a));
+}
+
+:host([variant=success]) button[disabled] {
+  background: hsla(var(--ig-success-200), var(--ig-success-a));
+  color: var(--ig-success-800-contrast);
+}
+
+:host([variant=warning]) button,
+:host([selected][variant=warning]) button:not([disabled]) {
+  border-color: transparent;
+}
+:host([variant=warning]) button:hover,
+:host([selected][variant=warning]) button:not([disabled]):hover {
+  background: hsla(var(--ig-warn-400), var(--ig-warn-a));
+  color: var(--ig-warn-400-contrast);
+}
+:host([variant=warning]) button:focus,
+:host([selected][variant=warning]) button:not([disabled]):focus {
+  background: hsla(var(--ig-warn-500), var(--ig-warn-a));
+  color: var(--ig-warn-500-contrast);
+  outline: 0.1875rem solid hsla(var(--ig-warn-200), var(--ig-warn-a));
+}
+
+:host([variant=warning]) button[disabled] {
+  background: hsla(var(--ig-warn-200), var(--ig-warn-a));
+  color: var(--ig-warn-900-contrast);
+}
+
+:host([variant=danger]) button,
+:host([selected][variant=danger]) button:not([disabled]) {
+  border-color: transparent;
+}
+:host([variant=danger]) button:hover,
+:host([selected][variant=danger]) button:not([disabled]):hover {
+  background: hsla(var(--ig-error-400), var(--ig-error-a));
+  color: var(--ig-error-400-contrast);
+}
+:host([variant=danger]) button:focus,
+:host([selected][variant=danger]) button:not([disabled]):focus {
+  background: hsla(var(--ig-error-500), var(--ig-error-a));
+  color: var(--ig-error-500-contrast);
+  outline: 0.1875rem solid hsla(var(--ig-error-200), var(--ig-error-a));
+}
+
+:host([variant=danger]) button[disabled] {
+  background: hsla(var(--ig-error-200), var(--ig-error-a));
+  color: var(--ig-error-400-contrast);
+}`;
+//# sourceMappingURL=chip.indigo.css.js.map

package/components/chip/themes/light/chip.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-1));\n  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');\n  --focus-outline-color: var(--ig-chip-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');\n  --text-color: var(--ig-chip-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --background: var(--ig-chip-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-chip-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));\n  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-chip-hover-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-500-contrast));\n  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --focus-border-color: var(--ig-chip-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-primary-500-contrast));\n  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --selected-border-color: var(--ig-chip-selected-border-color, transparent);\n  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-primary-400-contrast));\n  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);\n  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-primary-500-contrast));\n  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);\n  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));\n  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));\n}\n\n:host button {\n  border-radius: var(--border-radius);\n  border: 0.0625rem solid var(--border-color);\n  background: var(--background);\n  color: var(--text-color);\n  height: var(--size);\n}\n:host button:hover {\n  background: var(--hover-background);\n  color: var(--hover-text-color);\n}\n:host button:focus {\n  background: var(--focus-background);\n  color: var(--focus-text-color);\n  outline: 0.1875rem solid var(--focus-outline-color);\n}\n:host button[disabled] {\n  border-color: var(--disabled-border-color);\n  background: var(--disabled-background);\n  color: var(--disabled-text-color);\n}\n\n:host([selected]) button:not([disabled]) {\n  border-color: transparent;\n  background: var(--selected-background);\n  color: var(--selected-text-color);\n}\n:host([selected]) button:not([disabled]):hover {\n  background: var(--hover-selected-background);\n}\n:host([selected]) button:not([disabled]):focus {\n  outline: 0.1875rem solid var(--focus-selected-outline-color);\n}\n\n:host([variant=primary]) button,\n:host([selected][variant=primary]) button:not([disabled]) {\n  border-color: transparent;\n}\n:host([variant=primary]) button:hover,\n:host([selected][variant=primary]) button:not([disabled]):hover {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-a));\n  color: var(--ig-primary-400-contrast);\n}\n:host([variant=primary]) button:focus,\n:host([selected][variant=primary]) button:not([disabled]):focus {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n  outline: 0.1875rem solid var(--focus-selected-outline-color);\n}\n\n:host([variant=primary]) button[disabled] {\n  background: hsla(var(--ig-primary-200), var(--ig-primary-a));\n  color: var(--ig-primary-400-contrast);\n}\n\n:host([variant=info]) button,\n:host([selected][variant=info]) button:not([disabled]) {\n  border-color: transparent;\n}\n:host([variant=info]) button:hover,\n:host([selected][variant=info]) button:not([disabled]):hover {\n  background: hsla(var(--ig-info-400), var(--ig-info-a));\n  color: var(--ig-info-400-contrast);\n}\n:host([variant=info]) button:focus,\n:host([selected][variant=info]) button:not([disabled]):focus {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n  outline: 0.1875rem solid hsla(var(--ig-info-200), var(--ig-info-a));\n}\n\n:host([variant=info]) button[disabled] {\n  background: hsla(var(--ig-info-200), var(--ig-info-a));\n  color: var(--ig-info-400-contrast);\n}\n\n:host([variant=success]) button,\n:host([selected][variant=success]) button:not([disabled]) {\n  border-color: transparent;\n}\n:host([variant=success]) button:hover,\n:host([selected][variant=success]) button:not([disabled]):hover {\n  background: hsla(var(--ig-success-400), var(--ig-success-a));\n  color: var(--ig-success-400-contrast);\n}\n:host([variant=success]) button:focus,\n:host([selected][variant=success]) button:not([disabled]):focus {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n  outline: 0.1875rem solid hsla(var(--ig-success-200), var(--ig-success-a));\n}\n\n:host([variant=success]) button[disabled] {\n  background: hsla(var(--ig-success-200), var(--ig-success-a));\n  color: var(--ig-success-800-contrast);\n}\n\n:host([variant=warning]) button,\n:host([selected][variant=warning]) button:not([disabled]) {\n  border-color: transparent;\n}\n:host([variant=warning]) button:hover,\n:host([selected][variant=warning]) button:not([disabled]):hover {\n  background: hsla(var(--ig-warn-400), var(--ig-warn-a));\n  color: var(--ig-warn-400-contrast);\n}\n:host([variant=warning]) button:focus,\n:host([selected][variant=warning]) button:not([disabled]):focus {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n  outline: 0.1875rem solid hsla(var(--ig-warn-200), var(--ig-warn-a));\n}\n\n:host([variant=warning]) button[disabled] {\n  background: hsla(var(--ig-warn-200), var(--ig-warn-a));\n  color: var(--ig-warn-900-contrast);\n}\n\n:host([variant=danger]) button,\n:host([selected][variant=danger]) button:not([disabled]) {\n  border-color: transparent;\n}\n:host([variant=danger]) button:hover,\n:host([selected][variant=danger]) button:not([disabled]):hover {\n  background: hsla(var(--ig-error-400), var(--ig-error-a));\n  color: var(--ig-error-400-contrast);\n}\n:host([variant=danger]) button:focus,\n:host([selected][variant=danger]) button:not([disabled]):focus {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n  outline: 0.1875rem solid hsla(var(--ig-error-200), var(--ig-error-a));\n}\n\n:host([variant=danger]) button[disabled] {\n  background: hsla(var(--ig-error-200), var(--ig-error-a));\n  color: var(--ig-error-400-contrast);\n}`;\n"]}

package/components/chip/themes/light/chip.material.css.d.ts

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

package/components/chip/themes/light/chip.material.css.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-8));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, transparent);
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, var(--ig-gray-300-contrast));
+  --background: var(--ig-chip-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-chip-border-color, transparent);
+  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));
+  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-chip-hover-border-color, transparent);
+  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-500-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focus-border-color: var(--ig-chip-focus-border-color, transparent);
+  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-gray-300-contrast));
+  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --selected-border-color: var(--ig-chip-selected-border-color, transparent);
+  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-gray-400-contrast));
+  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);
+  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-gray-500-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);
+  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));
+  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));
+}
+
+:host button {
+  border-radius: var(--border-radius);
+  background: var(--background);
+  color: var(--text-color);
+  outline: none;
+  height: var(--size);
+}
+:host button:hover {
+  background: var(--hover-background);
+  color: var(--hover-text-color);
+}
+:host button:focus {
+  background: var(--focus-background);
+  color: var(--focus-text-color);
+}
+:host button[disabled] {
+  background: var(--disabled-background);
+  color: var(--disabled-text-color);
+}`;
+//# sourceMappingURL=chip.material.css.js.map

package/components/chip/themes/light/chip.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.material.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-8));\n  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');\n  --focus-outline-color: var(--ig-chip-focus-outline-color, transparent);\n  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);\n  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');\n  --text-color: var(--ig-chip-text-color, var(--ig-gray-300-contrast));\n  --background: var(--ig-chip-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-color: var(--ig-chip-border-color, transparent);\n  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));\n  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-chip-hover-border-color, transparent);\n  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-500-contrast));\n  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --focus-border-color: var(--ig-chip-focus-border-color, transparent);\n  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-gray-300-contrast));\n  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --selected-border-color: var(--ig-chip-selected-border-color, transparent);\n  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-gray-400-contrast));\n  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);\n  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-gray-500-contrast));\n  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);\n  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));\n  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));\n}\n\n:host button {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--text-color);\n  outline: none;\n  height: var(--size);\n}\n:host button:hover {\n  background: var(--hover-background);\n  color: var(--hover-text-color);\n}\n:host button:focus {\n  background: var(--focus-background);\n  color: var(--focus-text-color);\n}\n:host button[disabled] {\n  background: var(--disabled-background);\n  color: var(--disabled-text-color);\n}`;\n"]}

package/components/combo/combo-header.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 export default class IgcComboHeaderComponent extends LitElement {
     static readonly tagName: string;
     static styles: import("lit").CSSResult;
+    static register(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/combo/combo-header.js

@@ -6,12 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles } from './themes/light/header/combo-header.base.css.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { styles as bootstrap } from '../dropdown/themes/light/header/dropdown-header.bootstrap.css.js';
 import { styles as fluent } from '../dropdown/themes/light/header/dropdown-header.fluent.css.js';
-import { styles as indigo } from '../dropdown/themes/light/header/dropdown-header.material.css.js';
-import { styles as material } from '../dropdown/themes/light/header/dropdown-header.material.css.js';
+import { styles as indigo, styles as material, } from '../dropdown/themes/light/header/dropdown-header.material.css.js';
+import { styles } from './themes/light/header/combo-header.base.css.js';
 let IgcComboHeaderComponent = class IgcComboHeaderComponent extends LitElement {
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -19,7 +22,10 @@ let IgcComboHeaderComponent = class IgcComboHeaderComponent extends LitElement {
 IgcComboHeaderComponent.tagName = 'igc-combo-header';
 IgcComboHeaderComponent.styles = styles;
 IgcComboHeaderComponent = __decorate([
-    themes({ bootstrap, fluent, indigo, material })
+    themes({
+        light: { bootstrap, fluent, indigo, material },
+        dark: { bootstrap, fluent, indigo, material },
+    })
 ], IgcComboHeaderComponent);
 export default IgcComboHeaderComponent;
 //# sourceMappingURL=combo-header.js.map

package/components/combo/combo-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-header.js","sourceRoot":"","sources":["../../../src/components/combo/combo-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,gDAAgD,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kEAAkE,CAAC;AACvG,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+DAA+D,CAAC;AACjG,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,iEAAiE,CAAC;AACnG,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAIrG,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAI1C,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AALsB,+BAAO,GAAW,kBAAkB,AAA7B,CAA8B;AACrC,8BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,uBAAuB;IAD3C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;GAC3B,uBAAuB,CAO3C;eAPoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/header/combo-header.base.css.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/header/dropdown-header.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/header/dropdown-header.fluent.css.js';\nimport { styles as indigo } from '../dropdown/themes/light/header/dropdown-header.material.css.js';\nimport { styles as material } from '../dropdown/themes/light/header/dropdown-header.material.css.js';\n\n/* blazorSuppress */\n@themes({ bootstrap, fluent, indigo, material })\nexport default class IgcComboHeaderComponent extends LitElement {\n  public static readonly tagName: string = 'igc-combo-header';\n  public static override styles = styles;\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-header': IgcComboHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"combo-header.js","sourceRoot":"","sources":["../../../src/components/combo/combo-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kEAAkE,CAAC;AACvG,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+DAA+D,CAAC;AACjG,OAAO,EACL,MAAM,IAAI,MAAM,EAChB,MAAM,IAAI,QAAQ,GACnB,MAAM,iEAAiE,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,gDAAgD,CAAC;AAOxE,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAItD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATsB,+BAAO,GAAW,kBAAkB,AAA7B,CAA8B;AACrC,8BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,uBAAuB;IAJ3C,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAC9C,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;KAC9C,CAAC;GACmB,uBAAuB,CAW3C;eAXoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/header/dropdown-header.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/header/dropdown-header.fluent.css.js';\nimport {\n  styles as indigo,\n  styles as material,\n} from '../dropdown/themes/light/header/dropdown-header.material.css.js';\nimport { styles } from './themes/light/header/combo-header.base.css.js';\n\n/* blazorSuppress */\n@themes({\n  light: { bootstrap, fluent, indigo, material },\n  dark: { bootstrap, fluent, indigo, material },\n})\nexport default class IgcComboHeaderComponent extends LitElement {\n  public static readonly tagName: string = 'igc-combo-header';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-header': IgcComboHeaderComponent;\n  }\n}\n"]}

package/components/combo/combo-item.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 export default class IgcComboItemComponent extends LitElement {
     static readonly tagName: string;
     static styles: import("lit").CSSResult;
+    static register(): void;
     index: number;
     /**
      * Determines whether the item is selected.

package/components/combo/combo-item.js

@@ -5,17 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles } from './themes/light/item/combo-item.base.css.js';
+import IgcCheckboxComponent from '../checkbox/checkbox.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { styles as bootstrap } from '../dropdown/themes/light/item/dropdown-item.bootstrap.css.js';
 import { styles as fluent } from '../dropdown/themes/light/item/dropdown-item.fluent.css.js';
 import { styles as indigo } from '../dropdown/themes/light/item/dropdown-item.indigo.css.js';
 import { styles as material } from '../dropdown/themes/light/item/dropdown-item.material.css.js';
-import { property } from 'lit/decorators.js';
-import { watch } from '../common/decorators/watch.js';
-import IgcCheckboxComopnent from '../checkbox/checkbox.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
-defineComponents(IgcCheckboxComopnent);
+import { styles } from './themes/light/item/combo-item.base.css.js';
 let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -23,6 +22,9 @@ let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
         this.active = false;
         this.hideCheckbox = false;
     }
+    static register() {
+        registerComponent(this, IgcCheckboxComponent);
+    }
     selectedChange() {
         this.selected
             ? this.setAttribute('aria-selected', 'true')
@@ -69,7 +71,10 @@ __decorate([
     watch('selected')
 ], IgcComboItemComponent.prototype, "selectedChange", null);
 IgcComboItemComponent = __decorate([
-    themes({ bootstrap, fluent, indigo, material })
+    themes({
+        light: { bootstrap, fluent, indigo, material },
+        dark: { bootstrap, fluent, indigo, material },
+    })
 ], IgcComboItemComponent);
 export default IgcComboItemComponent;
 //# sourceMappingURL=combo-item.js.map