igniteui-webcomponents 3.3.0-beta.0 → 4.0.0-alpha

package/components/chip/chip.js

@@ -15,7 +15,9 @@ import { styles as bootstrap } from './themes/chip.bootstrap.css.js';
 import { styles as fluent } from './themes/chip.fluent.css.js';
 import { styles as indigo } from './themes/chip.indigo.css.js';
 import { styles as material } from './themes/chip.material.css.js';
-import '../icon/icon.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcIconComponent from '../icon/icon.js';
+defineComponents(IgcIconComponent);
 let IgcChipComponent = class IgcChipComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super();

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 { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as bootstrap } from './themes/chip.bootstrap.css.js';\nimport { styles as fluent } from './themes/chip.fluent.css.js';\nimport { styles as indigo } from './themes/chip.indigo.css.js';\nimport { styles as material } from './themes/chip.material.css.js';\nimport '../icon/icon.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({ material, bootstrap, fluent, indigo })\nexport default class IgcChipComponent extends SizableMixin(\n  EventEmitterMixin<IgcChipEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-chip';\n\n  public static styles = styles;\n\n  /** Sets the disabled state for the chip. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** \tDefines if the chip is removable or not. */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\tDefines if the chip is selectable or not. */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /**\tDefines if the chip is selected or not. */\n  @property({ type: Boolean, reflect: true })\n  @blazorTwoWayBind('igcSelect', 'detail')\n  public selected = false;\n\n  /** A property that sets the color variant of the chip component. */\n  @property({ reflect: true })\n  public variant!: 'primary' | 'success' | 'danger' | 'warning' | 'info';\n\n  constructor() {\n    super();\n    this.size = 'medium';\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                @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                ></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 { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as bootstrap } from './themes/chip.bootstrap.css.js';\nimport { styles as fluent } from './themes/chip.fluent.css.js';\nimport { styles as indigo } from './themes/chip.indigo.css.js';\nimport { styles as material } from './themes/chip.material.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcIconComponent);\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({ material, bootstrap, fluent, indigo })\nexport default class IgcChipComponent extends SizableMixin(\n  EventEmitterMixin<IgcChipEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-chip';\n\n  public static styles = styles;\n\n  /** Sets the disabled state for the chip. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** \tDefines if the chip is removable or not. */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\tDefines if the chip is selectable or not. */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /**\tDefines if the chip is selected or not. */\n  @property({ type: Boolean, reflect: true })\n  @blazorTwoWayBind('igcSelect', 'detail')\n  public selected = false;\n\n  /** A property that sets the color variant of the chip component. */\n  @property({ reflect: true })\n  public variant!: 'primary' | 'success' | 'danger' | 'warning' | 'info';\n\n  constructor() {\n    super();\n    this.size = 'medium';\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                @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                ></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"]}

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

@@ -1,3 +1,214 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);border-radius:clamp(0rem,var(--igc-radius-factor)*1rem,1rem);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(--igc-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host button[disabled]{pointer-events:none;color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host([size=small]) button{height:1.25rem;padding:.125rem}:host([size=small]) [part=prefix]{-webkit-margin-end:.1875rem;margin-inline-end:.1875rem}:host([size=small]) [part=suffix]{-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}:host([size=medium]) button{height:1.5rem;padding:.375rem}:host([size=medium]) [part=prefix]{-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host([size=medium]) [part=suffix]{-webkit-margin-start:.375rem;margin-inline-start:.375rem}:host([size=large]) button{height:2rem;padding:.75rem}:host([size=large]) [part=prefix]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host([size=large]) [part=suffix]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([size=large]) igc-icon[size=large]{--size: 1.25rem}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--igc-primary-600), var(--igc-primary-a));color:var(--igc-primary-600-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--igc-primary-800), var(--igc-primary-a));color:var(--igc-primary-800-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--igc-info-600), var(--igc-info-a));color:var(--igc-info-600-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--igc-info-800), var(--igc-info-a));color:var(--igc-info-800-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--igc-success-600), var(--igc-success-a));color:var(--igc-success-600-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--igc-success-800), var(--igc-success-a));color:var(--igc-success-800-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--igc-warn-600), var(--igc-warn-a));color:var(--igc-warn-600-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--igc-warn-800), var(--igc-warn-a));color:var(--igc-warn-800-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--igc-error-600), var(--igc-error-a));color:var(--igc-error-600-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--igc-error-800), var(--igc-error-a));color:var(--igc-error-800-contrast)}[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}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}:host([variant=primary]) button[disabled],:host([variant=info]) button[disabled],:host([variant=success]) button[disabled],:host([variant=warning]) button[disabled],:host([variant=danger]) button[disabled]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[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);
+  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);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+  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;
+}
+:host button[disabled] {
+  pointer-events: none;
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+:host([size=small]) button {
+  height: 1.25rem;
+  padding: 0.125rem;
+}
+:host([size=small]) [part=prefix] {
+  -webkit-margin-end: 0.1875rem;
+          margin-inline-end: 0.1875rem;
+}
+:host([size=small]) [part=suffix] {
+  -webkit-margin-start: 0.1875rem;
+          margin-inline-start: 0.1875rem;
+}
+
+:host([size=medium]) button {
+  height: 1.5rem;
+  padding: 0.375rem;
+}
+:host([size=medium]) [part=prefix] {
+  -webkit-margin-end: 0.375rem;
+          margin-inline-end: 0.375rem;
+}
+:host([size=medium]) [part=suffix] {
+  -webkit-margin-start: 0.375rem;
+          margin-inline-start: 0.375rem;
+}
+
+:host([size=large]) button {
+  height: 2rem;
+  padding: 0.75rem;
+}
+:host([size=large]) [part=prefix] {
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+}
+:host([size=large]) [part=suffix] {
+  -webkit-margin-start: 0.5rem;
+          margin-inline-start: 0.5rem;
+}
+:host([size=large]) igc-icon[size=large] {
+  --size: 1.25rem;
+}
+
+:host([variant=primary]) button,
+:host([selected][variant=primary]) button:not([disabled]) {
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  color: var(--ig-primary-500-contrast);
+}
+:host([variant=primary]) button:hover,
+:host([selected][variant=primary]) button:not([disabled]):hover {
+  background: hsla(var(--ig-primary-600), var(--ig-primary-a));
+  color: var(--ig-primary-600-contrast);
+}
+:host([variant=primary]) button:focus,
+:host([selected][variant=primary]) button:not([disabled]):focus {
+  background: hsla(var(--ig-primary-800), var(--ig-primary-a));
+  color: var(--ig-primary-800-contrast);
+}
+
+:host([variant=info]) button,
+:host([selected][variant=info]) button:not([disabled]) {
+  background: hsla(var(--ig-info-500), var(--ig-info-a));
+  color: var(--ig-info-500-contrast);
+}
+:host([variant=info]) button:hover,
+:host([selected][variant=info]) button:not([disabled]):hover {
+  background: hsla(var(--ig-info-600), var(--ig-info-a));
+  color: var(--ig-info-600-contrast);
+}
+:host([variant=info]) button:focus,
+:host([selected][variant=info]) button:not([disabled]):focus {
+  background: hsla(var(--ig-info-800), var(--ig-info-a));
+  color: var(--ig-info-800-contrast);
+}
+
+:host([variant=success]) button,
+:host([selected][variant=success]) button:not([disabled]) {
+  background: hsla(var(--ig-success-500), var(--ig-success-a));
+  color: var(--ig-success-500-contrast);
+}
+:host([variant=success]) button:hover,
+:host([selected][variant=success]) button:not([disabled]):hover {
+  background: hsla(var(--ig-success-600), var(--ig-success-a));
+  color: var(--ig-success-600-contrast);
+}
+:host([variant=success]) button:focus,
+:host([selected][variant=success]) button:not([disabled]):focus {
+  background: hsla(var(--ig-success-800), var(--ig-success-a));
+  color: var(--ig-success-800-contrast);
+}
+
+:host([variant=warning]) button,
+:host([selected][variant=warning]) button:not([disabled]) {
+  background: hsla(var(--ig-warn-500), var(--ig-warn-a));
+  color: var(--ig-warn-500-contrast);
+}
+:host([variant=warning]) button:hover,
+:host([selected][variant=warning]) button:not([disabled]):hover {
+  background: hsla(var(--ig-warn-600), var(--ig-warn-a));
+  color: var(--ig-warn-600-contrast);
+}
+:host([variant=warning]) button:focus,
+:host([selected][variant=warning]) button:not([disabled]):focus {
+  background: hsla(var(--ig-warn-800), var(--ig-warn-a));
+  color: var(--ig-warn-800-contrast);
+}
+
+:host([variant=danger]) button,
+:host([selected][variant=danger]) button:not([disabled]) {
+  background: hsla(var(--ig-error-500), var(--ig-error-a));
+  color: var(--ig-error-500-contrast);
+}
+:host([variant=danger]) button:hover,
+:host([selected][variant=danger]) button:not([disabled]):hover {
+  background: hsla(var(--ig-error-600), var(--ig-error-a));
+  color: var(--ig-error-600-contrast);
+}
+:host([variant=danger]) button:focus,
+:host([selected][variant=danger]) button:not([disabled]):focus {
+  background: hsla(var(--ig-error-800), var(--ig-error-a));
+  color: var(--ig-error-800-contrast);
+}
+
+[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;
+}
+
+::slotted(*) {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+:host([variant=primary]) button[disabled],
+:host([variant=info]) button[disabled],
+:host([variant=success]) button[disabled],
+:host([variant=warning]) button[disabled],
+:host([variant=danger]) button[disabled] {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}`;
 //# 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,+tLAA+tL,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);border-radius:clamp(0rem,var(--igc-radius-factor)*1rem,1rem);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(--igc-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host button[disabled]{pointer-events:none;color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host([size=small]) button{height:1.25rem;padding:.125rem}:host([size=small]) [part=prefix]{-webkit-margin-end:.1875rem;margin-inline-end:.1875rem}:host([size=small]) [part=suffix]{-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}:host([size=medium]) button{height:1.5rem;padding:.375rem}:host([size=medium]) [part=prefix]{-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host([size=medium]) [part=suffix]{-webkit-margin-start:.375rem;margin-inline-start:.375rem}:host([size=large]) button{height:2rem;padding:.75rem}:host([size=large]) [part=prefix]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host([size=large]) [part=suffix]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([size=large]) igc-icon[size=large]{--size: 1.25rem}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--igc-primary-600), var(--igc-primary-a));color:var(--igc-primary-600-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--igc-primary-800), var(--igc-primary-a));color:var(--igc-primary-800-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--igc-info-600), var(--igc-info-a));color:var(--igc-info-600-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--igc-info-800), var(--igc-info-a));color:var(--igc-info-800-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--igc-success-600), var(--igc-success-a));color:var(--igc-success-600-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--igc-success-800), var(--igc-success-a));color:var(--igc-success-800-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--igc-warn-600), var(--igc-warn-a));color:var(--igc-warn-600-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--igc-warn-800), var(--igc-warn-a));color:var(--igc-warn-800-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--igc-error-600), var(--igc-error-a));color:var(--igc-error-600-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--igc-error-800), var(--igc-error-a));color:var(--igc-error-800-contrast)}[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}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}:host([variant=primary]) button[disabled],:host([variant=info]) button[disabled],:host([variant=success]) button[disabled],:host([variant=warning]) button[disabled],:host([variant=danger]) button[disabled]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmNvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: top;\n}\n\n:host button {\n  font-family: var(--ig-body-2-font-family);\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  font-family: var(--ig-font-family);\n  border-style: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  cursor: pointer;\n}\n:host button[disabled] {\n  pointer-events: none;\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([size=small]) button {\n  height: 1.25rem;\n  padding: 0.125rem;\n}\n:host([size=small]) [part=prefix] {\n  -webkit-margin-end: 0.1875rem;\n          margin-inline-end: 0.1875rem;\n}\n:host([size=small]) [part=suffix] {\n  -webkit-margin-start: 0.1875rem;\n          margin-inline-start: 0.1875rem;\n}\n\n:host([size=medium]) button {\n  height: 1.5rem;\n  padding: 0.375rem;\n}\n:host([size=medium]) [part=prefix] {\n  -webkit-margin-end: 0.375rem;\n          margin-inline-end: 0.375rem;\n}\n:host([size=medium]) [part=suffix] {\n  -webkit-margin-start: 0.375rem;\n          margin-inline-start: 0.375rem;\n}\n\n:host([size=large]) button {\n  height: 2rem;\n  padding: 0.75rem;\n}\n:host([size=large]) [part=prefix] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n:host([size=large]) [part=suffix] {\n  -webkit-margin-start: 0.5rem;\n          margin-inline-start: 0.5rem;\n}\n:host([size=large]) igc-icon[size=large] {\n  --size: 1.25rem;\n}\n\n:host([variant=primary]) button,\n:host([selected][variant=primary]) button:not([disabled]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n:host([variant=primary]) button:hover,\n:host([selected][variant=primary]) button:not([disabled]):hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=primary]) button:focus,\n:host([selected][variant=primary]) button:not([disabled]):focus {\n  background: hsla(var(--ig-primary-800), var(--ig-primary-a));\n  color: var(--ig-primary-800-contrast);\n}\n\n:host([variant=info]) button,\n:host([selected][variant=info]) button:not([disabled]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n:host([variant=info]) button:hover,\n:host([selected][variant=info]) button:not([disabled]):hover {\n  background: hsla(var(--ig-info-600), var(--ig-info-a));\n  color: var(--ig-info-600-contrast);\n}\n:host([variant=info]) button:focus,\n:host([selected][variant=info]) button:not([disabled]):focus {\n  background: hsla(var(--ig-info-800), var(--ig-info-a));\n  color: var(--ig-info-800-contrast);\n}\n\n:host([variant=success]) button,\n:host([selected][variant=success]) button:not([disabled]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n:host([variant=success]) button:hover,\n:host([selected][variant=success]) button:not([disabled]):hover {\n  background: hsla(var(--ig-success-600), var(--ig-success-a));\n  color: var(--ig-success-600-contrast);\n}\n:host([variant=success]) button:focus,\n:host([selected][variant=success]) button:not([disabled]):focus {\n  background: hsla(var(--ig-success-800), var(--ig-success-a));\n  color: var(--ig-success-800-contrast);\n}\n\n:host([variant=warning]) button,\n:host([selected][variant=warning]) button:not([disabled]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n:host([variant=warning]) button:hover,\n:host([selected][variant=warning]) button:not([disabled]):hover {\n  background: hsla(var(--ig-warn-600), var(--ig-warn-a));\n  color: var(--ig-warn-600-contrast);\n}\n:host([variant=warning]) button:focus,\n:host([selected][variant=warning]) button:not([disabled]):focus {\n  background: hsla(var(--ig-warn-800), var(--ig-warn-a));\n  color: var(--ig-warn-800-contrast);\n}\n\n:host([variant=danger]) button,\n:host([selected][variant=danger]) button:not([disabled]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n:host([variant=danger]) button:hover,\n:host([selected][variant=danger]) button:not([disabled]):hover {\n  background: hsla(var(--ig-error-600), var(--ig-error-a));\n  color: var(--ig-error-600-contrast);\n}\n:host([variant=danger]) button:focus,\n:host([selected][variant=danger]) button:not([disabled]):focus {\n  background: hsla(var(--ig-error-800), var(--ig-error-a));\n  color: var(--ig-error-800-contrast);\n}\n\n[part=prefix],\n[part=suffix] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n::slotted(*) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n:host([variant=primary]) button[disabled],\n:host([variant=info]) button[disabled],\n:host([variant=success]) button[disabled],\n:host([variant=warning]) button[disabled],\n:host([variant=danger]) button[disabled] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}

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

@@ -1,3 +1,287 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}:host button{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);border-radius:clamp(0rem,var(--igc-radius-factor)*1rem,1rem);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(--igc-font-family);border-style:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host button[disabled]{pointer-events:none;color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host([size=small]) button{height:1.25rem;padding:.125rem}:host([size=small]) [part=prefix]{-webkit-margin-end:.1875rem;margin-inline-end:.1875rem}:host([size=small]) [part=suffix]{-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}:host([size=medium]) button{height:1.5rem;padding:.375rem}:host([size=medium]) [part=prefix]{-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host([size=medium]) [part=suffix]{-webkit-margin-start:.375rem;margin-inline-start:.375rem}:host([size=large]) button{height:2rem;padding:.75rem}:host([size=large]) [part=prefix]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host([size=large]) [part=suffix]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([size=large]) igc-icon[size=large]{--size: 1.25rem}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--igc-primary-600), var(--igc-primary-a));color:var(--igc-primary-600-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--igc-primary-800), var(--igc-primary-a));color:var(--igc-primary-800-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--igc-info-600), var(--igc-info-a));color:var(--igc-info-600-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--igc-info-800), var(--igc-info-a));color:var(--igc-info-800-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--igc-success-600), var(--igc-success-a));color:var(--igc-success-600-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--igc-success-800), var(--igc-success-a));color:var(--igc-success-800-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--igc-warn-600), var(--igc-warn-a));color:var(--igc-warn-600-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--igc-warn-800), var(--igc-warn-a));color:var(--igc-warn-800-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--igc-error-600), var(--igc-error-a));color:var(--igc-error-600-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--igc-error-800), var(--igc-error-a));color:var(--igc-error-800-contrast)}[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}::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex}:host([variant=primary]) button[disabled],:host([variant=info]) button[disabled],:host([variant=success]) button[disabled],:host([variant=warning]) button[disabled],:host([variant=danger]) button[disabled]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host button{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);background:hsla(var(--igc-gray-200), var(--igc-gray-a));color:var(--igc-gray-200-contrast)}:host button:hover{background:hsla(var(--igc-gray-400), var(--igc-gray-a));color:var(--igc-gray-400-contrast)}:host button:focus{outline:.125rem solid hsla(var(--igc-gray-200), var(--igc-gray-a));background:hsla(var(--igc-gray-400), var(--igc-gray-a));color:var(--igc-gray-400-contrast)}:host button[disabled]{background:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([variant=primary]) button,:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]){color:var(--igc-primary-700-contrast)}:host([variant=primary]) button:focus{outline:.125rem solid hsla(var(--igc-primary-200), var(--igc-primary-a))}:host([variant=info]) button,:host([variant=info]) button:focus,:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]){color:var(--igc-info-700-contrast)}:host([variant=info]) button:focus{outline:.125rem solid hsla(var(--igc-info-200), var(--igc-info-a))}:host([variant=success]) button,:host([variant=success]) button:focus,:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]){color:var(--igc-success-700-contrast)}:host([variant=success]) button:focus{outline:.125rem solid hsla(var(--igc-success-200), var(--igc-success-a))}:host([variant=warning]) button,:host([variant=warning]) button:focus,:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]){color:var(--igc-warn-700-contrast)}:host([variant=warning]) button:focus{outline:.125rem solid hsla(var(--igc-warn-200), var(--igc-warn-a))}:host([variant=danger]) button,:host([variant=danger]) button:focus,:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]){color:var(--igc-error-700-contrast)}:host([variant=danger]) button:focus{outline:.125rem solid hsla(var(--igc-error-200), var(--igc-error-a))}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[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);
+  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);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+  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;
+}
+:host button[disabled] {
+  pointer-events: none;
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+:host([size=small]) button {
+  height: 1.25rem;
+  padding: 0.125rem;
+}
+:host([size=small]) [part=prefix] {
+  -webkit-margin-end: 0.1875rem;
+          margin-inline-end: 0.1875rem;
+}
+:host([size=small]) [part=suffix] {
+  -webkit-margin-start: 0.1875rem;
+          margin-inline-start: 0.1875rem;
+}
+
+:host([size=medium]) button {
+  height: 1.5rem;
+  padding: 0.375rem;
+}
+:host([size=medium]) [part=prefix] {
+  -webkit-margin-end: 0.375rem;
+          margin-inline-end: 0.375rem;
+}
+:host([size=medium]) [part=suffix] {
+  -webkit-margin-start: 0.375rem;
+          margin-inline-start: 0.375rem;
+}
+
+:host([size=large]) button {
+  height: 2rem;
+  padding: 0.75rem;
+}
+:host([size=large]) [part=prefix] {
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+}
+:host([size=large]) [part=suffix] {
+  -webkit-margin-start: 0.5rem;
+          margin-inline-start: 0.5rem;
+}
+:host([size=large]) igc-icon[size=large] {
+  --size: 1.25rem;
+}
+
+:host([variant=primary]) button,
+:host([selected][variant=primary]) button:not([disabled]) {
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  color: var(--ig-primary-500-contrast);
+}
+:host([variant=primary]) button:hover,
+:host([selected][variant=primary]) button:not([disabled]):hover {
+  background: hsla(var(--ig-primary-600), var(--ig-primary-a));
+  color: var(--ig-primary-600-contrast);
+}
+:host([variant=primary]) button:focus,
+:host([selected][variant=primary]) button:not([disabled]):focus {
+  background: hsla(var(--ig-primary-800), var(--ig-primary-a));
+  color: var(--ig-primary-800-contrast);
+}
+
+:host([variant=info]) button,
+:host([selected][variant=info]) button:not([disabled]) {
+  background: hsla(var(--ig-info-500), var(--ig-info-a));
+  color: var(--ig-info-500-contrast);
+}
+:host([variant=info]) button:hover,
+:host([selected][variant=info]) button:not([disabled]):hover {
+  background: hsla(var(--ig-info-600), var(--ig-info-a));
+  color: var(--ig-info-600-contrast);
+}
+:host([variant=info]) button:focus,
+:host([selected][variant=info]) button:not([disabled]):focus {
+  background: hsla(var(--ig-info-800), var(--ig-info-a));
+  color: var(--ig-info-800-contrast);
+}
+
+:host([variant=success]) button,
+:host([selected][variant=success]) button:not([disabled]) {
+  background: hsla(var(--ig-success-500), var(--ig-success-a));
+  color: var(--ig-success-500-contrast);
+}
+:host([variant=success]) button:hover,
+:host([selected][variant=success]) button:not([disabled]):hover {
+  background: hsla(var(--ig-success-600), var(--ig-success-a));
+  color: var(--ig-success-600-contrast);
+}
+:host([variant=success]) button:focus,
+:host([selected][variant=success]) button:not([disabled]):focus {
+  background: hsla(var(--ig-success-800), var(--ig-success-a));
+  color: var(--ig-success-800-contrast);
+}
+
+:host([variant=warning]) button,
+:host([selected][variant=warning]) button:not([disabled]) {
+  background: hsla(var(--ig-warn-500), var(--ig-warn-a));
+  color: var(--ig-warn-500-contrast);
+}
+:host([variant=warning]) button:hover,
+:host([selected][variant=warning]) button:not([disabled]):hover {
+  background: hsla(var(--ig-warn-600), var(--ig-warn-a));
+  color: var(--ig-warn-600-contrast);
+}
+:host([variant=warning]) button:focus,
+:host([selected][variant=warning]) button:not([disabled]):focus {
+  background: hsla(var(--ig-warn-800), var(--ig-warn-a));
+  color: var(--ig-warn-800-contrast);
+}
+
+:host([variant=danger]) button,
+:host([selected][variant=danger]) button:not([disabled]) {
+  background: hsla(var(--ig-error-500), var(--ig-error-a));
+  color: var(--ig-error-500-contrast);
+}
+:host([variant=danger]) button:hover,
+:host([selected][variant=danger]) button:not([disabled]):hover {
+  background: hsla(var(--ig-error-600), var(--ig-error-a));
+  color: var(--ig-error-600-contrast);
+}
+:host([variant=danger]) button:focus,
+:host([selected][variant=danger]) button:not([disabled]):focus {
+  background: hsla(var(--ig-error-800), var(--ig-error-a));
+  color: var(--ig-error-800-contrast);
+}
+
+[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;
+}
+
+::slotted(*) {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+:host([variant=primary]) button[disabled],
+:host([variant=info]) button[disabled],
+:host([variant=success]) button[disabled],
+:host([variant=warning]) button[disabled],
+:host([variant=danger]) button[disabled] {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+:host button {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  color: var(--ig-gray-200-contrast);
+}
+:host button:hover {
+  background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  color: var(--ig-gray-400-contrast);
+}
+:host button:focus {
+  outline: 0.125rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+  background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  color: var(--ig-gray-400-contrast);
+}
+:host button[disabled] {
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+
+:host([variant=primary]) button,
+:host([variant=primary]) button:focus,
+:host([variant=primary]) button:hover,
+:host([selected][variant=primary]) button:not([disabled]) {
+  color: var(--ig-primary-700-contrast);
+}
+
+:host([variant=primary]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-primary-200), var(--ig-primary-a));
+}
+
+:host([variant=info]) button,
+:host([variant=info]) button:focus,
+:host([variant=info]) button:hover,
+:host([selected][variant=info]) button:not([disabled]) {
+  color: var(--ig-info-700-contrast);
+}
+
+:host([variant=info]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-info-200), var(--ig-info-a));
+}
+
+:host([variant=success]) button,
+:host([variant=success]) button:focus,
+:host([variant=success]) button:hover,
+:host([selected][variant=success]) button:not([disabled]) {
+  color: var(--ig-success-700-contrast);
+}
+
+:host([variant=success]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-success-200), var(--ig-success-a));
+}
+
+:host([variant=warning]) button,
+:host([variant=warning]) button:focus,
+:host([variant=warning]) button:hover,
+:host([selected][variant=warning]) button:not([disabled]) {
+  color: var(--ig-warn-700-contrast);
+}
+
+:host([variant=warning]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-warn-200), var(--ig-warn-a));
+}
+
+:host([variant=danger]) button,
+:host([variant=danger]) button:focus,
+:host([variant=danger]) button:hover,
+:host([selected][variant=danger]) button:not([disabled]) {
+  color: var(--ig-error-700-contrast);
+}
+
+:host([variant=danger]) button:focus {
+  outline: 0.125rem solid hsla(var(--ig-error-200), var(--ig-error-a));
+}`;
 //# sourceMappingURL=chip.bootstrap.css.js.map