igniteui-webcomponents 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,6 +1,50 @@
-# Changelog
+# IgniteUI Web Components Changelog
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+### Added
+
+- Dark Themes
+- Slider component
+- Range Slider component
+- Support `required` property in Radio component.
+
+### Changed
+
+- Fix checkbox/switch validity status
+- Split Calendar component's `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]`
+- Replaced Calendar component's `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively.
+- Replaced Card component's `outlined` property with `elevated`.
+
+### Removed
+
+- Removed `igcOpening`, `igcOpened`, `igcClosing` and `igcClosed` events from Navigation drawer component.
+
+## 1.0.0 - 2021-11-22
+
+Initial release of Ignite UI Web Components
+
+### Added
+
+- Avatar component
+- Badge component
+- Button component
+- Calendar component
+- Card component
+- Checkbox component
+- Form component
+- Icon component
+- Icon button component
+- Input component
+- List component
+- Navigation bar component
+- Navigation drawer component
+- Radio group component
+- Radio component
+- Ripple component
+- Switch component

package/README.md

@@ -5,7 +5,7 @@
 [![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
+[Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)!
 
 ## Usage
 
@@ -40,6 +40,22 @@ After the components are imported you could use them in your html:
 <igc-badge></igc-badge>
 ```
 
+### Tooling Support
+The package contains its own [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/blog/intro/) as well
+as [Custom Data Format](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format) for VSCode.
+Refer to your IDE/toolchain documentation to see if you can take advantage of this metadata for linting, type hints and documentation.
+
+Here is a how to enable VSCode auto-completion and hover information for HTML entities from the package.
+
+Add the following line to your user or workspace settings:
+```json
+{
+    "html.customData": [
+        "./node_modules/igniteui-webcomponents/vscode-html-custom-data.json"
+    ]
+}
+```
+
 ## Setup
 
 In order to run the repository locally from the root folder run:

package/components/avatar/avatar.d.ts

@@ -1,17 +1,34 @@
 import { LitElement } from 'lit';
 declare const IgcAvatarComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/sizable.js").SizableInterface> & typeof LitElement;
+/**
+ * An avatar component is used as a representation of a user identity
+ * typically in a user profile.
+ *
+ * @element igc-avatar
+ *
+ * @slot - Renders an icon inside the default slot.
+ *
+ * @csspart base - The base wrapper of the avatar.
+ * @csspart initials - The initials wrapper of the avatar.
+ * @csspart image - The image wrapper of the avatar.
+ * @csspart icon - The icon wrapper of the avatar.
+ */
 export default class IgcAvatarComponent extends IgcAvatarComponent_base {
-    static tagName: string;
+    static readonly tagName = "igc-avatar";
     static styles: import("lit").CSSResult[];
+    /** The image source to use. */
     src: string;
     private hasError;
+    /** Alternative text for the image. */
     alt: string;
+    /** Initials to use as a fallback when no image is available. */
     initials: string;
+    /** The shape of the avatar. */
     shape: 'circle' | 'rounded' | 'square';
     private get classes();
     constructor();
     protected handleErrorState(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,4 +36,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=avatar.d.ts.map

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAe/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAuCtE;QACE,KAAK,EAAE,CAAC;QA5BF,aAAQ,GAAG,KAAK,CAAC;QAYlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAhBD,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAQS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAvEa,0BAAO,GAAG,YAAY,CAAC;AAGvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,EAAE;+CACS;AAGpB;IADC,KAAK,EAAE;oDACiB;AAIzB;IADC,QAAQ,EAAE;+CACS;AAIpB;IADC,QAAQ,EAAE;oDACc;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAqBzD;IADC,KAAK,CAAC,KAAK,CAAC;0DAGZ","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './avatar.material.css';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  /** @private */\n  public static tagName = 'igc-avatar';\n\n  /** @private */\n  public static styles = [styles];\n\n  /** The image source to use. */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /** Alternative text for the image. */\n  @property()\n  public alt!: string;\n\n  /** Initials to use as a fallback when no image is available. */\n  @property()\n  public initials!: string;\n\n  /** The shape of the avatar. */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAe/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAqCtE;QACE,KAAK,EAAE,CAAC;QA5BF,aAAQ,GAAG,KAAK,CAAC;QAYlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAhBD,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAQS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAtEsB,0BAAO,GAAG,YAAY,CAAC;AAEvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIzC;IADC,QAAQ,EAAE;+CACS;AAGpB;IADC,KAAK,EAAE;oDACiB;AAIzB;IADC,QAAQ,EAAE;+CACS;AAIpB;IADC,QAAQ,EAAE;oDACc;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAqBzD;IADC,KAAK,CAAC,KAAK,CAAC;0DAGZ","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './avatar.material.css';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n\n  public static override styles = [styles];\n\n  /** The image source to use. */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /** Alternative text for the image. */\n  @property()\n  public alt!: string;\n\n  /** Initials to use as a fallback when no image is available. */\n  @property()\n  public initials!: string;\n\n  /** The shape of the avatar. */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/avatar/avatar.material.css.d.ts

@@ -1,2 +1 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=avatar.material.css.d.ts.map

package/components/avatar/avatar.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:hsla(var(--igc-gray-800), var(--igc-gray-a));background:hsla(var(--igc-gray-400), var(--igc-gray-a));border-radius:0;outline-style:none;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;font-family:var(--igc-font-family)}.rounded{border-radius:calc(var(--igc-border-radius)*4)}.circle{border-radius:calc(var(--igc-border-radius)*22)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}.large{width:var(--size, 5.5rem);height:var(--size, 5.5rem)}.large [part=initials]{font-size:calc(var(--size, 5.5rem) / 2);line-height:calc(var(--size, 5.5rem) / 2)}.medium{width:var(--size, 4rem);height:var(--size, 4rem)}.medium [part=initials]{font-size:calc(var(--size, 4rem) / 2);line-height:calc(var(--size, 4rem) / 2)}.small{width:var(--size, 2.5rem);height:var(--size, 2.5rem)}.small [part=initials]{font-size:calc(var(--size, 2.5rem) / 2);line-height:calc(var(--size, 2.5rem) / 2)}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:inline-block}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:hsla(var(--igc-gray-800), var(--igc-gray-a));background:hsla(var(--igc-gray-400), var(--igc-gray-a));border-radius:0;outline-style:none;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;font-family:var(--igc-font-family)}.rounded{border-radius:calc(var(--igc-border-radius)*4)}.circle{border-radius:calc(var(--igc-border-radius)*22)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}.large{width:var(--size, 5.5rem);height:var(--size, 5.5rem)}.large [part=initials]{font-size:calc(var(--size, 5.5rem) / 2);line-height:calc(var(--size, 5.5rem) / 2)}.medium{width:var(--size, 4rem);height:var(--size, 4rem)}.medium [part=initials]{font-size:calc(var(--size, 4rem) / 2);line-height:calc(var(--size, 4rem) / 2)}.small{width:var(--size, 2.5rem);height:var(--size, 2.5rem)}.small [part=initials]{font-size:calc(var(--size, 2.5rem) / 2);line-height:calc(var(--size, 2.5rem) / 2)}`;
 //# sourceMappingURL=avatar.material.css.js.map

package/components/avatar/avatar.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8gDAA8gD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:hsla(var(--igc-gray-800), var(--igc-gray-a));background:hsla(var(--igc-gray-400), var(--igc-gray-a));border-radius:0;outline-style:none;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;font-family:var(--igc-font-family)}.rounded{border-radius:calc(var(--igc-border-radius)*4)}.circle{border-radius:calc(var(--igc-border-radius)*22)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}.large{width:var(--size, 5.5rem);height:var(--size, 5.5rem)}.large [part=initials]{font-size:calc(var(--size, 5.5rem) / 2);line-height:calc(var(--size, 5.5rem) / 2)}.medium{width:var(--size, 4rem);height:var(--size, 4rem)}.medium [part=initials]{font-size:calc(var(--size, 4rem) / 2);line-height:calc(var(--size, 4rem) / 2)}.small{width:var(--size, 2.5rem);height:var(--size, 2.5rem)}.small [part=initials]{font-size:calc(var(--size, 2.5rem) / 2);line-height:calc(var(--size, 2.5rem) / 2)}`;\n"]}
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,80DAA80D,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);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:inline-block}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:hsla(var(--igc-gray-800), var(--igc-gray-a));background:hsla(var(--igc-gray-400), var(--igc-gray-a));border-radius:0;outline-style:none;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;font-family:var(--igc-font-family)}.rounded{border-radius:calc(var(--igc-border-radius)*4)}.circle{border-radius:calc(var(--igc-border-radius)*22)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}.large{width:var(--size, 5.5rem);height:var(--size, 5.5rem)}.large [part=initials]{font-size:calc(var(--size, 5.5rem) / 2);line-height:calc(var(--size, 5.5rem) / 2)}.medium{width:var(--size, 4rem);height:var(--size, 4rem)}.medium [part=initials]{font-size:calc(var(--size, 4rem) / 2);line-height:calc(var(--size, 4rem) / 2)}.small{width:var(--size, 2.5rem);height:var(--size, 2.5rem)}.small [part=initials]{font-size:calc(var(--size, 2.5rem) / 2);line-height:calc(var(--size, 2.5rem) / 2)}`;\n"]}

package/components/badge/badge.d.ts

@@ -1,15 +1,27 @@
 import { LitElement } from 'lit';
+/**
+ * The badge is a component indicating a status on a related item or an area
+ * where some active indication is required.
+ *
+ * @element igc-badge
+ *
+ * @slot - Default slot for the badge.
+ *
+ * @csspart base - The base wrapper of the badge.
+ */
 export default class IgcBadgeComponent extends LitElement {
-    static tagName: string;
+    static readonly tagName = "igc-badge";
     static styles: import("lit").CSSResult;
-    variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    /** The type of badge. */
+    variant: 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    /** Sets whether to draw an outlined version of the badge. */
     outlined: boolean;
-    shape?: 'rounded' | 'square';
-    protected render(): import("lit").TemplateResult<1>;
+    /** The shape of the badge. */
+    shape: 'rounded' | 'square';
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-badge': IgcBadgeComponent;
     }
 }
-//# sourceMappingURL=badge.d.ts.map

package/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAY9C,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;IAAzD;;QASS,YAAO,GACZ,SAAS,CAAC;QAIL,aAAQ,GAAG,KAAK,CAAC;QAIjB,UAAK,GAA0B,SAAS,CAAC;IASlD,CAAC;IAPW,MAAM;QACd,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAxBa,yBAAO,GAAG,WAAW,CAAC;AAGtB,wBAAM,GAAG,MAAM,CAAC;AAI9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACoB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './badge.material.css';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-badge';\n\n  /** @private */\n  public static styles = styles;\n\n  /** The type of badge. */\n  @property({ reflect: true })\n  public variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /** Sets whether to draw an outlined version of the badge. */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /** The shape of the badge. */\n  @property({ reflect: true })\n  public shape?: 'rounded' | 'square' = 'rounded';\n\n  protected render() {\n    return html`\n      <span part=\"base\" role=\"img\" aria-label=\"badge\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\n// export const badgeDefinition: IgcComponentDefinition = {\n//   tag: 'igc-badge',\n//   component: IgcBadgeComponent,\n// };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAY9C,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;IAAzD;;QAOS,YAAO,GACZ,SAAS,CAAC;QAIL,aAAQ,GAAG,KAAK,CAAC;QAIjB,UAAK,GAAyB,SAAS,CAAC;IASjD,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAvBsB,yBAAO,GAAG,WAAW,CAAC;AAEtB,wBAAM,GAAG,MAAM,CAAC;AAIvC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACmB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './badge.material.css';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n\n  public static override styles = styles;\n\n  /** The type of badge. */\n  @property({ reflect: true })\n  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /** Sets whether to draw an outlined version of the badge. */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /** The shape of the badge. */\n  @property({ reflect: true })\n  public shape: 'rounded' | 'square' = 'rounded';\n\n  protected override render() {\n    return html`\n      <span part=\"base\" role=\"img\" aria-label=\"badge\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}

package/components/badge/badge.material.css.d.ts

@@ -1,2 +1 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=badge.material.css.d.ts.map

package/components/badge/badge.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;--size: 0.75rem;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), 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);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{--size: 0.75rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;
 //# sourceMappingURL=badge.material.css.js.map

package/components/badge/badge.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.material.css.js","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mqDAAmqD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;--size: 0.75rem;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;\n"]}
+{"version":3,"file":"badge.material.css.js","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,m+DAAm+D,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);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{--size: 0.75rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;\n"]}

package/components/button/button-base.d.ts

@@ -7,13 +7,31 @@ export interface IgcButtonEventMap {
 declare const IgcButtonBaseComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & Constructor<import("../common//mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseComponent_base {
     private nativeElement;
+    private _ariaLabel;
+    /**
+     * The type of the button. Defaults to undefined.
+     */
     type: 'button' | 'reset' | 'submit';
+    /** The URL the button points to. */
     href: string;
+    /** Prompts to save the linked URL instead of navigating to it. */
     download: string;
+    /** Where to display the linked URL, as the name for a browsing context. */
     target: '_blank' | '_parent' | '_self' | '_top' | undefined;
+    /**
+     * The relationship of the linked URL.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
+     */
     rel: string;
+    /**
+     * Determines whether the button is disabled.
+     */
     disabled: boolean;
+    set ariaLabel(value: string);
+    get ariaLabel(): string;
+    /** Sets focus in the button. */
     focus(options?: FocusOptions): void;
+    /** Removes focus from the button. */
     blur(): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
@@ -24,4 +42,3 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
     protected render(): TemplateResult<1>;
 }
 export {};
-//# sourceMappingURL=button-base.d.ts.map

package/components/button/button-base.js

@@ -16,6 +16,17 @@ export class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitEl
         super(...arguments);
         this.disabled = false;
     }
+    set ariaLabel(value) {
+        const oldVal = this._ariaLabel;
+        this._ariaLabel = value;
+        if (this.hasAttribute('aria-label')) {
+            this.removeAttribute('aria-label');
+        }
+        this.requestUpdate('ariaLabel', oldVal);
+    }
+    get ariaLabel() {
+        return this._ariaLabel;
+    }
     focus(options) {
         this.nativeElement.focus(options);
     }
@@ -35,6 +46,7 @@ export class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitEl
         return html `
       <button
         part="base"
+        aria-label=${ifDefined(this.ariaLabel)}
         .disabled=${this.disabled}
         class=${classMap(this.classes)}
         type=${ifDefined(this.type)}
@@ -55,6 +67,7 @@ export class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitEl
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.rel)}
         aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-label=${ifDefined(this.ariaLabel)}
         class=${classMap(this.classes)}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
@@ -90,6 +103,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonBaseComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], IgcButtonBaseComponent.prototype, "ariaLabel", null);
 __decorate([
     alternateName('focusComponent')
 ], IgcButtonBaseComponent.prototype, "focus", null);

package/components/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAO3D,MAAM,OAAgB,sBAAuB,SAAQ,YAAY,CAC/D,iBAAiB,CAA6C,UAAU,CAAC,CAC1E;IAFD;;QAuCS,aAAQ,GAAG,KAAK,CAAC;IAkE1B,CAAC;IA9DQ,KAAK,CAAC,OAAsB;QACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIM,IAAI;QACT,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;IAED,IAAc,OAAO;QACnB,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,QAAQ;gBACjB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;eACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAA;;;;eAIA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;mBACpB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;cAC7B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACxC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;iBACrB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAIS,MAAM;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QACrC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC9D,CAAC;CACF;AAlGC;IADC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;6DACO;AAOpC;IAFC,aAAa,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE;oDACiC;AAI5C;IADC,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;wDACc;AAIzB;IADC,QAAQ,EAAE;sDACyD;AAOpE;IADC,QAAQ,EAAE;mDACS;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACnB;AAIxB;IADC,aAAa,CAAC,gBAAgB,CAAC;mDAG/B;AAID;IADC,aAAa,CAAC,eAAe,CAAC;kDAG9B","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { alternateName } from '../common/decorators';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\n\nexport interface IgcButtonEventMap {\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\nexport abstract class IgcButtonBaseComponent extends SizableMixin(\n  EventEmitterMixin<IgcButtonEventMap, Constructor<LitElement>>(LitElement)\n) {\n  /**\n   * @private\n   */\n  @query('[part=\"base\"]', true)\n  private nativeElement!: HTMLElement;\n\n  /**\n   * The type of the button. Defaults to undefined.\n   */\n  @alternateName('displayType')\n  @property()\n  public type!: 'button' | 'reset' | 'submit';\n\n  /** The URL the button points to. */\n  @property()\n  public href!: string;\n\n  /** Prompts to save the linked URL instead of navigating to it. */\n  @property()\n  public download!: string;\n\n  /** Where to display the linked URL, as the name for a browsing context. */\n  @property()\n  public target!: '_blank' | '_parent' | '_self' | '_top' | undefined;\n\n  /**\n   * The relationship of the linked URL.\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n   */\n  @property()\n  public rel!: string;\n\n  /**\n   * Determines whether the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets focus in the button. */\n  @alternateName('focusComponent')\n  public focus(options?: FocusOptions) {\n    this.nativeElement.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @alternateName('blurComponent')\n  public blur() {\n    this.nativeElement.blur();\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected get classes() {\n    return {};\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        class=${classMap(this.classes)}\n        type=${ifDefined(this.type)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  private renderLinkButton() {\n    return html`\n      <a\n        part=\"base\"\n        role=\"button\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        class=${classMap(this.classes)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </a>\n    `;\n  }\n\n  protected abstract renderContent(): TemplateResult;\n\n  protected render() {\n    const link = this.href !== undefined;\n    return link ? this.renderLinkButton() : this.renderButton();\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAO3D,MAAM,OAAgB,sBAAuB,SAAQ,YAAY,CAC/D,iBAAiB,CAA6C,UAAU,CAAC,CAC1E;IAFD;;QAsCS,aAAQ,GAAG,KAAK,CAAC;IAmF1B,CAAC;IAjFC,IAAoB,SAAS,CAAC,KAAa;QACzC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YACnC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAGD,IAAoB,SAAS;QAC3B,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAIe,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIe,IAAI;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;IAED,IAAc,OAAO;QACnB,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA;;;qBAGM,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;gBACjB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;eACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAA;;;;eAIA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;mBACpB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;cAC7B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBACnC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;gBAC9B,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;iBACrB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAIkB,MAAM;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QACrC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC9D,CAAC;CACF;AArHC;IADC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;6DACO;AASpC;IAFC,aAAa,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE;oDACiC;AAI5C;IADC,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;wDACc;AAIzB;IADC,QAAQ,EAAE;sDACyD;AAOpE;IADC,QAAQ,EAAE;mDACS;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACnB;AAaxB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;uDAGrC;AAID;IADC,aAAa,CAAC,gBAAgB,CAAC;mDAG/B;AAID;IADC,aAAa,CAAC,eAAe,CAAC;kDAG9B","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { alternateName } from '../common/decorators';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\n\nexport interface IgcButtonEventMap {\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\nexport abstract class IgcButtonBaseComponent extends SizableMixin(\n  EventEmitterMixin<IgcButtonEventMap, Constructor<LitElement>>(LitElement)\n) {\n  @query('[part=\"base\"]', true)\n  private nativeElement!: HTMLElement;\n\n  private _ariaLabel!: string;\n\n  /**\n   * The type of the button. Defaults to undefined.\n   */\n  @alternateName('displayType')\n  @property()\n  public type!: 'button' | 'reset' | 'submit';\n\n  /** The URL the button points to. */\n  @property()\n  public href!: string;\n\n  /** Prompts to save the linked URL instead of navigating to it. */\n  @property()\n  public download!: string;\n\n  /** Where to display the linked URL, as the name for a browsing context. */\n  @property()\n  public target!: '_blank' | '_parent' | '_self' | '_top' | undefined;\n\n  /**\n   * The relationship of the linked URL.\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n   */\n  @property()\n  public rel!: string;\n\n  /**\n   * Determines whether the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  public override set ariaLabel(value: string) {\n    const oldVal = this._ariaLabel;\n    this._ariaLabel = value;\n\n    if (this.hasAttribute('aria-label')) {\n      this.removeAttribute('aria-label');\n    }\n    this.requestUpdate('ariaLabel', oldVal);\n  }\n\n  @property({ attribute: 'aria-label' })\n  public override get ariaLabel() {\n    return this._ariaLabel;\n  }\n\n  /** Sets focus in the button. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.nativeElement.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.nativeElement.blur();\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected get classes() {\n    return {};\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        part=\"base\"\n        aria-label=${ifDefined(this.ariaLabel)}\n        .disabled=${this.disabled}\n        class=${classMap(this.classes)}\n        type=${ifDefined(this.type)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  private renderLinkButton() {\n    return html`\n      <a\n        part=\"base\"\n        role=\"button\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=${ifDefined(this.ariaLabel)}\n        class=${classMap(this.classes)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </a>\n    `;\n  }\n\n  protected abstract renderContent(): TemplateResult;\n\n  protected override render() {\n    const link = this.href !== undefined;\n    return link ? this.renderLinkButton() : this.renderButton();\n  }\n}\n"]}

package/components/button/button.d.ts

@@ -1,7 +1,25 @@
 import { IgcButtonBaseComponent } from './button-base.js';
+/**
+ * Represents a clickable button, used to submit forms or anywhere in a
+ * document for accessible, standard button functionality.
+ *
+ * @element igc-button
+ *
+ * @slot - Renders the label of the button.
+ * @slot prefix - Renders content before the label of the button.
+ * @slot suffix - Renders content after the label of the button.
+ *
+ * @fires igcFocus - Emitted when the button gains focus.
+ * @fires igcBlur - Emitted when the button loses focus.
+ *
+ * @csspart base - The native button element.
+ * @csspart prefix - The prefix container.
+ * @csspart suffix - The suffix container.
+ */
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
-    static tagName: string;
+    static readonly tagName = "igc-button";
     static styles: import("lit").CSSResult[];
+    /** Sets the variant of the button. */
     variant: 'flat' | 'contained' | 'outlined' | 'fab';
     constructor();
     protected get classes(): {
@@ -14,11 +32,10 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
         large: boolean;
         disabled: boolean;
     };
-    protected renderContent(): import("lit").TemplateResult<1>;
+    protected renderContent(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-button': IgcButtonComponent;
     }
 }
-//# sourceMappingURL=button.d.ts.map

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAmB/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;IAapE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAc,OAAO;QACnB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAzCa,0BAAO,GAAG,YAAY,CAAC;AAKvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './button.material.css';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  /** @private */\n  public static tagName = 'igc-button';\n\n  /**\n   * @private\n   */\n  public static styles = [styles];\n\n  /** Sets the variant of the button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <span part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <slot></slot>\n      <span part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAmB/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;IASpE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAuB,OAAO;QAC5B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAtCsB,0BAAO,GAAG,YAAY,CAAC;AAEhC,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './button.material.css';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n\n  public static styles = [styles];\n\n  /** Sets the variant of the button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected override get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <span part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <slot></slot>\n      <span part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}

package/components/button/button.material.css.d.ts

@@ -1,2 +1 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=button.material.css.d.ts.map

package/components/button/button.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:"";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flat,.outlined{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:transparent}.flat.disabled,.disabled.outlined{background:transparent}.flat::before,.outlined::before{opacity:0}.flat:hover:not(.disabled)::before,.outlined:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.flat:focus:not(.disabled)::before,.outlined:focus:not(.disabled)::before,.flat:active:not(.disabled)::before,.outlined:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.contained,.fab{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.contained::before,.fab::before{opacity:0}.contained:hover:not(.disabled),.fab:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.contained:hover:not(.disabled)::before,.fab:hover:not(.disabled)::before{background:#fff;opacity:.12}.contained:focus:not(.disabled),.fab:focus:not(.disabled),.contained:active:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.contained:focus:not(.disabled)::before,.fab:focus:not(.disabled)::before,.contained:active:not(.disabled)::before,.fab:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:"";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.outlined,.flat{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:transparent}.disabled.outlined,.disabled.flat{background:transparent}.outlined::before,.flat::before{opacity:0}.outlined:hover:not(.disabled)::before,.flat:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.outlined:focus:not(.disabled)::before,.flat:focus:not(.disabled)::before,.outlined:active:not(.disabled)::before,.flat:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.fab,.contained{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.fab::before,.contained::before{opacity:0}.fab:hover:not(.disabled),.contained:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.fab:hover:not(.disabled)::before,.contained:hover:not(.disabled)::before{background:#fff;opacity:.12}.fab:focus:not(.disabled),.contained:focus:not(.disabled),.fab:active:not(.disabled),.contained:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.fab:focus:not(.disabled)::before,.contained:focus:not(.disabled)::before,.fab:active:not(.disabled)::before,.contained:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;
 //# sourceMappingURL=button.material.css.js.map

package/components/button/button.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.material.css.js","sourceRoot":"","sources":["../../../src/components/button/button.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,sgJAAsgJ,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:\"\";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flat,.outlined{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:transparent}.flat.disabled,.disabled.outlined{background:transparent}.flat::before,.outlined::before{opacity:0}.flat:hover:not(.disabled)::before,.outlined:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.flat:focus:not(.disabled)::before,.outlined:focus:not(.disabled)::before,.flat:active:not(.disabled)::before,.outlined:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.contained,.fab{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.contained::before,.fab::before{opacity:0}.contained:hover:not(.disabled),.fab:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.contained:hover:not(.disabled)::before,.fab:hover:not(.disabled)::before{background:#fff;opacity:.12}.contained:focus:not(.disabled),.fab:focus:not(.disabled),.contained:active:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.contained:focus:not(.disabled)::before,.fab:focus:not(.disabled)::before,.contained:active:not(.disabled)::before,.fab:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;\n"]}
+{"version":3,"file":"button.material.css.js","sourceRoot":"","sources":["../../../src/components/button/button.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,s0JAAs0J,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);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:\"\";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.outlined,.flat{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:transparent}.disabled.outlined,.disabled.flat{background:transparent}.outlined::before,.flat::before{opacity:0}.outlined:hover:not(.disabled)::before,.flat:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.outlined:focus:not(.disabled)::before,.flat:focus:not(.disabled)::before,.outlined:active:not(.disabled)::before,.flat:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.fab,.contained{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.fab::before,.contained::before{opacity:0}.fab:hover:not(.disabled),.contained:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.fab:hover:not(.disabled)::before,.contained:hover:not(.disabled)::before{background:#fff;opacity:.12}.fab:focus:not(.disabled),.contained:focus:not(.disabled),.fab:active:not(.disabled),.contained:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.fab:focus:not(.disabled)::before,.contained:focus:not(.disabled)::before,.fab:active:not(.disabled)::before,.contained:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;\n"]}

package/components/button/icon-button.d.ts

@@ -1,17 +1,28 @@
 import { IgcButtonBaseComponent } from './button-base.js';
 import '../icon/icon';
+/**
+ * @element igc-icon-button
+ *
+ * @csspart base - The wrapping element.
+ * @csspart icon - The icon element.
+ */
 export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
-    static tagName: string;
+    static readonly tagName = "igc-icon-button";
     static styles: import("lit").CSSResult[];
+    /** The name of the icon. */
     name: string;
+    /** The name of the icon collection. */
     collection: string;
+    /** Whether to flip the icon button. Useful for RTL layouts. */
     mirrored: boolean;
+    /** The visual variant of the icon button. */
     variant: 'flat' | 'contained' | 'outlined';
-    protected renderContent(): import("lit").TemplateResult<1>;
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    protected registerIcon(name: string, url: string, collection?: string): Promise<void>;
+    protected registerIconFromText(name: string, iconText: string, collection?: string): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-icon-button': IgcIconButtonComponent;
     }
 }
-//# sourceMappingURL=icon-button.d.ts.map

package/components/button/icon-button.js

@@ -10,6 +10,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './icon-button.material.css';
 import '../icon/icon';
+import { alternateName, blazorInclude } from '../common/decorators';
+import { registerIcon as registerIcon_impl, registerIconFromText as registerIconFromText_impl, } from '../icon/icon.registry.js';
 export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
     constructor() {
         super(...arguments);
@@ -23,16 +25,22 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
         name=${ifDefined(this.name)}
         collection=${ifDefined(this.collection)}
         .mirrored=${this.mirrored}
-        variant=${this.variant}
         size=${ifDefined(this.size)}
         aria-hidden="true"
       ></igc-icon>
     `;
     }
+    async registerIcon(name, url, collection = 'default') {
+        await registerIcon_impl(name, url, collection);
+    }
+    registerIconFromText(name, iconText, collection = 'default') {
+        registerIconFromText_impl(name, iconText, collection);
+    }
 }
 IgcIconButtonComponent.tagName = 'igc-icon-button';
 IgcIconButtonComponent.styles = [styles];
 __decorate([
+    alternateName('iconName'),
     property()
 ], IgcIconButtonComponent.prototype, "name", void 0);
 __decorate([
@@ -44,4 +52,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcIconButtonComponent.prototype, "variant", void 0);
+__decorate([
+    blazorInclude()
+], IgcIconButtonComponent.prototype, "registerIcon", null);
+__decorate([
+    blazorInclude()
+], IgcIconButtonComponent.prototype, "registerIconFromText", null);
 //# sourceMappingURL=icon-button.js.map

package/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,cAAc,CAAC;AAQtB,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,sBAAsB;IAA1E;;QAiBS,aAAQ,GAAG,KAAK,CAAC;QAIjB,YAAO,GAAsC,WAAW,CAAC;IAelE,CAAC;IAbW,aAAa;QACrB,OAAO,IAAI,CAAA;;;eAGA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;qBACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;oBAC3B,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,OAAO;eACf,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAG9B,CAAC;IACJ,CAAC;;AAjCa,8BAAO,GAAG,iBAAiB,CAAC;AAG5B,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;0DACgB;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './icon-button.material.css';\nimport '../icon/icon';\n\n/**\n * @element igc-icon-button\n *\n * @csspart base - The wrapping element.\n * @csspart icon - The icon element.\n */\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  /** @private */\n  public static tagName = 'igc-icon-button';\n\n  /** @private */\n  public static styles = [styles];\n\n  /** The name of the icon. */\n  @property()\n  public name!: string;\n\n  /** The name of the icon collection. */\n  @property()\n  public collection!: string;\n\n  /** Whether to flip the icon button. Useful for RTL layouts. */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /** The visual variant of the icon button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' = 'contained';\n\n  protected renderContent() {\n    return html`\n      <igc-icon\n        part=\"icon\"\n        name=${ifDefined(this.name)}\n        collection=${ifDefined(this.collection)}\n        .mirrored=${this.mirrored}\n        variant=${this.variant}\n        size=${ifDefined(this.size)}\n        aria-hidden=\"true\"\n      ></igc-icon>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,oBAAoB,IAAI,yBAAyB,GAClD,MAAM,0BAA0B,CAAC;AAQlC,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,sBAAsB;IAA1E;;QAgBS,aAAQ,GAAG,KAAK,CAAC;QAIjB,YAAO,GAAsC,WAAW,CAAC;IAgClE,CAAC;IA9BW,aAAa;QACrB,OAAO,IAAI,CAAA;;;eAGA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;qBACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;oBAC3B,IAAI,CAAC,QAAQ;eAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAG9B,CAAC;IACJ,CAAC;IAGS,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,GAAW,EACX,UAAU,GAAG,SAAS;QAEtB,MAAM,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAGS,oBAAoB,CAC5B,IAAY,EACZ,QAAgB,EAChB,UAAU,GAAG,SAAS;QAEtB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACxD,CAAC;;AAlDsB,8BAAO,GAAG,iBAAiB,CAAC;AAErC,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAKhC;IAFC,aAAa,CAAC,UAAU,CAAC;IACzB,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;0DACgB;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC;AAgBhE;IADC,aAAa,EAAE;0DAOf;AAGD;IADC,aAAa,EAAE;kEAOf","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './icon-button.material.css';\nimport '../icon/icon';\nimport { alternateName, blazorInclude } from '../common/decorators';\nimport {\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n} from '../icon/icon.registry.js';\n\n/**\n * @element igc-icon-button\n *\n * @csspart base - The wrapping element.\n * @csspart icon - The icon element.\n */\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-icon-button';\n\n  public static styles = [styles];\n\n  /** The name of the icon. */\n  @alternateName('iconName')\n  @property()\n  public name!: string;\n\n  /** The name of the icon collection. */\n  @property()\n  public collection!: string;\n\n  /** Whether to flip the icon button. Useful for RTL layouts. */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /** The visual variant of the icon button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' = 'contained';\n\n  protected renderContent() {\n    return html`\n      <igc-icon\n        part=\"icon\"\n        name=${ifDefined(this.name)}\n        collection=${ifDefined(this.collection)}\n        .mirrored=${this.mirrored}\n        size=${ifDefined(this.size)}\n        aria-hidden=\"true\"\n      ></igc-icon>\n    `;\n  }\n\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}

package/components/button/icon-button.material.css.d.ts

@@ -1,2 +1 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=icon-button.material.css.d.ts.map

package/components/button/icon-button.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}[part=base]{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;border:none;outline-style:none;background:transparent;padding:0;color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:50%;-webkit-transition:background .15s ease-out,-webkit-box-shadow .2s ease-in;transition:background .15s ease-out,-webkit-box-shadow .2s ease-in;-o-transition:box-shadow .2s ease-in,background .15s ease-out;transition:box-shadow .2s ease-in,background .15s ease-out;transition:box-shadow .2s ease-in,background .15s ease-out,-webkit-box-shadow .2s ease-in;-webkit-transition-delay:.05s;-o-transition-delay:.05s;transition-delay:.05s}:host([size=small]) [part=icon]{--size: 1rem}:host([size=small]) [part=base]{padding:calc(var(--igc-spacing-small)*2)}:host([size=medium]) [part=icon]{--size: 1.25rem}:host([size=medium]) [part=base]{padding:calc(var(--igc-spacing-medium)*1.5)}:host([size=large]) [part=icon]{--size: 1.5rem}:host([size=large]) [part=base]{padding:var(--igc-spacing-large)}:host([variant=contained]) [part=base]{background:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([variant=outlined]) [part=base]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:focus-within) [part=base]{-webkit-transition:none;-o-transition:none;transition:none;background:hsla(var(--igc-gray-200), var(--igc-gray-a));-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-400), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([variant=contained]:focus-within) [part=base]{background:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]){pointer-events:none}:host([disabled]) [part=base]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host([disabled][variant=contained]){pointer-events:none}:host([disabled][variant=contained]) [part=base]{background:hsla(var(--igc-gray-100), var(--igc-gray-a))}:host([disabled][variant=outlined]){pointer-events:none}:host([disabled][variant=outlined]) [part=base]{background:hsla(var(--igc-gray-100), var(--igc-gray-a));-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-100), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-100), 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);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}[part=base]{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;border:none;outline-style:none;background:transparent;padding:0;color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:50%;-webkit-transition:background .15s ease-out,-webkit-box-shadow .2s ease-in;transition:background .15s ease-out,-webkit-box-shadow .2s ease-in;-o-transition:box-shadow .2s ease-in,background .15s ease-out;transition:box-shadow .2s ease-in,background .15s ease-out;transition:box-shadow .2s ease-in,background .15s ease-out,-webkit-box-shadow .2s ease-in;-webkit-transition-delay:.05s;-o-transition-delay:.05s;transition-delay:.05s}:host([size=small]) [part=icon]{--size: 1rem}:host([size=small]) [part=base]{padding:calc(var(--igc-spacing-small)*2)}:host([size=medium]) [part=icon]{--size: 1.25rem}:host([size=medium]) [part=base]{padding:calc(var(--igc-spacing-medium)*1.5)}:host([size=large]) [part=icon]{--size: 1.5rem}:host([size=large]) [part=base]{padding:var(--igc-spacing-large)}:host([variant=contained]) [part=base]{background:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([variant=outlined]) [part=base]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:focus-within) [part=base]{-webkit-transition:none;-o-transition:none;transition:none;background:hsla(var(--igc-gray-200), var(--igc-gray-a));-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-400), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([variant=contained]:focus-within) [part=base]{background:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]){pointer-events:none}:host([disabled]) [part=base]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}:host([disabled][variant=contained]){pointer-events:none}:host([disabled][variant=contained]) [part=base]{background:hsla(var(--igc-gray-100), var(--igc-gray-a))}:host([disabled][variant=outlined]){pointer-events:none}:host([disabled][variant=outlined]) [part=base]{background:hsla(var(--igc-gray-100), var(--igc-gray-a));-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-100), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-100), var(--igc-gray-a))}`;
 //# sourceMappingURL=icon-button.material.css.js.map