igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/chip/chip.js

@@ -10,15 +10,13 @@ import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeybindings } from '../common/controllers/key-bindings.js';
-import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { SizableMixin } from '../common/mixins/sizable.js';
 import IgcIconComponent from '../icon/icon.js';
 import { styles } from './themes/chip.base.css.js';
 import { styles as shared } from './themes/shared/chip.common.css.js';
 import { all } from './themes/themes.js';
-let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
+let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcChipComponent_1, IgcIconComponent);
     }
@@ -29,12 +27,16 @@ let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends Sizab
         this.removable = false;
         this.selectable = false;
         this.selected = false;
-        this.size = 'medium';
         addKeybindings(this, {
             ref: this._removePartRef,
             bindingDefaults: { triggers: ['keyup'] },
         }).setActivateHandler(this.handleRemove);
     }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => this.requestUpdate());
+        return root;
+    }
     handleSelect() {
         if (this.selectable) {
             this.selected = !this.selected;
@@ -56,12 +58,8 @@ let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends Sizab
       >
         <span part="prefix">
           ${this.selectable && this.selected
-            ? html `<slot @slotchange=${this.slotChanges} name="select">
-                <igc-icon
-                  size=${this.size}
-                  name="chip_select"
-                  collection="internal"
-                ></igc-icon>
+            ? html `<slot name="select">
+                <igc-icon name="selected" collection="default"></igc-icon>
               </slot>`
             : nothing}
           <slot name="start"></slot>
@@ -74,14 +72,12 @@ let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends Sizab
           ${this.removable && !this.disabled
             ? html `<slot
                 ${ref(this._removePartRef)}
-                @slotchange=${this.slotChanges}
                 @click=${this.handleRemove}
                 name="remove"
               >
                 <igc-icon
-                  size=${this.size}
-                  name="chip_cancel"
-                  collection="internal"
+                  name="remove"
+                  collection="default"
                   tabindex="0"
                   role="button"
                   aria-label="remove"
@@ -92,9 +88,6 @@ let IgcChipComponent = IgcChipComponent_1 = class IgcChipComponent extends Sizab
       </button>
     `;
     }
-    slotChanges() {
-        this.requestUpdate();
-    }
 };
 IgcChipComponent.tagName = 'igc-chip';
 IgcChipComponent.styles = [styles, shared];
@@ -108,8 +101,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcChipComponent.prototype, "selectable", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    blazorTwoWayBind('igcSelect', 'detail')
+    property({ type: Boolean, reflect: true })
 ], IgcChipComponent.prototype, "selected", void 0);
 __decorate([
     property({ reflect: true })

package/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { type Ref, createRef, ref } from 'lit/directives/ref.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeybindings } from '../common/controllers/key-bindings.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as shared } from './themes/shared/chip.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcChipEventMap {\n  igcRemove: CustomEvent<boolean>;\n  igcSelect: CustomEvent<boolean>;\n}\n/**\n * Chips help people enter information, make selections, filter content, or trigger actions.\n *\n * @element igc-chip\n *\n * @slot - Renders the chip data.\n * @slot prefix - Renders content before the data of the chip.\n * @slot suffix - Renders content after the data of the chip.\n *\n * @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.\n * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.\n *\n * @csspart base - The base wrapper of the chip.\n * @csspart prefix - The prefix container of the chip.\n * @csspart suffix - The suffix container of the chip.\n */\n@themes(all)\nexport default class IgcChipComponent extends SizableMixin(\n  EventEmitterMixin<IgcChipEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-chip';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChipComponent, IgcIconComponent);\n  }\n\n  private _removePartRef: Ref<HTMLSlotElement> = createRef();\n\n  /**\n   * Sets the disabled state for the chip.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Defines if the chip is removable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\n   * Defines if the chip is selectable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /**\n   * Defines if the chip is selected or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  @blazorTwoWayBind('igcSelect', 'detail')\n  public selected = false;\n\n  /**\n   * A property that sets the color variant of the chip component.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant!: 'primary' | 'success' | 'danger' | 'warning' | 'info';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n\n    addKeybindings(this, {\n      ref: this._removePartRef,\n      bindingDefaults: { triggers: ['keyup'] },\n    }).setActivateHandler(this.handleRemove);\n  }\n\n  protected handleSelect() {\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.emitEvent('igcSelect', { detail: this.selected });\n    }\n  }\n\n  protected handleRemove(e: Event) {\n    this.emitEvent('igcRemove');\n    e.stopPropagation();\n  }\n\n  protected override render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=\"${this.disabled}\"\n        aria-selected=\"${this.selected ? 'true' : 'false'}\"\n        aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n        @click=${this.handleSelect}\n      >\n        <span part=\"prefix\">\n          ${this.selectable && this.selected\n            ? html`<slot @slotchange=${this.slotChanges} name=\"select\">\n                <igc-icon\n                  size=${this.size}\n                  name=\"chip_select\"\n                  collection=\"internal\"\n                ></igc-icon>\n              </slot>`\n            : nothing}\n          <slot name=\"start\"></slot>\n          <slot name=\"prefix\"></slot>\n        </span>\n        <slot></slot>\n        <span part=\"suffix\">\n          <slot name=\"end\"></slot>\n          <slot name=\"suffix\"></slot>\n          ${this.removable && !this.disabled\n            ? html`<slot\n                ${ref(this._removePartRef)}\n                @slotchange=${this.slotChanges}\n                @click=${this.handleRemove}\n                name=\"remove\"\n              >\n                <igc-icon\n                  size=${this.size}\n                  name=\"chip_cancel\"\n                  collection=\"internal\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  aria-label=\"remove\"\n                ></igc-icon>\n              </slot>`\n            : nothing}\n        </span>\n      </button>\n    `;\n  }\n\n  protected slotChanges() {\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chip': IgcChipComponent;\n  }\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { type Ref, createRef, ref } from 'lit/directives/ref.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeybindings } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { StyleVariant } from '../types.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as shared } from './themes/shared/chip.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcChipEventMap {\n  igcRemove: CustomEvent<boolean>;\n  igcSelect: CustomEvent<boolean>;\n}\n/**\n * Chips help people enter information, make selections, filter content, or trigger actions.\n *\n * @element igc-chip\n *\n * @slot - Renders the chip data.\n * @slot prefix - Renders content before the data of the chip.\n * @slot suffix - Renders content after the data of the chip.\n *\n * @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.\n * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.\n *\n * @csspart base - The base wrapper of the chip.\n * @csspart prefix - The prefix container of the chip.\n * @csspart suffix - The suffix container of the chip.\n */\n@themes(all)\nexport default class IgcChipComponent extends EventEmitterMixin<\n  IgcChipEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-chip';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChipComponent, IgcIconComponent);\n  }\n\n  private _removePartRef: Ref<HTMLSlotElement> = createRef();\n\n  /**\n   * Sets the disabled state for the chip.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Defines if the chip is removable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\n   * Defines if the chip is selectable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /* @tsTwoWayProperty(true, \"igcSelect\", \"detail\", false) */\n  /**\n   * Defines if the chip is selected or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * A property that sets the color variant of the chip component.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant!: StyleVariant;\n\n  constructor() {\n    super();\n\n    addKeybindings(this, {\n      ref: this._removePartRef,\n      bindingDefaults: { triggers: ['keyup'] },\n    }).setActivateHandler(this.handleRemove);\n  }\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => this.requestUpdate());\n    return root;\n  }\n\n  protected handleSelect() {\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.emitEvent('igcSelect', { detail: this.selected });\n    }\n  }\n\n  protected handleRemove(e: Event) {\n    this.emitEvent('igcRemove');\n    e.stopPropagation();\n  }\n\n  protected override render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=\"${this.disabled}\"\n        aria-selected=\"${this.selected ? 'true' : 'false'}\"\n        aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n        @click=${this.handleSelect}\n      >\n        <span part=\"prefix\">\n          ${this.selectable && this.selected\n            ? html`<slot name=\"select\">\n                <igc-icon name=\"selected\" collection=\"default\"></igc-icon>\n              </slot>`\n            : nothing}\n          <slot name=\"start\"></slot>\n          <slot name=\"prefix\"></slot>\n        </span>\n        <slot></slot>\n        <span part=\"suffix\">\n          <slot name=\"end\"></slot>\n          <slot name=\"suffix\"></slot>\n          ${this.removable && !this.disabled\n            ? html`<slot\n                ${ref(this._removePartRef)}\n                @click=${this.handleRemove}\n                name=\"remove\"\n              >\n                <igc-icon\n                  name=\"remove\"\n                  collection=\"default\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  aria-label=\"remove\"\n                ></igc-icon>\n              </slot>`\n            : nothing}\n        </span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chip': IgcChipComponent;\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--ig-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;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)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-600), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-600-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-800), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-800-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-600), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-600-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-800), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-800-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-600), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-600-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-800), 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]){background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-600), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-600-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-800), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-800-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-600), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-600-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-800), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-800-contrast) 100%, transparent)}[part=prefix],[part=suffix]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[part=prefix]{-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)));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)))}[part=suffix]{-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)));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)))}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--ig-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;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)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-600), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-600-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-800), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-800-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-600), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-600-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-800), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-800-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-600), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-600-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-800), 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]){background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-600), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-600-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-800), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-800-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-600), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-600-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-800), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-800-contrast) 100%, transparent)}[part=prefix],[part=suffix]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[part=prefix]{-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)));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)))}[part=suffix]{-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)));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)))}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}`;
 //# sourceMappingURL=chip.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.base.css.js","sourceRoot":"","sources":["../../../../src/components/chip/themes/chip.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8mOAA8mO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--ig-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;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)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-600), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-600-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-800), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-800-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-600), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-600-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-800), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-800-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-600), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-600-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-800), 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]){background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-600), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-600-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-800), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-800-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-600), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-600-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-800), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-800-contrast) 100%, transparent)}[part=prefix],[part=suffix]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[part=prefix]{-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)));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)))}[part=suffix]{-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)));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)))}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}`;\n"]}
+{"version":3,"file":"chip.base.css.js","sourceRoot":"","sources":["../../../../src/components/chip/themes/chip.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8mOAA8mO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--ig-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;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)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-600), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-600-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-800), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-800-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-600), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-600-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-800), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-800-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-600), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-600-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-800), 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]){background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-600), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-600-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-800), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-800-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-600), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-600-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-800), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-800-contrast) 100%, transparent)}[part=prefix],[part=suffix]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[part=prefix]{-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)));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)))}[part=suffix]{-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)));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)))}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}`;\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))}: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)}`;
+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)}`;
 //# 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,ycAAyc,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-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)}`;\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,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"]}

package/components/combo/combo.d.ts

@@ -1,7 +1,5 @@
 import { LitElement, type TemplateResult } from 'lit';
-import { themeSymbol } from '../../theming/theming-decorator.js';
 import type { Constructor } from '../common/mixins/constructor.js';
-import type { Validator } from '../common/validators.js';
 import IgcInputComponent from '../input/input.js';
 import { DataController } from './controllers/data.js';
 import { NavigationController } from './controllers/navigation.js';
@@ -17,44 +15,42 @@ declare const IgcComboComponent_base: Constructor<import("../common/mixins/form-
  *
  * @element igc-combo
  *
- * @slot prefix - Renders content before the input.
- * @slot suffix - Renders content after input.
- * @slot header - Renders a container before the list of options.
- * @slot footer - Renders a container after the list of options.
- * @slot helper-text - Renders content below the input.
- * @slot toggle-icon - Renders content inside the suffix container.
- * @slot clear-icon - Renders content inside the suffix container.
+ * @slot prefix - Renders content before the input of the combo.
+ * @slot suffix - Renders content after the input of the combo.
+ * @slot header - Renders a container before the list of options of the combo.
+ * @slot footer - Renders a container after the list of options of the combo.
+ * @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.
  *
- * @fires igcFocus - Emitted when the select gains focus.
- * @fires igcBlur - Emitted when the select loses focus.
  * @fires igcChange - Emitted when the control's selection has changed.
  * @fires igcOpening - Emitted just before the list of options is opened.
  * @fires igcOpened - Emitted after the list of options is opened.
  * @fires igcClosing - Emitter just before the list of options is closed.
  * @fires igcClosed - Emitted after the list of options is closed.
  *
- * @csspart label - The encapsulated text label.
- * @csspart input - The main input field.
- * @csspart native-input - The native input of the main input field.
- * @csspart prefix - The prefix wrapper.
- * @csspart suffix - The suffix wrapper.
- * @csspart toggle-icon - The toggle icon wrapper.
- * @csspart clear-icon - The clear icon wrapper.
- * @csspart case-icon - The case icon wrapper.
- * @csspart helper-text - The helper text wrapper.
- * @csspart search-input - The search input field.
- * @csspart list-wrapper - The list of options wrapper.
- * @csspart list - The list of options box.
- * @csspart item - Represents each item in the list of options.
- * @csspart group-header - Represents each header in the list of options.
- * @csspart active - Appended to the item parts list when the item is active.
- * @csspart selected - Appended to the item parts list when the item is selected.
- * @csspart checkbox - Represents each checkbox of each list item.
- * @csspart checkbox-indicator - Represents the checkbox indicator of each list item.
- * @csspart checked - Appended to checkbox parts list when checkbox is checked.
- * @csspart header - The container holding the header content.
- * @csspart footer - The container holding the footer content.
- * @csspart empty - The container holding the empty content.
+ * @csspart label - The encapsulated text label of the combo.
+ * @csspart input - The main input field of the combo.
+ * @csspart native-input - The native input of the main input field of the combo.
+ * @csspart prefix - The prefix wrapper of the combo.
+ * @csspart suffix - The suffix wrapper of the combo.
+ * @csspart toggle-icon - The toggle icon wrapper of the combo.
+ * @csspart clear-icon - The clear icon wrapper of the combo.
+ * @csspart case-icon - The case icon wrapper of the combo.
+ * @csspart helper-text - The helper text wrapper of the combo.
+ * @csspart search-input - The search input field of the combo.
+ * @csspart list-wrapper - The list of options wrapper of the combo.
+ * @csspart list - The list of options box of the combo.
+ * @csspart item - Represents each item in the list of options of the combo.
+ * @csspart group-header - Represents each header in the list of options of the combo.
+ * @csspart active - Appended to the item parts list when the item is active of the combo.
+ * @csspart selected - Appended to the item parts list when the item is selected of the combo.
+ * @csspart checkbox - Represents each checkbox of each list item of the combo.
+ * @csspart checkbox-indicator - Represents the checkbox indicator of each list item of the combo.
+ * @csspart checked - Appended to checkbox parts list when checkbox is checked in the combo.
+ * @csspart header - The container holding the header content of the combo.
+ * @csspart footer - The container holding the footer content of the combo.
+ * @csspart empty - The container holding the empty content of the combo.
  */
 export default class IgcComboComponent<T extends object = any> extends IgcComboComponent_base {
     static readonly tagName = "igc-combo";
@@ -64,11 +60,10 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     private _activeDescendant;
     private _displayValue;
     private _filteringOptions;
-    protected validators: Validator<this>[];
+    protected get __validators(): import("../common/validators.js").Validator<IgcComboComponent<any>>[];
     protected navigationController: NavigationController<T>;
     protected selectionController: SelectionController<T>;
     protected dataController: DataController<T>;
-    private readonly [themeSymbol];
     protected helperText: Array<HTMLElement>;
     protected inputSuffix: Array<HTMLElement>;
     protected inputPrefix: Array<HTMLElement>;
@@ -117,8 +112,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * @attr open
      */
     open: boolean;
-    /** @hidden @internal */
-    flip: boolean;
     /**
      * The key in the data source used when selecting items.
      * @attr value-key
@@ -170,16 +163,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
      * @type {ComboItemTemplate<T>}
      */
     groupHeaderTemplate: ComboItemTemplate<T>;
-    /**
-     * Sets the component's positioning strategy.
-     * @hidden @internal @private
-     */
-    positionStrategy: 'absolute' | 'fixed';
-    /**
-     * Whether the dropdown's width should be the same as the target's one.
-     * @hidden @internal @private
-     */
-    sameWidth: boolean;
     protected dataState: Array<ComboRecord<T>>;
     protected dataChanged(): void;
     protected updateDisplayKey(): void;
@@ -287,16 +270,15 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
     protected handleSearchInput(e: CustomEvent): void;
     protected handleOpening(): boolean;
     protected handleClosing(): boolean;
-    protected _show(emit?: boolean): Promise<void>;
+    protected _show(emitEvent?: boolean): Promise<boolean>;
     /** Shows the list of options. */
-    show(): void;
-    protected _hide(emit?: boolean): Promise<void>;
+    show(): Promise<boolean>;
+    protected _hide(emitEvent?: boolean): Promise<boolean>;
     /** Hides the list of options. */
-    hide(): void;
-    /** @hidden @internal */
-    _toggle(emit?: boolean): void;
+    hide(): Promise<boolean>;
+    protected _toggle(emit?: boolean): Promise<boolean>;
     /** Toggles the list of options. */
-    toggle(): void;
+    toggle(): Promise<boolean>;
     protected itemRenderer: ComboRenderFunction<T>;
     protected listKeydownHandler(event: KeyboardEvent): void;
     protected itemClickHandler(event: MouseEvent): void;

package/components/combo/combo.js

@@ -9,13 +9,12 @@ import { LitElement, html } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { themeSymbol, themes } from '../../theming/theming-decorator.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { addRootClickHandler } from '../common/controllers/root-click.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import messages from '../common/localization/validation-en.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
 import { partNameMap } from '../common/util.js';
@@ -31,10 +30,14 @@ import { SelectionController } from './controllers/selection.js';
 import { styles } from './themes/combo.base.css.js';
 import { styles as shared } from './themes/shared/combo.common.css.js';
 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);
     }
+    get __validators() {
+        return comboValidators;
+    }
     get filteringOptions() {
         return this._filteringOptions;
     }
@@ -78,15 +81,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
             caseSensitive: false,
             matchDiacritics: false,
         };
-        this.validators = [
-            {
-                key: 'valueMissing',
-                message: messages.required,
-                isValid: () => this.required
-                    ? Array.isArray(this.value) && this.value.length > 0
-                    : true,
-            },
-        ];
         this.navigationController = new NavigationController(this);
         this.selectionController = new SelectionController(this);
         this.dataController = new DataController(this);
@@ -96,7 +90,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         this.autofocusList = false;
         this.placeholderSearch = 'Search';
         this.open = false;
-        this.flip = true;
         this.displayKey = this.valueKey;
         this.groupKey = this.displayKey;
         this.groupSorting = 'asc';
@@ -109,8 +102,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         this.groupHeaderTemplate = ({ item }) => {
             return html `${this.groupKey && item[this.groupKey]}`;
         };
-        this.positionStrategy = 'fixed';
-        this.sameWidth = true;
         this.dataState = [];
         this._rootClickController = addRootClickHandler(this, {
             hideCallback: async () => {
@@ -153,9 +144,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
                 ? headerTemplate
                 : itemTemplate}`;
         };
-        this.addEventListener('focus', () => {
-            this.emitEvent('igcFocus');
-        });
         this.addEventListener('blur', () => {
             const { selected } = this.selectionController;
             if (selected.size === 0) {
@@ -163,7 +151,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
                 this.resetSearchTerm();
             }
             this.invalid = !this.checkValidity();
-            this.emitEvent('igcBlur');
         });
         this.addEventListener('keydown', this.navigationController.navigateHost.bind(this.navigationController));
     }
@@ -276,49 +263,51 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         this.dataController.searchTerm = e.detail;
     }
     handleOpening() {
-        const args = { cancelable: true };
-        return this.emitEvent('igcOpening', args);
+        return this.emitEvent('igcOpening', { cancelable: true });
     }
     handleClosing() {
-        const args = { cancelable: true };
-        return this.emitEvent('igcClosing', args);
+        return this.emitEvent('igcClosing', { cancelable: true });
     }
-    async _show(emit = true) {
-        if (this.open)
-            return;
-        if (emit && !this.handleOpening())
-            return;
+    async _show(emitEvent = true) {
+        if (this.open || (emitEvent && !this.handleOpening())) {
+            return false;
+        }
         this.open = true;
         await this.updateComplete;
-        emit && this.emitEvent('igcOpened');
+        if (emitEvent) {
+            this.emitEvent('igcOpened');
+        }
         if (!this.singleSelect) {
             this.list.focus();
         }
         if (!this.autofocusList) {
             this.input.focus();
         }
+        return true;
     }
-    show() {
-        this._show(false);
+    async show() {
+        return this._show(false);
     }
-    async _hide(emit = true) {
-        if (!this.open)
-            return;
-        if (emit && !this.handleClosing())
-            return;
+    async _hide(emitEvent = true) {
+        if (!this.open || (emitEvent && !this.handleClosing())) {
+            return false;
+        }
         this.open = false;
         await this.updateComplete;
-        emit && this.emitEvent('igcClosed');
+        if (emitEvent) {
+            this.emitEvent('igcClosed');
+        }
         this.navigationController.active = -1;
+        return true;
     }
-    hide() {
-        this._hide(false);
+    async hide() {
+        return this._hide(false);
     }
     _toggle(emit = true) {
-        this.open ? this._hide(emit) : this._show(emit);
+        return this.open ? this._hide(emit) : this._show(emit);
     }
-    toggle() {
-        this._toggle(false);
+    async toggle() {
+        return this._toggle(false);
     }
     listKeydownHandler(event) {
         const target = event
@@ -396,10 +385,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         e.stopPropagation();
     }
     renderToggleIcon() {
-        const openIcon = this[themeSymbol] === 'material' ? 'keyboard_arrow_up' : 'arrow_drop_up';
-        const closeIcon = this[themeSymbol] === 'material'
-            ? 'keyboard_arrow_down'
-            : 'arrow_drop_down';
         return html `
       <span
         slot="suffix"
@@ -410,8 +395,8 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
       >
         <slot name="toggle-icon">
           <igc-icon
-            name=${this.open ? openIcon : closeIcon}
-            collection="internal"
+            name=${this.open ? 'input_collapse' : 'input_expand'}
+            collection="default"
             aria-hidden="true"
           ></igc-icon>
         </slot>
@@ -420,7 +405,6 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     }
     renderClearIcon() {
         const { selected } = this.selectionController;
-        const icon = this[themeSymbol] === 'material' ? 'chip_cancel' : 'clear';
         return html `<span
       slot="suffix"
       part="clear-icon"
@@ -429,8 +413,8 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     >
       <slot name="clear-icon">
         <igc-icon
-          name="${icon}"
-          collection="internal"
+          name="input_clear"
+          collection="default"
           aria-hidden="true"
         ></igc-icon>
       </slot>
@@ -454,13 +438,11 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
       placeholder=${ifDefined(this.placeholder)}
       label=${ifDefined(this.label)}
       @igcChange=${this._stopPropagation}
-      @igcFocus=${(e) => {
-            e.stopPropagation();
+      @focus=${() => {
             requestAnimationFrame(() => {
                 this.target.select();
             });
         }}
-      @igcBlur=${this._stopPropagation}
       @igcInput=${this.handleMainInput}
       @keydown=${this.handleMainInputKeydown}
       .value=${this._displayValue}
@@ -491,15 +473,13 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         part="search-input"
         placeholder=${this.placeholderSearch}
         exportparts="input: search-input"
-        @igcFocus=${this._stopPropagation}
-        @igcBlur=${this._stopPropagation}
         @igcInput=${this.handleSearchInput}
         @keydown=${this.handleSearchInputKeydown}
       >
         <igc-icon
           slot=${this.caseSensitiveIcon && 'suffix'}
           name="case_sensitive"
-          collection="internal"
+          collection="default"
           part=${partNameMap({
             'case-icon': true,
             active: this.filteringOptions.caseSensitive ?? false,
@@ -615,9 +595,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IgcComboComponent.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], IgcComboComponent.prototype, "flip", void 0);
 __decorate([
     property({ attribute: 'value-key', reflect: false })
 ], IgcComboComponent.prototype, "valueKey", void 0);