igniteui-webcomponents 7.3.0 → 7.3.1

package/CHANGELOG.md

@@ -6,6 +6,46 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [7.3.1] - 2026-09-01
+### Added
+- #### Color picker
+  - `IgcColorPickerComponentEventMap` is now exported from the package entry point. [#2360](https://github.com/IgniteUI/igniteui-webcomponents/pull/2360)
+
+### Changed
+- #### Avatar
+  - The component now exposes `role="img"`. Before, it declared `image`, which is an ARIA 1.3 token that current tools do not know. [#2363](https://github.com/IgniteUI/igniteui-webcomponents/pull/2363)
+  - The accessible name now comes from `alt`, and then from `initials`. The role description is the static string `avatar`. Before, the two were inverted: the name was always the literal "avatar", and `alt` or `initials` became the role description.
+- #### Badge
+  - The role description is the static string `badge`. The visual `variant` no longer reaches assistive technology. `role="status"` is unchanged. [#2363](https://github.com/IgniteUI/igniteui-webcomponents/pull/2363)
+  - The `icon` CSS part now applies only when an `igc-icon` is the only content of the badge, as the documentation already stated.
+- #### Chip
+  - **Breaking for custom styles:** `part="base"` is now a plain wrapper. The selection control moved to the new `action` part, and the remove control to the new `remove` part. Move rules that target `::part(base)` for the interactive surface to `::part(action)`. [#2362](https://github.com/IgniteUI/igniteui-webcomponents/pull/2362)
+  - `igcRemove` is typed `CustomEvent<void>`. The type declared a boolean detail that the event never carried.
+  - The `start` and `end` slots, and the `action` and `remove` parts, are documented. Thus they reach the custom elements manifest.
+- #### Tile manager
+  - `igc-tile` renders its resize handles directly. Before, an internal element rendered them and exported the parts. The `trigger-side`, `trigger` and `trigger-bottom` parts keep their names, and the new `tile-container` part wraps the tile content together with the handles. [#2359](https://github.com/IgniteUI/igniteui-webcomponents/pull/2359)
+
+### Fixed
+- #### Avatar
+  - The `<img>` element carried no `alt` attribute when you set no alt text. This is an `image-alt` violation in the page of the consumer. The component now renders `alt=""`, thus the image counts as decorative. [#2363](https://github.com/IgniteUI/igniteui-webcomponents/pull/2363)
+  - Removed the documented `icon` CSS part. The component never rendered it.
+- #### Badge
+  - A badge that holds an `igc-icon` together with text lost its inline padding and clipped the text under `overflow: hidden`. The `icon` part became active for any slotted icon, but the padding rule matched `[part='base']` exactly and thus did not apply. [#2363](https://github.com/IgniteUI/igniteui-webcomponents/pull/2363)
+- #### Chip
+  - A removable chip failed the `nested-interactive` accessibility audit. The chip rendered its full surface as a button, and the remove icon inside it declared `role="button"` and `tabindex="0"`. The two controls are now siblings. [#2362](https://github.com/IgniteUI/igniteui-webcomponents/pull/2362)
+  - The accessible name of the chip read "Chip remove chip" or "select chip Chip", because the labels of the remove icon and of the selection icon became part of it. The name is now the content of the chip.
+  - `Space` did not toggle the selection, and `igcRemove` fired on chips that are not removable. The remove keybindings applied to the host and cancelled the activation keys of the chip. They now apply to the remove control only.
+  - Focus on the remove control now also shows the focus state of the chip.
+  - The prefix wrapper hides only when the chip is selectable and selected, and the suffix wrapper no longer hides because of `removable`.
+- #### Color picker
+  - The picker canvas did not respond to touch input. [#2357](https://github.com/IgniteUI/igniteui-webcomponents/pull/2357)
+- #### Textarea
+  - A change of `resize` away from `auto` did not release the inline height. Thus the control stayed at its last automatic height. [#2361](https://github.com/IgniteUI/igniteui-webcomponents/pull/2361)
+  - Text that you project into the default slot now becomes the default value, as with a native `<textarea>`. Before, it became the value. Thus the control was not pristine, and a form reset cleared the visible text while the light DOM still held it.
+- #### Tile manager
+  - A swap of two positioned tiles wrote a column value into `rowStart`. Thus the tiles moved to the wrong row. [#2359](https://github.com/IgniteUI/igniteui-webcomponents/pull/2359)
+  - A tile that you add next to a single positioned tile collided with it at position 0.
+
 ## [7.3.0] - 2026-08-26
 ### Added
 - #### Calendar
@@ -1555,6 +1595,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.0...7.3.1
 [7.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.4...7.3.0
 [7.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.3...7.2.4
 [7.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.2...7.2.3

package/README.md

@@ -26,6 +26,9 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 | Components              | Status |         Documentation          | Released Version |    License     |
 | :---------------------- | :----: | :----------------------------: | :--------------: | :------------: |
+| Virtual Scroll          |   ✅   |       [Storybook][Storybook]   |     [7.3.0]      | [MIT](LICENSE) |
+| QR Code                 |   ✅   |       [Storybook][Storybook]   |     [7.3.0]      | [MIT](LICENSE) |
+| Color Picker            |   ✅   |       [Storybook][Storybook]   |     [7.3.0]      | [MIT](LICENSE) |
 | Splitter                |   ✅   |     [Docs][Splitter Docs]      |     [7.1.0]      | [MIT](LICENSE) |
 | Chat                    |   ✅   |       [Docs][Chat Docs]        |     [6.3.0]      | [MIT](LICENSE) |
 | Date Range Picker       |   ✅   | [Docs][Date Range Picker Docs] |     [6.1.0]      | [MIT](LICENSE) |
@@ -148,6 +151,31 @@ Refer to the documentation of your editor of choice to see if you can take advan
 | igniteui-webcomponents/igniteui-webcomponents.css-data.json  | VSCode CSS custom data             |
 | igniteui-webcomponents/igniteui-webcomponents.html-data.json | VSCode HTML custom data            |
 
+### AI agent skills
+
+The package also includes reusable skills for GitHub Copilot and other compatible AI agents. They provide task-specific guidance and current best practices for:
+
+- [Choosing the right components](skills/igniteui-wc-choose-components/SKILL.md)
+- [Integrating with React, Angular, Vue, or vanilla JavaScript](skills/igniteui-wc-integrate-with-framework/SKILL.md)
+- [Customizing component themes](skills/igniteui-wc-customize-component-theme/SKILL.md)
+- [Generating a view from an image or design](skills/igniteui-wc-generate-from-image-design/SKILL.md)
+- [Optimizing bundle size](skills/igniteui-wc-optimize-bundle-size/SKILL.md)
+- [Migrating from Grid Lite to the premium Data Grid](skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md)
+
+After installing the package, copy the skills into your repository so your agent can discover them automatically:
+
+```sh
+# Unix/macOS
+cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/
+```
+
+```powershell
+# Windows PowerShell
+Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\
+```
+
+See the [AI agent skills guide](skills/README.md) for example prompts, supported workflows, and additional installation locations.
+
 ## Contributing
 
 Follow the [Contribution Guidelines] to setup a development
@@ -199,6 +227,7 @@ npm run storybook:build
 
 [Ignite UI for Web Components]: https://www.infragistics.com/products/ignite-ui-web-components
 [Indigo.Design Design System]: https://www.infragistics.com/products/appbuilder/ui-toolkit
+[Storybook]: https://igniteui.github.io/igniteui-webcomponents
 [Ignite UI for WebComponents Grids]: https://www.npmjs.com/package/igniteui-webcomponents-grids
 [Dock Manager Picture]: https://github.com/IgniteUI/igniteui-webcomponents/assets/52001020/a9643f17-f1c2-4554-87aa-96c9daea13b0
 [Custom Elements Manifest]: https://github.com/webcomponents/custom-elements-manifest
@@ -282,3 +311,4 @@ npm run storybook:build
 [6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.1.0
 [6.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.3.0
 [7.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/7.1.0
+[7.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/7.3.0

package/components/avatar/avatar.d.ts

@@ -6,12 +6,11 @@ import type { AvatarShape } from '../types.js';
  *
  * @element igc-avatar
  *
- * @slot - Renders an icon inside the default slot.
+ * @slot - Renders an icon inside the default slot. Ignored when `initials` is set.
  *
  * @csspart base - The base wrapper of the avatar.
  * @csspart initials - The initials wrapper of the avatar.
  * @csspart image - The image wrapper of the avatar.
- * @csspart icon - The icon wrapper of the avatar.
  */
 export default class IgcAvatarComponent extends LitElement {
     static readonly tagName = "igc-avatar";

package/components/avatar/avatar.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { addInternalsController } from '#internals/controllers/internals.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { addThemingController } from '#theming/theming-controller.js';
@@ -25,11 +24,8 @@ export default class IgcAvatarComponent extends LitElement {
         this.shape = 'square';
         addThemingController(this, all);
         addInternalsController(this, {
-            initialARIA: {
-                role: 'image',
-                ariaLabel: 'avatar',
-            },
-            aria: () => ({ ariaRoleDescription: this.alt ?? this.initials ?? null }),
+            initialARIA: { role: 'img', ariaRoleDescription: 'avatar' },
+            aria: () => ({ ariaLabel: this.alt ?? this.initials ?? null }),
         });
     }
     willUpdate(changedProperties) {
@@ -50,8 +46,8 @@ export default class IgcAvatarComponent extends LitElement {
             ? html `
                 <img
                   part="image"
-                  alt=${ifDefined(this.alt)}
-                  src=${ifDefined(this.src)}
+                  alt=${this.alt ?? ''}
+                  src=${this.src}
                   @error=${this._handleError}
                 />
               `

package/components/avatar/avatar.js.map

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

package/components/badge/badge.d.ts

@@ -9,7 +9,7 @@ import type { BadgeShape, StyleVariant } from '../types.js';
  * @slot - Default slot for the badge content.
  *
  * @csspart base - The base wrapper of the badge.
- * @csspart icon - The icon container, present when an icon element is slotted.
+ * @csspart icon - The icon container, present when an `igc-icon` is the only slotted element.
  *
  * @example
  * ```html
@@ -54,6 +54,11 @@ export default class IgcBadgeComponent extends LitElement {
      */
     dot: boolean;
     constructor();
+    /**
+     * The `icon` part is reserved for a badge whose only content is a single
+     * `igc-icon`, which renders as a circle rather than a padded pill. The filter
+     * discards the whitespace text nodes that formatted markup leaves around it.
+     */
     protected _handleSlotChange(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/badge/badge.js

@@ -10,6 +10,8 @@ import { addInternalsController } from '#internals/controllers/internals.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { partMap } from '#internals/part-map.js';
+import { isEmpty } from '#internals/utils/arrays.js';
+import { isElement } from '#internals/utils/dom.js';
 import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
@@ -33,14 +35,15 @@ export default class IgcBadgeComponent extends LitElement {
         this.dot = false;
         addThemingController(this, all);
         addInternalsController(this, {
-            initialARIA: { role: 'status' },
-            aria: () => ({ ariaRoleDescription: `badge ${this.variant}` }),
+            initialARIA: { role: 'status', ariaRoleDescription: 'badge' },
         });
     }
     _handleSlotChange() {
-        this._hasIcon = this._slots.hasAssignedElements('[default]', {
-            selector: 'igc-icon',
-        });
+        const [content, ...rest] = this._slots
+            .getAssignedNodes('[default]')
+            .filter((node) => isElement(node) || node.textContent?.trim());
+        this._hasIcon =
+            isEmpty(rest) && isElement(content) && content.matches('igc-icon');
     }
     render() {
         return html `

package/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAoBzC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;aAChC,YAAO,GAAG,WAAW,AAAd,CAAe;aACtB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IA8CD;QACE,KAAK,EAAE,CAAC;QA7CO,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,EAAE;YACjB,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC,CAAC;QAEK,aAAQ,GAAG,KAAK,CAAC;QASlB,YAAO,GAAiB,SAAS,CAAC;QASlC,aAAQ,GAAG,KAAK,CAAC;QASjB,UAAK,GAAe,SAAS,CAAC;QAU9B,QAAG,GAAG,KAAK,CAAC;QAKjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC/B,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;SAC/D,CAAC,CAAC;IACL,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE;YAC3D,QAAQ,EAAE,UAAU;SACrB,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mBACI,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;;KAG1D,CAAC;IACJ,CAAC;;AArDM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AASlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AASjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS;AAU9B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACxB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge content.\n *\n * @csspart base - The base wrapper of the badge.\n * @csspart icon - The icon container, present when an icon element is slotted.\n *\n * @example\n * ```html\n * <igc-badge variant=\"success\">New</igc-badge>\n * <igc-badge variant=\"danger\" shape=\"square\">5</igc-badge>\n * <igc-badge dot></igc-badge>\n * ```\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n  });\n\n  private _hasIcon = false;\n\n  /**\n   * The type (style variant) of the badge.\n   *\n   * @attr variant\n   * @default 'primary'\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   *\n   * @attr outlined\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   *\n   * @attr shape\n   * @default 'rounded'\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  /**\n   * Sets whether to render a dot type badge.\n   * When enabled, the badge appears as a small dot without any content.\n   *\n   * @attr dot\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public dot = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'status' },\n      aria: () => ({ ariaRoleDescription: `badge ${this.variant}` }),\n    });\n  }\n\n  protected _handleSlotChange(): void {\n    this._hasIcon = this._slots.hasAssignedElements('[default]', {\n      selector: 'igc-icon',\n    });\n  }\n\n  protected override render() {\n    return html`\n      <span part=${partMap({ base: true, icon: this._hasIcon })}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAoBzC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;aAChC,YAAO,GAAG,WAAW,AAAd,CAAe;aACtB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IA8CD;QACE,KAAK,EAAE,CAAC;QA7CO,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,EAAE;YACjB,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC,CAAC;QAEK,aAAQ,GAAG,KAAK,CAAC;QASlB,YAAO,GAAiB,SAAS,CAAC;QASlC,aAAQ,GAAG,KAAK,CAAC;QASjB,UAAK,GAAe,SAAS,CAAC;QAU9B,QAAG,GAAG,KAAK,CAAC;QAKjB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,OAAO,EAAE;SAC9D,CAAC,CAAC;IACL,CAAC;IAOS,iBAAiB;QACzB,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;aACnC,gBAAgB,CAAC,WAAW,CAAC;aAC7B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;QAEjE,IAAI,CAAC,QAAQ;YACX,OAAO,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvE,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mBACI,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;;KAG1D,CAAC;IACJ,CAAC;;AA5DM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACa;AASlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AASjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACS;AAU9B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACxB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport { isElement } from '#internals/utils/dom.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { BadgeShape, StyleVariant } from '../types.js';\nimport { styles } from './themes/badge.base.css.js';\nimport { styles as shared } from './themes/shared/badge.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge content.\n *\n * @csspart base - The base wrapper of the badge.\n * @csspart icon - The icon container, present when an `igc-icon` is the only slotted element.\n *\n * @example\n * ```html\n * <igc-badge variant=\"success\">New</igc-badge>\n * <igc-badge variant=\"danger\" shape=\"square\">5</igc-badge>\n * <igc-badge dot></igc-badge>\n * ```\n */\nexport default class IgcBadgeComponent extends LitElement {\n  public static readonly tagName = 'igc-badge';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcBadgeComponent);\n  }\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n  });\n\n  private _hasIcon = false;\n\n  /**\n   * The type (style variant) of the badge.\n   *\n   * @attr variant\n   * @default 'primary'\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Sets whether to draw an outlined version of the badge.\n   *\n   * @attr outlined\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The shape of the badge.\n   *\n   * @attr shape\n   * @default 'rounded'\n   */\n  @property({ reflect: true })\n  public shape: BadgeShape = 'rounded';\n\n  /**\n   * Sets whether to render a dot type badge.\n   * When enabled, the badge appears as a small dot without any content.\n   *\n   * @attr dot\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public dot = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'status', ariaRoleDescription: 'badge' },\n    });\n  }\n\n  /**\n   * The `icon` part is reserved for a badge whose only content is a single\n   * `igc-icon`, which renders as a circle rather than a padded pill. The filter\n   * discards the whitespace text nodes that formatted markup leaves around it.\n   */\n  protected _handleSlotChange(): void {\n    const [content, ...rest] = this._slots\n      .getAssignedNodes('[default]')\n      .filter((node) => isElement(node) || node.textContent?.trim());\n\n    this._hasIcon =\n      isEmpty(rest) && isElement(content) && content.matches('igc-icon');\n  }\n\n  protected override render() {\n    return html`\n      <span part=${partMap({ base: true, icon: this._hasIcon })}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part=base]{padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;
 //# sourceMappingURL=badge.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,oqHAAoqH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part=base]{padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;\n  "]}
+{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,urHAAurH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;\n  "]}

package/components/chip/chip.d.ts

@@ -1,9 +1,9 @@
 import { type IChipResourceStrings } from 'igniteui-i18n-core';
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import type { Constructor } from '#internals/mixins/constructor.js';
 import type { StyleVariant } from '../types.js';
 export interface IgcChipComponentEventMap {
-    igcRemove: CustomEvent<boolean>;
+    igcRemove: CustomEvent<void>;
     igcSelect: CustomEvent<boolean>;
 }
 declare const IgcChipComponent_base: import("#internals/mixins/constructor.js").AbstractConstructor<import("#internals/mixins/i18n.js").I18nInterface<IChipResourceStrings, Required<IChipResourceStrings>>> & Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcChipComponentEventMap>> & Constructor<LitElement>;
@@ -14,7 +14,9 @@ declare const IgcChipComponent_base: import("#internals/mixins/constructor.js").
  *
  * @slot - Renders content in the default slot of the chip.
  * @slot prefix - Renders content at the start of the chip, before the default content.
+ * @slot start - Renders content at the start of the chip, before the prefix content.
  * @slot suffix - Renders content at the end of the chip after the default content.
+ * @slot end - Renders content at the end of the chip, before the suffix content.
  * @slot select - Content to render when the chip in selected state.
  * @slot remove - Content to override the default remove chip icon.
  *
@@ -22,9 +24,11 @@ declare const IgcChipComponent_base: import("#internals/mixins/constructor.js").
  * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.
  *
  * @csspart base - The base wrapper of the chip.
+ * @csspart action - The selection control of the chip, wrapping the chip content.
  * @csspart content - The wrapper element around the default slot of the chip.
  * @csspart prefix - The prefix container of the chip.
  * @csspart suffix - The suffix container of the chip.
+ * @csspart remove - The container of the remove control of the chip.
  */
 export default class IgcChipComponent extends IgcChipComponent_base {
     static readonly tagName = "igc-chip";
@@ -33,41 +37,53 @@ export default class IgcChipComponent extends IgcChipComponent_base {
     private readonly _removePartRef;
     private readonly _slots;
     /**
-     * Sets the disabled state for the chip.
-     * @attr
+     * Whether the chip is disabled or not.
+     *
+     * @attr disabled
+     * @default false
      */
     disabled: boolean;
     /**
-     * Defines if the chip is removable or not.
-     * @attr
+     * Whether the chip is removable or not.
+     *
+     * @attr removable
+     * @default false
      */
     removable: boolean;
     /**
-     * Defines if the chip is outlined or not.
+     * Whether the chip is outlined or not.
      *
-     * @attr
+     * @attr outlined
+     * @default false
      */
     outlined: boolean;
     /**
-     * Defines if the chip is selectable or not.
-     * @attr
+     * Whether the chip is selectable or not.
+     *
+     * @attr selectable
+     * @default false
      */
     selectable: boolean;
     /**
-     * Defines if the chip is selected or not.
-     * @attr
+     * Whether the chip is selected or not.
+     *
+     * @attr selected
+     * @default false
      */
     selected: boolean;
     /**
      * A property that sets the color variant of the chip component.
-     * @attr
+     *
+     * @attr variant
      */
-    variant: StyleVariant;
+    variant?: StyleVariant;
     constructor();
+    private _hasSlotted;
     protected _handleSelect(): void;
     protected _handleRemove(event: Event): void;
     protected _renderPrefix(): import("lit-html").TemplateResult<1>;
     protected _renderSuffix(): import("lit-html").TemplateResult<1>;
+    protected _renderRemove(): typeof nothing | import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/chip/chip.js

@@ -9,7 +9,7 @@ import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { addKeybindings } from '#internals/controllers/key-bindings.js';
-import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { addSlotController, setSlots, } from '#internals/controllers/slot.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { I18nMixin } from '#internals/mixins/i18n.js';
@@ -19,6 +19,7 @@ import IgcIconComponent from '../icon/icon.js';
 import { styles } from './themes/chip.base.css.js';
 import { styles as shared } from './themes/shared/chip.common.css.js';
 import { all } from './themes/themes.js';
+const Slots = setSlots('start', 'prefix', 'suffix', 'end');
 const i18n = {
     defaultEN: ChipResourceStringsEN,
 };
@@ -31,9 +32,7 @@ export default class IgcChipComponent extends I18nMixin(EventEmitterMixin(LitEle
     constructor() {
         super();
         this._removePartRef = createRef();
-        this._slots = addSlotController(this, {
-            slots: setSlots('prefix', 'suffix', 'start', 'end', 'select', 'remove'),
-        });
+        this._slots = addSlotController(this, { slots: Slots });
         this.disabled = false;
         this.removable = false;
         this.outlined = false;
@@ -42,9 +41,13 @@ export default class IgcChipComponent extends I18nMixin(EventEmitterMixin(LitEle
         addThemingController(this, all);
         addKeybindings(this, {
             ref: this._removePartRef,
+            skip: () => !this._removePartRef.value,
             bindingDefaults: { triggers: ['keyup'] },
         }).setActivateHandler(this._handleRemove);
     }
+    _hasSlotted(...slots) {
+        return slots.some((slot) => this._slots.hasAssignedElements(slot));
+    }
     _handleSelect() {
         if (this.selectable) {
             this.selected = !this.selected;
@@ -56,66 +59,69 @@ export default class IgcChipComponent extends I18nMixin(EventEmitterMixin(LitEle
         this.emitEvent('igcRemove');
     }
     _renderPrefix() {
-        const isVisible = this._slots.hasAssignedElements('prefix') ||
-            this._slots.hasAssignedElements('start');
-        const selectSlot = this.selectable && this.selected
-            ? renderSlottedIcon({
-                slot: 'select',
-                icon: 'selected',
-                label: this.resourceStrings.chip_select,
-            })
-            : nothing;
+        const showSelected = this.selectable && this.selected;
         return html `
-      <span part="prefix" ?hidden=${!isVisible && !this.selected}>
-        ${selectSlot}
+      <span
+        part="prefix"
+        ?hidden=${!showSelected && !this._hasSlotted('start', 'prefix')}
+      >
+        ${showSelected
+            ? renderSlottedIcon({ slot: 'select', icon: 'selected' })
+            : nothing}
         <slot name="start"></slot>
         <slot name="prefix"></slot>
       </span>
     `;
     }
     _renderSuffix() {
-        const isVisible = this._slots.hasAssignedElements('suffix') ||
-            this._slots.hasAssignedElements('end');
-        const removeSlot = this.removable && !this.disabled
-            ? html `
-            <slot
-              ${ref(this._removePartRef)}
-              name="remove"
-              @click=${this._handleRemove}
-            >
-              <igc-icon
-                name="remove"
-                collection="default"
-                tabindex="0"
-                role="button"
-                aria-label=${this.resourceStrings.chip_remove}
-              ></igc-icon>
-            </slot>
-          `
-            : nothing;
         return html `
-      <span part="suffix" ?hidden=${!isVisible && !this.removable}>
+      <span part="suffix" ?hidden=${!this._hasSlotted('end', 'suffix')}>
         <slot name="end"></slot>
         <slot name="suffix"></slot>
-        ${removeSlot}
+      </span>
+    `;
+    }
+    _renderRemove() {
+        if (!this.removable || this.disabled) {
+            return nothing;
+        }
+        return html `
+      <span part="remove">
+        <slot
+          ${ref(this._removePartRef)}
+          name="remove"
+          @click=${this._handleRemove}
+        >
+          <igc-icon
+            name="remove"
+            collection="default"
+            tabindex="0"
+            role="button"
+            aria-label=${this.resourceStrings.chip_remove}
+          ></igc-icon>
+        </slot>
       </span>
     `;
     }
     render() {
         const ariaPressed = this.selectable ? this.selected.toString() : null;
         return html `
-      <button
-        part="base"
-        .ariaPressed=${ariaPressed}
-        ?disabled=${this.disabled}
-        @click=${this._handleSelect}
-      >
-        ${this._renderPrefix()}
-        <span part="content">
-          <slot></slot>
-        </span>
-        ${this._renderSuffix()}
-      </button>
+      <div part="base">
+        <button
+          part="action"
+          type="button"
+          .ariaPressed=${ariaPressed}
+          ?disabled=${this.disabled}
+          @click=${this._handleSelect}
+        >
+          ${this._renderPrefix()}
+          <span part="content">
+            <slot></slot>
+          </span>
+          ${this._renderSuffix()}
+        </button>
+        ${this._renderRemove()}
+      </div>
     `;
     }
 }

package/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChipResourceStringsEN,\n  type IChipResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addKeybindings } from '#internals/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { renderSlottedIcon } from '#internals/templates/slotted-icon.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { StyleVariant } from '../types.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as shared } from './themes/shared/chip.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcChipComponentEventMap {\n  igcRemove: CustomEvent<boolean>;\n  igcSelect: CustomEvent<boolean>;\n}\n\nconst i18n: I18nControllerConfig<IChipResourceStrings> = {\n  defaultEN: ChipResourceStringsEN,\n};\n\n/**\n * Chips help people enter information, make selections, filter content, or trigger actions.\n *\n * @element igc-chip\n *\n * @slot - Renders content in the default slot of the chip.\n * @slot prefix - Renders content at the start of the chip, before the default content.\n * @slot suffix - Renders content at the end of the chip after the default content.\n * @slot select - Content to render when the chip in selected state.\n * @slot remove - Content to override the default remove chip icon.\n *\n * @fires igcRemove - Emits an event when the chip component is removed.\n * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.\n *\n * @csspart base - The base wrapper of the chip.\n * @csspart content - The wrapper element around the default slot of the chip.\n * @csspart prefix - The prefix container of the chip.\n * @csspart suffix - The suffix container of the chip.\n */\nexport default class IgcChipComponent extends I18nMixin(\n  EventEmitterMixin<IgcChipComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  ),\n  i18n\n) {\n  public static readonly tagName = 'igc-chip';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcChipComponent, IgcIconComponent);\n  }\n\n  private readonly _removePartRef = createRef<HTMLSlotElement>();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('prefix', 'suffix', 'start', 'end', 'select', 'remove'),\n  });\n\n  /**\n   * Sets the disabled state for the chip.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Defines if the chip is removable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\n   * Defines if the chip is outlined or not.\n   *\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * Defines if the chip is selectable or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /* @tsTwoWayProperty(true, \"igcSelect\", \"detail\", false) */\n  /**\n   * Defines if the chip is selected or not.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * A property that sets the color variant of the chip component.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant!: StyleVariant;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      ref: this._removePartRef,\n      bindingDefaults: { triggers: ['keyup'] },\n    }).setActivateHandler(this._handleRemove);\n  }\n\n  protected _handleSelect(): void {\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.emitEvent('igcSelect', { detail: this.selected });\n    }\n  }\n\n  protected _handleRemove(event: Event): void {\n    event.stopPropagation();\n    this.emitEvent('igcRemove');\n  }\n\n  protected _renderPrefix() {\n    const isVisible =\n      this._slots.hasAssignedElements('prefix') ||\n      this._slots.hasAssignedElements('start');\n\n    const selectSlot =\n      this.selectable && this.selected\n        ? renderSlottedIcon({\n            slot: 'select',\n            icon: 'selected',\n            label: this.resourceStrings.chip_select,\n          })\n        : nothing;\n\n    return html`\n      <span part=\"prefix\" ?hidden=${!isVisible && !this.selected}>\n        ${selectSlot}\n        <slot name=\"start\"></slot>\n        <slot name=\"prefix\"></slot>\n      </span>\n    `;\n  }\n\n  protected _renderSuffix() {\n    const isVisible =\n      this._slots.hasAssignedElements('suffix') ||\n      this._slots.hasAssignedElements('end');\n\n    const removeSlot =\n      this.removable && !this.disabled\n        ? html`\n            <slot\n              ${ref(this._removePartRef)}\n              name=\"remove\"\n              @click=${this._handleRemove}\n            >\n              <igc-icon\n                name=\"remove\"\n                collection=\"default\"\n                tabindex=\"0\"\n                role=\"button\"\n                aria-label=${this.resourceStrings.chip_remove}\n              ></igc-icon>\n            </slot>\n          `\n        : nothing;\n\n    return html`\n      <span part=\"suffix\" ?hidden=${!isVisible && !this.removable}>\n        <slot name=\"end\"></slot>\n        <slot name=\"suffix\"></slot>\n        ${removeSlot}\n      </span>\n    `;\n  }\n\n  protected override render() {\n    const ariaPressed = this.selectable ? this.selected.toString() : null;\n\n    return html`\n      <button\n        part=\"base\"\n        .ariaPressed=${ariaPressed}\n        ?disabled=${this.disabled}\n        @click=${this._handleSelect}\n      >\n        ${this._renderPrefix()}\n        <span part=\"content\">\n          <slot></slot>\n        </span>\n        ${this._renderSuffix()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chip': IgcChipComponent;\n  }\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChipResourceStringsEN,\n  type IChipResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addKeybindings } from '#internals/controllers/key-bindings.js';\nimport {\n  addSlotController,\n  type InferSlotNames,\n  setSlots,\n} from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { renderSlottedIcon } from '#internals/templates/slotted-icon.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { StyleVariant } from '../types.js';\nimport { styles } from './themes/chip.base.css.js';\nimport { styles as shared } from './themes/shared/chip.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcChipComponentEventMap {\n  igcRemove: CustomEvent<void>;\n  igcSelect: CustomEvent<boolean>;\n}\n\nconst Slots = setSlots('start', 'prefix', 'suffix', 'end');\n\nconst i18n: I18nControllerConfig<IChipResourceStrings> = {\n  defaultEN: ChipResourceStringsEN,\n};\n\n/**\n * Chips help people enter information, make selections, filter content, or trigger actions.\n *\n * @element igc-chip\n *\n * @slot - Renders content in the default slot of the chip.\n * @slot prefix - Renders content at the start of the chip, before the default content.\n * @slot start - Renders content at the start of the chip, before the prefix content.\n * @slot suffix - Renders content at the end of the chip after the default content.\n * @slot end - Renders content at the end of the chip, before the suffix content.\n * @slot select - Content to render when the chip in selected state.\n * @slot remove - Content to override the default remove chip icon.\n *\n * @fires igcRemove - Emits an event when the chip component is removed.\n * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.\n *\n * @csspart base - The base wrapper of the chip.\n * @csspart action - The selection control of the chip, wrapping the chip content.\n * @csspart content - The wrapper element around the default slot of the chip.\n * @csspart prefix - The prefix container of the chip.\n * @csspart suffix - The suffix container of the chip.\n * @csspart remove - The container of the remove control of the chip.\n */\nexport default class IgcChipComponent extends I18nMixin(\n  EventEmitterMixin<IgcChipComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  ),\n  i18n\n) {\n  public static readonly tagName = 'igc-chip';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcChipComponent, IgcIconComponent);\n  }\n\n  private readonly _removePartRef = createRef<HTMLSlotElement>();\n  private readonly _slots = addSlotController(this, { slots: Slots });\n\n  /**\n   * Whether the chip is disabled or not.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Whether the chip is removable or not.\n   *\n   * @attr removable\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public removable = false;\n\n  /**\n   * Whether the chip is outlined or not.\n   *\n   * @attr outlined\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * Whether the chip is selectable or not.\n   *\n   * @attr selectable\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  /* @tsTwoWayProperty(true, \"igcSelect\", \"detail\", false) */\n  /**\n   * Whether the chip is selected or not.\n   *\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * A property that sets the color variant of the chip component.\n   *\n   * @attr variant\n   */\n  @property({ reflect: true })\n  public variant?: StyleVariant;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      ref: this._removePartRef,\n      skip: () => !this._removePartRef.value,\n      bindingDefaults: { triggers: ['keyup'] },\n    }).setActivateHandler(this._handleRemove);\n  }\n\n  private _hasSlotted(...slots: InferSlotNames<typeof Slots>[]): boolean {\n    return slots.some((slot) => this._slots.hasAssignedElements(slot));\n  }\n\n  protected _handleSelect(): void {\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.emitEvent('igcSelect', { detail: this.selected });\n    }\n  }\n\n  protected _handleRemove(event: Event): void {\n    event.stopPropagation();\n    this.emitEvent('igcRemove');\n  }\n\n  protected _renderPrefix() {\n    const showSelected = this.selectable && this.selected;\n\n    return html`\n      <span\n        part=\"prefix\"\n        ?hidden=${!showSelected && !this._hasSlotted('start', 'prefix')}\n      >\n        ${\n          showSelected\n            ? renderSlottedIcon({ slot: 'select', icon: 'selected' })\n            : nothing\n        }\n        <slot name=\"start\"></slot>\n        <slot name=\"prefix\"></slot>\n      </span>\n    `;\n  }\n\n  protected _renderSuffix() {\n    return html`\n      <span part=\"suffix\" ?hidden=${!this._hasSlotted('end', 'suffix')}>\n        <slot name=\"end\"></slot>\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  protected _renderRemove() {\n    if (!this.removable || this.disabled) {\n      return nothing;\n    }\n\n    return html`\n      <span part=\"remove\">\n        <slot\n          ${ref(this._removePartRef)}\n          name=\"remove\"\n          @click=${this._handleRemove}\n        >\n          <igc-icon\n            name=\"remove\"\n            collection=\"default\"\n            tabindex=\"0\"\n            role=\"button\"\n            aria-label=${this.resourceStrings.chip_remove}\n          ></igc-icon>\n        </slot>\n      </span>\n    `;\n  }\n\n  protected override render() {\n    const ariaPressed = this.selectable ? this.selected.toString() : null;\n\n    return html`\n      <div part=\"base\">\n        <button\n          part=\"action\"\n          type=\"button\"\n          .ariaPressed=${ariaPressed}\n          ?disabled=${this.disabled}\n          @click=${this._handleSelect}\n        >\n          ${this._renderPrefix()}\n          <span part=\"content\">\n            <slot></slot>\n          </span>\n          ${this._renderSuffix()}\n        </button>\n        ${this._renderRemove()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chip': IgcChipComponent;\n  }\n}\n"]}