igniteui-webcomponents 7.2.3 → 7.2.4

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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/).
 
+## [7.2.4] - 2026-06-29
+### Added
+- #### Form associated custom elements with external labels
+  - External `<label>` associations are now resolved to the underlying native input of form-associated controls. Associating a label with `IgcInput`, `IgcMaskInput`, `IgcTextarea`, `IgcDateTimeInput`, `IgcSelect`, `IgcCombo`, `IgcDatePicker`, or `IgcDateRangePicker` — either through the `for`/`id` IDREF mechanism or by nesting the component inside the `<label>` — now correctly exposes the label to assistive technologies and focuses the inner input on label activation. [#2263](https://github.com/IgniteUI/igniteui-webcomponents/pull/2263)
+
+### Changed
+- #### AI-Assisted Development
+  - Improved grid related skills [#2250](https://github.com/IgniteUI/igniteui-webcomponents/pull/2250)
+
+### Fixed
+- #### Tabs
+  - Prevent selected tab header from scrolling into view on initial render [#2268](https://github.com/IgniteUI/igniteui-webcomponents/pull/2268)
+
 ## [7.2.3] - 2026-06-18
 ### Fixed
 - #### Popover based components
@@ -1378,6 +1391,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.3...7.2.4
 [7.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.2...7.2.3
 [7.2.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.1...7.2.2
 [7.2.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.0...7.2.1

package/animations/player.d.ts

@@ -2,13 +2,11 @@ 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.
+ * Checks the user's preference for reduced motion.
  */
-type ViewTransitionResult = {
-    transition?: ViewTransition;
-};
+export declare function getPrefersReducedMotion(): boolean;
 /**
- * A ReactiveController for managing Web Animation API (WAAPI) playback
+ * A ReactiveController for managing Web Animation API (WA-API) playback
  * on a host element or a specified target element.
  *
  * It provides methods to play, stop, and coordinate animations, including
@@ -30,7 +28,7 @@ declare class AnimationController implements ReactiveController {
     /** 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.
+     * Plays a sequence of keyframes using WA-API.
      * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.
      */
     play(animation: AnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
@@ -43,9 +41,4 @@ declare class AnimationController implements ReactiveController {
  * the host element itself.
  */
 export declare function addAnimationController(host: ReactiveControllerHost & HTMLElement, target?: Ref<HTMLElement> | HTMLElement): AnimationController;
-/**
- * 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,7 +1,8 @@
 import { isElement } from '../components/common/util.js';
 const LISTENER_OPTIONS = { once: true };
-function getPrefersReducedMotion() {
-    return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export function getPrefersReducedMotion() {
+    return (globalThis?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??
+        false);
 }
 class AnimationController {
     get _target() {
@@ -54,11 +55,4 @@ class AnimationController {
 export function addAnimationController(host, target) {
     return new AnimationController(host, target);
 }
-export function startViewTransition(callback) {
-    if (getPrefersReducedMotion() || !document.startViewTransition) {
-        callback?.();
-        return {};
-    }
-    return { transition: document.startViewTransition(callback) };
-}
 //# sourceMappingURL=player.js.map

package/animations/player.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,MAAM,gBAAgB,GAAG,EAAE,IAAI,EAAE,IAAI,EAAW,CAAC;AAKjD,MAAM,UAAU,uBAAuB;IACrC,OAAO,CACL,UAAU,EAAE,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO;QACpE,KAAK,CACN,CAAC;AACJ,CAAC;AASD,MAAM,mBAAmB;IAQvB,IAAc,OAAO;QACnB,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;IACxC,CAAC;IAED,YACE,IAA0C,EAC1C,GAAoC;QAEpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAGO,eAAe,CAAC,SAAqB;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC7B,OAAO,KAAK,CAAC,MAAM,KAAK,MAAM;gBAC5B,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,EAAE;gBAClD,CAAC,CAAC,KAAK,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,aAAa,KAAU,CAAC;IAGxB,KAAK,CAAC,aAAa,CACxB,SAAqC;QAErC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QAEvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAMM,KAAK,CAAC,IAAI,CACf,SAAqC;QAErC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACrC,MAAM,QAAQ,GAAG,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;QAE1E,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;gBAClE,GAAG,OAAO;gBACV,QAAQ;aACT,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;YAChE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,SAAS;QACd,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;YACrD,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;QAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;CACF;AAOD,MAAM,UAAU,sBAAsB,CACpC,IAA0C,EAC1C,MAAuC;IAEvC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","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\nconst LISTENER_OPTIONS = { once: true } as const;\n\n/**\n * Checks the user's preference for reduced motion.\n */\nexport function getPrefersReducedMotion(): boolean {\n  return (\n    globalThis?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??\n    false\n  );\n}\n\n/**\n * A ReactiveController for managing Web Animation API (WA-API) 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 WA-API.\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\nexport type { AnimationController };\n"]}

package/animations/view-transition.d.ts

@@ -0,0 +1,44 @@
+import { type ChildPart, noChange, type TemplateResult } from 'lit';
+import { AsyncDirective, type DirectiveParameters } from 'lit/async-directive.js';
+/**
+ * Starts a document view transition and skips it if the user has requested reduced motion.
+ */
+export declare function startViewTransition(callback: ViewTransitionUpdateCallback): ViewTransition;
+/**
+ * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.
+ */
+export declare function startScopedViewTransition(target: HTMLElement, callback: ViewTransitionUpdateCallback): ViewTransition | null;
+/**
+ * Sets the view transition name for the specified target element.
+ */
+export declare function setTransitionName(target: HTMLElement, name: string): void;
+/**
+ * Clears the view transition name for the specified target elements.
+ */
+export declare function clearTransitionName(...targets: HTMLElement[]): void;
+/**
+ * Returns the active view transition if one is currently in progress, or null otherwise.
+ */
+export declare function getActiveViewTransition(): ViewTransition | null;
+/**
+ * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.
+ */
+export declare function getActiveScopedViewTransition(target: Node): ViewTransition | null;
+declare class ScopedViewTransitionDirective extends AsyncDirective {
+    private _isFirstRender;
+    render(template: TemplateResult): TemplateResult;
+    update(part: ChildPart, [template]: DirectiveParameters<this>): typeof noChange | TemplateResult;
+}
+/**
+ * A directive that enables scoped view transitions for a template.
+ *
+ * When applied, it will start a view transition whenever the template is updated,
+ * provided that the parent node supports view transitions.
+ * If the user has requested reduced motion, the transition will be skipped.
+ *
+ * @remarks
+ * This directive is intended to be used with Lit templates inside a component that supports view transitions.
+ * It will not work if the parent node does not support view transitions (e.g., if the parent is not a document or element that implements the ViewTransition interface).
+ */
+export declare const scopedViewTransition: (template: TemplateResult) => import("lit-html/directive.js").DirectiveResult<typeof ScopedViewTransitionDirective>;
+export {};

package/animations/view-transition.js

@@ -0,0 +1,81 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { isFunction } from '../components/common/util.js';
+import { getPrefersReducedMotion } from './player.js';
+function hasScopedViewTransition(node) {
+    return 'startViewTransition' in node && isFunction(node.startViewTransition);
+}
+export function startViewTransition(callback) {
+    const init = globalThis.document?.startViewTransition;
+    if (!init) {
+        callback();
+        const resolved = Promise.resolve();
+        return {
+            finished: resolved,
+            ready: resolved,
+            updateCallbackDone: resolved,
+            skipTransition: () => { },
+        };
+    }
+    const transition = init.call(globalThis.document, callback);
+    if (getPrefersReducedMotion()) {
+        transition.skipTransition();
+    }
+    return transition;
+}
+export function startScopedViewTransition(target, callback) {
+    if (!hasScopedViewTransition(target)) {
+        return null;
+    }
+    const transition = target.startViewTransition(callback);
+    if (getPrefersReducedMotion()) {
+        transition.skipTransition();
+    }
+    return transition;
+}
+export function setTransitionName(target, name) {
+    target.style.viewTransitionName = name;
+}
+export function clearTransitionName(...targets) {
+    for (const target of targets) {
+        target.style.viewTransitionName = '';
+    }
+}
+export function getActiveViewTransition() {
+    return globalThis.document?.activeViewTransition ?? null;
+}
+export function getActiveScopedViewTransition(target) {
+    if (!hasScopedViewTransition(target)) {
+        return null;
+    }
+    return target.activeViewTransition ?? null;
+}
+class ScopedViewTransitionDirective extends AsyncDirective {
+    constructor() {
+        super(...arguments);
+        this._isFirstRender = true;
+    }
+    render(template) {
+        return template;
+    }
+    update(part, [template]) {
+        if (this._isFirstRender) {
+            this._isFirstRender = false;
+            return this.render(template);
+        }
+        const parent = part.parentNode;
+        if (!hasScopedViewTransition(parent)) {
+            return this.render(template);
+        }
+        const transition = parent.startViewTransition(() => {
+            this.setValue(template);
+            return new Promise((resolve) => requestAnimationFrame(resolve));
+        });
+        if (getPrefersReducedMotion()) {
+            transition.skipTransition();
+        }
+        return noChange;
+    }
+}
+export const scopedViewTransition = directive(ScopedViewTransitionDirective);
+//# sourceMappingURL=view-transition.js.map

package/animations/view-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-transition.js","sourceRoot":"","sources":["../../src/animations/view-transition.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ChildPart, noChange, type TemplateResult } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  directive,\n} from 'lit/async-directive.js';\nimport { isFunction } from '../components/common/util.js';\nimport { getPrefersReducedMotion } from './player.js';\n\ntype ScopedViewTransitionElement = HTMLElement & {\n  startViewTransition: (\n    callback: () => Promise<unknown> | unknown\n  ) => ViewTransition;\n  activeViewTransition?: ViewTransition | null;\n};\n\n/**\n * Returns true if the specified node supports scoped view transitions, false otherwise.\n */\nfunction hasScopedViewTransition(\n  node: Node\n): node is ScopedViewTransitionElement {\n  return 'startViewTransition' in node && isFunction(node.startViewTransition);\n}\n\n/**\n * Starts a document view transition and skips it if the user has requested reduced motion.\n */\nexport function startViewTransition(\n  callback: ViewTransitionUpdateCallback\n): ViewTransition {\n  const init = globalThis.document?.startViewTransition;\n\n  /* c8 ignore next 11 */\n  if (!init) {\n    callback();\n    const resolved = Promise.resolve();\n\n    return {\n      finished: resolved,\n      ready: resolved,\n      updateCallbackDone: resolved,\n      skipTransition: () => {},\n    } as ViewTransition;\n  }\n\n  const transition = init.call(globalThis.document, callback);\n\n  if (getPrefersReducedMotion()) {\n    transition.skipTransition();\n  }\n\n  return transition;\n}\n\n/**\n * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.\n */\nexport function startScopedViewTransition(\n  target: HTMLElement,\n  callback: ViewTransitionUpdateCallback\n): ViewTransition | null {\n  if (!hasScopedViewTransition(target)) {\n    return null;\n  }\n\n  const transition = target.startViewTransition(callback);\n\n  if (getPrefersReducedMotion()) {\n    transition.skipTransition();\n  }\n\n  return transition;\n}\n\n/**\n * Sets the view transition name for the specified target element.\n */\nexport function setTransitionName(target: HTMLElement, name: string): void {\n  target.style.viewTransitionName = name;\n}\n\n/**\n * Clears the view transition name for the specified target elements.\n */\nexport function clearTransitionName(...targets: HTMLElement[]): void {\n  for (const target of targets) {\n    target.style.viewTransitionName = '';\n  }\n}\n\n/**\n * Returns the active view transition if one is currently in progress, or null otherwise.\n */\nexport function getActiveViewTransition(): ViewTransition | null {\n  return globalThis.document?.activeViewTransition ?? null;\n}\n\n/**\n * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.\n */\nexport function getActiveScopedViewTransition(\n  target: Node\n): ViewTransition | null {\n  if (!hasScopedViewTransition(target)) {\n    return null;\n  }\n\n  return target.activeViewTransition ?? null;\n}\n\nclass ScopedViewTransitionDirective extends AsyncDirective {\n  private _isFirstRender = true;\n\n  public override render(template: TemplateResult): TemplateResult {\n    return template;\n  }\n\n  public override update(\n    part: ChildPart,\n    [template]: DirectiveParameters<this>\n  ) {\n    if (this._isFirstRender) {\n      this._isFirstRender = false;\n      return this.render(template);\n    }\n\n    const parent = part.parentNode;\n\n    if (!hasScopedViewTransition(parent)) {\n      return this.render(template);\n    }\n\n    const transition = parent.startViewTransition(() => {\n      this.setValue(template);\n      return new Promise((resolve) => requestAnimationFrame(resolve));\n    });\n\n    if (getPrefersReducedMotion()) {\n      transition.skipTransition();\n    }\n\n    return noChange;\n  }\n}\n\n/**\n * A directive that enables scoped view transitions for a template.\n *\n * When applied, it will start a view transition whenever the template is updated,\n * provided that the parent node supports view transitions.\n * If the user has requested reduced motion, the transition will be skipped.\n *\n * @remarks\n * This directive is intended to be used with Lit templates inside a component that supports view transitions.\n * It will not work if the parent node does not support view transitions (e.g., if the parent is not a document or element that implements the ViewTransition interface).\n */\nexport const scopedViewTransition = directive(ScopedViewTransitionDirective);\n"]}

package/components/avatar/avatar.js

@@ -52,13 +52,13 @@ export default class IgcAvatarComponent extends LitElement {
             : html `<slot></slot>`}
         ${this.src && !this._hasError
             ? html `
-              <img
-                part="image"
-                alt=${ifDefined(this.alt)}
-                src=${ifDefined(this.src)}
-                @error=${this._handleError}
-              />
-            `
+                <img
+                  part="image"
+                  alt=${ifDefined(this.alt)}
+                  src=${ifDefined(this.src)}
+                  @error=${this._handleError}
+                />
+              `
             : nothing}
       </div>
     `;

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,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAezC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;aACjC,YAAO,GAAG,YAAY,AAAf,CAAgB;aACvB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAwCD;QACE,KAAK,EAAE,CAAC;QAvCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC,CAAC;QAGK,cAAS,GAAG,KAAK,CAAC;QA4BnB,UAAK,GAAgB,QAAQ,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBACtB,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eAAe;UACrB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;yBAChB,IAAI,CAAC,YAAY;;aAE7B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AArEO;IADP,KAAK,EAAE;qDACkB;AAOnB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'image',\n      ariaLabel: 'avatar',\n    },\n  });\n\n  @state()\n  private _hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src?: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt?: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials?: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('initials') || changedProperties.has('alt')) {\n      this._internals.setARIA({\n        ariaRoleDescription: this.alt ?? this.initials,\n      });\n    }\n\n    if (changedProperties.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  protected _handleError(): void {\n    this._hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html`<slot></slot>`}\n        ${this.src && !this._hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=${this._handleError}\n              />\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAezC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;aACjC,YAAO,GAAG,YAAY,AAAf,CAAgB;aACvB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAwCD;QACE,KAAK,EAAE,CAAC;QAvCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC,CAAC;QAGK,cAAS,GAAG,KAAK,CAAC;QA4BnB,UAAK,GAAgB,QAAQ,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBACtB,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAGL,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eACV;UAEE,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;YACzB,CAAC,CAAC,IAAI,CAAA;;;wBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;2BAChB,IAAI,CAAC,YAAY;;eAE7B;YACH,CAAC,CAAC,OACN;;KAEH,CAAC;IACJ,CAAC;;AAzEO;IADP,KAAK,EAAE;qDACkB;AAOnB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'image',\n      ariaLabel: 'avatar',\n    },\n  });\n\n  @state()\n  private _hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src?: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt?: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials?: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('initials') || changedProperties.has('alt')) {\n      this._internals.setARIA({\n        ariaRoleDescription: this.alt ?? this.initials,\n      });\n    }\n\n    if (changedProperties.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  protected _handleError(): void {\n    this._hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        ${\n          this.initials\n            ? html`<span part=\"initials\">${this.initials}</span>`\n            : html`<slot></slot>`\n        }\n        ${\n          this.src && !this._hasError\n            ? html`\n                <img\n                  part=\"image\"\n                  alt=${ifDefined(this.alt)}\n                  src=${ifDefined(this.src)}\n                  @error=${this._handleError}\n                />\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ export interface IgcButtonEventMap {
     focus: FocusEvent;
     blur: FocusEvent;
 }
-declare const IgcButtonBaseComponent_base: Constructor<import("../common//mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
+declare const IgcButtonBaseComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
 /**
  * Abstract base class shared by `igc-button` and `igc-icon-button`.
  *

package/components/button/button-base.js

@@ -12,7 +12,7 @@ import { addIdRefResolver } from '../common/controllers/id-resolver.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { shadowOptions } from '../common/decorators/shadow-options.js';
-import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
 import { bindIf, getElementByIdFromRoot } from '../common/util.js';
 let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMixin(LitElement) {
@@ -59,10 +59,12 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
         return this._internals.form;
     }
     firstUpdated() {
-        if (this._commandfor) {
-            this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
-            this.requestUpdate();
-        }
+        this.updateComplete.then(() => {
+            if (this._commandfor) {
+                this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
+                this.requestUpdate();
+            }
+        });
     }
     _handleClick() {
         switch (this.type) {

package/components/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { addIdRefResolver } from '../common/controllers/id-resolver.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, getElementByIdFromRoot } from '../common/util.js';\n\nexport interface IgcButtonEventMap {\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n/**\n * Abstract base class shared by `igc-button` and `igc-icon-button`.\n *\n * Provides common form-association behavior, link-button rendering\n * (renders as `<a>` when `href` is set), keyboard focus-ring management,\n * and the Invoker Commands API (`command` / `commandfor`).\n *\n * Concrete subclasses must implement `_renderContent()` to supply the\n * visual content projected inside the native `<button>` or `<a>` element.\n */\n@blazorDeepImport\n@shadowOptions({ delegatesFocus: true })\nexport abstract class IgcButtonBaseComponent extends EventEmitterMixin<\n  IgcButtonEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly formAssociated = true;\n\n  //#region Internal state\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _internals = addInternalsController(this);\n  private readonly _resolver = addIdRefResolver(\n    this,\n    this._resolveCommandForElement\n  );\n\n  private _disabled = false;\n  private _commandfor: string | null = null;\n  private _commandForElement: Element | null = null;\n\n  @query('[part=\"base\"]', true)\n  private readonly _nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  //#endregion\n\n  //#region Public properties\n\n  /* alternateName: displayType */\n  /**\n   * The type of the button, which determines its behavior and semantics.\n   * - `'button'` – no default action; useful for custom JavaScript handlers.\n   * - `'submit'` – submits the associated form when clicked.\n   * - `'reset'` – resets the associated form fields to their initial values.\n   *\n   * Ignored when the button is rendered as a link (i.e. `href` is set).\n   * @attr type\n   * @default 'button'\n   */\n  @property({ reflect: true })\n  public type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * The URL the button points to. When set, the component renders as an\n   * `<a>` element instead of a `<button>`, enabling navigation on click.\n   * Use together with `target`, `download`, and `rel` for full anchor semantics.\n   * @attr href\n   */\n  @property()\n  public href?: string;\n\n  /**\n   * Prompts the browser to download the linked resource rather than navigating\n   * to it. The optional value is used as the suggested file name.\n   * Only effective when `href` is set.\n   * @attr download\n   */\n  @property()\n  public download?: string;\n\n  /**\n   * Where to open the linked document. Only effective when `href` is set.\n   * - `'_self'` – current browsing context (default browser behavior).\n   * - `'_blank'` – new tab or window.\n   * - `'_parent'` – parent browsing context; falls back to `_self` if none.\n   * - `'_top'` – top-level browsing context; falls back to `_self` if none.\n   * @attr target\n   */\n  @property()\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * The relationship between the current document and the linked URL.\n   * Accepts a space-separated list of link types (e.g. `'noopener noreferrer'`).\n   * Only effective when `href` is set. When `target=\"_blank\"` is used,\n   * setting `rel=\"noopener noreferrer\"` is strongly recommended for security.\n   * @attr rel\n   */\n  @property()\n  public rel?: string;\n\n  /**\n   * When set, the button will be disabled and non-interactive.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public set disabled(value: boolean) {\n    this._disabled = value;\n    this.toggleAttribute('disabled', Boolean(this._disabled));\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  /**\n   * The command to invoke on the target element specified by `commandfor`.\n   * Part of the [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) API.\n   * Custom commands must start with two dashes (e.g. `'--my-command'`).\n   * @attr command\n   */\n  @property({ reflect: true })\n  public command?: string;\n\n  /**\n   * The ID of the target element for the invoker command.\n   * Part of the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API).\n   * @attr commandfor\n   */\n  @property({ attribute: 'commandfor' })\n  public set commandfor(value: string | null) {\n    this._commandfor = value;\n    if (value) {\n      this._resolver.observe();\n      this._commandForElement = getElementByIdFromRoot(this, value);\n    } else {\n      this._commandForElement = null;\n      this._resolver.unobserve();\n    }\n  }\n\n  public get commandfor(): string | null {\n    return this._commandfor;\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  /**\n   * The target element for the invoker command. Resolved from the `commandfor` ID.\n   */\n  public get commandForElement(): Element | null {\n    return this._commandForElement;\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  public set commandForElement(value: Element | null) {\n    this._commandForElement = value;\n    this.requestUpdate();\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  /**\n   * The `<form>` element the button is associated with.\n   * Resolved through the standard form-association mechanism — either the\n   * closest ancestor `<form>` or the form referenced by the button's `form`\n   * attribute. Returns `null` when no form is associated.\n   * Relevant only when `type` is `'submit'` or `'reset'`.\n   */\n  public get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  //#endregion\n\n  //#region Lifecycle\n\n  protected override firstUpdated(): void {\n    if (this._commandfor) {\n      this._commandForElement = getElementByIdFromRoot(this, this._commandfor);\n      this.requestUpdate();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleClick(): void {\n    switch (this.type) {\n      case 'submit':\n        this.form?.requestSubmit();\n        break;\n      case 'reset':\n        this.form?.reset();\n        break;\n    }\n  }\n\n  protected formDisabledCallback(state: boolean): void {\n    this._disabled = state;\n    this.requestUpdate();\n  }\n\n  //#endregion\n\n  private _resolveCommandForElement(ids: Set<string>): void {\n    if (this._commandfor && ids.has(this._commandfor)) {\n      this._commandForElement = getElementByIdFromRoot(this, this._commandfor);\n      this.requestUpdate();\n    }\n  }\n\n  //#region Public API\n\n  /** Simulates a mouse click on the button, triggering its click handler and any associated form action. */\n  public override click(): void {\n    this._nativeButton?.click();\n  }\n\n  //#endregion\n\n  private _renderButton() {\n    return html`\n      <button\n        command=${ifDefined(this.command)}\n        .commandForElement=${this._commandForElement}\n        part=${partMap({ base: true, focused: this._focusRingManager.focused })}\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        ?disabled=${this.disabled}\n        type=${ifDefined(this.type)}\n        @click=${this._handleClick}\n      >\n        ${this._renderContent()}\n      </button>\n    `;\n  }\n\n  private _renderLinkButton() {\n    return html`\n      <a\n        part=${partMap({ base: true, focused: this._focusRingManager.focused })}\n        role=\"button\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-disabled=${this.disabled}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n      >\n        ${this._renderContent()}\n      </a>\n    `;\n  }\n\n  protected abstract _renderContent(): TemplateResult;\n\n  protected override render() {\n    return this.href != null ? this._renderLinkButton() : this._renderButton();\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { addIdRefResolver } from '../common/controllers/id-resolver.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, getElementByIdFromRoot } from '../common/util.js';\n\nexport interface IgcButtonEventMap {\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n/**\n * Abstract base class shared by `igc-button` and `igc-icon-button`.\n *\n * Provides common form-association behavior, link-button rendering\n * (renders as `<a>` when `href` is set), keyboard focus-ring management,\n * and the Invoker Commands API (`command` / `commandfor`).\n *\n * Concrete subclasses must implement `_renderContent()` to supply the\n * visual content projected inside the native `<button>` or `<a>` element.\n */\n@blazorDeepImport\n@shadowOptions({ delegatesFocus: true })\nexport abstract class IgcButtonBaseComponent extends EventEmitterMixin<\n  IgcButtonEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly formAssociated = true;\n\n  //#region Internal state\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _internals = addInternalsController(this);\n  private readonly _resolver = addIdRefResolver(\n    this,\n    this._resolveCommandForElement\n  );\n\n  private _disabled = false;\n  private _commandfor: string | null = null;\n  private _commandForElement: Element | null = null;\n\n  @query('[part=\"base\"]', true)\n  private readonly _nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  //#endregion\n\n  //#region Public properties\n\n  /* alternateName: displayType */\n  /**\n   * The type of the button, which determines its behavior and semantics.\n   * - `'button'` – no default action; useful for custom JavaScript handlers.\n   * - `'submit'` – submits the associated form when clicked.\n   * - `'reset'` – resets the associated form fields to their initial values.\n   *\n   * Ignored when the button is rendered as a link (i.e. `href` is set).\n   * @attr type\n   * @default 'button'\n   */\n  @property({ reflect: true })\n  public type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * The URL the button points to. When set, the component renders as an\n   * `<a>` element instead of a `<button>`, enabling navigation on click.\n   * Use together with `target`, `download`, and `rel` for full anchor semantics.\n   * @attr href\n   */\n  @property()\n  public href?: string;\n\n  /**\n   * Prompts the browser to download the linked resource rather than navigating\n   * to it. The optional value is used as the suggested file name.\n   * Only effective when `href` is set.\n   * @attr download\n   */\n  @property()\n  public download?: string;\n\n  /**\n   * Where to open the linked document. Only effective when `href` is set.\n   * - `'_self'` – current browsing context (default browser behavior).\n   * - `'_blank'` – new tab or window.\n   * - `'_parent'` – parent browsing context; falls back to `_self` if none.\n   * - `'_top'` – top-level browsing context; falls back to `_self` if none.\n   * @attr target\n   */\n  @property()\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * The relationship between the current document and the linked URL.\n   * Accepts a space-separated list of link types (e.g. `'noopener noreferrer'`).\n   * Only effective when `href` is set. When `target=\"_blank\"` is used,\n   * setting `rel=\"noopener noreferrer\"` is strongly recommended for security.\n   * @attr rel\n   */\n  @property()\n  public rel?: string;\n\n  /**\n   * When set, the button will be disabled and non-interactive.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public set disabled(value: boolean) {\n    this._disabled = value;\n    this.toggleAttribute('disabled', Boolean(this._disabled));\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  /**\n   * The command to invoke on the target element specified by `commandfor`.\n   * Part of the [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) API.\n   * Custom commands must start with two dashes (e.g. `'--my-command'`).\n   * @attr command\n   */\n  @property({ reflect: true })\n  public command?: string;\n\n  /**\n   * The ID of the target element for the invoker command.\n   * Part of the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API).\n   * @attr commandfor\n   */\n  @property({ attribute: 'commandfor' })\n  public set commandfor(value: string | null) {\n    this._commandfor = value;\n    if (value) {\n      this._resolver.observe();\n      this._commandForElement = getElementByIdFromRoot(this, value);\n    } else {\n      this._commandForElement = null;\n      this._resolver.unobserve();\n    }\n  }\n\n  public get commandfor(): string | null {\n    return this._commandfor;\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  /**\n   * The target element for the invoker command. Resolved from the `commandfor` ID.\n   */\n  public get commandForElement(): Element | null {\n    return this._commandForElement;\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  public set commandForElement(value: Element | null) {\n    this._commandForElement = value;\n    this.requestUpdate();\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  /**\n   * The `<form>` element the button is associated with.\n   * Resolved through the standard form-association mechanism — either the\n   * closest ancestor `<form>` or the form referenced by the button's `form`\n   * attribute. Returns `null` when no form is associated.\n   * Relevant only when `type` is `'submit'` or `'reset'`.\n   */\n  public get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  //#endregion\n\n  //#region Lifecycle\n\n  protected override firstUpdated(): void {\n    this.updateComplete.then(() => {\n      if (this._commandfor) {\n        this._commandForElement = getElementByIdFromRoot(\n          this,\n          this._commandfor\n        );\n        this.requestUpdate();\n      }\n    });\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleClick(): void {\n    switch (this.type) {\n      case 'submit':\n        this.form?.requestSubmit();\n        break;\n      case 'reset':\n        this.form?.reset();\n        break;\n    }\n  }\n\n  protected formDisabledCallback(state: boolean): void {\n    this._disabled = state;\n    this.requestUpdate();\n  }\n\n  //#endregion\n\n  private _resolveCommandForElement(ids: Set<string>): void {\n    if (this._commandfor && ids.has(this._commandfor)) {\n      this._commandForElement = getElementByIdFromRoot(this, this._commandfor);\n      this.requestUpdate();\n    }\n  }\n\n  //#region Public API\n\n  /** Simulates a mouse click on the button, triggering its click handler and any associated form action. */\n  public override click(): void {\n    this._nativeButton?.click();\n  }\n\n  //#endregion\n\n  private _renderButton() {\n    return html`\n      <button\n        command=${ifDefined(this.command)}\n        .commandForElement=${this._commandForElement}\n        part=${partMap({ base: true, focused: this._focusRingManager.focused })}\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        ?disabled=${this.disabled}\n        type=${ifDefined(this.type)}\n        @click=${this._handleClick}\n      >\n        ${this._renderContent()}\n      </button>\n    `;\n  }\n\n  private _renderLinkButton() {\n    return html`\n      <a\n        part=${partMap({ base: true, focused: this._focusRingManager.focused })}\n        role=\"button\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-disabled=${this.disabled}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n      >\n        ${this._renderContent()}\n      </a>\n    `;\n  }\n\n  protected abstract _renderContent(): TemplateResult;\n\n  protected override render() {\n    return this.href != null ? this._renderLinkButton() : this._renderButton();\n  }\n}\n"]}

package/components/button/icon-button.js

@@ -32,15 +32,15 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
         return html `
       ${this.name || this.mirrored
             ? html `
-            <igc-icon
-              part="icon"
-              name=${ifDefined(this.name)}
-              collection=${ifDefined(this.collection)}
-              ?mirrored=${this.mirrored}
-              aria-hidden="true"
-            ></igc-icon>
-            <slot></slot>
-          `
+              <igc-icon
+                part="icon"
+                name=${ifDefined(this.name)}
+                collection=${ifDefined(this.collection)}
+                ?mirrored=${this.mirrored}
+                aria-hidden="true"
+              ></igc-icon>
+              <slot></slot>
+            `
             : html `<slot></slot>`}
     `;
     }

package/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,oBAAoB,IAAI,yBAAyB,GAClD,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uDAAuD,CAAC;AACzF,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAmBrD,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,sBAAsB;aACjD,YAAO,GAAG,iBAAiB,AAApB,CAAqB;aAClC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGpC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;IAC9D,CAAC;IAoCD;QACE,KAAK,EAAE,CAAC;QAdH,aAAQ,GAAG,KAAK,CAAC;QAWjB,YAAO,GAAsB,WAAW,CAAC;QAI9C,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,cAAc;QACtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;qBAGO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;2BACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;0BAC3B,IAAI,CAAC,QAAQ;;;;WAI5B;YACH,CAAC,CAAC,IAAI,CAAA,eAAe;KACxB,CAAC;IACJ,CAAC;IAIe,AAAN,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,GAAW,EACX,UAAU,GAAG,SAAS;QAEtB,MAAM,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAIS,oBAAoB,CAC5B,IAAY,EACZ,QAAgB,EAChB,UAAU,GAAG,SAAS;QAEtB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACxD,CAAC;;AApEM;IADN,QAAQ,EAAE;oDACU;AAOd;IADN,QAAQ,EAAE;0DACgB;AAQpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAWjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoB;AA0BhC;IADf,aAAa,EAAE;0DAOf;AAIS;IADT,aAAa,EAAE;kEAOf","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { blazorInclude } from '../common/decorators/blazorInclude.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n} from '../icon/icon.registry.js';\nimport type { IconButtonVariant } from '../types.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/icon-button/icon-button.base.css.js';\nimport { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';\nimport { all } from './themes/icon-button/themes.js';\n\n/**\n * A button that displays a single icon, designed for compact, icon-only\n * interactions such as toolbar actions, floating action buttons, or inline\n * controls.\n *\n * The icon is sourced from the icon registry via the `name` and `collection`\n * attributes. Like the normal button, it can render as an anchor element when\n * `href` is set and is fully form-associated.\n *\n * @element igc-icon-button\n *\n * @slot - Optional label rendered alongside the icon, useful for\n *   accessibility or augmented layouts.\n *\n * @csspart base - The wrapping element of the icon button.\n * @csspart icon - The icon element of the icon button.\n */\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-icon-button';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcIconButtonComponent, IgcIconComponent);\n  }\n\n  /* alternateName: iconName */\n  /**\n   * The name of the icon to display.\n   * @attr name\n   */\n  @property()\n  public name?: string;\n\n  /**\n   * The collection the icon belongs to.\n   * @attr collection\n   */\n  @property()\n  public collection?: string;\n\n  /**\n   * Determines whether the icon should be mirrored in right-to-left contexts.\n   * @attr mirrored\n   * @default false\n   */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /**\n   * The variant of the button which determines its visual appearance.\n   * - `contained` – filled background; highest visual emphasis (default).\n   * - `outlined` – transparent background with a visible border.\n   * - `flat` – no background or border; lowest visual emphasis.\n   * @attr variant\n   * @default 'contained'\n   */\n  @property({ reflect: true })\n  public variant: IconButtonVariant = 'contained';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderContent() {\n    return html`\n      ${this.name || this.mirrored\n        ? html`\n            <igc-icon\n              part=\"icon\"\n              name=${ifDefined(this.name)}\n              collection=${ifDefined(this.collection)}\n              ?mirrored=${this.mirrored}\n              aria-hidden=\"true\"\n            ></igc-icon>\n            <slot></slot>\n          `\n        : html`<slot></slot>`}\n    `;\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,oBAAoB,IAAI,yBAAyB,GAClD,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uDAAuD,CAAC;AACzF,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAmBrD,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,sBAAsB;aACjD,YAAO,GAAG,iBAAiB,AAApB,CAAqB;aAClC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGpC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;IAC9D,CAAC;IAoCD;QACE,KAAK,EAAE,CAAC;QAdH,aAAQ,GAAG,KAAK,CAAC;QAWjB,YAAO,GAAsB,WAAW,CAAC;QAI9C,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,cAAc;QACtB,OAAO,IAAI,CAAA;QAEP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YACxB,CAAC,CAAC,IAAI,CAAA;;;uBAGO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;6BACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;4BAC3B,IAAI,CAAC,QAAQ;;;;aAI5B;YACH,CAAC,CAAC,IAAI,CAAA,eACV;KACD,CAAC;IACJ,CAAC;IAIe,AAAN,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,GAAW,EACX,UAAU,GAAG,SAAS;QAEtB,MAAM,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAIS,oBAAoB,CAC5B,IAAY,EACZ,QAAgB,EAChB,UAAU,GAAG,SAAS;QAEtB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACxD,CAAC;;AAtEM;IADN,QAAQ,EAAE;oDACU;AAOd;IADN,QAAQ,EAAE;0DACgB;AAQpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAWjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoB;AA4BhC;IADf,aAAa,EAAE;0DAOf;AAIS;IADT,aAAa,EAAE;kEAOf","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { blazorInclude } from '../common/decorators/blazorInclude.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n} from '../icon/icon.registry.js';\nimport type { IconButtonVariant } from '../types.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/icon-button/icon-button.base.css.js';\nimport { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';\nimport { all } from './themes/icon-button/themes.js';\n\n/**\n * A button that displays a single icon, designed for compact, icon-only\n * interactions such as toolbar actions, floating action buttons, or inline\n * controls.\n *\n * The icon is sourced from the icon registry via the `name` and `collection`\n * attributes. Like the normal button, it can render as an anchor element when\n * `href` is set and is fully form-associated.\n *\n * @element igc-icon-button\n *\n * @slot - Optional label rendered alongside the icon, useful for\n *   accessibility or augmented layouts.\n *\n * @csspart base - The wrapping element of the icon button.\n * @csspart icon - The icon element of the icon button.\n */\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-icon-button';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcIconButtonComponent, IgcIconComponent);\n  }\n\n  /* alternateName: iconName */\n  /**\n   * The name of the icon to display.\n   * @attr name\n   */\n  @property()\n  public name?: string;\n\n  /**\n   * The collection the icon belongs to.\n   * @attr collection\n   */\n  @property()\n  public collection?: string;\n\n  /**\n   * Determines whether the icon should be mirrored in right-to-left contexts.\n   * @attr mirrored\n   * @default false\n   */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /**\n   * The variant of the button which determines its visual appearance.\n   * - `contained` – filled background; highest visual emphasis (default).\n   * - `outlined` – transparent background with a visible border.\n   * - `flat` – no background or border; lowest visual emphasis.\n   * @attr variant\n   * @default 'contained'\n   */\n  @property({ reflect: true })\n  public variant: IconButtonVariant = 'contained';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderContent() {\n    return html`\n      ${\n        this.name || this.mirrored\n          ? html`\n              <igc-icon\n                part=\"icon\"\n                name=${ifDefined(this.name)}\n                collection=${ifDefined(this.collection)}\n                ?mirrored=${this.mirrored}\n                aria-hidden=\"true\"\n              ></igc-icon>\n              <slot></slot>\n            `\n          : html`<slot></slot>`\n      }\n    `;\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}