igniteui-webcomponents 5.0.1 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"chip.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,26EAA26E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport 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');--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, color-mix(in oklch, var(--ig-gray-400-contrast) 100%, transparent));--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, color-mix(in oklch, var(--ig-gray-500-contrast) 100%, transparent));--focus-border-color: var(--ig-chip-focus-border-color, transparent);--selected-text-color: var(--ig-chip-selected-text-color, color-mix(in oklch, var(--ig-gray-300-contrast) 100%, transparent));--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, color-mix(in oklch, var(--ig-gray-400-contrast) 100%, transparent));--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-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)));--default-size: var(--ig-chip-default-size, 2)}`;\n"]}
+{"version":3,"file":"chip.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/light/chip.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,w3EAAw3E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport 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');--background: var(--ig-chip-background, hsl(from var(--ig-gray-200) h s l/1));--border-color: var(--ig-chip-border-color, transparent);--ghost-background: var(--ig-chip-ghost-background, hsl(from var(--ig-gray-400) h s l/1));--hover-text-color: var(--ig-chip-hover-text-color, color-mix(in oklch, var(--ig-gray-400-contrast) 100%, transparent));--hover-background: var(--ig-chip-hover-background, hsl(from var(--ig-gray-400) h s l/1));--hover-border-color: var(--ig-chip-hover-border-color, transparent);--focus-text-color: var(--ig-chip-focus-text-color, color-mix(in oklch, var(--ig-gray-500-contrast) 100%, transparent));--focus-border-color: var(--ig-chip-focus-border-color, transparent);--selected-text-color: var(--ig-chip-selected-text-color, color-mix(in oklch, var(--ig-gray-300-contrast) 100%, transparent));--selected-background: var(--ig-chip-selected-background, hsl(from var(--ig-primary-500) h s l/1));--selected-border-color: var(--ig-chip-selected-border-color, transparent);--hover-selected-text-color: var(--ig-chip-hover-selected-text-color, color-mix(in oklch, var(--ig-gray-400-contrast) 100%, transparent));--hover-selected-background: var(--ig-chip-hover-selected-background, hsl(from var(--ig-gray-400) h s l/1));--hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);--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, hsl(from var(--ig-gray-500) h s l/1));--disabled-background: var(--ig-chip-disabled-background, hsl(from var(--ig-gray-200) h s l/1));--disabled-border-color: var(--ig-chip-disabled-border-color, hsl(from var(--ig-gray-200) h s l/1));--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)));--default-size: var(--ig-chip-default-size, 2)}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}:host button:focus{outline:.125rem solid var(--focus-outline-color)}:host([variant=primary]) button,:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]){color:color-mix(in oklch, var(--ig-primary-700-contrast) 100%, transparent)}:host([variant=primary]) button:focus{outline:.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:color-mix(in oklch, var(--ig-info-700-contrast) 100%, transparent)}:host([variant=info]) button:focus{outline:.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:color-mix(in oklch, var(--ig-success-700-contrast) 100%, transparent)}:host([variant=success]) button:focus{outline:.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:color-mix(in oklch, var(--ig-warn-700-contrast) 100%, transparent)}:host([variant=warning]) button:focus{outline:.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:color-mix(in oklch, var(--ig-error-700-contrast) 100%, transparent)}:host([variant=danger]) button:focus{outline:.125rem solid hsla(var(--ig-error-200), var(--ig-error-a))}`;
+export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}:host button:focus{outline:.125rem solid var(--focus-outline-color)}:host([variant=primary]) button,:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]){color:color-mix(in oklch, var(--ig-primary-700-contrast) 100%, transparent)}:host([variant=primary]) button:focus{outline:.125rem solid hsl(from var(--ig-primary-200) h s l/1)}:host([variant=info]) button,:host([variant=info]) button:focus,:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]){color:color-mix(in oklch, var(--ig-info-700-contrast) 100%, transparent)}:host([variant=info]) button:focus{outline:.125rem solid hsl(from var(--ig-info-200) h s l/1)}:host([variant=success]) button,:host([variant=success]) button:focus,:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]){color:color-mix(in oklch, var(--ig-success-700-contrast) 100%, transparent)}:host([variant=success]) button:focus{outline:.125rem solid hsl(from var(--ig-success-200) h s l/1)}:host([variant=warning]) button,:host([variant=warning]) button:focus,:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]){color:color-mix(in oklch, var(--ig-warn-700-contrast) 100%, transparent)}:host([variant=warning]) button:focus{outline:.125rem solid hsl(from var(--ig-warn-200) h s l/1)}:host([variant=danger]) button,:host([variant=danger]) button:focus,:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]){color:color-mix(in oklch, var(--ig-error-700-contrast) 100%, transparent)}:host([variant=danger]) button:focus{outline:.125rem solid hsl(from var(--ig-error-200) h s l/1)}`;
 //# sourceMappingURL=chip.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,izDAAizD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}:host button:focus{outline:.125rem solid var(--focus-outline-color)}:host([variant=primary]) button,:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]){color:color-mix(in oklch, var(--ig-primary-700-contrast) 100%, transparent)}:host([variant=primary]) button:focus{outline:.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:color-mix(in oklch, var(--ig-info-700-contrast) 100%, transparent)}:host([variant=info]) button:focus{outline:.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:color-mix(in oklch, var(--ig-success-700-contrast) 100%, transparent)}:host([variant=success]) button:focus{outline:.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:color-mix(in oklch, var(--ig-warn-700-contrast) 100%, transparent)}:host([variant=warning]) button:focus{outline:.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:color-mix(in oklch, var(--ig-error-700-contrast) 100%, transparent)}:host([variant=danger]) button:focus{outline:.125rem solid hsla(var(--ig-error-200), var(--ig-error-a))}`;\n"]}
+{"version":3,"file":"chip.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4wDAA4wD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}:host button:focus{outline:.125rem solid var(--focus-outline-color)}:host([variant=primary]) button,:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]){color:color-mix(in oklch, var(--ig-primary-700-contrast) 100%, transparent)}:host([variant=primary]) button:focus{outline:.125rem solid hsl(from var(--ig-primary-200) h s l/1)}:host([variant=info]) button,:host([variant=info]) button:focus,:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]){color:color-mix(in oklch, var(--ig-info-700-contrast) 100%, transparent)}:host([variant=info]) button:focus{outline:.125rem solid hsl(from var(--ig-info-200) h s l/1)}:host([variant=success]) button,:host([variant=success]) button:focus,:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]){color:color-mix(in oklch, var(--ig-success-700-contrast) 100%, transparent)}:host([variant=success]) button:focus{outline:.125rem solid hsl(from var(--ig-success-200) h s l/1)}:host([variant=warning]) button,:host([variant=warning]) button:focus,:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]){color:color-mix(in oklch, var(--ig-warn-700-contrast) 100%, transparent)}:host([variant=warning]) button:focus{outline:.125rem solid hsl(from var(--ig-warn-200) h s l/1)}:host([variant=danger]) button,:host([variant=danger]) button:focus,:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]){color:color-mix(in oklch, var(--ig-error-700-contrast) 100%, transparent)}:host([variant=danger]) button:focus{outline:.125rem solid hsl(from var(--ig-error-200) h s l/1)}`;\n"]}

package/components/chip/themes/shared/chip.common.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size)}: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)}:host button igc-icon{--component-size: var(--chip-size)}`;
+export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size)}:host button{border-radius:var(--border-radius);background:var(--background);color:var(--text-color);outline:none;height:var(--size)}:host button:focus{background:var(--focus-background);color:var(--focus-text-color)}:host button:hover{background:var(--hover-background);color:var(--hover-text-color)}:host button[disabled]{background:var(--disabled-background);color:var(--disabled-text-color)}:host button igc-icon{--component-size: var(--chip-size)}:host button ::slotted(*){--default-size: var(--chip-size)}:host button ::slotted(igc-avatar){--size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host button ::slotted(igc-circular-progress){--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}`;
 //# sourceMappingURL=chip.common.css.js.map

package/components/chip/themes/shared/chip.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.common.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qiBAAqiB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size)}: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)}:host button igc-icon{--component-size: var(--chip-size)}`;\n"]}
+{"version":3,"file":"chip.common.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,y/BAAy/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size)}:host button{border-radius:var(--border-radius);background:var(--background);color:var(--text-color);outline:none;height:var(--size)}:host button:focus{background:var(--focus-background);color:var(--focus-text-color)}:host button:hover{background:var(--hover-background);color:var(--hover-text-color)}:host button[disabled]{background:var(--disabled-background);color:var(--disabled-text-color)}:host button igc-icon{--component-size: var(--chip-size)}:host button ::slotted(*){--default-size: var(--chip-size)}:host button ::slotted(igc-avatar){--size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host button ::slotted(igc-circular-progress){--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}: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)}: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)}`;
+export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}: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)}:host([selected]) button:not([disabled]){background:var(--selected-background);color:var(--selected-text-color)}:host([selected]) button:not([disabled]):focus{background:var(--focus-selected-background)}:host([selected]) button:not([disabled]):hover{background:var(--hover-selected-background)}`;
 //# sourceMappingURL=chip.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qyBAAqyB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}: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)}: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)}`;\n"]}
+{"version":3,"file":"chip.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qyBAAqyB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}: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)}:host([selected]) button:not([disabled]){background:var(--selected-background);color:var(--selected-text-color)}:host([selected]) button:not([disabled]):focus{background:var(--focus-selected-background)}:host([selected]) button:not([disabled]):hover{background:var(--hover-selected-background)}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}:host button{border:.0625rem solid var(--border-color)}:host button:focus{outline:.1875rem solid var(--focus-outline-color)}:host button[disabled]{border-color:var(--disabled-border-color)}:host([selected]) button:not([disabled]){border-color:rgba(0,0,0,0);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:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-400), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent);outline:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button[disabled]{background:hsla(var(--ig-primary-200), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-400), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-400), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-400-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-success-800-contrast) 100%, transparent)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-400), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-400-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-400), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}`;
+export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}:host button{border:.0625rem solid var(--border-color);padding:0 max(var(--is-large, 1)*max(7px, -1 * 7px)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(5px, -1 * 5px)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(3px, -1 * 3px)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)))}:host button:focus{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}:host button:hover{border-color:var(--hover-border-color)}:host button[disabled]{border-color:var(--disabled-border-color)}:host button igc-icon{--size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host([selected]) button:not([disabled]){color:var(--selected-text-color);background:var(--selected-background);border-color:rgba(0,0,0,0)}:host([selected]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}:host([selected]) button:not([disabled]):hover{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}:host([selected]) button[disabled]{background:hsl(from var(--ig-primary-400) h s l/0.5);border-color:rgba(0,0,0,0)}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{color:color-mix(in oklch, var(--ig-primary-900-contrast) 100%, transparent);background:hsl(from var(--ig-primary-500) h s l/1);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/0.5)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{color:color-mix(in oklch, var(--ig-primary-900-contrast) 100%, transparent);background:hsl(from var(--ig-primary-400) h s l/1)}:host([variant=primary]) button[disabled]{background:hsl(from var(--ig-primary-400) h s l/0.5)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsl(from var(--ig-info-500) h s l/1);color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsl(from var(--ig-info-400) h s l/1);color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent)}:host([variant=info]) button[disabled]{color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent);background:hsl(from var(--ig-info-500) h s l/1)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsl(from var(--ig-success-500) h s l/1);color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsl(from var(--ig-success-400) h s l/1);color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent)}:host([variant=success]) button[disabled]{color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent);background:hsl(from var(--ig-success-500) h s l/1)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsl(from var(--ig-warn-500) h s l/1);color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsl(from var(--ig-warn-400) h s l/1);color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=warning]) button[disabled]{color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent);background:hsl(from var(--ig-warn-500) h s l/1)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsl(from var(--ig-error-500) h s l/1);color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsl(from var(--ig-error-400) h s l/1);color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent)}:host([variant=danger]) button[disabled]{color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent);background:hsl(from var(--ig-error-500) h s l/1)}:host([variant=info]) button[disabled],:host([variant=success]) button[disabled],:host([variant=warning]) button[disabled],:host([variant=danger]) button[disabled]{opacity:.4}`;
 //# sourceMappingURL=chip.indigo.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ikJAAikJ,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}:host button{border:.0625rem solid var(--border-color)}:host button:focus{outline:.1875rem solid var(--focus-outline-color)}:host button[disabled]{border-color:var(--disabled-border-color)}:host([selected]) button:not([disabled]){border-color:rgba(0,0,0,0);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:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-400), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent);outline:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button[disabled]{background:hsla(var(--ig-primary-200), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-400), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-400), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-400-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-success-800-contrast) 100%, transparent)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-400), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-400-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-400), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent);outline:.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:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}`;\n"]}
+{"version":3,"file":"chip.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/chip/themes/shared/chip.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,o0KAAo0K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size))}:host button{border:.0625rem solid var(--border-color);padding:0 max(var(--is-large, 1)*max(7px, -1 * 7px)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(5px, -1 * 5px)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(3px, -1 * 3px)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)))}:host button:focus{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}:host button:hover{border-color:var(--hover-border-color)}:host button[disabled]{border-color:var(--disabled-border-color)}:host button igc-icon{--size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host([selected]) button:not([disabled]){color:var(--selected-text-color);background:var(--selected-background);border-color:rgba(0,0,0,0)}:host([selected]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}:host([selected]) button:not([disabled]):hover{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}:host([selected]) button[disabled]{background:hsl(from var(--ig-primary-400) h s l/0.5);border-color:rgba(0,0,0,0)}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{color:color-mix(in oklch, var(--ig-primary-900-contrast) 100%, transparent);background:hsl(from var(--ig-primary-500) h s l/1);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/0.5)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{color:color-mix(in oklch, var(--ig-primary-900-contrast) 100%, transparent);background:hsl(from var(--ig-primary-400) h s l/1)}:host([variant=primary]) button[disabled]{background:hsl(from var(--ig-primary-400) h s l/0.5)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsl(from var(--ig-info-500) h s l/1);color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsl(from var(--ig-info-400) h s l/1);color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent)}:host([variant=info]) button[disabled]{color:color-mix(in oklch, var(--ig-info-900-contrast) 100%, transparent);background:hsl(from var(--ig-info-500) h s l/1)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsl(from var(--ig-success-500) h s l/1);color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsl(from var(--ig-success-400) h s l/1);color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent)}:host([variant=success]) button[disabled]{color:color-mix(in oklch, var(--ig-success-900-contrast) 100%, transparent);background:hsl(from var(--ig-success-500) h s l/1)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsl(from var(--ig-warn-500) h s l/1);color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsl(from var(--ig-warn-400) h s l/1);color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=warning]) button[disabled]{color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent);background:hsl(from var(--ig-warn-500) h s l/1)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent);border-color:rgba(0,0,0,0)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsl(from var(--ig-error-500) h s l/1);color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsl(from var(--ig-error-400) h s l/1);color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent)}:host([variant=danger]) button[disabled]{color:color-mix(in oklch, var(--ig-error-900-contrast) 100%, transparent);background:hsl(from var(--ig-error-500) h s l/1)}:host([variant=info]) button[disabled],:host([variant=success]) button[disabled],:host([variant=warning]) button[disabled],:host([variant=danger]) button[disabled]{opacity:.4}`;\n"]}

package/components/combo/combo.d.ts

@@ -4,8 +4,8 @@ import IgcInputComponent from '../input/input.js';
 import { DataController } from './controllers/data.js';
 import { NavigationController } from './controllers/navigation.js';
 import { SelectionController } from './controllers/selection.js';
-import type { ComboItemTemplate, ComboRecord, ComboRenderFunction, ComboValue, FilteringOptions, GroupingDirection, IgcComboEventMap, Item, Keys } from './types.js';
-declare const IgcComboComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboEventMap>> & Constructor<LitElement>;
+import type { ComboItemTemplate, ComboRecord, ComboRenderFunction, ComboValue, FilteringOptions, GroupingDirection, IgcComboComponentEventMap, Item, Keys } from './types.js';
+declare const IgcComboComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboComponentEventMap>> & Constructor<LitElement>;
 /**
  * The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection.
  * In contrast to the Select component, the Combo component displays all options in a virtualized list of items,
@@ -22,6 +22,9 @@ declare const IgcComboComponent_base: Constructor<import("../common/mixins/form-
  * @slot helper-text - Renders content below the input of the combo.
  * @slot toggle-icon - Renders content inside the suffix container of the combo.
  * @slot clear-icon - Renders content inside the suffix container of the combo.
+ * @slot value-missing - Renders content when the required validation fails.
+ * @slot custom-error - Renders content when setCustomValidity(message) is set.
+ * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
  *
  * @fires igcChange - Emitted when the control's selection has changed.
  * @fires igcOpening - Emitted just before the list of options is opened.
@@ -64,7 +67,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     protected navigationController: NavigationController<T>;
     protected selectionController: SelectionController<T>;
     protected dataController: DataController<T>;
-    protected helperText: Array<HTMLElement>;
     protected inputSuffix: Array<HTMLElement>;
     protected inputPrefix: Array<HTMLElement>;
     protected input: IgcInputComponent;
@@ -174,7 +176,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     constructor();
     protected resetSearchTerm(): void;
     protected resetState(): void;
-    protected requiredChange(): Promise<void>;
     protected selectItems(): void;
     /**
      * Sets the value (selected items). The passed value must be a valid JSON array.
@@ -208,9 +209,9 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * represented by the value key, when provided.
      */
     get value(): ComboValue<T>[];
-    protected setFormValue(): void;
+    protected _setDefaultValue(_: string | null, current: string | null): void;
+    protected _setFormValue(): void;
     protected updateValue(): Promise<void>;
-    connectedCallback(): void;
     /** Sets focus on the component. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the component. */

package/components/combo/combo.js

@@ -16,11 +16,12 @@ import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
-import { partNameMap } from '../common/util.js';
+import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import { findElementFromEventPath, isEmpty, partNameMap, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
+import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import IgcComboHeaderComponent from './combo-header.js';
 import IgcComboItemComponent from './combo-item.js';
 import IgcComboListComponent from './combo-list.js';
@@ -33,7 +34,7 @@ import { all } from './themes/themes.js';
 import { comboValidators } from './validators.js';
 let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
     static register() {
-        registerComponent(IgcComboComponent_1, IgcIconComponent, IgcComboListComponent, IgcComboItemComponent, IgcComboHeaderComponent, IgcInputComponent, IgcPopoverComponent);
+        registerComponent(IgcComboComponent_1, IgcIconComponent, IgcComboListComponent, IgcComboItemComponent, IgcComboHeaderComponent, IgcInputComponent, IgcPopoverComponent, IgcValidationContainerComponent);
     }
     get __validators() {
         return comboValidators;
@@ -46,7 +47,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         this.requestUpdate('pipeline');
     }
     dataChanged() {
-        if (this.data.length === 0)
+        if (isEmpty(this.data))
             return;
         this.dataState = structuredClone(this.data);
         if (this.hasUpdated) {
@@ -146,7 +147,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         };
         this.addEventListener('blur', () => {
             const { selected } = this.selectionController;
-            if (selected.size === 0) {
+            if (isEmpty(selected)) {
                 this._displayValue = '';
                 this.resetSearchTerm();
             }
@@ -163,13 +164,8 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         this.resetSearchTerm();
         this.navigationController.active = -1;
     }
-    async requiredChange() {
-        await this.updateComplete;
-        this.updateValidity();
-        this.invalid = !this.checkValidity();
-    }
     selectItems() {
-        if (!this._value || this.value.length === 0) {
+        if (!this._value || isEmpty(this._value)) {
             this.selectionController.deselect([]);
         }
         else {
@@ -186,13 +182,16 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     get value() {
         return this._value;
     }
-    setFormValue() {
+    _setDefaultValue(_, current) {
+        this._defaultValue = JSON.parse(current ?? '[]');
+    }
+    _setFormValue() {
         if (!this.name) {
             return;
         }
         const items = this._value;
-        if (items.length < 1) {
-            super.setFormValue(null);
+        if (isEmpty(items)) {
+            super._setFormValue(null);
             return;
         }
         const data = new FormData();
@@ -204,10 +203,10 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
                 data.append(this.name, `${item}`);
             }
         }
-        super.setFormValue(data);
+        super._setFormValue(data);
     }
     async updateValue() {
-        if (this.data.length === 0)
+        if (isEmpty(this.data))
             return;
         const selected = Array.from(this.selectionController.selected);
         this._value = this.selectionController.getValue(selected, this.valueKey);
@@ -217,16 +216,11 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         if (this.target && this.singleSelect) {
             this.target.value = this._displayValue;
         }
-        this.setFormValue();
-        this.updateValidity();
-        this.setInvalidState();
+        this._setFormValue();
+        this._validate();
         await this.updateComplete;
         this.list.requestUpdate();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateValidity();
-    }
     focus(options) {
         this.target.focus(options);
     }
@@ -319,9 +313,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     }
     itemClickHandler(event) {
         const input = this.singleSelect ? this.target : this.input;
-        const target = event
-            .composedPath()
-            .find((el) => el instanceof IgcComboItemComponent);
+        const target = findElementFromEventPath(IgcComboItemComponent.tagName, event);
         this.toggleSelect(target.index);
         input.focus();
         if (this.singleSelect) {
@@ -348,7 +340,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         const selection = selected.values().next().value;
         if (selection) {
             const item = this.valueKey ? selection[this.valueKey] : selection;
-            this.selectionController.deselect([item], selected.size > 0);
+            this.selectionController.deselect([item], !isEmpty(selected));
             this._value = [];
         }
     }
@@ -409,7 +401,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
       slot="suffix"
       part="clear-icon"
       @click=${this.handleClearIconClick}
-      ?hidden=${selected.size === 0}
+      ?hidden=${isEmpty(selected)}
     >
       <slot name="clear-icon">
         <igc-icon
@@ -428,7 +420,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
       aria-controls="dropdown"
       aria-owns="dropdown"
       aria-expanded=${this.open ? 'true' : 'false'}
-      aria-describedby="helper-text"
+      aria-describedby="combo-helper-text"
       aria-disabled=${this.disabled}
       exportparts="container: input, input: native-input, label, prefix, suffix"
       @click=${(e) => {
@@ -525,13 +517,10 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     </div>`;
     }
     renderHelperText() {
-        return html `<div
-      id="helper-text"
-      part="helper-text"
-      ?hidden="${this.helperText.length === 0}"
-    >
-      <slot name="helper-text"></slot>
-    </div>`;
+        return IgcValidationContainerComponent.create(this, {
+            id: 'combo-helper-text',
+            hasHelperText: true,
+        });
     }
     render() {
         return html `
@@ -550,9 +539,6 @@ __decorate([
 __decorate([
     state()
 ], IgcComboComponent.prototype, "_displayValue", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'helper-text' })
-], IgcComboComponent.prototype, "helperText", void 0);
 __decorate([
     queryAssignedElements({ slot: 'suffix' })
 ], IgcComboComponent.prototype, "inputSuffix", void 0);
@@ -648,9 +634,6 @@ __decorate([
 __decorate([
     watch('singleSelect', { waitUntilFirstUpdate: true })
 ], IgcComboComponent.prototype, "resetState", null);
-__decorate([
-    watch('required', { waitUntilFirstUpdate: true })
-], IgcComboComponent.prototype, "requiredChange", null);
 __decorate([
     watch('value')
 ], IgcComboComponent.prototype, "selectItems", null);