igniteui-webcomponents 1.0.0-beta.3 → 2.0.0-beta.1

package/components/nav-drawer/nav-drawer.js

@@ -6,10 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter';
 import { partNameMap } from '../common/util';
 import { styles } from './nav-drawer.material.css';
-export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement) {
+export default class IgcNavDrawerComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.position = 'start';
@@ -19,21 +18,13 @@ export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement)
         if (this.open) {
             return;
         }
-        if (!this.handleOpening()) {
-            return;
-        }
         this.open = true;
-        this.emitEvent('igcOpened');
     }
     hide() {
         if (!this.open) {
             return;
         }
-        if (!this.handleClosing()) {
-            return;
-        }
         this.open = false;
-        this.emitEvent('igcClosed');
     }
     toggle() {
         if (this.open) {
@@ -43,30 +34,6 @@ export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement)
             this.show();
         }
     }
-    handleOpening() {
-        const args = {
-            detail: { cancel: false },
-            cancelable: true,
-        };
-        this.emitEvent('igcOpening', args);
-        if (args.detail.cancel) {
-            this.open = false;
-            return false;
-        }
-        return true;
-    }
-    handleClosing() {
-        const args = {
-            detail: { cancel: false },
-            cancelable: true,
-        };
-        this.emitEvent('igcClosing', args);
-        if (args.detail.cancel) {
-            this.open = true;
-            return false;
-        }
-        return true;
-    }
     resolvePartNames(base) {
         const mini = document.querySelector('div[slot="mini"]');
         const hasChildren = mini !== null && mini.children.length > 0;

package/components/nav-drawer/nav-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter';\nimport { partNameMap } from '../common/util';\nimport { styles } from './nav-drawer.material.css';\n\nexport interface IgcNavDrawerEventMap {\n  igcOpening: CustomEvent<any>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<any>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * Represents a side navigation container that provides\n * quick access between views.\n *\n * @element igc-nav-drawer\n *\n * @slot - The default slot for the drawer.\n * @slot mini - The slot for the mini variant of the drawer.\n *\n * @fires igcOpening - Emitted when the navigation drawer is about to open.\n * @fires igcOpened - Emitted when the navigation drawer is opened.\n * @fires igcClosing - Emitted when the navigation drawer is about to close.\n * @fires igcClosed - Emitted when the navigation drawer is closed.\n *\n * @csspart base - The base wrapper of the navigation drawer.\n * @csspart main - The main container.\n * @csspart mini - The mini container.\n */\nexport default class IgcNavDrawerComponent extends EventEmitterMixin<\n  IgcNavDrawerEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-nav-drawer';\n\n  /** @private */\n  public static styles = [styles];\n\n  /** The position of the drawer. */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' = 'start';\n\n  /** Determines whether the drawer is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Opens the drawer. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    if (!this.handleOpening()) {\n      return;\n    }\n\n    this.open = true;\n    this.emitEvent('igcOpened');\n  }\n\n  /** Closes the drawer. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this.handleClosing()) {\n      return;\n    }\n\n    this.open = false;\n    this.emitEvent('igcClosed');\n  }\n\n  /** Toggles the open state of the drawer. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private handleOpening() {\n    const args = {\n      detail: { cancel: false },\n      cancelable: true,\n    };\n    this.emitEvent('igcOpening', args);\n\n    if (args.detail.cancel) {\n      this.open = false;\n      return false;\n    }\n\n    return true;\n  }\n\n  private handleClosing() {\n    const args = {\n      detail: { cancel: false },\n      cancelable: true,\n    };\n    this.emitEvent('igcClosing', args);\n\n    if (args.detail.cancel) {\n      this.open = true;\n      return false;\n    }\n\n    return true;\n  }\n\n  private resolvePartNames(base: string) {\n    const mini = document.querySelector('div[slot=\"mini\"]');\n    const hasChildren = mini !== null && mini.children.length > 0;\n\n    return {\n      [base]: true,\n      hidden: !hasChildren,\n    };\n  }\n\n  protected render() {\n    return html` <div part=\"base\">\n      <div part=\"main\">\n        <slot></slot>\n      </div>\n\n      <div part=\"${partNameMap(this.resolvePartNames('mini'))}\">\n        <slot name=\"mini\"></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}
+{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAenD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;IAA7D;;QAOS,aAAQ,GAAuC,OAAO,CAAC;QAIvD,SAAI,GAAG,KAAK,CAAC;IAkDtB,CAAC;IA/CQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAY;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9D,OAAO;YACL,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,MAAM,EAAE,CAAC,WAAW;SACrB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;mBAKI,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;WAGlD,CAAC;IACV,CAAC;;AA3DsB,6BAAO,GAAG,gBAAgB,CAAC;AAE3B,4BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIzC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACkC;AAI9D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { partNameMap } from '../common/util';\nimport { styles } from './nav-drawer.material.css';\n\n/**\n * Represents a side navigation container that provides\n * quick access between views.\n *\n * @element igc-nav-drawer\n *\n * @slot - The default slot for the drawer.\n * @slot mini - The slot for the mini variant of the drawer.\n *\n * @csspart base - The base wrapper of the navigation drawer.\n * @csspart main - The main container.\n * @csspart mini - The mini container.\n */\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n\n  public static override styles = [styles];\n\n  /** The position of the drawer. */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' = 'start';\n\n  /** Determines whether the drawer is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Opens the drawer. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n  }\n\n  /** Closes the drawer. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Toggles the open state of the drawer. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private resolvePartNames(base: string) {\n    const mini = document.querySelector('div[slot=\"mini\"]');\n    const hasChildren = mini !== null && mini.children.length > 0;\n\n    return {\n      [base]: true,\n      hidden: !hasChildren,\n    };\n  }\n\n  protected override render() {\n    return html` <div part=\"base\">\n      <div part=\"main\">\n        <slot></slot>\n      </div>\n\n      <div part=\"${partNameMap(this.resolvePartNames('mini'))}\">\n        <slot name=\"mini\"></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}

package/components/nav-drawer/nav-drawer.material.css.d.ts

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

package/components/nav-drawer/nav-drawer.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{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;
+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{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;
 //# sourceMappingURL=nav-drawer.material.css.js.map

package/components/nav-drawer/nav-drawer.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8wDAA8wD,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{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;\n"]}
+{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8kEAA8kE,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{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;\n"]}

package/components/navbar/navbar.d.ts

@@ -1,12 +1,26 @@
 import { LitElement } from 'lit';
+/**
+ * A navigation bar component is used to facilitate navigation through
+ * a series of hierarchical screens within an app.
+ *
+ * @element igc-navbar
+ *
+ * @slot - Renders a title inside the default slot.
+ * @slot start - Renders left aligned icons.
+ * @slot end - Renders right aligned action icons.
+ *
+ * @csspart base - The base wrapper of the navigation bar.
+ * @csspart start - The left aligned icon container.
+ * @csspart middle - The navigation bar title container.
+ * @csspart end - The right aligned action icons container.
+ */
 export default class IgcNavbarComponent extends LitElement {
-    static tagName: string;
+    static readonly tagName = "igc-navbar";
     static styles: import("lit").CSSResult[];
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-navbar': IgcNavbarComponent;
     }
 }
-//# sourceMappingURL=navbar.d.ts.map

package/components/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAiB/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAO9C,MAAM;QACd,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AAnBa,0BAAO,GAAG,YAAY,CAAC;AAGvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './navbar.material.css';\n\n/**\n * A navigation bar component is used to facilitate navigation through\n * a series of hierarchical screens within an app.\n *\n * @element igc-navbar\n *\n * @slot - Renders a title inside the default slot.\n * @slot start - Renders left aligned icons.\n * @slot end - Renders right aligned action icons.\n *\n * @csspart base - The base wrapper of the navigation bar.\n * @csspart start - The left aligned icon container.\n * @csspart middle - The navigation bar title container.\n * @csspart end - The right aligned action icons container.\n */\nexport default class IgcNavbarComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-navbar';\n\n  /** @private */\n  public static styles = [styles];\n\n  protected render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"start\">\n          <slot name=\"start\"></slot>\n        </span>\n        <span part=\"middle\">\n          <slot></slot>\n        </span>\n        <span part=\"end\">\n          <slot name=\"end\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-navbar': IgcNavbarComponent;\n  }\n}\n"]}
+{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAiB/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAKrC,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AAlBsB,0BAAO,GAAG,YAAY,CAAC;AAEvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './navbar.material.css';\n\n/**\n * A navigation bar component is used to facilitate navigation through\n * a series of hierarchical screens within an app.\n *\n * @element igc-navbar\n *\n * @slot - Renders a title inside the default slot.\n * @slot start - Renders left aligned icons.\n * @slot end - Renders right aligned action icons.\n *\n * @csspart base - The base wrapper of the navigation bar.\n * @csspart start - The left aligned icon container.\n * @csspart middle - The navigation bar title container.\n * @csspart end - The right aligned action icons container.\n */\nexport default class IgcNavbarComponent extends LitElement {\n  public static readonly tagName = 'igc-navbar';\n\n  public static override styles = [styles];\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"start\">\n          <slot name=\"start\"></slot>\n        </span>\n        <span part=\"middle\">\n          <slot></slot>\n        </span>\n        <span part=\"end\">\n          <slot name=\"end\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-navbar': IgcNavbarComponent;\n  }\n}\n"]}

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

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

package/components/navbar/navbar.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-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-margin-start:1rem;margin-inline-start:1rem}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-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}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-500-contrast)}`;
+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-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-600-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-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}[name=start]::slotted(*){-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:.0625rem;margin-inline-start:.0625rem}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:.0625rem;margin-inline-end:.0625rem}::slotted(igc-input[part=helper-text]){margin-top:0 !important}::slotted(igc-avatar[part=base]){max-width:2rem;max-height:2rem;min-height:0;min-width:0}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-600-contrast);width:2rem;height:2rem;font-size:2rem}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;
 //# sourceMappingURL=navbar.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2kDAA2kD,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-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-margin-start:1rem;margin-inline-start:1rem}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-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}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-500-contrast)}`;\n"]}
+{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ylFAAylF,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-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-600-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-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}[name=start]::slotted(*){-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:.0625rem;margin-inline-start:.0625rem}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:.0625rem;margin-inline-end:.0625rem}::slotted(igc-input[part=helper-text]){margin-top:0 !important}::slotted(igc-avatar[part=base]){max-width:2rem;max-height:2rem;min-height:0;min-width:0}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-600-contrast);width:2rem;height:2rem;font-size:2rem}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;\n"]}

package/components/radio/radio.d.ts

@@ -6,24 +6,54 @@ export interface IgcRadioEventMap {
     igcBlur: CustomEvent<void>;
 }
 declare const IgcRadioComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRadioEventMap>> & Constructor<LitElement>;
+/**
+ * @element igc-radio
+ *
+ * @slot - The radio label.
+ *
+ * @fires igcChange - Emitted when the control's checked state changes.
+ * @fires igcFocus - Emitted when the control gains focus.
+ * @fires igcBlur - Emitted when the control loses focus.
+ *
+ * @csspart base - The radio control base wrapper.
+ * @csspart control - The radio control.
+ * @csspart label - The radio control label.
+ */
 export default class IgcRadioComponent extends IgcRadioComponent_base {
-    static tagName: string;
+    static readonly tagName = "igc-radio";
     static styles: import("lit").CSSResult;
     private inputId;
     private labelId;
     protected input: HTMLInputElement;
     private _tabIndex;
+    /** The name attribute of the control. */
     name: string;
+    /** The value attribute of the control. */
     value: string;
+    /** Makes the control a required field. */
+    required: boolean;
+    /** The checked state of the control. */
     checked: boolean;
+    /** Disables the radio control. */
     disabled: boolean;
+    /** Controls the validity of the control. */
     invalid: boolean;
+    /** The label position of the radio control. */
     labelPosition: 'before' | 'after';
+    /** Sets the aria-labelledby attribute for the radio control. */
     ariaLabelledby: string;
+    /** Simulates a click on the radio control. */
     click(): void;
+    /** Sets focus on the radio control. */
     focus(options?: FocusOptions): void;
+    /** Removes focus from the radio control. */
     blur(): void;
+    /** Checks for validity of the control and shows the browser message if it invalid. */
     reportValidity(): void;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
     setCustomValidity(message: string): void;
     protected handleMouseDown(event: MouseEvent): void;
     protected handleClick(): void;
@@ -31,7 +61,8 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
     protected handleFocus(): void;
     protected handleChange(): void;
     protected getSiblings(): IgcRadioComponent[];
-    protected render(): import("lit").TemplateResult<1>;
+    protected getAllInGroup(): IgcRadioComponent[];
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -39,4 +70,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=radio.d.ts.map

package/components/radio/radio.js

@@ -19,6 +19,7 @@ export default class IgcRadioComponent extends EventEmitterMixin(LitElement) {
         this.inputId = `radio-${nextId++}`;
         this.labelId = `radio-label-${this.inputId}`;
         this._tabIndex = 0;
+        this.required = false;
         this.checked = false;
         this.disabled = false;
         this.invalid = false;
@@ -63,12 +64,21 @@ export default class IgcRadioComponent extends EventEmitterMixin(LitElement) {
             this._tabIndex = 0;
             this.emitEvent('igcChange', { detail: this.checked });
         }
+        else {
+            if (this.required) {
+                this.required = false;
+                this.getAllInGroup()[0].required = true;
+            }
+        }
     }
     getSiblings() {
+        return this.getAllInGroup().filter((radio) => radio.name === this.name && radio !== this);
+    }
+    getAllInGroup() {
         const group = this.closest('igc-radio-group');
         if (!group)
             return [];
-        return Array.from(group.querySelectorAll('igc-radio')).filter((radio) => radio.name === this.name && radio !== this);
+        return Array.from(group.querySelectorAll('igc-radio'));
     }
     render() {
         return html `
@@ -82,6 +92,7 @@ export default class IgcRadioComponent extends EventEmitterMixin(LitElement) {
           type="radio"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
+          .required="${this.required}"
           .disabled="${this.disabled}"
           .checked="${live(this.checked)}"
           tabindex=${this._tabIndex}
@@ -121,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], IgcRadioComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcRadioComponent.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
     blazorTwoWayBind('igcChange', 'detail')

package/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './radio.material.css';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { alternateName, watch, blazorTwoWayBind } from '../common/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { partNameMap } from '../common/util.js';\n\nlet nextId = 0;\n\nexport interface IgcRadioEventMap {\n  igcChange: CustomEvent<boolean>;\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcFocus - Emitted when the control gains focus.\n * @fires igcBlur - Emitted when the control loses focus.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends EventEmitterMixin<\n  IgcRadioEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-radio';\n\n  /** @private */\n  public static styles = styles;\n\n  private inputId = `radio-${nextId++}`;\n  private labelId = `radio-label-${this.inputId}`;\n\n  @query('input[type=\"radio\"]', true)\n  protected input!: HTMLInputElement;\n\n  @state()\n  private _tabIndex = 0;\n\n  /** The name attribute of the control. */\n  @property()\n  public name!: string;\n\n  /** The value attribute of the control. */\n  @property()\n  public value!: string;\n\n  /** The checked state of the control. */\n  @property({ type: Boolean })\n  @blazorTwoWayBind('igcChange', 'detail')\n  public checked = false;\n\n  /** Disables the radio control. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Controls the validity of the control. */\n  @property({ type: Boolean, reflect: true })\n  public invalid = false;\n\n  /** The label position of the radio control. */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: 'before' | 'after' = 'after';\n\n  /** Sets the aria-labelledby attribute for the radio control. */\n  @property({ reflect: true, attribute: 'aria-labelledby' })\n  public ariaLabelledby!: string;\n\n  /** Simulates a click on the radio control. */\n  public click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the radio control. */\n  @alternateName('focusComponent')\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio control. */\n  @alternateName('blurComponent')\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity() {\n    this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  protected handleMouseDown(event: MouseEvent) {\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  protected handleClick() {\n    this.checked = true;\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  protected handleChange() {\n    if (this.checked) {\n      this.getSiblings().forEach((radio) => {\n        radio.checked = false;\n        radio._tabIndex = -1;\n      });\n      this.input.focus();\n      this._tabIndex = 0;\n      this.emitEvent('igcChange', { detail: this.checked });\n    }\n  }\n\n  protected getSiblings() {\n    const group = this.closest('igc-radio-group');\n    if (!group) return [];\n\n    return Array.from<IgcRadioComponent>(\n      group.querySelectorAll('igc-radio')\n    ).filter((radio) => radio.name === this.name && radio !== this);\n  }\n\n  protected render() {\n    return html`\n      <label\n        part=\"${partNameMap({ base: true, checked: this.checked })}\"\n        for=\"${this.inputId}\"\n        @mousedown=\"${this.handleMouseDown}\"\n      >\n        <input\n          id=\"${this.inputId}\"\n          type=\"radio\"\n          name=\"${ifDefined(this.name)}\"\n          value=\"${ifDefined(this.value)}\"\n          .disabled=\"${this.disabled}\"\n          .checked=\"${live(this.checked)}\"\n          tabindex=${this._tabIndex}\n          aria-checked=\"${this.checked ? 'true' : 'false'}\"\n          aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n          aria-labelledby=\"${this.ariaLabelledby\n            ? this.ariaLabelledby\n            : this.labelId}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @focus=\"${this.handleFocus}\"\n        />\n        <span\n          part=\"${partNameMap({ control: true, checked: this.checked })}\"\n        ></span>\n        <span\n          part=\"${partNameMap({ label: true, checked: this.checked })}\"\n          id=\"${this.labelId}\"\n        >\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './radio.material.css';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { alternateName, watch, blazorTwoWayBind } from '../common/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { partNameMap } from '../common/util.js';\n\nlet nextId = 0;\n\nexport interface IgcRadioEventMap {\n  igcChange: CustomEvent<boolean>;\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcFocus - Emitted when the control gains focus.\n * @fires igcBlur - Emitted when the control loses focus.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends EventEmitterMixin<\n  IgcRadioEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-radio';\n\n  public static styles = styles;\n\n  private inputId = `radio-${nextId++}`;\n  private labelId = `radio-label-${this.inputId}`;\n\n  @query('input[type=\"radio\"]', true)\n  protected input!: HTMLInputElement;\n\n  @state()\n  private _tabIndex = 0;\n\n  /** The name attribute of the control. */\n  @property()\n  public name!: string;\n\n  /** The value attribute of the control. */\n  @property()\n  public value!: string;\n\n  /** Makes the control a required field. */\n  @property({ type: Boolean, reflect: true })\n  public required = false;\n\n  /** The checked state of the control. */\n  @property({ type: Boolean })\n  @blazorTwoWayBind('igcChange', 'detail')\n  public checked = false;\n\n  /** Disables the radio control. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Controls the validity of the control. */\n  @property({ type: Boolean, reflect: true })\n  public invalid = false;\n\n  /** The label position of the radio control. */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: 'before' | 'after' = 'after';\n\n  /** Sets the aria-labelledby attribute for the radio control. */\n  @property({ reflect: true, attribute: 'aria-labelledby' })\n  public ariaLabelledby!: string;\n\n  /** Simulates a click on the radio control. */\n  public override click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the radio control. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio control. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity() {\n    this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  protected handleMouseDown(event: MouseEvent) {\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  protected handleClick() {\n    this.checked = true;\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  protected handleChange() {\n    if (this.checked) {\n      this.getSiblings().forEach((radio) => {\n        radio.checked = false;\n        radio._tabIndex = -1;\n      });\n      this.input.focus();\n      this._tabIndex = 0;\n      this.emitEvent('igcChange', { detail: this.checked });\n    } else {\n      if (this.required) {\n        this.required = false;\n        this.getAllInGroup()[0].required = true;\n      }\n    }\n  }\n\n  protected getSiblings() {\n    return this.getAllInGroup().filter(\n      (radio) => radio.name === this.name && radio !== this\n    );\n  }\n\n  protected getAllInGroup() {\n    const group = this.closest('igc-radio-group');\n    if (!group) return [];\n\n    return Array.from<IgcRadioComponent>(group.querySelectorAll('igc-radio'));\n  }\n\n  protected override render() {\n    return html`\n      <label\n        part=\"${partNameMap({ base: true, checked: this.checked })}\"\n        for=\"${this.inputId}\"\n        @mousedown=\"${this.handleMouseDown}\"\n      >\n        <input\n          id=\"${this.inputId}\"\n          type=\"radio\"\n          name=\"${ifDefined(this.name)}\"\n          value=\"${ifDefined(this.value)}\"\n          .required=\"${this.required}\"\n          .disabled=\"${this.disabled}\"\n          .checked=\"${live(this.checked)}\"\n          tabindex=${this._tabIndex}\n          aria-checked=\"${this.checked ? 'true' : 'false'}\"\n          aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n          aria-labelledby=\"${this.ariaLabelledby\n            ? this.ariaLabelledby\n            : this.labelId}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @focus=\"${this.handleFocus}\"\n        />\n        <span\n          part=\"${partNameMap({ control: true, checked: this.checked })}\"\n        ></span>\n        <span\n          part=\"${partNameMap({ label: true, checked: this.checked })}\"\n          id=\"${this.labelId}\"\n        >\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}

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

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

package/components/radio/radio.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;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-font-family)}input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:color .15s ease-in;-o-transition:color .15s ease-in;transition:color .15s ease-in}[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-200), 0.87)}[part~=base]:focus-within [part=control]{background:hsla(var(--igc-gray-300), 0.87)}[part~=control]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--size, 1.25rem) * 2);height:calc(var(--size, 1.25rem) * 2);min-width:calc(var(--size, 1.25rem) * 2);border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background .15s ease-in;-o-transition:background .15s ease-in;transition:background .15s ease-in}[part~=control]::before,[part~=control]::after{position:absolute;content:"";width:var(--size, 1.25rem);height:var(--size, 1.25rem);left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;-webkit-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in}[part~=control]::before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate(-50%, -50%) scale(0.1);-ms-transform:translate(-50%, -50%) scale(0.1);transform:translate(-50%, -50%) scale(0.1);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;z-index:1}[part~=control]::after{border:calc(var(--size, 1.25rem) / 10) solid hsla(var(--igc-gray-600), var(--igc-gray-a))}[part="base checked"]:hover [part~=control]{background:hsla(var(--igc-secondary-50), 0.54)}[part="base checked"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-100), 0.72)}[part="control checked"]::before{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));-webkit-transform:translate(-50%, -50%) scale(0.5);-ms-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5)}[part="control checked"]::after{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host(:not([disabled])[invalid]) [part~=label]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part~=control]::after{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part="control checked"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([disabled]){pointer-events:none;color:hsla(var(--igc-gray-400), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part~=control]::after{border-color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) [part="control checked"]::before{background:hsla(var(--igc-gray-300), var(--igc-gray-a));border-color:transparent}:host([label-position=after]) [part~=label]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([label-position=before]) [part~=label]{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;-webkit-margin-end:.5rem;margin-inline-end:.5rem}`;
+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;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-font-family)}input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:color .15s ease-in;-o-transition:color .15s ease-in;transition:color .15s ease-in}[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-600), 0.06)}[part~=base]:focus-within [part=control]{background:hsla(var(--igc-gray-600), 0.12)}[part~=control]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--size, 1.25rem) * 2);height:calc(var(--size, 1.25rem) * 2);min-width:calc(var(--size, 1.25rem) * 2);border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background .15s ease-in;-o-transition:background .15s ease-in;transition:background .15s ease-in}[part~=control]::before,[part~=control]::after{position:absolute;content:"";width:var(--size, 1.25rem);height:var(--size, 1.25rem);left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;-webkit-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in}[part~=control]::before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate(-50%, -50%) scale(0.1);-ms-transform:translate(-50%, -50%) scale(0.1);transform:translate(-50%, -50%) scale(0.1);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;z-index:1}[part~=control]::after{border:calc(var(--size, 1.25rem) / 10) solid hsla(var(--igc-gray-600), var(--igc-gray-a))}[part="base checked"]:hover [part~=control]{background:hsla(var(--igc-secondary-500), 0.06)}[part="base checked"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-500), 0.12)}[part="control checked"]::before{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));-webkit-transform:translate(-50%, -50%) scale(0.5);-ms-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5)}[part="control checked"]::after{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host(:not([disabled])[invalid]) [part~=label]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part~=control]::after{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part="control checked"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([disabled]){pointer-events:none;color:hsla(var(--igc-gray-400), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part~=control]::after{border-color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) [part="control checked"]::before{background:hsla(var(--igc-gray-300), var(--igc-gray-a));border-color:transparent}:host([label-position=after]) [part~=label]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([label-position=before]) [part~=label]{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;-webkit-margin-end:.5rem;margin-inline-end:.5rem}`;
 //# sourceMappingURL=radio.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.material.css.js","sourceRoot":"","sources":["../../../src/components/radio/radio.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8uHAA8uH,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;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-font-family)}input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:color .15s ease-in;-o-transition:color .15s ease-in;transition:color .15s ease-in}[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-200), 0.87)}[part~=base]:focus-within [part=control]{background:hsla(var(--igc-gray-300), 0.87)}[part~=control]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--size, 1.25rem) * 2);height:calc(var(--size, 1.25rem) * 2);min-width:calc(var(--size, 1.25rem) * 2);border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background .15s ease-in;-o-transition:background .15s ease-in;transition:background .15s ease-in}[part~=control]::before,[part~=control]::after{position:absolute;content:\"\";width:var(--size, 1.25rem);height:var(--size, 1.25rem);left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;-webkit-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in}[part~=control]::before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate(-50%, -50%) scale(0.1);-ms-transform:translate(-50%, -50%) scale(0.1);transform:translate(-50%, -50%) scale(0.1);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;z-index:1}[part~=control]::after{border:calc(var(--size, 1.25rem) / 10) solid hsla(var(--igc-gray-600), var(--igc-gray-a))}[part=\"base checked\"]:hover [part~=control]{background:hsla(var(--igc-secondary-50), 0.54)}[part=\"base checked\"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-100), 0.72)}[part=\"control checked\"]::before{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));-webkit-transform:translate(-50%, -50%) scale(0.5);-ms-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5)}[part=\"control checked\"]::after{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host(:not([disabled])[invalid]) [part~=label]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part~=control]::after{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part=\"control checked\"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([disabled]){pointer-events:none;color:hsla(var(--igc-gray-400), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part~=control]::after{border-color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) [part=\"control checked\"]::before{background:hsla(var(--igc-gray-300), var(--igc-gray-a));border-color:transparent}:host([label-position=after]) [part~=label]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([label-position=before]) [part~=label]{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;-webkit-margin-end:.5rem;margin-inline-end:.5rem}`;\n"]}
+{"version":3,"file":"radio.material.css.js","sourceRoot":"","sources":["../../../src/components/radio/radio.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+iIAA+iI,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;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-font-family)}input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:color .15s ease-in;-o-transition:color .15s ease-in;transition:color .15s ease-in}[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-600), 0.06)}[part~=base]:focus-within [part=control]{background:hsla(var(--igc-gray-600), 0.12)}[part~=control]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--size, 1.25rem) * 2);height:calc(var(--size, 1.25rem) * 2);min-width:calc(var(--size, 1.25rem) * 2);border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background .15s ease-in;-o-transition:background .15s ease-in;transition:background .15s ease-in}[part~=control]::before,[part~=control]::after{position:absolute;content:\"\";width:var(--size, 1.25rem);height:var(--size, 1.25rem);left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;-webkit-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in}[part~=control]::before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate(-50%, -50%) scale(0.1);-ms-transform:translate(-50%, -50%) scale(0.1);transform:translate(-50%, -50%) scale(0.1);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;z-index:1}[part~=control]::after{border:calc(var(--size, 1.25rem) / 10) solid hsla(var(--igc-gray-600), var(--igc-gray-a))}[part=\"base checked\"]:hover [part~=control]{background:hsla(var(--igc-secondary-500), 0.06)}[part=\"base checked\"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-500), 0.12)}[part=\"control checked\"]::before{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));-webkit-transform:translate(-50%, -50%) scale(0.5);-ms-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5)}[part=\"control checked\"]::after{border-color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host(:not([disabled])[invalid]) [part~=label]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part~=control]::after{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([disabled])[invalid]) [part=\"control checked\"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([disabled]){pointer-events:none;color:hsla(var(--igc-gray-400), var(--igc-gray-a));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part~=control]::after{border-color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) [part=\"control checked\"]::before{background:hsla(var(--igc-gray-300), var(--igc-gray-a));border-color:transparent}:host([label-position=after]) [part~=label]{-webkit-margin-start:.5rem;margin-inline-start:.5rem}:host([label-position=before]) [part~=label]{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;-webkit-margin-end:.5rem;margin-inline-end:.5rem}`;\n"]}

package/components/radio-group/radio-group.d.ts

@@ -1,18 +1,17 @@
 import { LitElement } from 'lit';
 export default class IgcRadioGroupComponent extends LitElement {
-    static tagName: string;
+    static readonly tagName = "igc-radio-group";
     static styles: import("lit").CSSResult;
-    private _slottedRadios;
-    private get radios();
+    private radios;
     private get isLTR();
     constructor();
     alignment: 'vertical' | 'horizontal';
+    private updateRequiredState;
     private handleKeydown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-radio-group': IgcRadioGroupComponent;
     }
 }
-//# sourceMappingURL=radio-group.d.ts.map

package/components/radio-group/radio-group.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { property, queryAssignedNodes } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { styles } from './radio-group.material.css';
 export default class IgcRadioGroupComponent extends LitElement {
     constructor() {
@@ -40,23 +40,37 @@ export default class IgcRadioGroupComponent extends LitElement {
             }
         };
         this.addEventListener('keydown', this.handleKeydown);
-    }
-    get radios() {
-        return Array.from(this._slottedRadios).filter((radio) => !radio.disabled);
+        this.addEventListener('igcChange', this.updateRequiredState);
     }
     get isLTR() {
         const styles = window.getComputedStyle(this);
         return styles.getPropertyValue('direction') === 'ltr';
     }
+    updateRequiredState() {
+        const hasRequired = this.radios.some((r) => r.required);
+        if (hasRequired) {
+            this.radios.forEach((r) => (r.required = false));
+            const hasChecked = this.radios.some((r) => r.checked);
+            if (hasChecked) {
+                this.radios.filter((r) => r.checked)[0].required = true;
+            }
+            else {
+                this.radios[0].required = true;
+            }
+        }
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot @slotchange=${this.updateRequiredState}></slot>`;
     }
 }
 IgcRadioGroupComponent.tagName = 'igc-radio-group';
 IgcRadioGroupComponent.styles = styles;
 __decorate([
-    queryAssignedNodes(undefined, true, 'igc-radio')
-], IgcRadioGroupComponent.prototype, "_slottedRadios", void 0);
+    queryAssignedElements({
+        flatten: true,
+        selector: 'igc-radio:not([disabled])',
+    })
+], IgcRadioGroupComponent.prototype, "radios", void 0);
 __decorate([
     property({ reflect: true })
 ], IgcRadioGroupComponent.prototype, "alignment", void 0);

package/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;IAmB5D;QACE,KAAK,EAAE,CAAC;QAKH,cAAS,GAA8B,UAAU,CAAC;QAEjD,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrE,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAC3D,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC;gBAE1C,QAAQ,GAAG,EAAE;oBACX,KAAK,SAAS;wBACZ,KAAK,IAAI,CAAC,CAAC,CAAC;wBACZ,MAAM;oBACR,KAAK,WAAW;wBACd,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR,KAAK,YAAY;wBACf,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR;wBACE,KAAK,IAAI,CAAC,CAAC;iBACd;gBAED,IAAI,KAAK,GAAG,CAAC;oBAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC9C,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;oBAAE,KAAK,GAAG,CAAC,CAAC;gBAE9C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;gBACxD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;gBAElC,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;QACH,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;IAZD,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC;IAED,IAAY,KAAK;QACf,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;IACxD,CAAC;IA0CS,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA3Da,8BAAO,GAAG,iBAAiB,CAAC;AAG5B,6BAAM,GAAG,MAAM,CAAC;AAG9B;IADC,kBAAkB,CAAC,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC;8DACM;AAiBvD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAC6B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedNodes } from 'lit/decorators.js';\nimport { default as IgcRadioComponent } from '../radio/radio';\nimport { styles } from './radio-group.material.css';\n\nexport default class IgcRadioGroupComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-radio-group';\n\n  /** @private */\n  public static styles = styles;\n\n  @queryAssignedNodes(undefined, true, 'igc-radio')\n  private _slottedRadios!: NodeListOf<IgcRadioComponent>;\n\n  private get radios() {\n    return Array.from(this._slottedRadios).filter((radio) => !radio.disabled);\n  }\n\n  private get isLTR(): boolean {\n    const styles = window.getComputedStyle(this);\n    return styles.getPropertyValue('direction') === 'ltr';\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown);\n  }\n\n  @property({ reflect: true })\n  public alignment: 'vertical' | 'horizontal' = 'vertical';\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n      const checked = this.radios.find((radio) => radio.checked);\n      let index = this.radios.indexOf(checked!);\n\n      switch (key) {\n        case 'ArrowUp':\n          index += -1;\n          break;\n        case 'ArrowLeft':\n          index += this.isLTR ? -1 : 1;\n          break;\n        case 'ArrowRight':\n          index += this.isLTR ? 1 : -1;\n          break;\n        default:\n          index += 1;\n      }\n\n      if (index < 0) index = this.radios.length - 1;\n      if (index > this.radios.length - 1) index = 0;\n\n      this.radios.forEach((radio) => (radio.checked = false));\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  };\n\n  protected render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio-group': IgcRadioGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { default as IgcRadioComponent } from '../radio/radio';\nimport { styles } from './radio-group.material.css';\n\nexport default class IgcRadioGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-radio-group';\n\n  public static override styles = styles;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'igc-radio:not([disabled])',\n  })\n  private radios!: Array<IgcRadioComponent>;\n\n  private get isLTR(): boolean {\n    const styles = window.getComputedStyle(this);\n    return styles.getPropertyValue('direction') === 'ltr';\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown);\n    this.addEventListener('igcChange', this.updateRequiredState);\n  }\n\n  @property({ reflect: true })\n  public alignment: 'vertical' | 'horizontal' = 'vertical';\n\n  private updateRequiredState() {\n    const hasRequired = this.radios.some((r) => r.required);\n\n    if (hasRequired) {\n      this.radios.forEach((r) => (r.required = false));\n\n      const hasChecked = this.radios.some((r) => r.checked);\n\n      if (hasChecked) {\n        this.radios.filter((r) => r.checked)[0].required = true;\n      } else {\n        this.radios[0].required = true;\n      }\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n      const checked = this.radios.find((radio) => radio.checked);\n      let index = this.radios.indexOf(checked!);\n\n      switch (key) {\n        case 'ArrowUp':\n          index += -1;\n          break;\n        case 'ArrowLeft':\n          index += this.isLTR ? -1 : 1;\n          break;\n        case 'ArrowRight':\n          index += this.isLTR ? 1 : -1;\n          break;\n        default:\n          index += 1;\n      }\n\n      if (index < 0) index = this.radios.length - 1;\n      if (index > this.radios.length - 1) index = 0;\n\n      this.radios.forEach((radio) => (radio.checked = false));\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  };\n\n  protected override render() {\n    return html`<slot @slotchange=${this.updateRequiredState}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio-group': IgcRadioGroupComponent;\n  }\n}\n"]}

package/components/radio-group/radio-group.material.css.d.ts

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

package/components/radio-group/radio-group.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-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;
+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-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;
 //# sourceMappingURL=radio-group.material.css.js.map

package/components/radio-group/radio-group.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.material.css.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mwBAAmwB,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-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;\n"]}
+{"version":3,"file":"radio-group.material.css.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mkCAAmkC,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-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;\n"]}

package/components/ripple/ripple.d.ts

@@ -1,15 +1,20 @@
 import { LitElement } from 'lit';
+/**
+ * A ripple can be applied to an element to represent
+ * interactive surface.
+ *
+ * @element igc-ripple
+ */
 export default class IgcRippleComponent extends LitElement {
-    static tagName: string;
+    static readonly tagName = "igc-ripple";
     static styles: import("lit").CSSResult;
     constructor();
     private handler;
     private getDimensions;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-ripple': IgcRippleComponent;
     }
 }
-//# sourceMappingURL=ripple.d.ts.map

package/components/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAQ/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAOxD;QACE,KAAK,EAAE,CAAC;QAIF,YAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAc,EAAE,EAAE;;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAEnE,MAAM,MAAM,GAAiC;gBAC3C,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,OAAO;gBAChB,aAAa,EAAE,MAAM;gBACrB,eAAe,EAAE,QAAQ;gBACzB,SAAS,EAAE,+BAA+B;gBAC1C,UAAU,EAAE,oBAAoB;gBAChC,MAAM,EAAE,cAAc;gBACtB,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,GAAG,MAAM,IAAI;gBACpB,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,YAAY,EAAE,KAAK;gBACnB,GAAG,EAAE,GAAG,GAAG,IAAI;gBACf,IAAI,EAAE,GAAG,IAAI,IAAI;gBACjB,UAAU,EAAE,wCAAwC;aACrD,CAAC;YACF,MAAM,MAAM,GAAe;gBACzB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE;gBACxC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;aACtC,CAAC;YACF,MAAM,IAAI,GAA6B;gBACrC,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,QAAQ;aACjB,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACrC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC;IAqCO,aAAa,CAAC,CAAS,EAAE,CAAS;QACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IAC5C,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;;AAvDa,0BAAO,GAAG,YAAY,CAAC;AAGvB,yBAAM,GAAG,MAAM,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './ripple.material.css';\n\n/**\n * A ripple can be applied to an element to represent\n * interactive surface.\n *\n * @element igc-ripple\n */\nexport default class IgcRippleComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-ripple';\n\n  /** @private */\n  public static styles = styles;\n\n  constructor() {\n    super();\n    this.addEventListener('mousedown', this.handler);\n  }\n\n  private handler = ({ clientX, clientY }: MouseEvent) => {\n    const element = document.createElement('span');\n    const { radius, top, left } = this.getDimensions(clientX, clientY);\n\n    const styles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute',\n      display: 'block',\n      pointerEvents: 'none',\n      transformOrigin: 'center',\n      transform: `translate3d(0, 0, 0) scale(0)`,\n      willChange: 'opacity, transform',\n      margin: `0 !important`,\n      border: 'none !important',\n      width: `${radius}px`,\n      height: `${radius}px`,\n      borderRadius: '50%',\n      top: `${top}px`,\n      left: `${left}px`,\n      background: 'var(--color, hsl(var(--igc-gray-800)))',\n    };\n    const frames: Keyframe[] = [\n      { opacity: 0.5, transform: 'scale(.3)' },\n      { opacity: 0, transform: 'scale(2)' },\n    ];\n    const opts: KeyframeAnimationOptions = {\n      duration: 600, // --igc-ripple-duration,\n      fill: 'forwards',\n      easing: 'linear', // --igc-ripple-easing\n    };\n\n    Object.assign(element.style, styles);\n    this.shadowRoot?.appendChild(element);\n    element.animate(frames, opts).finished.then(() => element.remove());\n  };\n\n  private getDimensions(x: number, y: number) {\n    const { width, height, left, top } = this.getBoundingClientRect();\n    const radius = Math.max(width, height);\n    const _left = Math.round(x - left - radius / 2);\n    const _top = Math.round(y - top - radius / 2);\n    return { radius, top: _top, left: _left };\n  }\n\n  protected render() {\n    return html`<div></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-ripple': IgcRippleComponent;\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAQ/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAKxD;QACE,KAAK,EAAE,CAAC;QAIF,YAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAc,EAAE,EAAE;;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAEnE,MAAM,MAAM,GAAiC;gBAC3C,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,OAAO;gBAChB,aAAa,EAAE,MAAM;gBACrB,eAAe,EAAE,QAAQ;gBACzB,SAAS,EAAE,+BAA+B;gBAC1C,UAAU,EAAE,oBAAoB;gBAChC,MAAM,EAAE,cAAc;gBACtB,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,GAAG,MAAM,IAAI;gBACpB,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,YAAY,EAAE,KAAK;gBACnB,GAAG,EAAE,GAAG,GAAG,IAAI;gBACf,IAAI,EAAE,GAAG,IAAI,IAAI;gBACjB,UAAU,EAAE,wCAAwC;aACrD,CAAC;YACF,MAAM,MAAM,GAAe;gBACzB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE;gBACxC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;aACtC,CAAC;YACF,MAAM,IAAI,GAA6B;gBACrC,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,QAAQ;aACjB,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACrC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC;IAqCO,aAAa,CAAC,CAAS,EAAE,CAAS;QACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IAC5C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;;AAtDsB,0BAAO,GAAG,YAAY,CAAC;AAEvB,yBAAM,GAAG,MAAM,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './ripple.material.css';\n\n/**\n * A ripple can be applied to an element to represent\n * interactive surface.\n *\n * @element igc-ripple\n */\nexport default class IgcRippleComponent extends LitElement {\n  public static readonly tagName = 'igc-ripple';\n\n  public static override styles = styles;\n\n  constructor() {\n    super();\n    this.addEventListener('mousedown', this.handler);\n  }\n\n  private handler = ({ clientX, clientY }: MouseEvent) => {\n    const element = document.createElement('span');\n    const { radius, top, left } = this.getDimensions(clientX, clientY);\n\n    const styles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute',\n      display: 'block',\n      pointerEvents: 'none',\n      transformOrigin: 'center',\n      transform: `translate3d(0, 0, 0) scale(0)`,\n      willChange: 'opacity, transform',\n      margin: `0 !important`,\n      border: 'none !important',\n      width: `${radius}px`,\n      height: `${radius}px`,\n      borderRadius: '50%',\n      top: `${top}px`,\n      left: `${left}px`,\n      background: 'var(--color, hsl(var(--igc-gray-800)))',\n    };\n    const frames: Keyframe[] = [\n      { opacity: 0.5, transform: 'scale(.3)' },\n      { opacity: 0, transform: 'scale(2)' },\n    ];\n    const opts: KeyframeAnimationOptions = {\n      duration: 600, // --igc-ripple-duration,\n      fill: 'forwards',\n      easing: 'linear', // --igc-ripple-easing\n    };\n\n    Object.assign(element.style, styles);\n    this.shadowRoot?.appendChild(element);\n    element.animate(frames, opts).finished.then(() => element.remove());\n  };\n\n  private getDimensions(x: number, y: number) {\n    const { width, height, left, top } = this.getBoundingClientRect();\n    const radius = Math.max(width, height);\n    const _left = Math.round(x - left - radius / 2);\n    const _top = Math.round(y - top - radius / 2);\n    return { radius, top: _top, left: _left };\n  }\n\n  protected override render() {\n    return html`<div></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-ripple': IgcRippleComponent;\n  }\n}\n"]}

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

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

package/components/ripple/ripple.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{position:absolute;display:block;width:100%;height:100%;top:0;left:0;contain:content;overflow:hidden}`;
+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{position:absolute;display:block;width:100%;height:100%;top:0;left:0;contain:content;overflow:hidden}`;
 //# sourceMappingURL=ripple.material.css.js.map