igniteui-webcomponents 4.6.0 → 4.7.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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/).
 
+## [4.7.0] - 2024-01-05
+### Added
+- Tree - Added **`toggleNodeOnClick`** property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. [#1003](https://github.com/IgniteUI/igniteui-webcomponents/pull/1003).
+- Rating - **`allowReset`** added. When enabled selecting the same value will reset the component [#1014](https://github.com/IgniteUI/igniteui-webcomponents/issues/1014).
+  **Behavioral change**
+
+  In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application.
+
+### Changed
+- Improved WAI-ARIA compliance for Avatar, Badge and Combo components [#1007](https://github.com/IgniteUI/igniteui-webcomponents/pull/1007)
+
+### Fixed
+- Active item visual styles for Dropdown, Select and Combo components [#1002](https://github.com/IgniteUI/igniteui-webcomponents/pull/1002)
+- Navigation drawer - mini variant broken visual style [#1011](https://github.com/IgniteUI/igniteui-webcomponents/pull/1011)
+
 ## [4.6.0] - 2023-12-05
 ### Added
 - **`action`** slot added to Snackbar [#974](https://github.com/IgniteUI/igniteui-webcomponents/issues/974)
@@ -384,6 +399,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[4.7.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.6.0...4.7.0
 [4.6.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.5.0...4.6.0
 [4.5.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.4.0...4.5.0
 [4.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.3.1...4.4.0

package/animations/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,eAAe;IAG1B,YAAY,MAAmB;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACpE,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IAEO,cAAc,CAAC,SAAqB;QAC1C,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAChC,IAAI,CAAC,QAAQ,CAAC,MAAM;gBAAE,OAAO,QAAQ,CAAC;YAEtC,OAAO;gBACL,GAAG,QAAQ;gBACX,MAAM,EACJ,QAAQ,CAAC,MAAM,KAAK,MAAM;oBACxB,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI;oBACjC,CAAC,CAAC,QAAQ,CAAC,MAAM;aACtB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,SAAqC;QACrD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QAErC,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,OAAO,EAAE,QAAQ,KAAK,QAAQ,EAAE;gBAClC,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;aAC7D;YAED,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YACnD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE;gBACrD,GAAG,OAAO;gBACV,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAQ,CAAC,QAAQ;aAC9D,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,OAAO;QACZ,OAAO,OAAO,CAAC,GAAG,CAChB,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YAC5C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;gBAElE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,MAAM,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { AnimationReferenceMetadata } from './types.js';\n\nexport class AnimationPlayer {\n  private target!: HTMLElement;\n\n  constructor(target: HTMLElement) {\n    this.target = target;\n  }\n\n  private prefersReducedMotion() {\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n    return query.matches;\n  }\n\n  private parseKeyframes(keyframes: Keyframe[]) {\n    return keyframes.map((keyframe) => {\n      if (!keyframe.height) return keyframe;\n\n      return {\n        ...keyframe,\n        height:\n          keyframe.height === 'auto'\n            ? `${this.target.scrollHeight}px`\n            : keyframe.height,\n      };\n    });\n  }\n\n  public async play(animation: AnimationReferenceMetadata) {\n    const { steps, options } = animation;\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      if (options?.duration === Infinity) {\n        throw new Error('Promise-based animations must be finite.');\n      }\n\n      const parsedKeyframes = this.parseKeyframes(steps);\n      const animation = this.target.animate(parsedKeyframes, {\n        ...options,\n        duration: this.prefersReducedMotion() ? 0 : options!.duration,\n      });\n\n      animation.addEventListener('cancel', resolve, { once: true });\n      animation.addEventListener('finish', resolve, { once: true });\n    });\n  }\n\n  public stopAll() {\n    return Promise.all(\n      this.target.getAnimations().map((animation) => {\n        return new Promise((resolve) => {\n          const handleAnimationEvent = () => requestAnimationFrame(resolve);\n\n          animation.addEventListener('cancel', handleAnimationEvent, {\n            once: true,\n          });\n          animation.addEventListener('finish', handleAnimationEvent, {\n            once: true,\n          });\n          animation.cancel();\n        });\n      })\n    );\n  }\n}\n"]}
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,eAAe;IAG1B,YAAY,MAAmB;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACpE,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IAEO,cAAc,CAAC,SAAqB;QAC1C,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAChC,IAAI,CAAC,QAAQ,CAAC,MAAM;gBAAE,OAAO,QAAQ,CAAC;YAEtC,OAAO;gBACL,GAAG,QAAQ;gBACX,MAAM,EACJ,QAAQ,CAAC,MAAM,KAAK,MAAM;oBACxB,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI;oBACjC,CAAC,CAAC,QAAQ,CAAC,MAAM;aACtB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,SAAqC;QACrD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QAErC,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,OAAO,EAAE,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBACnC,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;YAC9D,CAAC;YAED,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YACnD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE;gBACrD,GAAG,OAAO;gBACV,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAQ,CAAC,QAAQ;aAC9D,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,OAAO;QACZ,OAAO,OAAO,CAAC,GAAG,CAChB,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YAC5C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;gBAElE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,MAAM,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { AnimationReferenceMetadata } from './types.js';\n\nexport class AnimationPlayer {\n  private target!: HTMLElement;\n\n  constructor(target: HTMLElement) {\n    this.target = target;\n  }\n\n  private prefersReducedMotion() {\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n    return query.matches;\n  }\n\n  private parseKeyframes(keyframes: Keyframe[]) {\n    return keyframes.map((keyframe) => {\n      if (!keyframe.height) return keyframe;\n\n      return {\n        ...keyframe,\n        height:\n          keyframe.height === 'auto'\n            ? `${this.target.scrollHeight}px`\n            : keyframe.height,\n      };\n    });\n  }\n\n  public async play(animation: AnimationReferenceMetadata) {\n    const { steps, options } = animation;\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      if (options?.duration === Infinity) {\n        throw new Error('Promise-based animations must be finite.');\n      }\n\n      const parsedKeyframes = this.parseKeyframes(steps);\n      const animation = this.target.animate(parsedKeyframes, {\n        ...options,\n        duration: this.prefersReducedMotion() ? 0 : options!.duration,\n      });\n\n      animation.addEventListener('cancel', resolve, { once: true });\n      animation.addEventListener('finish', resolve, { once: true });\n    });\n  }\n\n  public stopAll() {\n    return Promise.all(\n      this.target.getAnimations().map((animation) => {\n        return new Promise((resolve) => {\n          const handleAnimationEvent = () => requestAnimationFrame(resolve);\n\n          animation.addEventListener('cancel', handleAnimationEvent, {\n            once: true,\n          });\n          animation.addEventListener('finish', handleAnimationEvent, {\n            once: true,\n          });\n          animation.cancel();\n        });\n      })\n    );\n  }\n}\n"]}

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 { styles } from './themes/accordion.base.css.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.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  public static register() {\n    registerComponent(this, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({ selector: 'igc-expansion-panel:not([disabled])' })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  private get firstEnabled() {\n    return this.enabledPanels[0];\n  }\n\n  private get lastEnabled() {\n    return this.enabledPanels[this.enabledPanels.length - 1];\n  }\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  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: 'igc-expansion-panel' })\n  @blazorSuppress()\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, () => this.getPanelHeader(this.firstEnabled).focus())\n      .set(endKey, () => this.getPanelHeader(this.lastEnabled).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 (event.altKey || next.isSameNode(current)) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (event.altKey || next.isSameNode(current)) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private collapseAll() {\n    const panels = this.enabledPanels;\n    for (const panel of panels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const panels = this.enabledPanels;\n\n    if (this.singleExpand) {\n      for (const panel of panels) {\n        current.isSameNode(panel)\n          ? this.openPanel(panel)\n          : this.closePanel(panel);\n      }\n    } else {\n      for (const panel of panels) {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const panel = event.target as IgcExpansionPanelComponent;\n    if (!this.singleExpand || !this.panels.includes(panel)) {\n      return;\n    }\n    this.enabledPanels.forEach((p) => {\n      if (p.open && p !== panel) {\n        this.closePanel(p);\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.shadowRoot?.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (!panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {\n      return;\n    }\n    panel.hide();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {\n      return;\n    }\n\n    panel.show();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public hideAll() {\n    this.panels.forEach((p) => p.hide());\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public showAll() {\n    this.panels.forEach((p) => p.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 { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './themes/accordion.base.css.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.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  public static register() {\n    registerComponent(this, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({ selector: 'igc-expansion-panel:not([disabled])' })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  private get firstEnabled() {\n    return this.enabledPanels[0];\n  }\n\n  private get lastEnabled() {\n    return this.enabledPanels[this.enabledPanels.length - 1];\n  }\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  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: 'igc-expansion-panel' })\n  @blazorSuppress()\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, () => this.getPanelHeader(this.firstEnabled).focus())\n      .set(endKey, () => this.getPanelHeader(this.lastEnabled).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 (event.altKey || next.isSameNode(current)) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (event.altKey || next.isSameNode(current)) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private collapseAll() {\n    const panels = this.enabledPanels;\n    for (const panel of panels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const panels = this.enabledPanels;\n\n    if (this.singleExpand) {\n      for (const panel of panels) {\n        current.isSameNode(panel)\n          ? this.openPanel(panel)\n          : this.closePanel(panel);\n      }\n    } else {\n      for (const panel of panels) {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const panel = event.target as IgcExpansionPanelComponent;\n    if (!this.singleExpand || !this.panels.includes(panel)) {\n      return;\n    }\n    this.enabledPanels.forEach((p) => {\n      if (p.open && p !== panel) {\n        this.closePanel(p);\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.shadowRoot?.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (!panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {\n      return;\n    }\n    panel.hide();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {\n      return;\n    }\n\n    panel.show();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public hideAll() {\n    this.panels.forEach((p) => p.hide());\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public showAll() {\n    this.panels.forEach((p) => p.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

@@ -15,14 +15,15 @@ declare const IgcAvatarComponent_base: import("../common/mixins/constructor.js")
  */
 export default class IgcAvatarComponent extends IgcAvatarComponent_base {
     static readonly tagName = "igc-avatar";
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static register(): void;
+    private __internals;
+    private hasError;
     /**
      * The image source to use.
      * @attr
      */
     src: string;
-    private hasError;
     /**
      * Alternative text for the image.
      * @attr
@@ -38,8 +39,8 @@ export default class IgcAvatarComponent extends IgcAvatarComponent_base {
      * @attr
      */
     shape: 'circle' | 'rounded' | 'square';
-    private get classes();
     constructor();
+    protected roleDescriptionChange(): void;
     protected handleErrorState(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/avatar/avatar.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 { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styles } from './themes/avatar.base.css.js';
+import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
@@ -18,57 +18,49 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
     static register() {
         registerComponent(this);
     }
-    get classes() {
-        const { shape } = this;
-        return {
-            circle: shape === 'circle',
-            rounded: shape === 'rounded',
-            square: shape === 'square',
-        };
-    }
     constructor() {
         super();
         this.hasError = false;
         this.shape = 'square';
+        this.__internals = this.attachInternals();
+        this.__internals.role = 'img';
+        this.__internals.ariaLabel = 'avatar';
         this.size = 'small';
     }
+    roleDescriptionChange() {
+        this.__internals.ariaRoleDescription = this.alt ?? this.initials;
+    }
     handleErrorState() {
         this.hasError = false;
     }
     render() {
         return html `
-      <div
-        part="base"
-        role="img"
-        aria-label="avatar"
-        aria-roledescription=${this.shape}
-        class=${classMap(this.classes)}
-      >
+      <div part="base">
         ${this.initials
             ? html `<span part="initials">${this.initials}</span>`
-            : html ` <slot></slot> `}
+            : html `<slot></slot>`}
         ${this.src && !this.hasError
             ? html `
               <img
                 part="image"
                 alt=${ifDefined(this.alt)}
                 src=${ifDefined(this.src)}
-                @error="${() => (this.hasError = true)}"
+                @error=${() => (this.hasError = true)}
               />
             `
-            : ''}
+            : nothing}
       </div>
     `;
     }
 };
 IgcAvatarComponent.tagName = 'igc-avatar';
-IgcAvatarComponent.styles = styles;
-__decorate([
-    property()
-], IgcAvatarComponent.prototype, "src", void 0);
+IgcAvatarComponent.styles = [styles, shared];
 __decorate([
     state()
 ], IgcAvatarComponent.prototype, "hasError", void 0);
+__decorate([
+    property()
+], IgcAvatarComponent.prototype, "src", void 0);
 __decorate([
     property()
 ], IgcAvatarComponent.prototype, "alt", void 0);
@@ -78,6 +70,10 @@ __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);

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,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAgB5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAI/D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAiCD,IAAY,OAAO;QACjB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;SAC3B,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAlCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAcvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,KAAK;gBACzB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAlFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAWhC;IADN,QAAQ,EAAE;+CACS;AAGZ;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAkB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AAzDkB,kBAAkB;IADtC,MAAM,CAAC,GAAG,CAAC;GACS,kBAAkB,CAoFtC;eApFoB,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { styles } from './themes/avatar.base.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { SizableMixin } from '../common/mixins/sizable.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 SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\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: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,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,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAgB5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAI/D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAmCD;QACE,KAAK,EAAE,CAAC;QA/BF,aAAQ,GAAG,KAAK,CAAC;QA4BlB,UAAK,GAAoC,QAAQ,CAAC;QAKvD,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;QAEtC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,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;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,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAExC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA/EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AASzC;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;iDAC6B;AAc/C;IAFT,KAAK,CAAC,UAAU,CAAC;IACjB,KAAK,CAAC,KAAK,CAAC;+DAGZ;AAGS;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AA5DkB,kBAAkB;IADtC,MAAM,CAAC,GAAG,CAAC;GACS,kBAAkB,CAiFtC;eAjFoB,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 { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { SizableMixin } from '../common/mixins/sizable.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 SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  public static register() {\n    registerComponent(this);\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: 'circle' | 'rounded' | 'square' = 'square';\n\n  constructor() {\n    super();\n\n    this.__internals = this.attachInternals();\n    this.__internals.role = 'img';\n    this.__internals.ariaLabel = 'avatar';\n\n    this.size = 'small';\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 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.hasError = true)}\n              />\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/avatar/themes/themes.js

@@ -8,35 +8,34 @@ import { styles as fluentLight } from './light/avatar.fluent.css.js';
 import { styles as indigoLight } from './light/avatar.indigo.css.js';
 import { styles as materialLight } from './light/avatar.material.css.js';
 import { styles as bootstrap } from './shared/avatar.bootstrap.css.js';
-import { styles as shared } from './shared/avatar.common.css.js';
 import { styles as fluent } from './shared/avatar.fluent.css.js';
 import { styles as indigo } from './shared/avatar.indigo.css.js';
 const light = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
     material: css `
-    ${shared} ${materialLight}
+    ${materialLight}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentLight}
+    ${fluent} ${fluentLight}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 const dark = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapDark}
+    ${bootstrap} ${bootstrapDark}
   `,
     material: css `
-    ${shared} ${materialDark}
+    ${materialDark}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentDark}
+    ${fluent} ${fluentDark}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 export const all = { light, dark };

package/components/avatar/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAGjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,cAAc;GACxC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,aAAa;GAC1B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,aAAa;GACvC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,YAAY;GACzB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/avatar.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/avatar.fluent.css.js';\nimport { styles as indigoDark } from './dark/avatar.indigo.css.js';\nimport { styles as materialDark } from './dark/avatar.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/avatar.bootstrap.css.js';\nimport { styles as fluentLight } from './light/avatar.fluent.css.js';\nimport { styles as indigoLight } from './light/avatar.indigo.css.js';\nimport { styles as materialLight } from './light/avatar.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/avatar.bootstrap.css.js';\nimport { styles as shared } from './shared/avatar.common.css.js';\nimport { styles as fluent } from './shared/avatar.fluent.css.js';\nimport { styles as indigo } from './shared/avatar.indigo.css.js';\nimport type { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${shared} ${materialLight}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${shared} ${materialDark}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAGjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/avatar.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/avatar.fluent.css.js';\nimport { styles as indigoDark } from './dark/avatar.indigo.css.js';\nimport { styles as materialDark } from './dark/avatar.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/avatar.bootstrap.css.js';\nimport { styles as fluentLight } from './light/avatar.fluent.css.js';\nimport { styles as indigoLight } from './light/avatar.indigo.css.js';\nimport { styles as materialLight } from './light/avatar.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/avatar.bootstrap.css.js';\nimport { styles as fluent } from './shared/avatar.fluent.css.js';\nimport { styles as indigo } from './shared/avatar.indigo.css.js';\nimport type { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/badge/badge.d.ts

@@ -11,8 +11,9 @@ import { LitElement } from 'lit';
  */
 export default class IgcBadgeComponent extends LitElement {
     static readonly tagName = "igc-badge";
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static register(): void;
+    private __internals;
     /**
      * The type of badge.
      * @attr
@@ -28,6 +29,8 @@ export default class IgcBadgeComponent extends LitElement {
      * @attr
      */
     shape: 'rounded' | 'square';
+    constructor();
+    protected variantChange(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/badge/badge.js

@@ -7,29 +7,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.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';
 import { themes } from '../../theming/theming-decorator.js';
+import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 let IgcBadgeComponent = class IgcBadgeComponent extends LitElement {
+    static register() {
+        registerComponent(this);
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.variant = 'primary';
         this.outlined = false;
         this.shape = 'rounded';
+        this.__internals = this.attachInternals();
+        this.__internals.role = 'status';
     }
-    static register() {
-        registerComponent(this);
+    variantChange() {
+        this.__internals.ariaRoleDescription = `badge ${this.variant}`;
     }
     render() {
         return html `
-      <span part="base" role="img" aria-label="badge">
+      <span part="base">
         <slot></slot>
       </span>
     `;
     }
 };
 IgcBadgeComponent.tagName = 'igc-badge';
-IgcBadgeComponent.styles = styles;
+IgcBadgeComponent.styles = [styles, shared];
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "variant", void 0);
@@ -39,6 +46,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "shape", void 0);
+__decorate([
+    watch('variant')
+], IgcBadgeComponent.prototype, "variantChange", null);
 IgcBadgeComponent = __decorate([
     themes(all)
 ], IgcBadgeComponent);

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,4BAA4B,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAavD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAaN,YAAO,GACZ,SAAS,CAAC;QAOL,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAyB,SAAS,CAAC;IASjD,CAAC;IAjCQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAwBkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAnCsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,MAAM,AAAT,CAAU;AAWhC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAOL;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACmB;AA5B5B,iBAAiB;IADrC,MAAM,CAAC,GAAG,CAAC;GACS,iBAAiB,CAqCrC;eArCoB,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { styles } from './themes/badge.base.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.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;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    '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: 'rounded' | 'square' = 'rounded';\n\n  protected override render() {\n    return html`\n      <span part=\"base\" role=\"img\" aria-label=\"badge\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}
+{"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,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAavD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAIhD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IA0BD;QACE,KAAK,EAAE,CAAC;QAlBH,YAAO,GACZ,SAAS,CAAC;QAOL,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAyB,SAAS,CAAC;QAI7C,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;AAa1C;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAOL;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACmB;AASrC;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 { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.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  public static register() {\n    registerComponent(this);\n  }\n\n  private __internals: ElementInternals;\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    '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: 'rounded' | 'square' = '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"]}

package/components/badge/themes/themes.js

@@ -8,33 +8,32 @@ import { styles as fluentLight } from './light/badge.fluent.css.js';
 import { styles as indigoLight } from './light/badge.indigo.css.js';
 import { styles as materialLight } from './light/badge.material.css.js';
 import { styles as bootstrap } from './shared/badge.bootstrap.css.js';
-import { styles as shared } from './shared/badge.common.css.js';
 const light = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
     material: css `
-    ${shared} ${materialLight}
+    ${materialLight}
   `,
     fluent: css `
-    ${shared} ${fluentLight}
+    ${fluentLight}
   `,
     indigo: css `
-    ${shared} ${indigoLight}
+    ${indigoLight}
   `,
 };
 const dark = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapDark}
+    ${bootstrap} ${bootstrapDark}
   `,
     material: css `
-    ${shared} ${materialDark}
+    ${materialDark}
   `,
     fluent: css `
-    ${shared} ${fluentDark}
+    ${fluentDark}
   `,
     indigo: css `
-    ${shared} ${indigoDark}
+    ${indigoDark}
   `,
 };
 export const all = { light, dark };

package/components/badge/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,cAAc;GACxC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,aAAa;GAC1B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,aAAa;GACvC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,YAAY;GACzB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/badge.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/badge.fluent.css.js';\nimport { styles as indigoDark } from './dark/badge.indigo.css.js';\nimport { styles as materialDark } from './dark/badge.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/badge.bootstrap.css.js';\nimport { styles as fluentLight } from './light/badge.fluent.css.js';\nimport { styles as indigoLight } from './light/badge.indigo.css.js';\nimport { styles as materialLight } from './light/badge.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/badge.bootstrap.css.js';\nimport { styles as shared } from './shared/badge.common.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${shared} ${materialLight}\n  `,\n  fluent: css`\n    ${shared} ${fluentLight}\n  `,\n  indigo: css`\n    ${shared} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${shared} ${materialDark}\n  `,\n  fluent: css`\n    ${shared} ${fluentDark}\n  `,\n  indigo: css`\n    ${shared} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGtE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/badge.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/badge.fluent.css.js';\nimport { styles as indigoDark } from './dark/badge.indigo.css.js';\nimport { styles as materialDark } from './dark/badge.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/badge.bootstrap.css.js';\nimport { styles as fluentLight } from './light/badge.fluent.css.js';\nimport { styles as indigoLight } from './light/badge.indigo.css.js';\nimport { styles as materialLight } from './light/badge.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/badge.bootstrap.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-import { Constructor } from '../common/mixins/constructor.js';
+import type { Constructor } from '../common/mixins/constructor.js';
 export interface IgcButtonEventMap {
     igcFocus: CustomEvent<void>;
     igcBlur: CustomEvent<void>;
@@ -12,11 +12,11 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    private __internals;
-    private nativeElement;
+    protected __internals: ElementInternals;
     protected _disabled: boolean;
+    private _nativeButton;
     /**
-     * The type of the button. Defaults to undefined.
+     * The type of the button. Defaults to `button`.
      * @attr
      */
     type: 'button' | 'reset' | 'submit';
@@ -34,7 +34,7 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
      * Where to display the linked URL, as the name for a browsing context.
      * @attr
      */
-    target: '_blank' | '_parent' | '_self' | '_top' | undefined;
+    target?: '_blank' | '_parent' | '_self' | '_top';
     /**
      * The relationship of the linked URL.
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
@@ -58,7 +58,6 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
     blur(): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
-    protected get classes(): {};
     protected handleClick(): void;
     protected formDisabledCallback(state: boolean): void;
     private renderButton;

package/components/button/button-base.js

@@ -4,12 +4,10 @@ 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 { LitElement, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
-import { alternateName } from '../common/decorators/alternateName.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
 let IgcButtonBaseComponent = class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
@@ -28,17 +26,18 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends SizableMixin(E
     constructor() {
         super();
         this._disabled = false;
+        this.type = 'button';
         this.__internals = this.attachInternals();
         this.size = 'medium';
     }
     focus(options) {
-        this.nativeElement.focus(options);
+        this._nativeButton.focus(options);
     }
     click() {
-        this.nativeElement.click();
+        this._nativeButton.click();
     }
     blur() {
-        this.nativeElement.blur();
+        this._nativeButton.blur();
     }
     handleFocus() {
         this.emitEvent('igcFocus');
@@ -46,9 +45,6 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends SizableMixin(E
     handleBlur() {
         this.emitEvent('igcBlur');
     }
-    get classes() {
-        return {};
-    }
     handleClick() {
         switch (this.type) {
             case 'submit':
@@ -67,9 +63,8 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends SizableMixin(E
         return html `
       <button
         part="base"
-        .ariaLabel=${this.ariaLabel}
-        .disabled=${this.disabled}
-        class=${classMap(this.classes)}
+        aria-label=${ifDefined(this.ariaLabel ?? nothing)}
+        ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
@@ -84,15 +79,14 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends SizableMixin(E
       <a
         part="base"
         role="button"
+        aria-label=${ifDefined(this.ariaLabel ?? nothing)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.rel)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        .ariaLabel=${this.ariaLabel}
-        class=${classMap(this.classes)}
-        @focus=${!this.disabled && this.handleFocus}
-        @blur=${!this.disabled && this.handleBlur}
+        @focus=${this.disabled ? nothing : this.handleFocus}
+        @blur=${this.disabled ? nothing : this.handleBlur}
       >
         ${this.renderContent()}
       </a>
@@ -110,10 +104,9 @@ IgcButtonBaseComponent.shadowRootOptions = {
 };
 __decorate([
     query('[part="base"]', true)
-], IgcButtonBaseComponent.prototype, "nativeElement", void 0);
+], IgcButtonBaseComponent.prototype, "_nativeButton", void 0);
 __decorate([
-    alternateName('displayType'),
-    property()
+    property({ reflect: true })
 ], IgcButtonBaseComponent.prototype, "type", void 0);
 __decorate([
     property()
@@ -130,12 +123,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonBaseComponent.prototype, "disabled", null);
-__decorate([
-    alternateName('focusComponent')
-], IgcButtonBaseComponent.prototype, "focus", null);
-__decorate([
-    alternateName('blurComponent')
-], IgcButtonBaseComponent.prototype, "blur", null);
 IgcButtonBaseComponent = __decorate([
     blazorDeepImport
 ], IgcButtonBaseComponent);