igniteui-webcomponents 1.0.0-beta.2 → 2.0.0-beta.0

package/CHANGELOG.md

@@ -1,6 +1,45 @@
-# 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
+
+### 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`.
+
+## 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

@@ -2,18 +2,63 @@
 
 [![Node.js CI](https://github.com/IgniteUI/igniteui-webcomponents/workflows/Node.js%20CI/badge.svg)](https://github.com/IgniteUI/igniteui-webcomponents/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-webcomponents/badge.svg)](https://coveralls.io/github/IgniteUI/igniteui-webcomponents)
+[![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
 
-TODO:
+In order to use the Ignite UI Web Components in your application you should install the `igniteui-webcomponents` package:
 
+```
+npm install igniteui-webcomponents
+```
+
+Next you will need to import the components that you want to use. You could import one or more components using the `defineComponents` function like this:
+
+```ts
+import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcAvatarComponent, IgcBadgeComponent);
+```
+
+You could also import all of the components using the `defineAllComponents` function:
+
+```ts
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+Please note that importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.
+
+After the components are imported you could use them in your html:
+
+```html
+<igc-avatar initials="AZ"></igc-avatar>
+<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
 
-From the root folder run:
+In order to run the repository locally from the root folder run:
 
 ```
 npm install

package/components/avatar/avatar.d.ts

@@ -1,16 +1,36 @@
 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 {
+    /** @private */
     static tagName: string;
+    /** @private */
     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 render(): import("lit").TemplateResult<1>;
+    protected handleErrorState(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,4 +38,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=avatar.d.ts.map

package/components/avatar/avatar.js

@@ -8,6 +8,7 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../common/decorators/watch.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
 import { styles } from './avatar.material.css';
 export default class IgcAvatarComponent extends SizableMixin(LitElement) {
@@ -28,6 +29,9 @@ export default class IgcAvatarComponent extends SizableMixin(LitElement) {
             large: size === 'large',
         };
     }
+    handleErrorState() {
+        this.hasError = false;
+    }
     render() {
         return html `
       <div
@@ -71,4 +75,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcAvatarComponent.prototype, "shape", void 0);
+__decorate([
+    watch('src')
+], IgcAvatarComponent.prototype, "handleErrorState", null);
 //# sourceMappingURL=avatar.js.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,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;IAOS,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;;AAlEa,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","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 { 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  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\n// export const avatarDefinition: IgcComponentDefinition = {\n//   tag: 'igc-avatar',\n//   component: IgcAvatarComponent,\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;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"]}

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,16 +1,29 @@
 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 {
+    /** @private */
     static tagName: string;
+    /** @private */
     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';
-    private get classes();
-    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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './badge.material.css';
 export default class IgcBadgeComponent extends LitElement {
     constructor() {
@@ -15,27 +14,9 @@ export default class IgcBadgeComponent extends LitElement {
         this.outlined = false;
         this.shape = 'rounded';
     }
-    get classes() {
-        const { shape, variant } = this;
-        return {
-            primary: variant === 'primary',
-            info: variant === 'info',
-            success: variant === 'success',
-            warning: variant === 'warning',
-            danger: variant === 'danger',
-            rounded: shape === 'rounded',
-            square: shape === 'square',
-            outlined: this.outlined,
-        };
-    }
     render() {
         return html `
-      <span
-        part="base"
-        class=${classMap(this.classes)}
-        role="img"
-        aria-label="badge"
-      >
+      <span part="base" role="img" aria-label="badge">
         <slot></slot>
       </span>
     `;

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,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,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;IA6BlD,CAAC;IA3BC,IAAY,OAAO;QACjB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEhC,OAAO;YACL,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,MAAM,EAAE,OAAO,KAAK,QAAQ;YAC5B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAMjC,CAAC;IACJ,CAAC;;AA5Ca,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 { classMap } from 'lit/directives/class-map.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  private get classes() {\n    const { shape, variant } = this;\n\n    return {\n      primary: variant === 'primary',\n      info: variant === 'info',\n      success: variant === 'success',\n      warning: variant === 'warning',\n      danger: variant === 'danger',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      outlined: this.outlined,\n    };\n  }\n\n  protected render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap(this.classes)}\n        role=\"img\"\n        aria-label=\"badge\"\n      >\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;;QASS,YAAO,GACZ,SAAS,CAAC;QAIL,aAAQ,GAAG,KAAK,CAAC;QAIjB,UAAK,GAAyB,SAAS,CAAC;IASjD,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;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  /** @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\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}span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:.75rem;min-height:.75rem;max-height:1.5rem;font-size:1rem;-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)}:host(:not(:empty)) span{padding:.25rem .5rem;min-width:1.5rem}.rounded{border-radius:.75rem}.square{border-radius:0}.primary{background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}.info{background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}.success{background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}.warning{background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}.danger{background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}.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,25CAA25C,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}span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:.75rem;min-height:.75rem;max-height:1.5rem;font-size:1rem;-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)}:host(:not(:empty)) span{padding:.25rem .5rem;min-width:1.5rem}.rounded{border-radius:.75rem}.square{border-radius:0}.primary{background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}.info{background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}.success{background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}.warning{background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}.danger{background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}.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

@@ -6,14 +6,38 @@ 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
+     */
     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);
+    /**
+     * The aria label of the button.
+     */
+    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 +48,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;;QAyCS,aAAQ,GAAG,KAAK,CAAC;IAsF1B,CAAC;IApFC,IAAW,SAAS,CAAC,KAAa;QAChC,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;IAMD,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAIM,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;;;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;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;AAxHC;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;AAgBxB;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  /**\n   * @private\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 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  /**\n   * The aria label of the button.\n   */\n  @property({ attribute: 'aria-label' })\n  public get ariaLabel() {\n    return this._ariaLabel;\n  }\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        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 render() {\n    const link = this.href !== undefined;\n    return link ? this.renderLinkButton() : this.renderButton();\n  }\n}\n"]}

package/components/button/button.d.ts

@@ -1,8 +1,31 @@
 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 {
+    /** @private */
     static tagName: string;
+    /**
+     * @private
+     */
     static styles: import("lit").CSSResult[];
+    /** Sets the variant of the button. */
     variant: 'flat' | 'contained' | 'outlined' | 'fab';
+    constructor();
     protected get classes(): {
         flat: boolean;
         outlined: boolean;
@@ -13,11 +36,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

@@ -10,8 +10,9 @@ import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './button.material.css';
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
     constructor() {
-        super(...arguments);
-        this.variant = 'flat';
+        super();
+        this.variant = 'contained';
+        this.size = 'medium';
     }
     get classes() {
         const { size, variant } = this;

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;IAAtE;;QAWS,YAAO,GAA8C,MAAM,CAAC;IA4BrE,CAAC;IA1BC,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;;AApCa,0BAAO,GAAG,YAAY,CAAC;AAKvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACuC","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' = 'flat';\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;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"]}

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{background:transparent;color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.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,68IAA68I,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{background:transparent;color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.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"]}