igniteui-webcomponents 6.3.4 → 6.4.0-alpha.1

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- #### Tooltip
+  - Do not show tooltip when target is clicked [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828)
+
 ## [6.3.4] - 2025-10-22
 ### Fixed
 - #### Date picker

package/README.md

@@ -26,6 +26,7 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 | Components              | Status |         Documentation          | Released Version |
 | :---------------------- | :----: | :----------------------------: | :--------------: |
+| Chat                    |   ✅   | [Docs][Chat Docs]              |     [6.3.0]      |
 | Date Range Picker       |   ✅   | [Docs][Date Range Picker Docs] |     [6.1.0]      |
 | Tooltip                 |   ✅   |      [Docs][Tooltip Docs]      |     [5.4.0]      |
 | File Input              |   ✅   |    [Docs][File Input Docs]     |     [5.4.0]      |
@@ -256,6 +257,7 @@ npm run storybook:build
 [File Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input
 [Tooltip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip
 [Date Range Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker
+[Chat Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat
 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0
@@ -270,3 +272,4 @@ npm run storybook:build
 [5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.3.0
 [5.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.4.0
 [6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.1.0
+[6.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.3.0

package/animations/player.d.ts

@@ -1,16 +1,41 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
 import type { AnimationReferenceMetadata } from './types.js';
+/**
+ * Defines the result of an optional View Transition start.
+ */
+type ViewTransitionResult = {
+    transition?: ViewTransition;
+};
+/**
+ * A ReactiveController for managing Web Animation API (WAAPI) playback
+ * on a host element or a specified target element.
+ *
+ * It provides methods to play, stop, and coordinate animations, including
+ * support for 'height: auto' transitions and reduced motion preference.
+ */
 declare class AnimationController implements ReactiveController {
-    private readonly host;
-    private _target?;
-    protected get target(): HTMLElement;
-    constructor(host: ReactiveControllerHost & HTMLElement, _target?: (Ref<HTMLElement> | HTMLElement) | undefined);
-    private parseKeyframes;
-    play(animation: AnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
-    stopAll(): Promise<unknown[]>;
-    playExclusive(animation: AnimationReferenceMetadata): Promise<boolean>;
+    private readonly _host;
+    private readonly _ref?;
+    /**
+     * The actual HTMLElement target for the animations.
+     * Prioritizes a passed-in Ref value, then a direct HTMLElement, falling back to the host.
+     */
+    protected get _target(): HTMLElement;
+    constructor(host: ReactiveControllerHost & HTMLElement, ref?: Ref<HTMLElement> | HTMLElement);
+    /** Pre-processes keyframes, specifically resolving 'auto' height to the element's scrollHeight. */
+    private _parseKeyframes;
+    /** @internal */
     hostConnected(): void;
+    /** Plays a sequence of keyframes, first cancelling all existing animations on the target. */
+    playExclusive(animation: AnimationReferenceMetadata): Promise<boolean>;
+    /**
+     * Plays a sequence of keyframes using WAAPI.
+     * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.
+     */
+    play(animation: AnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
+    /** Cancels all active animations on the target element. */
+    cancelAll(): Promise<void>;
 }
 /**
  * Creates and attaches an animation player instance to the passed in `host` element.
@@ -18,8 +43,9 @@ declare class AnimationController implements ReactiveController {
  * the host element itself.
  */
 export declare function addAnimationController(host: ReactiveControllerHost & HTMLElement, target?: Ref<HTMLElement> | HTMLElement): AnimationController;
-type ViewTransitionResult = {
-    transition?: ViewTransition;
-};
+/**
+ * Initiates a View Transition if supported by the browser and not suppressed by
+ * the 'prefers-reduced-motion' setting.
+ */
 export declare function startViewTransition(callback?: ViewTransitionUpdateCallback): ViewTransitionResult;
 export type { AnimationController };

package/animations/player.js

@@ -1,64 +1,55 @@
 import { isElement } from '../components/common/util.js';
-const listenerOptions = { once: true };
+const LISTENER_OPTIONS = { once: true };
 function getPrefersReducedMotion() {
     return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 class AnimationController {
-    get target() {
-        if (isElement(this._target)) {
-            return this._target;
+    get _target() {
+        if (isElement(this._ref)) {
+            return this._ref;
         }
-        return this._target?.value ?? this.host;
+        return this._ref?.value ?? this._host;
     }
-    constructor(host, _target) {
-        this.host = host;
-        this._target = _target;
-        this.host.addController(this);
+    constructor(host, ref) {
+        this._host = host;
+        this._ref = ref;
+        this._host.addController(this);
     }
-    parseKeyframes(keyframes) {
-        return keyframes.map((keyframe) => {
-            if (!keyframe.height)
-                return keyframe;
-            return {
-                ...keyframe,
-                height: keyframe.height === 'auto'
-                    ? `${this.target.scrollHeight}px`
-                    : keyframe.height,
-            };
+    _parseKeyframes(keyframes) {
+        const target = this._target;
+        return keyframes.map((frame) => {
+            return frame.height === 'auto'
+                ? { ...frame, height: `${target.scrollHeight}px` }
+                : frame;
         });
     }
+    hostConnected() { }
+    async playExclusive(animation) {
+        await this.cancelAll();
+        const event = await this.play(animation);
+        return event.type === 'finish';
+    }
     async play(animation) {
         const { steps, options } = animation;
-        if (options?.duration === Number.POSITIVE_INFINITY) {
+        const duration = getPrefersReducedMotion() ? 0 : (options?.duration ?? 0);
+        if (!Number.isFinite(duration)) {
             throw new Error('Promise-based animations must be finite.');
         }
         return new Promise((resolve) => {
-            const animation = this.target.animate(this.parseKeyframes(steps), {
+            const animation = this._target.animate(this._parseKeyframes(steps), {
                 ...options,
-                duration: getPrefersReducedMotion() ? 0 : options.duration,
+                duration,
             });
-            animation.addEventListener('cancel', resolve, listenerOptions);
-            animation.addEventListener('finish', resolve, listenerOptions);
+            animation.addEventListener('cancel', resolve, LISTENER_OPTIONS);
+            animation.addEventListener('finish', resolve, LISTENER_OPTIONS);
         });
     }
-    stopAll() {
-        return Promise.all(this.target.getAnimations().map((animation) => {
-            return new Promise((resolve) => {
-                const resolver = () => requestAnimationFrame(resolve);
-                animation.addEventListener('cancel', resolver, listenerOptions);
-                animation.addEventListener('finish', resolver, listenerOptions);
-                animation.cancel();
-            });
-        }));
-    }
-    async playExclusive(animation) {
-        const [_, event] = await Promise.all([
-            this.stopAll(),
-            this.play(animation),
-        ]);
-        return event.type === 'finish';
+    cancelAll() {
+        for (const animation of this._target.getAnimations()) {
+            animation.cancel();
+        }
+        return Promise.resolve();
     }
-    hostConnected() { }
 }
 export function addAnimationController(host, target) {
     return new AnimationController(host, target);

package/animations/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,MAAM,eAAe,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEvC,SAAS,uBAAuB;IAC9B,OAAO,UAAU,EAAE,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AAC5E,CAAC;AAED,MAAM,mBAAmB;IACvB,IAAc,MAAM;QAClB,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC,OAAO,CAAC;QACtB,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC;IAC1C,CAAC;IAED,YACmB,IAA0C,EACnD,OAAwC;QAD/B,SAAI,GAAJ,IAAI,CAAsC;QACnD,YAAO,GAAP,OAAO,CAAiC;QAEhD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,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,IAAI,OAAO,EAAE,QAAQ,KAAK,MAAM,CAAC,iBAAiB,EAAE,CAAC;YACnD,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAChE,GAAG,OAAO;gBACV,QAAQ,EAAE,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAQ,CAAC,QAAQ;aAC5D,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC;YAC/D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC;QACjE,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,QAAQ,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;gBACtD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;gBAChE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;gBAEhE,SAAS,CAAC,MAAM,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;IAEM,KAAK,CAAC,aAAa,CAAC,SAAqC;QAC9D,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;SACrB,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAEM,aAAa,KAAI,CAAC;CAC1B;AAOD,MAAM,UAAU,sBAAsB,CACpC,IAA0C,EAC1C,MAAuC;IAEvC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC;AAMD,MAAM,UAAU,mBAAmB,CACjC,QAAuC;IAGvC,IAAI,uBAAuB,EAAE,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC;QAC/D,QAAQ,EAAE,EAAE,CAAC;QACb,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\n\nimport { isElement } from '../components/common/util.js';\nimport type { AnimationReferenceMetadata } from './types.js';\n\nconst listenerOptions = { once: true };\n\nfunction getPrefersReducedMotion() {\n  return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nclass AnimationController implements ReactiveController {\n  protected get target() {\n    if (isElement(this._target)) {\n      return this._target;\n    }\n    return this._target?.value ?? this.host;\n  }\n\n  constructor(\n    private readonly host: ReactiveControllerHost & HTMLElement,\n    private _target?: Ref<HTMLElement> | HTMLElement\n  ) {\n    this.host.addController(this);\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    if (options?.duration === Number.POSITIVE_INFINITY) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      const animation = this.target.animate(this.parseKeyframes(steps), {\n        ...options,\n        duration: getPrefersReducedMotion() ? 0 : options!.duration,\n      });\n\n      animation.addEventListener('cancel', resolve, listenerOptions);\n      animation.addEventListener('finish', resolve, listenerOptions);\n    });\n  }\n\n  public stopAll() {\n    return Promise.all(\n      this.target.getAnimations().map((animation) => {\n        return new Promise((resolve) => {\n          const resolver = () => requestAnimationFrame(resolve);\n          animation.addEventListener('cancel', resolver, listenerOptions);\n          animation.addEventListener('finish', resolver, listenerOptions);\n\n          animation.cancel();\n        });\n      })\n    );\n  }\n\n  public async playExclusive(animation: AnimationReferenceMetadata) {\n    const [_, event] = await Promise.all([\n      this.stopAll(),\n      this.play(animation),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  public hostConnected() {}\n}\n\n/**\n * Creates and attaches an animation player instance to the passed in `host` element.\n * The player will run animations on the passed in `target`, or if `target` is undefined,\n * the host element itself.\n */\nexport function addAnimationController(\n  host: ReactiveControllerHost & HTMLElement,\n  target?: Ref<HTMLElement> | HTMLElement\n) {\n  return new AnimationController(host, target);\n}\n\ntype ViewTransitionResult = {\n  transition?: ViewTransition;\n};\n\nexport function startViewTransition(\n  callback?: ViewTransitionUpdateCallback\n): ViewTransitionResult {\n  /* c8 ignore next 4 */\n  if (getPrefersReducedMotion() || !document.startViewTransition) {\n    callback?.();\n    return {};\n  }\n\n  return { transition: document.startViewTransition(callback) };\n}\n\nexport type { AnimationController };\n"]}
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { isElement } from '../components/common/util.js';\nimport type { AnimationReferenceMetadata } from './types.js';\n\n/**\n * Defines the result of an optional View Transition start.\n */\ntype ViewTransitionResult = {\n  transition?: ViewTransition;\n};\n\nconst LISTENER_OPTIONS = { once: true } as const;\n\n/**\n * Checks the user's preference for reduced motion.\n */\nfunction getPrefersReducedMotion(): boolean {\n  return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * A ReactiveController for managing Web Animation API (WAAPI) playback\n * on a host element or a specified target element.\n *\n * It provides methods to play, stop, and coordinate animations, including\n * support for 'height: auto' transitions and reduced motion preference.\n */\nclass AnimationController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & HTMLElement;\n  private readonly _ref?: Ref<HTMLElement> | HTMLElement;\n\n  /**\n   * The actual HTMLElement target for the animations.\n   * Prioritizes a passed-in Ref value, then a direct HTMLElement, falling back to the host.\n   */\n  protected get _target(): HTMLElement {\n    if (isElement(this._ref)) {\n      return this._ref;\n    }\n\n    return this._ref?.value ?? this._host;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    ref?: Ref<HTMLElement> | HTMLElement\n  ) {\n    this._host = host;\n    this._ref = ref;\n    this._host.addController(this);\n  }\n\n  /** Pre-processes keyframes, specifically resolving 'auto' height to the element's scrollHeight. */\n  private _parseKeyframes(keyframes: Keyframe[]): Keyframe[] {\n    const target = this._target;\n\n    return keyframes.map((frame) => {\n      return frame.height === 'auto'\n        ? { ...frame, height: `${target.scrollHeight}px` }\n        : frame;\n    });\n  }\n\n  /** @internal */\n  public hostConnected(): void {}\n\n  /** Plays a sequence of keyframes, first cancelling all existing animations on the target. */\n  public async playExclusive(\n    animation: AnimationReferenceMetadata\n  ): Promise<boolean> {\n    await this.cancelAll();\n\n    const event = await this.play(animation);\n    return event.type === 'finish';\n  }\n\n  /**\n   * Plays a sequence of keyframes using WAAPI.\n   * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.\n   */\n  public async play(\n    animation: AnimationReferenceMetadata\n  ): Promise<AnimationPlaybackEvent> {\n    const { steps, options } = animation;\n    const duration = getPrefersReducedMotion() ? 0 : (options?.duration ?? 0);\n\n    if (!Number.isFinite(duration)) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      const animation = this._target.animate(this._parseKeyframes(steps), {\n        ...options,\n        duration,\n      });\n\n      animation.addEventListener('cancel', resolve, LISTENER_OPTIONS);\n      animation.addEventListener('finish', resolve, LISTENER_OPTIONS);\n    });\n  }\n\n  /** Cancels all active animations on the target element. */\n  public cancelAll(): Promise<void> {\n    for (const animation of this._target.getAnimations()) {\n      animation.cancel();\n    }\n\n    return Promise.resolve();\n  }\n}\n\n/**\n * Creates and attaches an animation player instance to the passed in `host` element.\n * The player will run animations on the passed in `target`, or if `target` is undefined,\n * the host element itself.\n */\nexport function addAnimationController(\n  host: ReactiveControllerHost & HTMLElement,\n  target?: Ref<HTMLElement> | HTMLElement\n): AnimationController {\n  return new AnimationController(host, target);\n}\n\n/**\n * Initiates a View Transition if supported by the browser and not suppressed by\n * the 'prefers-reduced-motion' setting.\n */\nexport function startViewTransition(\n  callback?: ViewTransitionUpdateCallback\n): ViewTransitionResult {\n  /* c8 ignore next 4 */\n  if (getPrefersReducedMotion() || !document.startViewTransition) {\n    callback?.();\n    return {};\n  }\n\n  return { transition: document.startViewTransition(callback) };\n}\n\nexport type { AnimationController };\n"]}

package/components/accordion/accordion.d.ts

@@ -12,25 +12,31 @@ export default class IgcAccordionComponent extends LitElement {
     static readonly tagName = "igc-accordion";
     static styles: import("lit").CSSResult;
     static register(): void;
-    private enabledPanels;
+    private _panels;
+    private readonly _slots;
+    private get _interactivePanels();
     /**
      * Allows only one panel to be expanded at a time.
      * @attr single-expand
+     * @default false
      */
     singleExpand: boolean;
     /** Returns all of the accordions's direct igc-expansion-panel children. */
-    panels: Array<IgcExpansionPanelComponent>;
+    get panels(): IgcExpansionPanelComponent[];
     constructor();
-    private skipKeybinding;
-    private navigatePrev;
-    private navigateNext;
-    private collapseAll;
-    private expandAll;
-    private handlePanelOpening;
-    private getNextPanel;
-    private getPanelHeader;
-    private closePanel;
-    private openPanel;
+    private _handleSlotChange;
+    private _handlePanelOpening;
+    private _skipKeybinding;
+    private _navigateToFirst;
+    private _navigateToLast;
+    private _navigateToPrevious;
+    private _navigateToNext;
+    private _collapseAll;
+    private _expandAll;
+    private _getPanelHeader;
+    private _getNextPanel;
+    private _closePanel;
+    private _openPanel;
     /** Hides all of the child expansion panels' contents. */
     hideAll(): Promise<void>;
     /** Shows all of the child expansion panels' contents. */

package/components/accordion/accordion.js

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, endKey, homeKey, shiftKey, } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { addSafeEventListener, first, last } from '../common/util.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
@@ -17,85 +18,109 @@ export default class IgcAccordionComponent extends LitElement {
     static register() {
         registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);
     }
+    get _interactivePanels() {
+        return this._panels.filter((panel) => !panel.disabled);
+    }
+    get panels() {
+        return Array.from(this._panels);
+    }
     constructor() {
         super();
+        this._panels = [];
+        this._slots = addSlotController(this, {
+            slots: setSlots(),
+            onChange: this._handleSlotChange,
+            initial: true,
+        });
         this.singleExpand = false;
-        addSafeEventListener(this, 'igcOpening', this.handlePanelOpening);
-        addKeybindings(this, { skip: this.skipKeybinding })
-            .set(homeKey, () => this.getPanelHeader(first(this.enabledPanels)).focus())
-            .set(endKey, () => this.getPanelHeader(last(this.enabledPanels)).focus())
-            .set(arrowUp, this.navigatePrev)
-            .set(arrowDown, this.navigateNext)
-            .set([shiftKey, altKey, arrowDown], this.expandAll)
-            .set([shiftKey, altKey, arrowUp], this.collapseAll);
-    }
-    skipKeybinding(target) {
-        return !(target.matches(IgcExpansionPanelComponent.tagName) &&
-            this.enabledPanels.includes(target));
-    }
-    navigatePrev(event) {
+        addSafeEventListener(this, 'igcOpening', this._handlePanelOpening);
+        addKeybindings(this, { skip: this._skipKeybinding })
+            .set(homeKey, this._navigateToFirst)
+            .set(endKey, this._navigateToLast)
+            .set(arrowUp, this._navigateToPrevious)
+            .set(arrowDown, this._navigateToNext)
+            .set([shiftKey, altKey, arrowDown], this._expandAll)
+            .set([shiftKey, altKey, arrowUp], this._collapseAll);
+    }
+    _handleSlotChange() {
+        this._panels = this._slots.getAssignedElements('[default]', {
+            selector: IgcExpansionPanelComponent.tagName,
+        });
+    }
+    async _handlePanelOpening(event) {
         const current = event.target;
-        const next = this.getNextPanel(current, -1);
-        if (next !== current) {
-            this.getPanelHeader(next).focus();
+        if (!(this.singleExpand && this.panels.includes(current))) {
+            return;
         }
+        await Promise.all(this._interactivePanels
+            .filter((panel) => panel.open && panel !== current)
+            .map((panel) => this._closePanel(panel)));
+    }
+    _skipKeybinding(target) {
+        return !(target instanceof IgcExpansionPanelComponent &&
+            this._interactivePanels.includes(target));
+    }
+    _navigateToFirst() {
+        this._getPanelHeader(first(this._interactivePanels))?.focus();
+    }
+    _navigateToLast() {
+        this._getPanelHeader(last(this._interactivePanels))?.focus();
     }
-    navigateNext(event) {
+    _navigateToPrevious(event) {
         const current = event.target;
-        const next = this.getNextPanel(current, 1);
+        const next = this._getNextPanel(current, -1);
         if (next !== current) {
-            this.getPanelHeader(next).focus();
+            this._getPanelHeader(next)?.focus();
         }
     }
-    collapseAll() {
-        for (const panel of this.enabledPanels) {
-            this.closePanel(panel);
-        }
-    }
-    expandAll(event) {
+    _navigateToNext(event) {
         const current = event.target;
-        for (const panel of this.enabledPanels) {
-            if (this.singleExpand) {
-                current === panel ? this.openPanel(panel) : this.closePanel(panel);
-            }
-            else {
-                this.openPanel(panel);
-            }
+        const next = this._getNextPanel(current, 1);
+        if (next !== current) {
+            this._getPanelHeader(next)?.focus();
         }
     }
-    handlePanelOpening(event) {
+    async _collapseAll() {
+        await Promise.all(this._interactivePanels.map((panel) => this._closePanel(panel)));
+    }
+    async _expandAll(event) {
         const current = event.target;
-        if (!(this.singleExpand && this.panels.includes(current))) {
-            return;
+        if (this.singleExpand) {
+            const closePromises = this._interactivePanels
+                .filter((panel) => panel.open && panel !== current)
+                .map((panel) => this._closePanel(panel));
+            await Promise.all(closePromises);
+            await this._openPanel(current);
         }
-        for (const panel of this.enabledPanels) {
-            if (panel.open && panel !== current) {
-                this.closePanel(panel);
-            }
+        else {
+            await Promise.all(this._interactivePanels.map((panel) => this._openPanel(panel)));
         }
     }
-    getNextPanel(panel, dir = 1) {
-        const idx = this.enabledPanels.indexOf(panel);
-        return this.enabledPanels[idx + dir] || panel;
+    _getPanelHeader(panel) {
+        return panel['_headerRef'].value;
     }
-    getPanelHeader(panel) {
-        return panel.renderRoot.querySelector('div[part="header"]');
+    _getNextPanel(panel, dir = 1) {
+        const panels = this._interactivePanels;
+        const idx = panels.indexOf(panel);
+        return panels[idx + dir] || panel;
     }
-    async closePanel(panel) {
-        if (!(panel.open &&
-            panel.emitEvent('igcClosing', { cancelable: true, detail: panel }))) {
+    async _closePanel(p) {
+        const args = { detail: p };
+        if (!(p.open && p.emitEvent('igcClosing', { cancelable: true, ...args }))) {
             return;
         }
-        await panel.hide();
-        panel.emitEvent('igcClosed', { detail: panel });
+        if (await p.hide()) {
+            p.emitEvent('igcClosed', args);
+        }
     }
-    async openPanel(panel) {
-        if (panel.open ||
-            !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {
+    async _openPanel(p) {
+        const args = { detail: p };
+        if (p.open || !p.emitEvent('igcOpening', { cancelable: true, ...args })) {
             return;
         }
-        await panel.show();
-        panel.emitEvent('igcOpened', { detail: panel });
+        if (await p.show()) {
+            p.emitEvent('igcOpened', args);
+        }
     }
     async hideAll() {
         await Promise.all(this.panels.map((panel) => panel.hide()));
@@ -108,14 +133,6 @@ export default class IgcAccordionComponent extends LitElement {
     }
 }
 __decorate([
-    queryAssignedElements({
-        selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,
-    })
-], IgcAccordionComponent.prototype, "enabledPanels", void 0);
-__decorate([
-    property({ attribute: 'single-expand', reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true, attribute: 'single-expand' })
 ], IgcAccordionComponent.prototype, "singleExpand", void 0);
-__decorate([
-    queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })
-], IgcAccordionComponent.prototype, "panels", void 0);
 //# sourceMappingURL=accordion.js.map

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 { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addSafeEventListener, first, last } from '../common/util.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({\n    selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,\n  })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'igcOpening' as any, this.handlePanelOpening);\n\n    addKeybindings(this, { skip: this.skipKeybinding })\n      .set(homeKey, () =>\n        this.getPanelHeader(first(this.enabledPanels)).focus()\n      )\n      .set(endKey, () => this.getPanelHeader(last(this.enabledPanels)).focus())\n      .set(arrowUp, this.navigatePrev)\n      .set(arrowDown, this.navigateNext)\n      .set([shiftKey, altKey, arrowDown], this.expandAll)\n      .set([shiftKey, altKey, arrowUp], this.collapseAll);\n  }\n\n  private skipKeybinding(target: Element) {\n    return !(\n      target.matches(IgcExpansionPanelComponent.tagName) &&\n      this.enabledPanels.includes(target as IgcExpansionPanelComponent)\n    );\n  }\n\n  private navigatePrev(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, -1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (next !== current) {\n      this.getPanelHeader(next).focus();\n    }\n  }\n\n  private collapseAll() {\n    for (const panel of this.enabledPanels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    for (const panel of this.enabledPanels) {\n      if (this.singleExpand) {\n        current === panel ? this.openPanel(panel) : this.closePanel(panel);\n      } else {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    for (const panel of this.enabledPanels) {\n      if (panel.open && panel !== current) {\n        this.closePanel(panel);\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const idx = this.enabledPanels.indexOf(panel);\n    return this.enabledPanels[idx + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.renderRoot.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (\n      !(\n        panel.open &&\n        panel.emitEvent('igcClosing', { cancelable: true, detail: panel })\n      )\n    ) {\n      return;\n    }\n\n    await panel.hide();\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (\n      panel.open ||\n      !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })\n    ) {\n      return;\n    }\n\n    await panel.show();\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addSafeEventListener, first, last } from '../common/util.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  //#region Internal state and properties\n\n  private _panels: IgcExpansionPanelComponent[] = [];\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n    initial: true,\n  });\n\n  private get _interactivePanels(): IgcExpansionPanelComponent[] {\n    return this._panels.filter((panel) => !panel.disabled);\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'single-expand' })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  public get panels(): IgcExpansionPanelComponent[] {\n    return Array.from(this._panels);\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'igcOpening' as any, this._handlePanelOpening);\n\n    addKeybindings(this, { skip: this._skipKeybinding })\n      .set(homeKey, this._navigateToFirst)\n      .set(endKey, this._navigateToLast)\n      .set(arrowUp, this._navigateToPrevious)\n      .set(arrowDown, this._navigateToNext)\n      .set([shiftKey, altKey, arrowDown], this._expandAll)\n      .set([shiftKey, altKey, arrowUp], this._collapseAll);\n  }\n\n  //#region Event handlers\n\n  private _handleSlotChange(): void {\n    this._panels = this._slots.getAssignedElements('[default]', {\n      selector: IgcExpansionPanelComponent.tagName,\n    });\n  }\n\n  private async _handlePanelOpening(event: Event): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    await Promise.all(\n      this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel))\n    );\n  }\n\n  //#endregion\n\n  //#region Keyboard interaction handlers\n\n  private _skipKeybinding(target: Element): boolean {\n    return !(\n      target instanceof IgcExpansionPanelComponent &&\n      this._interactivePanels.includes(target)\n    );\n  }\n\n  private _navigateToFirst(): void {\n    this._getPanelHeader(first(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToLast(): void {\n    this._getPanelHeader(last(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToPrevious(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, -1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private _navigateToNext(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, 1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private async _collapseAll(): Promise<void> {\n    await Promise.all(\n      this._interactivePanels.map((panel) => this._closePanel(panel))\n    );\n  }\n\n  private async _expandAll(event: KeyboardEvent): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (this.singleExpand) {\n      const closePromises = this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel));\n\n      await Promise.all(closePromises);\n      await this._openPanel(current);\n    } else {\n      await Promise.all(\n        this._interactivePanels.map((panel) => this._openPanel(panel))\n      );\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private _getPanelHeader(\n    panel: IgcExpansionPanelComponent\n  ): HTMLElement | undefined {\n    // biome-ignore lint/complexity/useLiteralKeys: Direct property access instead of DOM query\n    return panel['_headerRef'].value;\n  }\n\n  private _getNextPanel(\n    panel: IgcExpansionPanelComponent,\n    dir: 1 | -1 = 1\n  ): IgcExpansionPanelComponent {\n    const panels = this._interactivePanels;\n    const idx = panels.indexOf(panel);\n\n    return panels[idx + dir] || panel;\n  }\n\n  private async _closePanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (!(p.open && p.emitEvent('igcClosing', { cancelable: true, ...args }))) {\n      return;\n    }\n\n    if (await p.hide()) {\n      p.emitEvent('igcClosed', args);\n    }\n  }\n\n  private async _openPanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (p.open || !p.emitEvent('igcOpening', { cancelable: true, ...args })) {\n      return;\n    }\n\n    if (await p.show()) {\n      p.emitEvent('igcOpened', args);\n    }\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  //#endregion\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/badge/badge.d.ts

@@ -14,6 +14,9 @@ export default class IgcBadgeComponent extends LitElement {
     static readonly tagName = "igc-badge";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    private _iconPart;
+    private readonly _slots;
+    protected _handleSlotChange(): void;
     private readonly _internals;
     /**
      * The type of badge.
@@ -30,6 +33,11 @@ export default class IgcBadgeComponent extends LitElement {
      * @attr
      */
     shape: BadgeShape;
+    /**
+     * Sets whether to render a dot type badge.
+     * @attr
+     */
+    dot: boolean;
     constructor();
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): import("lit-html").TemplateResult<1>;

package/components/badge/badge.js

@@ -8,7 +8,9 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import { addSlotController } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.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';
@@ -18,14 +20,24 @@ export default class IgcBadgeComponent extends LitElement {
     static register() {
         registerComponent(IgcBadgeComponent);
     }
+    _handleSlotChange() {
+        const assignedNodes = this._slots.getAssignedNodes('[default]', true);
+        this._iconPart = assignedNodes.some((node) => node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'igc-icon');
+    }
     constructor() {
         super();
+        this._iconPart = false;
+        this._slots = addSlotController(this, {
+            onChange: this._handleSlotChange,
+        });
         this._internals = addInternalsController(this, {
             initialARIA: { role: 'status' },
         });
         this.variant = 'primary';
         this.outlined = false;
         this.shape = 'rounded';
+        this.dot = false;
         addThemingController(this, all);
     }
     willUpdate(changedProperties) {
@@ -35,7 +47,7 @@ export default class IgcBadgeComponent extends LitElement {
     }
     render() {
         return html `
-      <span part="base">
+      <span part=${partMap({ base: true, icon: this._iconPart })}>
         <slot></slot>
       </span>
     `;
@@ -50,4 +62,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcBadgeComponent.prototype, "dot", void 0);
 //# sourceMappingURL=badge.js.map

package/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;aAChC,YAAO,GAAG,WAAW,AAAd,CAAe;aACtB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IA2BD;QACE,KAAK,EAAE,CAAC;QA1BO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAChC,CAAC,CAAC;QAOI,YAAO,GAAiB,SAAS,CAAC;QAOlC,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAe,SAAS,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AAOlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'status' },\n  });\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('variant')) {\n      this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });\n    }\n  }\n\n  protected override render() {\n    return html`\n      <span part=\"base\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;aAChC,YAAO,GAAG,WAAW,AAAd,CAAe;aACtB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAQS,iBAAiB;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC,IAAI,CACjC,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;YAClC,IAAgB,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,CACzD,CAAC;IACJ,CAAC;IAkCD;QACE,KAAK,EAAE,CAAC;QAhDF,cAAS,GAAG,KAAK,CAAC;QAET,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC,CAAC;QAWc,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAChC,CAAC,CAAC;QAOI,YAAO,GAAiB,SAAS,CAAC;QAOlC,aAAQ,GAAG,KAAK,CAAC;QAOjB,UAAK,GAAe,SAAS,CAAC;QAO9B,QAAG,GAAG,KAAK,CAAC;QAIjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mBACI,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;;KAG3D,CAAC;IACJ,CAAC;;AAxCM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AAOlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS;AAO9B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACxB","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { addSlotController } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private _iconPart = false;\n\n  private readonly _slots = addSlotController(this, {\n    onChange: this._handleSlotChange,\n  });\n\n  protected _handleSlotChange(): void {\n    const assignedNodes = this._slots.getAssignedNodes('[default]', true);\n    this._iconPart = assignedNodes.some(\n      (node) =>\n        node.nodeType === Node.ELEMENT_NODE &&\n        (node as Element).tagName.toLowerCase() === 'igc-icon'\n    );\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'status' },\n  });\n\n  /**\n   * The type of badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  /**\n   * Sets whether to render a dot type badge.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public dot = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('variant')) {\n      this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });\n    }\n  }\n\n  protected override render() {\n    return html`\n      <span part=${partMap({ base: true, icon: this._iconPart })}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}