igniteui-webcomponents 7.1.2 → 7.2.0

package/CHANGELOG.md

@@ -4,6 +4,55 @@ 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.0] - 2026-05-27
+### Added
+- #### Date Range Picker
+  - Added support for editing the date range value directly via a single input field. [#1733](https://github.com/IgniteUI/igniteui-webcomponents/pull/1733)
+- #### Nav Drawer
+  - The drawer for non-relative positions are now implemented using the native Popover API, providing built-in modal semantics, focus trapping, and accessibility support. [#2194](https://github.com/IgniteUI/igniteui-webcomponents/pull/2194)
+  - Added `keepOpenOnEscape` property — prevents the drawer from closing when the user presses the **Escape** key (non-relative positions only). [#2194](https://github.com/IgniteUI/igniteui-webcomponents/pull/2194)
+  - Added `igcClosing` event — emitted just before the drawer is closed by user interaction. Cancelable. [#2194](https://github.com/IgniteUI/igniteui-webcomponents/pull/2194)
+  - Added `igcClosed` event — emitted just after the drawer is closed by user interaction. [#2194](https://github.com/IgniteUI/igniteui-webcomponents/pull/2194)
+- #### Invoker Commands API
+  - `igc-button` and `igc-icon-button` now support `command` and `commandfor` properties, enabling declarative control of target components without JavaScript. [#2225](https://github.com/IgniteUI/igniteui-webcomponents/pull/2225)
+  - `igc-banner`, `igc-dialog`, `igc-nav-drawer`, `igc-snackbar`, and `igc-toast` now respond to `--show`, `--hide`, and `--toggle` commands dispatched by an invoker button. [#2225](https://github.com/IgniteUI/igniteui-webcomponents/pull/2225)
+- #### Snackbar
+  - Added `positioning` property (`viewport` | `container`). The component now renders as a popover in the browser top layer. Setting `positioning` to `container` anchors the component to its nearest visible ancestor instead of the viewport. [#2203](https://github.com/IgniteUI/igniteui-webcomponents/pull/2203)
+- #### Toast
+  - Added `positioning` property (`viewport` | `container`). The component now renders as a popover in the browser top layer. Setting `positioning` to `container` anchors the component to its nearest visible ancestor instead of the viewport. [#2203](https://github.com/IgniteUI/igniteui-webcomponents/pull/2203)
+
+### Changed
+- #### AI-Assisted Development
+  - Updated and enhanced the library provided skills [#2232](https://github.com/IgniteUI/igniteui-webcomponents/pull/2232)
+- #### Form controls
+  - `IgcInput`, `IgcMaskInput`, `IgcDateTimeInput`, `IgcCheckbox`, `IgcRadio`, `IgcSwitch`, `IgcDatePicker`, and `IgcDateRangePicker` now submit their associated form on **Enter** key press, matching native browser behavior. [#2213](https://github.com/IgniteUI/igniteui-webcomponents/pull/2213)
+- #### Input
+  - Added theming support for `date`, `time`, `datetime-local`, `week`, and `month` input types, ensuring consistent styles and floating label behavior across all supported themes. [#2223](https://github.com/IgniteUI/igniteui-webcomponents/pull/2223)
+- #### Nav Drawer
+  - The `overlay` CSS part has been removed. Users of the component can target the `base` part's `::backdrop` pseudo-element, the
+    `--ig-overlay-background-color` variable or use the theming package. [#2194](https://github.com/IgniteUI/igniteui-webcomponents/pull/2194)
+
+### Deprecated
+- #### Localization
+  - The old resource string interfaces for `Calendar`, `Chat`, `Date Picker`, and `Date Range Picker` are deprecated. Components now use the new `igniteui-i18n` resource keys. Setting individual `resourceStrings` properties directly is no longer supported; provide a complete resource strings object instead. [#2169](https://github.com/IgniteUI/igniteui-webcomponents/pull/2169)
+
+### Fixed
+- #### Button Group
+  - Selected state border color mismatch in focused and hover states. [#2219](https://github.com/IgniteUI/igniteui-webcomponents/pull/2219)
+- #### Combo
+  - Display value not restored correctly when tabbing out in single-select mode with a partial search text. [#2224](https://github.com/IgniteUI/igniteui-webcomponents/pull/2224)
+- #### Stepper
+  - Step components connected to the DOM before their parent stepper now correctly receive context after being adopted by a stepper. [#2228](https://github.com/IgniteUI/igniteui-webcomponents/pull/2228)
+
+## [7.1.3] - 2026-04-28
+### Changed
+- #### AI-Assisted Development
+  - Updated and enhanced the library provided skills [#2207](https://github.com/IgniteUI/igniteui-webcomponents/pull/2207)
+
+### Fixed
+- #### Stepper
+  - In horizontal orientation, the content area height can now driven by the active step's content instead of always being sized to the tallest step. A new `--body-grid-rows` CSS custom property controls the internal row sizing of each step body — its default value of `1fr` expands the body to fit its content, while setting it to `0fr` collapses the body to zero height, enabling fully variable step heights. [#2209](https://github.com/IgniteUI/igniteui-webcomponents/issues/2209)
+
 ## [7.1.2] - 2026-04-22
 ### Changed
 - #### AI-Assisted Development
@@ -1306,6 +1355,8 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.3...7.2.0
+[7.1.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.2...7.1.3
 [7.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.1...7.1.2
 [7.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.0...7.1.1
 [7.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.0.1...7.1.0

package/components/banner/banner.d.ts

@@ -6,23 +6,38 @@ export interface IgcBannerComponentEventMap {
 }
 declare const IgcBannerComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcBannerComponentEventMap>> & Constructor<LitElement>;
 /**
- * The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.
+ * A non-modal notification banner that displays important, concise messages
+ * requiring user acknowledgement.
+ *
+ * The banner slides into view with an animated grow transition and renders
+ * inline, pushing the surrounding page content rather than overlaying it.
+ *
+ * The component integrates with the
+ * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
+ * an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` /
+ * `"--toggle"` and `commandfor` pointing to this element will call the
+ * corresponding method declaratively without any JavaScript.
  *
  * @element igc-banner
  *
- * @slot - Renders the text content of the banner message.
- * @slot prefix - Renders additional content at the start of the message block.
- * @slot actions - Renders any action elements.
+ * @fires igcClosing - Emitted just before the banner closes in response to the
+ *   default action button being clicked. Cancelable — call
+ *   `event.preventDefault()` to abort the closing sequence.
+ * @fires igcClosed - Emitted after the banner has fully closed and its exit
+ *   animation has completed.
  *
- * @fires igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.
- * @fires igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.
+ * @slot - The banner message text content.
+ * @slot prefix - An icon or illustration rendered to the left of the message.
+ *   Useful for reinforcing the message type (info, warning, success, etc.).
+ * @slot actions - Custom action elements rendered in the banner's action area.
+ *   When provided, replaces the default "OK" dismiss button.
  *
- * @csspart base - The base wrapper of the banner component.
- * @csspart spacer - The inner wrapper that sets the space around the banner.
- * @csspart message - The part that holds the text and the illustration.
- * @csspart illustration - The part that holds the banner icon/illustration.
- * @csspart content - The part that holds the banner text content.
- * @csspart actions - The part that holds the banner action buttons.
+ * @csspart base - The root wrapper element of the banner.
+ * @csspart spacer - The inner wrapper that controls the spacing around the banner content.
+ * @csspart message - The container that holds the illustration and text content.
+ * @csspart illustration - The container for the prefix slot (icon/illustration).
+ * @csspart content - The container for the default message slot.
+ * @csspart actions - The container for the action buttons slot.
  */
 export default class IgcBannerComponent extends IgcBannerComponent_base {
     static readonly tagName = "igc-banner";
@@ -31,17 +46,38 @@ export default class IgcBannerComponent extends IgcBannerComponent_base {
     private readonly _bannerRef;
     private readonly _player;
     /**
-     * Determines whether the banner is being shown/hidden.
-     * @attr
+     * Whether the banner is open.
+     *
+     * Setting this property programmatically will immediately show or hide the
+     * banner without animation and without emitting close events.
+     * Prefer the `show()`, `hide()`, and `toggle()` methods for animated
+     * transitions.
+     * @attr open
+     * @default false
      */
     open: boolean;
     constructor();
     private _handleClick;
-    /** Shows the banner if not already shown. Returns `true` when the animation has completed. */
+    /**
+     * Opens the banner with an animated grow-in transition.
+     *
+     * Returns `true` when the banner was successfully opened, or `false` if
+     * it was already open.
+     */
     show(): Promise<boolean>;
-    /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */
+    /**
+     * Closes the banner with an animated grow-out transition.
+     *
+     * Returns `true` when the banner was successfully closed, or `false` if
+     * it was already closed.
+     */
     hide(): Promise<boolean>;
-    /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */
+    /**
+     * Toggles the banner open or closed depending on its current state.
+     *
+     * Equivalent to calling `show()` when closed and `hide()` when open.
+     * Returns `true` when the transition completed successfully.
+     */
     toggle(): Promise<boolean>;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/banner/banner.js

@@ -11,6 +11,7 @@ import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
+import { addCommandController } from '../common/controllers/command.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -36,6 +37,10 @@ export default class IgcBannerComponent extends EventEmitterMixin(LitElement) {
                 ariaLive: 'polite',
             },
         });
+        addCommandController(this)
+            .set('--show', this.show)
+            .set('--hide', this.hide)
+            .set('--toggle', this.toggle);
     }
     async _handleClick() {
         if (this.emitEvent('igcClosing', { cancelable: true })) {

package/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/banner.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcBannerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.\n *\n * @element igc-banner\n *\n * @slot - Renders the text content of the banner message.\n * @slot prefix - Renders additional content at the start of the message block.\n * @slot actions - Renders any action elements.\n *\n * @fires igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.\n * @fires igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.\n *\n * @csspart base - The base wrapper of the banner component.\n * @csspart spacer - The inner wrapper that sets the space around the banner.\n * @csspart message - The part that holds the text and the illustration.\n * @csspart illustration - The part that holds the banner icon/illustration.\n * @csspart content - The part that holds the banner text content.\n * @csspart actions - The part that holds the banner action buttons.\n */\n\nexport default class IgcBannerComponent extends EventEmitterMixin<\n  IgcBannerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-banner';\n  public static styles = [styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBannerComponent, IgcButtonComponent);\n  }\n\n  private readonly _bannerRef = createRef<HTMLElement>();\n  private readonly _player = addAnimationController(this, this._bannerRef);\n\n  /**\n   * Determines whether the banner is being shown/hidden.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addSlotController(this, { slots: setSlots('prefix', 'actions') });\n    addInternalsController(this, {\n      initialARIA: {\n        role: 'status',\n        ariaLive: 'polite',\n      },\n    });\n  }\n\n  private async _handleClick(): Promise<void> {\n    if (this.emitEvent('igcClosing', { cancelable: true })) {\n      await this.hide();\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  /** Shows the banner if not already shown. Returns `true` when the animation has completed. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    return this._player.playExclusive(growVerIn());\n  }\n\n  /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    await this._player.playExclusive(growVerOut());\n    this.open = false;\n    return true;\n  }\n\n  /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  protected override render() {\n    return html`\n      <div ${ref(this._bannerRef)} part=\"base\" .inert=${!this.open}>\n        <div part=\"spacer\">\n          <div part=\"message\">\n            <div part=\"illustration\">\n              <slot name=\"prefix\"></slot>\n            </div>\n            <div part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div part=\"actions\">\n            <slot name=\"actions\">\n              <igc-button\n                type=\"button\"\n                variant=\"flat\"\n                @click=${this._handleClick}\n                >OK</igc-button\n              >\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-banner': IgcBannerComponent;\n  }\n}\n"]}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addCommandController } from '../common/controllers/command.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/banner.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcBannerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * A non-modal notification banner that displays important, concise messages\n * requiring user acknowledgement.\n *\n * The banner slides into view with an animated grow transition and renders\n * inline, pushing the surrounding page content rather than overlaying it.\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` /\n * `\"--toggle\"` and `commandfor` pointing to this element will call the\n * corresponding method declaratively without any JavaScript.\n *\n * @element igc-banner\n *\n * @fires igcClosing - Emitted just before the banner closes in response to the\n *   default action button being clicked. Cancelable — call\n *   `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted after the banner has fully closed and its exit\n *   animation has completed.\n *\n * @slot - The banner message text content.\n * @slot prefix - An icon or illustration rendered to the left of the message.\n *   Useful for reinforcing the message type (info, warning, success, etc.).\n * @slot actions - Custom action elements rendered in the banner's action area.\n *   When provided, replaces the default \"OK\" dismiss button.\n *\n * @csspart base - The root wrapper element of the banner.\n * @csspart spacer - The inner wrapper that controls the spacing around the banner content.\n * @csspart message - The container that holds the illustration and text content.\n * @csspart illustration - The container for the prefix slot (icon/illustration).\n * @csspart content - The container for the default message slot.\n * @csspart actions - The container for the action buttons slot.\n */\nexport default class IgcBannerComponent extends EventEmitterMixin<\n  IgcBannerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-banner';\n  public static styles = [styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBannerComponent, IgcButtonComponent);\n  }\n\n  private readonly _bannerRef = createRef<HTMLElement>();\n  private readonly _player = addAnimationController(this, this._bannerRef);\n\n  /**\n   * Whether the banner is open.\n   *\n   * Setting this property programmatically will immediately show or hide the\n   * banner without animation and without emitting close events.\n   * Prefer the `show()`, `hide()`, and `toggle()` methods for animated\n   * transitions.\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addSlotController(this, { slots: setSlots('prefix', 'actions') });\n    addInternalsController(this, {\n      initialARIA: {\n        role: 'status',\n        ariaLive: 'polite',\n      },\n    });\n    addCommandController(this)\n      .set('--show', this.show)\n      .set('--hide', this.hide)\n      .set('--toggle', this.toggle);\n  }\n\n  private async _handleClick(): Promise<void> {\n    if (this.emitEvent('igcClosing', { cancelable: true })) {\n      await this.hide();\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  /**\n   * Opens the banner with an animated grow-in transition.\n   *\n   * Returns `true` when the banner was successfully opened, or `false` if\n   * it was already open.\n   */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    return this._player.playExclusive(growVerIn());\n  }\n\n  /**\n   * Closes the banner with an animated grow-out transition.\n   *\n   * Returns `true` when the banner was successfully closed, or `false` if\n   * it was already closed.\n   */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    await this._player.playExclusive(growVerOut());\n    this.open = false;\n    return true;\n  }\n\n  /**\n   * Toggles the banner open or closed depending on its current state.\n   *\n   * Equivalent to calling `show()` when closed and `hide()` when open.\n   * Returns `true` when the transition completed successfully.\n   */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  protected override render() {\n    return html`\n      <div ${ref(this._bannerRef)} part=\"base\" .inert=${!this.open}>\n        <div part=\"spacer\">\n          <div part=\"message\">\n            <div part=\"illustration\">\n              <slot name=\"prefix\"></slot>\n            </div>\n            <div part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div part=\"actions\">\n            <slot name=\"actions\">\n              <igc-button\n                type=\"button\"\n                variant=\"flat\"\n                @click=${this._handleClick}\n                >OK</igc-button\n              >\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-banner': IgcBannerComponent;\n  }\n}\n"]}

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

@@ -5,57 +5,111 @@ export interface IgcButtonEventMap {
     blur: FocusEvent;
 }
 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`.
+ *
+ * Provides common form-association behavior, link-button rendering
+ * (renders as `<a>` when `href` is set), keyboard focus-ring management,
+ * and the Invoker Commands API (`command` / `commandfor`).
+ *
+ * Concrete subclasses must implement `_renderContent()` to supply the
+ * visual content projected inside the native `<button>` or `<a>` element.
+ */
 export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseComponent_base {
     static readonly formAssociated = true;
-    protected readonly _internals: import("../common/controllers/internals.js").ElementInternalsController;
     private readonly _focusRingManager;
-    protected _disabled: boolean;
-    private readonly _nativeButton;
+    private readonly _internals;
+    private readonly _resolver;
+    private _disabled;
+    private _commandfor;
+    private _commandForElement;
+    private readonly _nativeButton?;
     /**
-     * The type of the button. Defaults to `button`.
-     * @attr
+     * The type of the button, which determines its behavior and semantics.
+     * - `'button'` – no default action; useful for custom JavaScript handlers.
+     * - `'submit'` – submits the associated form when clicked.
+     * - `'reset'` – resets the associated form fields to their initial values.
+     *
+     * Ignored when the button is rendered as a link (i.e. `href` is set).
+     * @attr type
+     * @default 'button'
      */
     type: 'button' | 'reset' | 'submit';
     /**
-     * The URL the button points to.
-     * @attr
+     * The URL the button points to. When set, the component renders as an
+     * `<a>` element instead of a `<button>`, enabling navigation on click.
+     * Use together with `target`, `download`, and `rel` for full anchor semantics.
+     * @attr href
      */
     href?: string;
     /**
-     * Prompts to save the linked URL instead of navigating to it.
-     * @attr
+     * Prompts the browser to download the linked resource rather than navigating
+     * to it. The optional value is used as the suggested file name.
+     * Only effective when `href` is set.
+     * @attr download
      */
     download?: string;
     /**
-     * Where to display the linked URL, as the name for a browsing context.
-     * @attr
+     * Where to open the linked document. Only effective when `href` is set.
+     * - `'_self'` – current browsing context (default browser behavior).
+     * - `'_blank'` – new tab or window.
+     * - `'_parent'` – parent browsing context; falls back to `_self` if none.
+     * - `'_top'` – top-level browsing context; falls back to `_self` if none.
+     * @attr target
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
     /**
-     * The relationship of the linked URL.
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
-     * @attr
+     * The relationship between the current document and the linked URL.
+     * Accepts a space-separated list of link types (e.g. `'noopener noreferrer'`).
+     * Only effective when `href` is set. When `target="_blank"` is used,
+     * setting `rel="noopener noreferrer"` is strongly recommended for security.
+     * @attr rel
      */
     rel?: string;
     /**
-     * The disabled state of the component
-     * @attr [disabled=false]
+     * When set, the button will be disabled and non-interactive.
+     *
+     * @attr disabled
+     * @default false
      */
     set disabled(value: boolean);
     get disabled(): boolean;
-    /** Returns the HTMLFormElement associated with this element. */
+    /**
+     * The command to invoke on the target element specified by `commandfor`.
+     * Part of the [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) API.
+     * Custom commands must start with two dashes (e.g. `'--my-command'`).
+     * @attr command
+     */
+    command?: string;
+    /**
+     * The ID of the target element for the invoker command.
+     * Part of the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API).
+     * @attr commandfor
+     */
+    set commandfor(value: string | null);
+    get commandfor(): string | null;
+    /**
+     * The target element for the invoker command. Resolved from the `commandfor` ID.
+     */
+    get commandForElement(): Element | null;
+    set commandForElement(value: Element | null);
+    /**
+     * The `<form>` element the button is associated with.
+     * Resolved through the standard form-association mechanism — either the
+     * closest ancestor `<form>` or the form referenced by the button's `form`
+     * attribute. Returns `null` when no form is associated.
+     * Relevant only when `type` is `'submit'` or `'reset'`.
+     */
     get form(): HTMLFormElement | null;
-    /** Sets focus in the button. */
-    focus(options?: FocusOptions): void;
-    /** Simulates a mouse click on the element */
-    click(): void;
-    /** Removes focus from the button. */
-    blur(): void;
+    protected firstUpdated(): void;
     protected _handleClick(): void;
     protected formDisabledCallback(state: boolean): void;
-    private renderButton;
-    private renderLinkButton;
-    protected abstract renderContent(): TemplateResult;
+    private _resolveCommandForElement;
+    /** Simulates a mouse click on the button, triggering its click handler and any associated form action. */
+    click(): void;
+    private _renderButton;
+    private _renderLinkButton;
+    protected abstract _renderContent(): TemplateResult;
     protected render(): TemplateResult<1>;
 }
 export {};

package/components/button/button-base.js

@@ -4,21 +4,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+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 { partMap } from '../common/part-map.js';
+import { bindIf, getElementByIdFromRoot } from '../common/util.js';
 let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this._internals = addInternalsController(this);
         this._focusRingManager = addKeyboardFocusRing(this);
+        this._internals = addInternalsController(this);
+        this._resolver = addIdRefResolver(this, this._resolveCommandForElement);
         this._disabled = false;
+        this._commandfor = null;
+        this._commandForElement = null;
         this.type = 'button';
     }
     static { this.formAssociated = true; }
@@ -29,62 +34,92 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
     get disabled() {
         return this._disabled;
     }
-    get form() {
-        return this._internals.form;
+    set commandfor(value) {
+        this._commandfor = value;
+        if (value) {
+            this._resolver.observe();
+            this._commandForElement = getElementByIdFromRoot(this, value);
+        }
+        else {
+            this._commandForElement = null;
+            this._resolver.unobserve();
+        }
     }
-    focus(options) {
-        this._nativeButton.focus(options);
+    get commandfor() {
+        return this._commandfor;
     }
-    click() {
-        this._nativeButton.click();
+    get commandForElement() {
+        return this._commandForElement;
     }
-    blur() {
-        this._nativeButton.blur();
+    set commandForElement(value) {
+        this._commandForElement = value;
+        this.requestUpdate();
     }
-    _handleClick() {
-        if (this.type === 'submit') {
-            this.form?.requestSubmit();
+    get form() {
+        return this._internals.form;
+    }
+    firstUpdated() {
+        if (this._commandfor) {
+            this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
+            this.requestUpdate();
         }
-        else if (this.type === 'reset') {
-            this.form?.reset();
+    }
+    _handleClick() {
+        switch (this.type) {
+            case 'submit':
+                this.form?.requestSubmit();
+                break;
+            case 'reset':
+                this.form?.reset();
+                break;
         }
     }
     formDisabledCallback(state) {
         this._disabled = state;
         this.requestUpdate();
     }
-    renderButton() {
+    _resolveCommandForElement(ids) {
+        if (this._commandfor && ids.has(this._commandfor)) {
+            this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
+            this.requestUpdate();
+        }
+    }
+    click() {
+        this._nativeButton?.click();
+    }
+    _renderButton() {
         return html `
       <button
+        command=${ifDefined(this.command)}
+        .commandForElement=${this._commandForElement}
         part=${partMap({ base: true, focused: this._focusRingManager.focused })}
-        aria-label=${ifDefined(this.ariaLabel ?? nothing)}
+        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
         @click=${this._handleClick}
       >
-        ${this.renderContent()}
+        ${this._renderContent()}
       </button>
     `;
     }
-    renderLinkButton() {
+    _renderLinkButton() {
         return html `
       <a
         part=${partMap({ base: true, focused: this._focusRingManager.focused })}
         role="button"
-        aria-label=${ifDefined(this.ariaLabel ?? nothing)}
+        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}
         aria-disabled=${this.disabled}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.rel)}
       >
-        ${this.renderContent()}
+        ${this._renderContent()}
       </a>
     `;
     }
     render() {
-        const link = this.href !== undefined;
-        return link ? this.renderLinkButton() : this.renderButton();
+        return this.href != null ? this._renderLinkButton() : this._renderButton();
     }
 };
 __decorate([
@@ -108,6 +143,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonBaseComponent.prototype, "disabled", null);
+__decorate([
+    property({ reflect: true })
+], IgcButtonBaseComponent.prototype, "command", void 0);
+__decorate([
+    property({ attribute: 'commandfor' })
+], IgcButtonBaseComponent.prototype, "commandfor", null);
 IgcButtonBaseComponent = __decorate([
     blazorDeepImport,
     shadowOptions({ delegatesFocus: true })

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, nothing, 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 { 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';\n\nexport interface IgcButtonEventMap {\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\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  protected readonly _internals = addInternalsController(this);\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n\n  protected _disabled = false;\n\n  @query('[part=\"base\"]', true)\n  private readonly _nativeButton!: HTMLButtonElement;\n\n  /* alternateName: displayType */\n  /**\n   * The type of the button. Defaults to `button`.\n   * @attr\n   */\n  @property({ reflect: true })\n  public type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * The URL the button points to.\n   * @attr\n   */\n  @property()\n  public href?: string;\n\n  /**\n   * Prompts to save the linked URL instead of navigating to it.\n   * @attr\n   */\n  @property()\n  public download?: string;\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context.\n   * @attr\n   */\n  @property()\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * The relationship of the linked URL.\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n   * @attr\n   */\n  @property()\n  public rel?: string;\n\n  /**\n   * The disabled state of the component\n   * @attr [disabled=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  /* blazorCSSuppress */\n  /* alternateType: object */\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus in the button. */\n  public override focus(options?: FocusOptions): void {\n    this._nativeButton.focus(options);\n  }\n\n  /** Simulates a mouse click on the element */\n  public override click(): void {\n    this._nativeButton.click();\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur(): void {\n    this._nativeButton.blur();\n  }\n\n  protected _handleClick(): void {\n    if (this.type === 'submit') {\n      this.form?.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.form?.reset();\n    }\n  }\n\n  protected formDisabledCallback(state: boolean): void {\n    this._disabled = state;\n    this.requestUpdate();\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        part=${partMap({ base: true, focused: this._focusRingManager.focused })}\n        aria-label=${ifDefined(this.ariaLabel ?? nothing)}\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=${ifDefined(this.ariaLabel ?? nothing)}\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    const link = this.href !== undefined;\n    return link ? 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  /**\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  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"]}

package/components/button/button.d.ts

@@ -4,6 +4,10 @@ import { IgcButtonBaseComponent } from './button-base.js';
  * Represents a clickable button, used to submit forms or anywhere in a
  * document for accessible, standard button functionality.
  *
+ * The button supports multiple visual variants, can render as an anchor
+ * (`<a>`) element when the `href` attribute is set, and is fully
+ * form-associated, acting as a native `submit` or `reset` control.
+ *
  * @element igc-button
  *
  * @slot - Renders the label of the button.
@@ -19,12 +23,17 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
     protected static styles: import("lit").CSSResult[];
     static register(): void;
     /**
-     * Sets the variant of the button.
-     * @attr
+     * The variant of the button which determines its visual appearance.
+     * - `contained` – filled background; highest visual emphasis (default).
+     * - `outlined` – transparent background with a visible border.
+     * - `flat` – no background or border; lowest visual emphasis.
+     * - `fab` – floating action button shape; typically used for primary actions.
+     * @attr variant
+     * @default 'contained'
      */
     variant: ButtonVariant;
     constructor();
-    protected renderContent(): import("lit-html").TemplateResult<1>;
+    protected _renderContent(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/button/button.js

@@ -23,7 +23,7 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
         this.variant = 'contained';
         addThemingController(this, all);
     }
-    renderContent() {
+    _renderContent() {
         return html `
       <slot name="prefix"></slot>
       <slot></slot>