igniteui-webcomponents 6.1.0 → 6.1.1

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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/).
 
+## [6.1.1] - 2025-06-25
+### Fixed
+- #### Dropdown
+  - Icon size in Bootstrap theme [#1755](https://github.com/IgniteUI/igniteui-webcomponents/pull/1755)
+- #### Input, File Input
+  - Label positioning and transition logic in Material theme [#1739](https://github.com/IgniteUI/igniteui-webcomponents/pull/1739) [#1753](https://github.com/IgniteUI/igniteui-webcomponents/pull/1753)
+
 ## [6.1.0] - 2025-06-12
 ### Added
 - Date Range Picker
@@ -924,6 +931,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.0...6.1.1
 [6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.1...6.1.0
 [6.0.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.0...6.0.1
 [6.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.4.1...6.0.0

package/components/accordion/accordion.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, endKey, homeKey, shiftKey, } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { first, last } from '../common/util.js';
+import { addSafeEventListener, first, last } from '../common/util.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import { styles } from './themes/accordion.base.css.js';
 class IgcAccordionComponent extends LitElement {
@@ -18,7 +18,7 @@ class IgcAccordionComponent extends LitElement {
     constructor() {
         super();
         this.singleExpand = false;
-        this.addEventListener('igcOpening', this.handlePanelOpening);
+        addSafeEventListener(this, 'igcOpening', this.handlePanelOpening);
         addKeybindings(this, {
             skip: this.skipKeybinding,
             bindingDefaults: { preventDefault: true },

package/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { first, last } from '../common/util.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({\n    selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,\n  })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n\n    this.addEventListener('igcOpening', this.handlePanelOpening);\n\n    addKeybindings(this, {\n      skip: this.skipKeybinding,\n      bindingDefaults: { preventDefault: true },\n    })\n      .set(homeKey, () =>\n        this.getPanelHeader(first(this.enabledPanels)).focus()\n      )\n      .set(endKey, () => this.getPanelHeader(last(this.enabledPanels)).focus())\n      .set(arrowUp, this.navigatePrev)\n      .set(arrowDown, this.navigateNext)\n      .set([shiftKey, altKey, arrowDown], this.expandAll)\n      .set([shiftKey, altKey, arrowUp], this.collapseAll);\n  }\n\n  private skipKeybinding(target: Element) {\n    return !(\n      target.matches(IgcExpansionPanelComponent.tagName) &&\n      this.enabledPanels.includes(target as IgcExpansionPanelComponent)\n    );\n  }\n\n  private navigatePrev(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, -1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private collapseAll() {\n    for (const panel of this.enabledPanels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    for (const panel of this.enabledPanels) {\n      if (this.singleExpand) {\n        current === panel ? this.openPanel(panel) : this.closePanel(panel);\n      } else {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    for (const panel of this.enabledPanels) {\n      if (panel.open && panel !== current) {\n        this.closePanel(panel);\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const idx = this.enabledPanels.indexOf(panel);\n    return this.enabledPanels[idx + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.renderRoot.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (\n      !(\n        panel.open &&\n        panel.emitEvent('igcClosing', { cancelable: true, detail: panel })\n      )\n    ) {\n      return;\n    }\n\n    await panel.hide();\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (\n      panel.open ||\n      !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })\n    ) {\n      return;\n    }\n\n    await panel.show();\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addSafeEventListener, first, last } from '../common/util.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({\n    selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,\n  })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'igcOpening' as any, this.handlePanelOpening);\n\n    addKeybindings(this, {\n      skip: this.skipKeybinding,\n      bindingDefaults: { preventDefault: true },\n    })\n      .set(homeKey, () =>\n        this.getPanelHeader(first(this.enabledPanels)).focus()\n      )\n      .set(endKey, () => this.getPanelHeader(last(this.enabledPanels)).focus())\n      .set(arrowUp, this.navigatePrev)\n      .set(arrowDown, this.navigateNext)\n      .set([shiftKey, altKey, arrowDown], this.expandAll)\n      .set([shiftKey, altKey, arrowUp], this.collapseAll);\n  }\n\n  private skipKeybinding(target: Element) {\n    return !(\n      target.matches(IgcExpansionPanelComponent.tagName) &&\n      this.enabledPanels.includes(target as IgcExpansionPanelComponent)\n    );\n  }\n\n  private navigatePrev(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, -1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private collapseAll() {\n    for (const panel of this.enabledPanels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    for (const panel of this.enabledPanels) {\n      if (this.singleExpand) {\n        current === panel ? this.openPanel(panel) : this.closePanel(panel);\n      } else {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    for (const panel of this.enabledPanels) {\n      if (panel.open && panel !== current) {\n        this.closePanel(panel);\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const idx = this.enabledPanels.indexOf(panel);\n    return this.enabledPanels[idx + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.renderRoot.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (\n      !(\n        panel.open &&\n        panel.emitEvent('igcClosing', { cancelable: true, detail: panel })\n      )\n    ) {\n      return;\n    }\n\n    await panel.hide();\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (\n      panel.open ||\n      !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })\n    ) {\n      return;\n    }\n\n    await panel.show();\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}

package/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { AvatarShape } from '../types.js';
 /**
  * An avatar component is used as a representation of a user identity
@@ -17,32 +17,31 @@ export default class IgcAvatarComponent extends LitElement {
     static readonly tagName = "igc-avatar";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private __internals;
-    private hasError;
+    private readonly _internals;
+    private _hasError;
     /**
      * The image source to use.
      * @attr
      */
-    src: string;
+    src?: string;
     /**
      * Alternative text for the image.
      * @attr
      */
-    alt: string;
+    alt?: string;
     /**
      * Initials to use as a fallback when no image is available.
      * @attr
      */
-    initials: string;
+    initials?: string;
     /**
      * The shape of the avatar.
      * @attr
      */
     shape: AvatarShape;
     constructor();
-    protected roleDescriptionChange(): void;
-    protected handleErrorState(): void;
-    protected handleError(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected _handleError(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/avatar/avatar.js

@@ -4,36 +4,43 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var IgcAvatarComponent_1;
-import { LitElement, html, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { themes } from '../../theming/theming-decorator.js';
-import { watch } from '../common/decorators/watch.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { styles } from './themes/avatar.base.css.js';
 import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
-let IgcAvatarComponent = IgcAvatarComponent_1 = class IgcAvatarComponent extends LitElement {
+class IgcAvatarComponent extends LitElement {
     static register() {
-        registerComponent(IgcAvatarComponent_1);
+        registerComponent(IgcAvatarComponent);
     }
     constructor() {
         super();
-        this.hasError = false;
+        this._internals = addInternalsController(this, {
+            initialARIA: {
+                role: 'image',
+                ariaLabel: 'avatar',
+            },
+        });
+        this._hasError = false;
         this.shape = 'square';
-        this.__internals = this.attachInternals();
-        this.__internals.role = 'img';
-        this.__internals.ariaLabel = 'avatar';
+        addThemingController(this, all);
     }
-    roleDescriptionChange() {
-        this.__internals.ariaRoleDescription = this.alt ?? this.initials;
+    willUpdate(changedProperties) {
+        if (changedProperties.has('initials') || changedProperties.has('alt')) {
+            this._internals.setARIA({
+                ariaRoleDescription: this.alt ?? this.initials,
+            });
+        }
+        if (changedProperties.has('src')) {
+            this._hasError = false;
+        }
     }
-    handleErrorState() {
-        this.hasError = false;
-    }
-    handleError() {
-        this.hasError = true;
+    _handleError() {
+        this._hasError = true;
     }
     render() {
         return html `
@@ -41,25 +48,26 @@ let IgcAvatarComponent = IgcAvatarComponent_1 = class IgcAvatarComponent extends
         ${this.initials
             ? html `<span part="initials">${this.initials}</span>`
             : html `<slot></slot>`}
-        ${this.src && !this.hasError
+        ${this.src && !this._hasError
             ? html `
               <img
                 part="image"
                 alt=${ifDefined(this.alt)}
                 src=${ifDefined(this.src)}
-                @error=${this.handleError}
+                @error=${this._handleError}
               />
             `
             : nothing}
       </div>
     `;
     }
-};
+}
 IgcAvatarComponent.tagName = 'igc-avatar';
 IgcAvatarComponent.styles = [styles, shared];
+export default IgcAvatarComponent;
 __decorate([
     state()
-], IgcAvatarComponent.prototype, "hasError", void 0);
+], IgcAvatarComponent.prototype, "_hasError", void 0);
 __decorate([
     property()
 ], IgcAvatarComponent.prototype, "src", void 0);
@@ -72,15 +80,4 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcAvatarComponent.prototype, "shape", void 0);
-__decorate([
-    watch('initials'),
-    watch('alt')
-], IgcAvatarComponent.prototype, "roleDescriptionChange", null);
-__decorate([
-    watch('src')
-], IgcAvatarComponent.prototype, "handleErrorState", null);
-IgcAvatarComponent = IgcAvatarComponent_1 = __decorate([
-    themes(all)
-], IgcAvatarComponent);
-export default IgcAvatarComponent;
 //# 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,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgB1B,IAAM,kBAAkB,0BAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAKjD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,oBAAkB,CAAC,CAAC;IACxC,CAAC;IAmCD;QACE,KAAK,EAAE,CAAC;QA/BF,aAAQ,GAAG,KAAK,CAAC;QA4BlB,UAAK,GAAgB,QAAQ,CAAC;QAKnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,QAAQ,CAAC;IACxC,CAAC;IAIS,qBAAqB;QAC7B,IAAI,CAAC,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC;IACnE,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eAAe;UACrB,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;yBAChB,IAAI,CAAC,WAAW;;aAE5B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAlFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAUzC;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS;AAY3B;IAFT,KAAK,CAAC,UAAU,CAAC;IACjB,KAAK,CAAC,KAAK,CAAC;+DAGZ;AAGS;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AA3DkB,kBAAkB;IADtC,MAAM,CAAC,GAAG,CAAC;GACS,kBAAkB,CAoFtC;eApFoB,kBAAkB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\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 */\n@themes(all)\nexport default class IgcAvatarComponent extends LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private __internals: ElementInternals;\n\n  @state()\n  private hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt!: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials!: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n\n    this.__internals = this.attachInternals();\n    this.__internals.role = 'img';\n    this.__internals.ariaLabel = 'avatar';\n  }\n\n  @watch('initials')\n  @watch('alt')\n  protected roleDescriptionChange() {\n    this.__internals.ariaRoleDescription = this.alt ?? this.initials;\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected handleError() {\n    this.hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\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.handleError}\n              />\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAezC,MAAqB,kBAAmB,SAAQ,UAAU;IAKjD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAwCD;QACE,KAAK,EAAE,CAAC;QAvCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC,CAAC;QAGK,cAAS,GAAG,KAAK,CAAC;QA4BnB,UAAK,GAAgB,QAAQ,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBACtB,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eAAe;UACrB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;yBAChB,IAAI,CAAC,YAAY;;aAE7B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AArFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,kBAAkB;AAiB7B;IADP,KAAK,EAAE;qDACkB;AAOnB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\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 LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'image',\n      ariaLabel: 'avatar',\n    },\n  });\n\n  @state()\n  private _hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src?: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt?: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials?: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('initials') || changedProperties.has('alt')) {\n      this._internals.setARIA({\n        ariaRoleDescription: this.alt ?? this.initials,\n      });\n    }\n\n    if (changedProperties.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  protected _handleError(): void {\n    this._hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\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._handleError}\n              />\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { BadgeShape, StyleVariant } from '../types.js';
 /**
  * The badge is a component indicating a status on a related item or an area
@@ -14,7 +14,7 @@ export default class IgcBadgeComponent extends LitElement {
     static readonly tagName = "igc-badge";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private __internals;
+    private readonly _internals;
     /**
      * The type of badge.
      * @attr
@@ -31,7 +31,7 @@ export default class IgcBadgeComponent extends LitElement {
      */
     shape: BadgeShape;
     constructor();
-    protected variantChange(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/badge/badge.js

@@ -4,29 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var IgcBadgeComponent_1;
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { themes } from '../../theming/theming-decorator.js';
-import { watch } from '../common/decorators/watch.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
 import { all } from './themes/themes.js';
-let IgcBadgeComponent = IgcBadgeComponent_1 = class IgcBadgeComponent extends LitElement {
+class IgcBadgeComponent extends LitElement {
     static register() {
-        registerComponent(IgcBadgeComponent_1);
+        registerComponent(IgcBadgeComponent);
     }
     constructor() {
         super();
+        this._internals = addInternalsController(this, {
+            initialARIA: { role: 'status' },
+        });
         this.variant = 'primary';
         this.outlined = false;
         this.shape = 'rounded';
-        this.__internals = this.attachInternals();
-        this.__internals.role = 'status';
+        addThemingController(this, all);
     }
-    variantChange() {
-        this.__internals.ariaRoleDescription = `badge ${this.variant}`;
+    willUpdate(changedProperties) {
+        if (changedProperties.has('variant')) {
+            this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });
+        }
     }
     render() {
         return html `
@@ -35,9 +38,10 @@ let IgcBadgeComponent = IgcBadgeComponent_1 = class IgcBadgeComponent extends Li
       </span>
     `;
     }
-};
+}
 IgcBadgeComponent.tagName = 'igc-badge';
 IgcBadgeComponent.styles = [styles, shared];
+export default IgcBadgeComponent;
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "variant", void 0);
@@ -47,11 +51,4 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "shape", void 0);
-__decorate([
-    watch('variant')
-], IgcBadgeComponent.prototype, "variantChange", null);
-IgcBadgeComponent = IgcBadgeComponent_1 = __decorate([
-    themes(all)
-], IgcBadgeComponent);
-export default IgcBadgeComponent;
 //# sourceMappingURL=badge.js.map

package/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAa1B,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAKhD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,mBAAiB,CAAC,CAAC;IACvC,CAAC;IAyBD;QACE,KAAK,EAAE,CAAC;QAjBH,YAAO,GAAiB,SAAS,CAAC;QAOlC,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAe,SAAS,CAAC;QAInC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;IACnC,CAAC;IAGS,aAAa;QACrB,IAAI,CAAC,WAAW,CAAC,mBAAmB,GAAG,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC;IACjE,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhDsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAc1C;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AAOlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS;AAS3B;IADT,KAAK,CAAC,SAAS,CAAC;sDAGhB;AAzCkB,iBAAiB;IADrC,MAAM,CAAC,GAAG,CAAC;GACS,iBAAiB,CAkDrC;eAlDoB,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\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 */\n@themes(all)\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private __internals: ElementInternals;\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  constructor() {\n    super();\n    this.__internals = this.attachInternals();\n    this.__internals.role = 'status';\n  }\n\n  @watch('variant')\n  protected variantChange() {\n    this.__internals.ariaRoleDescription = `badge ${this.variant}`;\n  }\n\n  protected override render() {\n    return html`\n      <span part=\"base\">\n        <slot></slot>\n      </span>\n    `;\n  }\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,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAqB,iBAAkB,SAAQ,UAAU;IAKhD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IA2BD;QACE,KAAK,EAAE,CAAC;QA1BO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAChC,CAAC,CAAC;QAOI,YAAO,GAAiB,SAAS,CAAC;QAOlC,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAe,SAAS,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAlDsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,iBAAiB;AAkB7B;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AAOlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'status' },\n  });\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('variant')) {\n      this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });\n    }\n  }\n\n  protected override render() {\n    return html`\n      <span part=\"base\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}

package/components/banner/banner.d.ts

@@ -28,9 +28,8 @@ export default class IgcBannerComponent extends IgcBannerComponent_base {
     static readonly tagName = "igc-banner";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private _internals;
-    private _bannerRef;
-    private _animationPlayer;
+    private readonly _bannerRef;
+    private readonly _animationPlayer;
     /**
      * Determines whether the banner is being shown/hidden.
      * @attr

package/components/banner/banner.js

@@ -4,30 +4,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var IgcBannerComponent_1;
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
+import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { styles } from './themes/banner.base.css.js';
 import { all } from './themes/themes.js';
-let IgcBannerComponent = IgcBannerComponent_1 = class IgcBannerComponent extends EventEmitterMixin(LitElement) {
+class IgcBannerComponent extends EventEmitterMixin(LitElement) {
     static register() {
-        registerComponent(IgcBannerComponent_1, IgcButtonComponent);
+        registerComponent(IgcBannerComponent, IgcButtonComponent);
     }
     constructor() {
         super();
         this._bannerRef = createRef();
         this._animationPlayer = addAnimationController(this, this._bannerRef);
         this.open = false;
-        this._internals = this.attachInternals();
-        this._internals.role = 'status';
-        this._internals.ariaLive = 'polite';
+        addThemingController(this, all);
+        addInternalsController(this, {
+            initialARIA: {
+                role: 'status',
+                ariaLive: 'polite',
+            },
+        });
     }
     async show() {
         if (this.open) {
@@ -87,14 +91,11 @@ let IgcBannerComponent = IgcBannerComponent_1 = class IgcBannerComponent extends
       </div>
     `;
     }
-};
+}
 IgcBannerComponent.tagName = 'igc-banner';
 IgcBannerComponent.styles = [styles];
+export default IgcBannerComponent;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcBannerComponent.prototype, "open", void 0);
-IgcBannerComponent = IgcBannerComponent_1 = __decorate([
-    themes(all)
-], IgcBannerComponent);
-export default IgcBannerComponent;
 //# sourceMappingURL=banner.js.map

package/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { type Ref, createRef, ref } from 'lit/directives/ref.js';\n\nimport { addAnimationController } from '../../animations/player.js';\nimport { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/banner.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcBannerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.\n *\n * @element igc-banner\n *\n * @slot - Renders the text content of the banner message.\n * @slot prefix - Renders additional content at the start of the message block.\n * @slot actions - Renders any action elements.\n *\n * @fires igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.\n * @fires igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.\n *\n * @csspart base - The base wrapper of the banner component.\n * @csspart spacer - The inner wrapper that sets the space around the banner.\n * @csspart message - The part that holds the text and the illustration.\n * @csspart illustration - The part that holds the banner icon/illustration.\n * @csspart content - The part that holds the banner text content.\n * @csspart actions - The part that holds the banner action buttons.\n */\n\n@themes(all)\nexport default class IgcBannerComponent extends EventEmitterMixin<\n  IgcBannerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-banner';\n  public static styles = [styles];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcBannerComponent, IgcButtonComponent);\n  }\n\n  private _internals: ElementInternals;\n  private _bannerRef: Ref<HTMLElement> = createRef();\n  private _animationPlayer = addAnimationController(this, this._bannerRef);\n\n  /**\n   * Determines whether the banner is being shown/hidden.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n\n    this._internals.role = 'status';\n    this._internals.ariaLive = 'polite';\n  }\n\n  /** Shows the banner if not already shown. Returns `true` when the animation has completed. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    return await this.toggleAnimation('open');\n  }\n\n  /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    await this.toggleAnimation('close');\n    this.open = false;\n    return true;\n  }\n\n  /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */\n  public async toggle(): Promise<boolean> {\n    return this.open ? await this.hide() : await this.show();\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? growVerIn : growVerOut;\n\n    const [_, event] = await Promise.all([\n      this._animationPlayer.stopAll(),\n      this._animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  private async handleClick() {\n    if (this.emitEvent('igcClosing', { cancelable: true })) {\n      await this.hide();\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div ${ref(this._bannerRef)} part=\"base\" .inert=${!this.open}>\n        <div part=\"spacer\">\n          <div part=\"message\">\n            <div part=\"illustration\">\n              <slot name=\"prefix\"></slot>\n            </div>\n            <div part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div part=\"actions\">\n            <slot name=\"actions\">\n              <igc-button\n                type=\"button\"\n                variant=\"flat\"\n                @click=${this.handleClick}\n                >OK</igc-button\n              >\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-banner': IgcBannerComponent;\n  }\n}\n"]}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, type Ref, ref } from 'lit/directives/ref.js';\n\nimport { addAnimationController } from '../../animations/player.js';\nimport { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/banner.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcBannerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.\n *\n * @element igc-banner\n *\n * @slot - Renders the text content of the banner message.\n * @slot prefix - Renders additional content at the start of the message block.\n * @slot actions - Renders any action elements.\n *\n * @fires igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.\n * @fires igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.\n *\n * @csspart base - The base wrapper of the banner component.\n * @csspart spacer - The inner wrapper that sets the space around the banner.\n * @csspart message - The part that holds the text and the illustration.\n * @csspart illustration - The part that holds the banner icon/illustration.\n * @csspart content - The part that holds the banner text content.\n * @csspart actions - The part that holds the banner action buttons.\n */\n\nexport default class IgcBannerComponent extends EventEmitterMixin<\n  IgcBannerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-banner';\n  public static styles = [styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBannerComponent, IgcButtonComponent);\n  }\n\n  private readonly _bannerRef: Ref<HTMLElement> = createRef();\n  private readonly _animationPlayer = addAnimationController(\n    this,\n    this._bannerRef\n  );\n\n  /**\n   * Determines whether the banner is being shown/hidden.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: {\n        role: 'status',\n        ariaLive: 'polite',\n      },\n    });\n  }\n\n  /** Shows the banner if not already shown. Returns `true` when the animation has completed. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    return await this.toggleAnimation('open');\n  }\n\n  /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    await this.toggleAnimation('close');\n    this.open = false;\n    return true;\n  }\n\n  /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */\n  public async toggle(): Promise<boolean> {\n    return this.open ? await this.hide() : await this.show();\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? growVerIn : growVerOut;\n\n    const [_, event] = await Promise.all([\n      this._animationPlayer.stopAll(),\n      this._animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  private async handleClick() {\n    if (this.emitEvent('igcClosing', { cancelable: true })) {\n      await this.hide();\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div ${ref(this._bannerRef)} part=\"base\" .inert=${!this.open}>\n        <div part=\"spacer\">\n          <div part=\"message\">\n            <div part=\"illustration\">\n              <slot name=\"prefix\"></slot>\n            </div>\n            <div part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div part=\"actions\">\n            <slot name=\"actions\">\n              <igc-button\n                type=\"button\"\n                variant=\"flat\"\n                @click=${this.handleClick}\n                >OK</igc-button\n              >\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-banner': IgcBannerComponent;\n  }\n}\n"]}

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

@@ -7,13 +7,7 @@ export interface IgcButtonEventMap {
 declare const IgcButtonBaseComponent_base: Constructor<import("../common//mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseComponent_base {
     static readonly formAssociated = true;
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    protected readonly __internals: ElementInternals;
+    protected readonly _internals: import("../common/controllers/internals.js").ElementInternalsController;
     private readonly _focusRingManager;
     protected _disabled: boolean;
     private readonly _nativeButton;
@@ -26,12 +20,12 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
      * The URL the button points to.
      * @attr
      */
-    href: string;
+    href?: string;
     /**
      * Prompts to save the linked URL instead of navigating to it.
      * @attr
      */
-    download: string;
+    download?: string;
     /**
      * Where to display the linked URL, as the name for a browsing context.
      * @attr
@@ -42,7 +36,7 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
      * @attr
      */
-    rel: string;
+    rel?: string;
     /**
      * The disabled state of the component
      * @attr [disabled=false]
@@ -51,7 +45,6 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
     get disabled(): boolean;
     /** Returns the HTMLFormElement associated with this element. */
     get form(): HTMLFormElement | null;
-    constructor();
     /** Sets focus in the button. */
     focus(options?: FocusOptions): void;
     /** Simulates a mouse click on the element */

package/components/button/button-base.js

@@ -4,14 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+import { addInternalsController } from '../common/controllers/internals.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
+import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
 let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._internals = addInternalsController(this);
+        this._focusRingManager = addKeyboardFocusRing(this);
+        this._disabled = false;
+        this.type = 'button';
+    }
     set disabled(value) {
         this._disabled = value;
         this.toggleAttribute('disabled', Boolean(this._disabled));
@@ -20,14 +29,7 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
         return this._disabled;
     }
     get form() {
-        return this.__internals.form;
-    }
-    constructor() {
-        super();
-        this._focusRingManager = addKeyboardFocusRing(this);
-        this._disabled = false;
-        this.type = 'button';
-        this.__internals = this.attachInternals();
+        return this._internals.form;
     }
     focus(options) {
         this._nativeButton.focus(options);
@@ -85,10 +87,6 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
     }
 };
 IgcButtonBaseComponent.formAssociated = true;
-IgcButtonBaseComponent.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 __decorate([
     query('[part="base"]', true)
 ], IgcButtonBaseComponent.prototype, "_nativeButton", void 0);
@@ -111,7 +109,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonBaseComponent.prototype, "disabled", null);
 IgcButtonBaseComponent = __decorate([
-    blazorDeepImport
+    blazorDeepImport,
+    shadowOptions({ delegatesFocus: true })
 ], IgcButtonBaseComponent);
 export { IgcButtonBaseComponent };
 //# sourceMappingURL=button-base.js.map