igniteui-webcomponents 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -4,6 +4,52 @@ 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/).
 
+## [6.1.0] - 2025-06-12
+### Added
+- Date Range Picker
+
+### Changed
+- Updated the readonly styles of most form associated components across all themes to better signify when a component
+  is in a readonly state.
+- #### File input
+  - **Breaking change**: `igcChange` & `igcCancel` events detail now returns the underlying component `files` property.
+- #### Tooltip
+  - **Behavioral change**: Tooltip default `placement` is 'bottom' now.
+  - **Behavioral change**: Tooltip will not render an arrow indicator by default unless `with-arrow` is set.
+  - **Breaking change**: Tooltip events will no longer return its `anchor` target in its `detail` property.
+
+    You can still access it at `event.target.anchor`.
+
+### Deprecated
+- #### Tooltip
+  - `disableArrow` is deprecated. Use `withArrow | with-arrow` to render an arrow indicator.
+
+### Fixed
+- #### Calendar & Date Picker
+  - Incorrect date rollover for in certain scenarios [#1710](https://github.com/IgniteUI/igniteui-webcomponents/issues/1710)
+- #### Combo
+  - Case insensitive icon styles in themes [#1728](https://github.com/IgniteUI/igniteui-webcomponents/pull/1728)
+- #### Input
+  - Replace border in fluent theme with a box-shadow [#1726](https://github.com/IgniteUI/igniteui-webcomponents/pull/1726)
+  - Focused state background color in Indigo theme [#1732](https://github.com/IgniteUI/igniteui-webcomponents/pull/1732)
+- #### Textarea
+  - Label height and component height override [#1715](https://github.com/IgniteUI/igniteui-webcomponents/pull/1715)
+
+## [6.0.1] - 2025-05-28
+### Added
+- #### Radio group
+  - Slotted `<label>` elements have default styles based on the current theme [#1694](https://github.com/IgniteUI/igniteui-webcomponents/pull/1694)
+
+### Fixed
+- #### Chip
+  - Styling discrepancies [#1486](https://github.com/IgniteUI/igniteui-webcomponents/pull/1486)
+- #### DateTime Input
+  - Ensure `igcChange` is emitted in case an incomplete mask value has been filled [#1695](https://github.com/IgniteUI/igniteui-webcomponents/issues/1695)
+- #### Input
+  - Browser default autofill background styles [#1697](https://github.com/IgniteUI/igniteui-webcomponents/pull/1697)
+- #### Textarea
+  - Dynamic prefix/suffix slot content state [#1686](https://github.com/IgniteUI/igniteui-webcomponents/issues/1686)
+
 ## [6.0.0] - 2025-04-29
 ### Changed
 - Minimum Node version required is now >= 20.
@@ -878,6 +924,8 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.1...6.1.0
+[6.0.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.0...6.0.1
 [6.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.4.1...6.0.0
 [5.4.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.4.0...5.4.1
 [5.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.3.0...5.4.0

package/README.md

@@ -9,7 +9,7 @@
 [![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Web Components] is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. All components are based on the [Indigo.Design Design System] and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
+[Ignite UI for Web Components] is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. All components are based on the [Indigo.Design Design System] and are backed by ready-to-use UI kit for Figma.
 
 See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
@@ -23,6 +23,8 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 | Components              | Status |         Documentation          | Released Version |
 | :---------------------- | :----: | :----------------------------: | :--------------: |
+| Tooltip                 |   ✅   |      [Docs][Tooltip Docs]      |     [5.4.0]      |
+| File Input              |   ✅   |    [Docs][File Input Docs]     |     [5.4.0]      |
 | Tile Manager            |   ✅   |   [Docs][Tile Manager Docs]    |     [5.3.0]      |
 | Carousel                |   ✅   |     [Docs][Carousel Docs]      |     [5.1.0]      |
 | Date picker             |   ✅   |    [Docs][Date Picker Docs]    |     [4.10.0]     |
@@ -241,6 +243,8 @@ npm run storybook:build
 [Date Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker
 [Carousel Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel
 [Tile Manager Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager
+[File Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input
+[Tooltip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip
 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0
@@ -253,3 +257,4 @@ npm run storybook:build
 [4.10.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.10.0
 [5.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.1.0
 [5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.3.0
+[5.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.4.0

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--border-radius: var(--ig-avatar-border-radius, 0.25rem);--ig-theme: bootstrap}`;
+export const styles = css `:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--border-radius: var(--ig-avatar-border-radius, 0.25rem);--ig-theme: bootstrap}`;
 //# sourceMappingURL=avatar.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uFAAuF,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--border-radius: var(--ig-avatar-border-radius, 0.25rem);--ig-theme: bootstrap}`;\n"]}
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qJAAqJ,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--border-radius: var(--ig-avatar-border-radius, 0.25rem);--ig-theme: bootstrap}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--ig-theme: fluent}`;
+export const styles = css `:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--ig-theme: fluent}`;
 //# sourceMappingURL=avatar.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2BAA2B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-theme: fluent}`;\n"]}
+{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yFAAyF,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--ig-theme: fluent}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--ig-theme: material}`;
+export const styles = css `:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--ig-theme: material}`;
 //# sourceMappingURL=avatar.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6BAA6B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-theme: material}`;\n"]}
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/dark/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2FAA2F,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-avatar-background, var(--ig-gray-200));--ig-theme: material}`;\n"]}

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

@@ -13,10 +13,10 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    private _kbFocus;
-    protected __internals: ElementInternals;
+    protected readonly __internals: ElementInternals;
+    private readonly _focusRingManager;
     protected _disabled: boolean;
-    private _nativeButton;
+    private readonly _nativeButton;
     /**
      * The type of the button. Defaults to `button`.
      * @attr
@@ -47,8 +47,8 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
      * The disabled state of the component
      * @attr [disabled=false]
      */
-    get disabled(): boolean;
     set disabled(value: boolean);
+    get disabled(): boolean;
     /** Returns the HTMLFormElement associated with this element. */
     get form(): HTMLFormElement | null;
     constructor();
@@ -58,8 +58,7 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
     click(): void;
     /** Removes focus from the button. */
     blur(): void;
-    protected handleBlur(): void;
-    protected handleClick(): void;
+    protected _handleClick(): void;
     protected formDisabledCallback(state: boolean): void;
     private renderButton;
     private renderLinkButton;

package/components/button/button-base.js

@@ -10,21 +10,21 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMixin(LitElement) {
-    get disabled() {
-        return this._disabled;
-    }
     set disabled(value) {
         this._disabled = value;
         this.toggleAttribute('disabled', Boolean(this._disabled));
     }
+    get disabled() {
+        return this._disabled;
+    }
     get form() {
         return this.__internals.form;
     }
     constructor() {
         super();
-        this._kbFocus = addKeyboardFocusRing(this);
+        this._focusRingManager = addKeyboardFocusRing(this);
         this._disabled = false;
         this.type = 'button';
         this.__internals = this.attachInternals();
@@ -38,18 +38,12 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
     blur() {
         this._nativeButton.blur();
     }
-    handleBlur() {
-        this._kbFocus.reset();
-    }
-    handleClick() {
-        this._kbFocus.reset();
-        switch (this.type) {
-            case 'submit':
-                return this.form?.requestSubmit();
-            case 'reset':
-                return this.form?.reset();
-            default:
-                return;
+    _handleClick() {
+        if (this.type === 'submit') {
+            this.form?.requestSubmit();
+        }
+        else if (this.type === 'reset') {
+            this.form?.reset();
         }
     }
     formDisabledCallback(state) {
@@ -59,15 +53,11 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
     renderButton() {
         return html `
       <button
-        part=${partNameMap({
-            base: true,
-            focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
-        @click=${this.handleClick}
-        @blur=${this.handleBlur}
+        @click=${this._handleClick}
       >
         ${this.renderContent()}
       </button>
@@ -76,18 +66,14 @@ let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMi
     renderLinkButton() {
         return html `
       <a
-        part=${partNameMap({
-            base: true,
-            focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-disabled=${this.disabled}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.rel)}
-        @blur=${this.disabled ? nothing : this.handleBlur}
       >
         ${this.renderContent()}
       </a>

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 { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { partNameMap } 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@blazorDeepImport\nexport abstract class IgcButtonBaseComponent extends EventEmitterMixin<\n  IgcButtonEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly formAssociated = true;\n\n  protected static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  private _kbFocus = addKeyboardFocusRing(this);\n\n  protected __internals: ElementInternals;\n  protected _disabled = false;\n\n  @query('[part=\"base\"]', true)\n  private _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 get disabled(): boolean {\n    return this._disabled;\n  }\n\n  public set disabled(value: boolean) {\n    this._disabled = value;\n    this.toggleAttribute('disabled', Boolean(this._disabled));\n  }\n\n  /* blazorCSSuppress */\n  /* alternateType: object */\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form() {\n    return this.__internals.form;\n  }\n\n  constructor() {\n    super();\n    this.__internals = this.attachInternals();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus in the button. */\n  public override focus(options?: FocusOptions) {\n    this._nativeButton.focus(options);\n  }\n\n  /** Simulates a mouse click on the element */\n  public override click() {\n    this._nativeButton.click();\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur() {\n    this._nativeButton.blur();\n  }\n\n  protected handleBlur() {\n    this._kbFocus.reset();\n  }\n\n  protected handleClick() {\n    this._kbFocus.reset();\n    switch (this.type) {\n      case 'submit':\n        return this.form?.requestSubmit();\n      case 'reset':\n        return this.form?.reset();\n      default:\n        return;\n    }\n  }\n\n  protected formDisabledCallback(state: boolean) {\n    this._disabled = state;\n    this.requestUpdate();\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        part=${partNameMap({\n          base: true,\n          focused: this._kbFocus.focused,\n        })}\n        aria-label=${ifDefined(this.ariaLabel ?? nothing)}\n        ?disabled=${this.disabled}\n        type=${ifDefined(this.type)}\n        @click=${this.handleClick}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  private renderLinkButton() {\n    return html`\n      <a\n        part=${partNameMap({\n          base: true,\n          focused: this._kbFocus.focused,\n        })}\n        role=\"button\"\n        aria-label=${ifDefined(this.ariaLabel ?? nothing)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n        @blur=${this.disabled ? nothing : this.handleBlur}\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 { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.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\nexport abstract class IgcButtonBaseComponent extends EventEmitterMixin<\n  IgcButtonEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly formAssociated = true;\n\n  protected static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  protected readonly __internals: ElementInternals;\n\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  constructor() {\n    super();\n    this.__internals = this.attachInternals();\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"]}

package/components/button/themes/button/light/button.shared.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host([variant=flat]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=outlined]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=contained]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-8));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=fab]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}`;
+export const styles = css `:host([variant=flat]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=outlined]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=contained]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-4));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=fab]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}`;
 //# sourceMappingURL=button.shared.css.js.map

package/components/button/themes/button/light/button.shared.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.shared.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8kMAA8kM,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([variant=flat]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=outlined]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=contained]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-8));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=fab]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}`;\n"]}
+{"version":3,"file":"button.shared.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8kMAA8kM,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([variant=flat]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=outlined]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-button-background, transparent);--focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-500));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=contained]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-4));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}:host([variant=fab]){--shadow-color: var(--ig-button-shadow-color, transparent);--border-color: var(--ig-button-border-color, transparent);--hover-border-color: var(--ig-button-hover-border-color, transparent);--focus-border-color: var(--ig-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-button-active-border-color, transparent);--disabled-border-color: var(--ig-button-disabled-border-color, transparent);--disabled-background: var(--ig-button-disabled-background, var(--ig-gray-300));--disabled-foreground: var(--ig-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-button-default-size, 3);--resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-button-background, var(--ig-secondary-500));--active-background: var(--ig-button-active-background, var(--ig-secondary-300));--border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem))}`;\n"]}

package/components/button-group/toggle-button.d.ts

@@ -19,8 +19,8 @@ export default class IgcToggleButtonComponent extends LitElement {
         slotAssignment?: SlotAssignmentMode;
     };
     static register(): void;
-    private _kbFocus;
-    private _nativeButton;
+    private readonly _focusRingManager;
+    private readonly _nativeButton;
     /**
      * The value attribute of the control.
      * @attr

package/components/button-group/toggle-button.js

@@ -10,14 +10,14 @@ import { property, query } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
 let IgcToggleButtonComponent = IgcToggleButtonComponent_1 = class IgcToggleButtonComponent extends LitElement {
     constructor() {
         super(...arguments);
-        this._kbFocus = addKeyboardFocusRing(this);
+        this._focusRingManager = addKeyboardFocusRing(this);
         this.selected = false;
         this.disabled = false;
     }
@@ -36,17 +36,15 @@ let IgcToggleButtonComponent = IgcToggleButtonComponent_1 = class IgcToggleButto
     render() {
         return html `
       <button
-        part=${partNameMap({
+        part=${partMap({
             toggle: true,
-            focused: this._kbFocus.focused,
+            focused: this._focusRingManager.focused,
         })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}
         aria-pressed=${this.selected}
         aria-disabled=${this.disabled}
-        @click=${this._kbFocus.reset}
-        @blur=${this._kbFocus.reset}
       >
         <slot></slot>
       </button>

package/components/button-group/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/button-group/toggle-button.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAahE,IAAM,wBAAwB,gCAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAcL,aAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAiBvC,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;IAsC1B,CAAC;IAlEQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAAwB,CAAC,CAAC;IAC9C,CAAC;IA8Be,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIe,IAAI;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAGe,KAAK;QACnB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,WAAW,CAAC;YACjB,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO;SAC/B,CAAC;;oBAEU,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;uBACZ,IAAI,CAAC,QAAQ;wBACZ,IAAI,CAAC,QAAQ;iBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK;gBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK;;;;KAI9B,CAAC;IACJ,CAAC;;AA1EsB,+BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAC1B,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAE9B,0CAAiB,GAAG;IACzC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuC,CAGtC;AAUM;IADP,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC;+DACW;AAOnC;IADN,QAAQ,EAAE;uDACW;AAOf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAtCL,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CA4E5C;eA5EoB,wBAAwB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.js';\nimport { styles } from './themes/button.base.css.js';\nimport { all } from './themes/button.js';\nimport { styles as shared } from './themes/shared/button/button.common.css.js';\n\n/**\n * The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.\n * It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.\n *\n * @element igc-toggle-button\n *\n * @slot Renders the label/content of the button.\n *\n * @csspart toggle - The native button element.\n */\n@themes(all)\nexport default class IgcToggleButtonComponent extends LitElement {\n  public static override styles = [styles, shared];\n  public static readonly tagName = 'igc-toggle-button';\n\n  public static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcToggleButtonComponent);\n  }\n\n  private _kbFocus = addKeyboardFocusRing(this);\n\n  @query('[part=\"toggle\"]', true)\n  private _nativeButton!: HTMLButtonElement;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Determines whether the button is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the button is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the button. */\n  public override focus(options?: FocusOptions) {\n    this._nativeButton.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur() {\n    this._nativeButton.blur();\n  }\n\n  /** Simulates a mouse click on the element. */\n  public override click() {\n    this._nativeButton.click();\n  }\n\n  protected override render() {\n    return html`\n      <button\n        part=${partNameMap({\n          toggle: true,\n          focused: this._kbFocus.focused,\n        })}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        .ariaLabel=${this.ariaLabel}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n        @click=${this._kbFocus.reset}\n        @blur=${this._kbFocus.reset}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toggle-button': IgcToggleButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/button-group/toggle-button.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAahE,IAAM,wBAAwB,gCAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAcI,sBAAiB,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAiBzD,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;IAoC1B,CAAC;IAhEQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAAwB,CAAC,CAAC;IAC9C,CAAC;IA8Be,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIe,IAAI;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAGe,KAAK;QACnB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACb,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;SACxC,CAAC;;oBAEU,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;uBACZ,IAAI,CAAC,QAAQ;wBACZ,IAAI,CAAC,QAAQ;;;;KAIhC,CAAC;IACJ,CAAC;;AAxEsB,+BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAC1B,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAE9B,0CAAiB,GAAG;IACzC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuC,CAGtC;AAUe;IADhB,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC;+DACoB;AAO5C;IADN,QAAQ,EAAE;uDACW;AAOf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAtCL,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CA0E5C;eA1EoB,wBAAwB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { styles } from './themes/button.base.css.js';\nimport { all } from './themes/button.js';\nimport { styles as shared } from './themes/shared/button/button.common.css.js';\n\n/**\n * The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.\n * It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.\n *\n * @element igc-toggle-button\n *\n * @slot Renders the label/content of the button.\n *\n * @csspart toggle - The native button element.\n */\n@themes(all)\nexport default class IgcToggleButtonComponent extends LitElement {\n  public static override styles = [styles, shared];\n  public static readonly tagName = 'igc-toggle-button';\n\n  public static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcToggleButtonComponent);\n  }\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n\n  @query('[part=\"toggle\"]', true)\n  private readonly _nativeButton!: HTMLButtonElement;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Determines whether the button is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the button is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the button. */\n  public override focus(options?: FocusOptions): void {\n    this._nativeButton.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur(): void {\n    this._nativeButton.blur();\n  }\n\n  /** Simulates a mouse click on the element. */\n  public override click(): void {\n    this._nativeButton.click();\n  }\n\n  protected override render() {\n    return html`\n      <button\n        part=${partMap({\n          toggle: true,\n          focused: this._focusRingManager.focused,\n        })}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        .ariaLabel=${this.ariaLabel}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toggle-button': IgcToggleButtonComponent;\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -112,7 +112,7 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     protected localeChange(): void;
     protected formatOptionsChange(): void;
     /** @private @hidden @internal */
-    [focusActiveDate](): Promise<void>;
+    [focusActiveDate](options?: FocusOptions): Promise<void>;
     private updateViewIndex;
     private getSubsequentActiveDate;
     private handleArrowKey;

package/components/calendar/calendar.js

@@ -17,7 +17,8 @@ import { registerComponent } from '../common/definitions/register.js';
 import { IgcCalendarResourceStringEN } from '../common/i18n/calendar.resources.js';
 import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { clamp, findElementFromEventPath, first, formatString, last, partNameMap, } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { clamp, findElementFromEventPath, first, formatString, last, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
@@ -69,16 +70,18 @@ let IgcCalendarComponent = IgcCalendarComponent_1 = class IgcCalendarComponent e
             },
         });
     }
-    async [focusActiveDate]() {
+    async [focusActiveDate](options) {
         await this.updateComplete;
         if (this._isDayView) {
-            return this.daysViews.item(this.activeDaysViewIndex).focusActiveDate();
+            return this.daysViews
+                .item(this.activeDaysViewIndex)
+                .focusActiveDate(options);
         }
         if (this._isMonthView) {
-            return this.monthsView.focusActiveDate();
+            return this.monthsView.focusActiveDate(options);
         }
         if (this._isYearView) {
-            return this.yearsView.focusActiveDate();
+            return this.yearsView.focusActiveDate(options);
         }
     }
     updateViewIndex(date, delta) {
@@ -197,14 +200,14 @@ let IgcCalendarComponent = IgcCalendarComponent_1 = class IgcCalendarComponent e
             .set(endKey, this.onEndKey);
     }
     renderNavigationButtons() {
-        const parts = partNameMap({
+        const parts = {
             'navigation-button': true,
             vertical: this.orientation === 'vertical',
-        });
+        };
         return html `
       <div part="navigation-buttons">
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.previousButtonLabel}
           @click=${this.navigatePrevious}
         >
@@ -216,7 +219,7 @@ let IgcCalendarComponent = IgcCalendarComponent_1 = class IgcCalendarComponent e
         </button>
 
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.nextButtonLabel}
           @click=${this.navigateNext}
         >