igniteui-webcomponents 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.5.0] - 2023-10-09
+### Added
+- Text area component [#764](https://github.com/IgniteUI/igniteui-webcomponents/issues/764)
+- Button group component [#827](https://github.com/IgniteUI/igniteui-webcomponents/issues/827)
+- Toggle button component [#877](https://github.com/IgniteUI/igniteui-webcomponents/issues/877)
+- Navigation drawer now supports CSS transitions [#922](https://github.com/IgniteUI/igniteui-webcomponents/pull/922)
+- Position attribute for toast and snackbar [#934](https://github.com/IgniteUI/igniteui-webcomponents/pull/934)
+
+### Deprecated
+- The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead.
+  The following example sets the size of the avatar component to small:
+  ```css
+    igc-avatar {
+      --ig-size: var(--ig-size-small);
+    }
+  ```
+
+### Fixed
+- Combo items position in Safari [#903](https://github.com/IgniteUI/igniteui-webcomponents/pull/903)
+- Calendar navigation buttons in RTL context [#915](https://github.com/IgniteUI/igniteui-webcomponents/pull/915)
+- Export `IgcComboChangeEventArgs` type [#917](https://github.com/IgniteUI/igniteui-webcomponents/pull/917)
+- Combo value and selection states with lazy data binding [#937](https://github.com/IgniteUI/igniteui-webcomponents/pull/937)
+- Various style and theming fixes and adjustments
+
 ## [4.4.0] - 2023-08-30
 ### Added
 - The following components are now Form Associated Custom Elements. They are automatically associated with a parent `<form>`
@@ -338,6 +362,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[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
 [4.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.3.0...4.3.1
 [4.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.3...4.3.0

package/components/accordion/accordion.d.ts

@@ -11,6 +11,7 @@ import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 export default class IgcAccordionComponent extends LitElement {
     static readonly tagName = "igc-accordion";
     static styles: import("lit").CSSResult;
+    static register(): void;
     private get _enabledPanels();
     /**
      * Allows only one panel to be expanded at a time.

package/components/accordion/accordion.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { styles } from './themes/accordion.base.css.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
-import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
-defineComponents(IgcExpansionPanelComponent);
+import { registerComponent } from '../common/definitions/register.js';
+import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 class IgcAccordionComponent extends LitElement {
+    static register() {
+        registerComponent(this, IgcExpansionPanelComponent);
+    }
     get _enabledPanels() {
         return this.panels.filter((p) => !p.disabled);
     }

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';\nimport { styles } from './themes/accordion.base.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\n\ndefineComponents(IgcExpansionPanelComponent);\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  private get _enabledPanels(): Array<IgcExpansionPanelComponent> {\n    return this.panels.filter((p) => !p.disabled);\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    this.addEventListener('keydown', this.handleKeydown, { capture: true });\n    this.addEventListener('igcOpening', this.handlePanelOpening);\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 handleKeydown = (event: KeyboardEvent) => {\n    if (\n      (event.target as HTMLElement).tagName.toLowerCase() !==\n        'igc-expansion-panel' ||\n      !this._enabledPanels.includes(event.target as IgcExpansionPanelComponent)\n    ) {\n      return;\n    }\n    switch (event.key.toLowerCase()) {\n      case 'home':\n        this.getPanelHeader(this._enabledPanels.at(0)!).focus();\n        break;\n      case 'end':\n        this.getPanelHeader(this._enabledPanels.at(-1)!).focus();\n        break;\n      case 'arrowup':\n      case 'up':\n        this.handleUpDownArrow(true, event);\n        break;\n      case 'arrowdown':\n      case 'down':\n        this.handleUpDownArrow(false, event);\n        break;\n    }\n  };\n\n  private handleUpDownArrow(isUp: boolean, event: KeyboardEvent) {\n    const focusedPanel = event.target as IgcExpansionPanelComponent;\n    if (!event.altKey) {\n      const next = this.getNextPanel(focusedPanel, isUp ? -1 : 1);\n      if (next === focusedPanel) {\n        return;\n      }\n      this.getPanelHeader(next).focus();\n    }\n    if (event.shiftKey && event.altKey) {\n      if (this.singleExpand && !isUp) {\n        this._enabledPanels.forEach((p) =>\n          p !== focusedPanel ? this.closePanel(p) : this.openPanel(p)\n        );\n        return;\n      }\n\n      if (isUp) {\n        this._enabledPanels.forEach((p) => this.closePanel(p));\n      } else {\n        this._enabledPanels.forEach((p) => this.openPanel(p));\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const panelIndex = this._enabledPanels.indexOf(panel);\n    return this._enabledPanels[panelIndex + 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';\nimport { styles } from './themes/accordion.base.css.js';\n\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  private get _enabledPanels(): Array<IgcExpansionPanelComponent> {\n    return this.panels.filter((p) => !p.disabled);\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    this.addEventListener('keydown', this.handleKeydown, { capture: true });\n    this.addEventListener('igcOpening', this.handlePanelOpening);\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 handleKeydown = (event: KeyboardEvent) => {\n    if (\n      (event.target as HTMLElement).tagName.toLowerCase() !==\n        'igc-expansion-panel' ||\n      !this._enabledPanels.includes(event.target as IgcExpansionPanelComponent)\n    ) {\n      return;\n    }\n    switch (event.key.toLowerCase()) {\n      case 'home':\n        this.getPanelHeader(this._enabledPanels.at(0)!).focus();\n        break;\n      case 'end':\n        this.getPanelHeader(this._enabledPanels.at(-1)!).focus();\n        break;\n      case 'arrowup':\n      case 'up':\n        this.handleUpDownArrow(true, event);\n        break;\n      case 'arrowdown':\n      case 'down':\n        this.handleUpDownArrow(false, event);\n        break;\n    }\n  };\n\n  private handleUpDownArrow(isUp: boolean, event: KeyboardEvent) {\n    const focusedPanel = event.target as IgcExpansionPanelComponent;\n    if (!event.altKey) {\n      const next = this.getNextPanel(focusedPanel, isUp ? -1 : 1);\n      if (next === focusedPanel) {\n        return;\n      }\n      this.getPanelHeader(next).focus();\n    }\n    if (event.shiftKey && event.altKey) {\n      if (this.singleExpand && !isUp) {\n        this._enabledPanels.forEach((p) =>\n          p !== focusedPanel ? this.closePanel(p) : this.openPanel(p)\n        );\n        return;\n      }\n\n      if (isUp) {\n        this._enabledPanels.forEach((p) => this.closePanel(p));\n      } else {\n        this._enabledPanels.forEach((p) => this.openPanel(p));\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const panelIndex = this._enabledPanels.indexOf(panel);\n    return this._enabledPanels[panelIndex + 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

@@ -16,6 +16,7 @@ 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 register(): void;
     /**
      * The image source to use.
      * @attr

package/components/avatar/avatar.js

@@ -10,22 +10,20 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
 import { styles } from './themes/avatar.base.css.js';
-import { styles as material } from './themes/light/avatar.material.css.js';
-import { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';
-import { styles as fluent } from './themes/light/avatar.fluent.css.js';
-import { styles as indigo } from './themes/light/avatar.indigo.css.js';
+import { all } from './themes/themes.js';
 let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElement) {
+    static register() {
+        registerComponent(this);
+    }
     get classes() {
-        const { size, shape } = this;
+        const { shape } = this;
         return {
             circle: shape === 'circle',
             rounded: shape === 'rounded',
             square: shape === 'square',
-            small: size === 'small',
-            medium: size === 'medium',
-            large: size === 'large',
         };
     }
     constructor() {
@@ -43,7 +41,7 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
         part="base"
         role="img"
         aria-label="avatar"
-        aria-roledescription=${this.size + ' ' + this.shape}
+        aria-roledescription=${this.shape}
         class=${classMap(this.classes)}
       >
         ${this.initials
@@ -84,7 +82,7 @@ __decorate([
     watch('src')
 ], IgcAvatarComponent.prototype, "handleErrorState", null);
 IgcAvatarComponent = __decorate([
-    themes({ bootstrap, material, fluent, indigo })
+    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,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAgBvE,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAmCtE,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QArCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,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,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAjFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;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;AAqB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AAxDkB,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,kBAAkB,CAmFtC;eAnFoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as material } from './themes/light/avatar.material.css.js';\nimport { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/avatar.fluent.css.js';\nimport { styles as indigo } from './themes/light/avatar.indigo.css.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({ bootstrap, material, fluent, indigo })\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\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 { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,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;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgBzC,IAAqB,kBAAkB,GAAvC,MAAqB,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 { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { 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';\nimport { styles } from './themes/avatar.base.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 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"]}

package/components/avatar/themes/avatar.base.css.js

@@ -79,18 +79,6 @@ img {
   text-transform: uppercase;
 }
 
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
 :host([shape=square]) [part=base] {
   border-radius: 0;
 }`;

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([shape=square]) [part=base] {\n  border-radius: 0;\n}`;\n"]}
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([shape=square]) [part=base] {\n  border-radius: 0;\n}`;\n"]}

package/components/avatar/themes/dark/avatar.bootstrap.css.js

@@ -1,3 +1,8 @@
 import { css } from 'lit';
-export const styles = css ``;
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --color: var(--ig-avatar-color, var(--ig-gray-200-contrast));
+  --border-radius: var(--ig-avatar-border-radius, 0.25rem);
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}`;
 //# sourceMappingURL=avatar.bootstrap.css.js.map

package/components/avatar/themes/dark/avatar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --color: var(--ig-avatar-color, var(--ig-gray-200-contrast));\n  --border-radius: var(--ig-avatar-border-radius, 0.25rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/dark/avatar.fluent.css.js

@@ -1,3 +1,8 @@
 import { css } from 'lit';
-export const styles = css ``;
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}`;
 //# sourceMappingURL=avatar.fluent.css.js.map

package/components/avatar/themes/dark/avatar.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/dark/avatar.indigo.css.js

@@ -1,3 +1,8 @@
 import { css } from 'lit';
-export const styles = css ``;
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}`;
 //# sourceMappingURL=avatar.indigo.css.js.map

package/components/avatar/themes/dark/avatar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

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

@@ -1,3 +1,8 @@
 import { css } from 'lit';
-export const styles = css ``;
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}`;
 //# sourceMappingURL=avatar.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/light/avatar.bootstrap.css.js

@@ -2,26 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));
-  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem));
+  --border-radius: var(--ig-avatar-border-radius, 0.25rem);
   --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-}
-
-[part=base] {
-  color: var(--color);
-  background: var(--background);
-  width: var(--size);
-  height: var(--size);
-}
-[part=base] [part=initials] {
-  font-size: calc(var(--size) / 2);
-  line-height: calc(var(--size) / 2);
-}
-
-:host([shape=rounded]) [part=base] {
-  border-radius: var(--border-radius);
-}
-
-:host([shape=circle]) [part=base] {
-  border-radius: calc(var(--size) / 2);
 }`;
 //# sourceMappingURL=avatar.bootstrap.css.js.map

package/components/avatar/themes/light/avatar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));\n  --border-radius: var(--ig-avatar-border-radius, 0.25rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/light/avatar.fluent.css.js

@@ -2,26 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
   --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
-  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
   --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-}
-
-[part=base] {
-  color: var(--color);
-  background: var(--background);
-  width: var(--size);
-  height: var(--size);
-}
-[part=base] [part=initials] {
-  font-size: calc(var(--size) / 2);
-  line-height: calc(var(--size) / 2);
-}
-
-:host([shape=rounded]) [part=base] {
-  border-radius: var(--border-radius);
-}
-
-:host([shape=circle]) [part=base] {
-  border-radius: calc(var(--size) / 2);
 }`;
 //# sourceMappingURL=avatar.fluent.css.js.map

package/components/avatar/themes/light/avatar.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}
+{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/light/avatar.indigo.css.js

@@ -2,26 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
   --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
-  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
   --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-}
-
-[part=base] {
-  color: var(--color);
-  background: var(--background);
-  width: var(--size);
-  height: var(--size);
-}
-[part=base] [part=initials] {
-  font-size: calc(var(--size) / 2);
-  line-height: calc(var(--size) / 2);
-}
-
-:host([shape=rounded]) [part=base] {
-  border-radius: var(--border-radius);
-}
-
-:host([shape=circle]) [part=base] {
-  border-radius: calc(var(--size) / 2);
 }`;
 //# sourceMappingURL=avatar.indigo.css.js.map

package/components/avatar/themes/light/avatar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}
+{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

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

@@ -2,26 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
   --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
-  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --border-radius: var(--ig-avatar-border-radius, 0.5rem);
   --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-}
-
-[part=base] {
-  color: var(--color);
-  background: var(--background);
-  width: var(--size);
-  height: var(--size);
-}
-[part=base] [part=initials] {
-  font-size: calc(var(--size) / 2);
-  line-height: calc(var(--size) / 2);
-}
-
-:host([shape=rounded]) [part=base] {
-  border-radius: var(--border-radius);
-}
-
-:host([shape=circle]) [part=base] {
-  border-radius: calc(var(--size) / 2);
 }`;
 //# sourceMappingURL=avatar.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, 0.5rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}`;\n"]}

package/components/avatar/themes/shared/avatar.bootstrap.css.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const styles = css `[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.bootstrap.css.js.map

package/components/avatar/themes/shared/avatar.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/shared/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/avatar/themes/shared/avatar.fluent.css.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const styles = css `[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.fluent.css.js.map

package/components/avatar/themes/shared/avatar.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/shared/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/avatar/themes/shared/avatar.indigo.css.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const styles = css `[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.indigo.css.js.map

package/components/avatar/themes/shared/avatar.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/shared/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

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

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const styles = css `[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/shared/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/avatar/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/avatar/themes/themes.js

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+import { styles as material } from './shared/avatar.material.css.js';
+import { styles as bootstrap } from './shared/avatar.bootstrap.css.js';
+import { styles as fluent } from './shared/avatar.fluent.css.js';
+import { styles as indigo } from './shared/avatar.indigo.css.js';
+import { styles as materialLight } from './light/avatar.material.css.js';
+import { styles as bootstrapLight } from './light/avatar.bootstrap.css.js';
+import { styles as fluentLight } from './light/avatar.fluent.css.js';
+import { styles as indigoLight } from './light/avatar.indigo.css.js';
+import { styles as materialDark } from './dark/avatar.material.css.js';
+import { styles as bootstrapDark } from './dark/avatar.bootstrap.css.js';
+import { styles as fluentDark } from './dark/avatar.fluent.css.js';
+import { styles as indigoDark } from './dark/avatar.indigo.css.js';
+const light = {
+    bootstrap: css `
+    ${bootstrap} ${bootstrapLight}
+  `,
+    material: css `
+    ${material} ${materialLight}
+  `,
+    fluent: css `
+    ${fluent} ${fluentLight}
+  `,
+    indigo: css `
+    ${indigo} ${indigoLight}
+  `,
+};
+const dark = {
+    bootstrap: css `
+    ${bootstrap} ${bootstrapDark}
+  `,
+    material: css `
+    ${material} ${materialDark}
+  `,
+    fluent: css `
+    ${fluent} ${fluentDark}
+  `,
+    indigo: css `
+    ${indigo} ${indigoDark}
+  `,
+};
+export const all = { light, dark };
+//# sourceMappingURL=themes.js.map