igniteui-webcomponents 6.5.1 → 7.0.0

package/components/card/card.d.ts

@@ -1,16 +1,39 @@
 import { LitElement } from 'lit';
-/** A container which wraps different elements related to a single subject
+/**
+ * A container component that wraps different elements related to a single subject.
+ * The card component provides a flexible container for organizing content such as headers,
+ * media, text content, and actions.
+ *
  * @element igc-card
  *
- * @slot - Renders card content
+ * @slot - Renders the card content. Typically contains igc-card-header, igc-card-media, igc-card-content, and igc-card-actions.
+ *
+ * @example
+ * ```html
+ * <igc-card>
+ *   <igc-card-header>
+ *     <h3 slot="title">Card Title</h3>
+ *     <h5 slot="subtitle">Card Subtitle</h5>
+ *   </igc-card-header>
+ *   <igc-card-content>
+ *     <p>Card content goes here</p>
+ *   </igc-card-content>
+ *   <igc-card-actions>
+ *     <button slot="start">Action</button>
+ *   </igc-card-actions>
+ * </igc-card>
+ * ```
  */
 export default class IgcCardComponent extends LitElement {
     static readonly tagName = "igc-card";
     static styles: import("lit").CSSResult[];
     static register(): void;
     /**
-     * Sets card elevated style, otherwise card looks outlined.
-     * @attr
+     * Sets the card to have an elevated appearance with shadow.
+     * When false, the card uses an outlined style with a border.
+     *
+     * @attr elevated
+     * @default false
      */
     elevated: boolean;
     constructor();

package/components/card/card.header.d.ts

@@ -1,13 +1,27 @@
 import { LitElement } from 'lit';
-/** A container for card's header
+/**
+ * A container component for the card's header section.
+ * Displays header content including an optional thumbnail, title, subtitle, and additional content.
+ *
  * @element igc-card-header
  *
- * @slot thumbnail - Renders header media like icon
- * @slot title - Renders the card title
- * @slot subtitle - Renders the card subtitle
- * @slot - Renders content next to the card title
+ * @slot thumbnail - Renders header media such as an icon or small image.
+ * @slot title - Renders the card title (typically a heading element).
+ * @slot subtitle - Renders the card subtitle (typically a smaller heading or text).
+ * @slot - Renders additional content displayed next to the title area.
+ *
+ * @csspart header - The card header text container.
+ * @csspart title - The title slot wrapper.
+ * @csspart subtitle - The subtitle slot wrapper.
  *
- * @csspart header - The card header container
+ * @example
+ * ```html
+ * <igc-card-header>
+ *   <igc-avatar slot="thumbnail" initials="AB"></igc-avatar>
+ *   <h3 slot="title">Card Title</h3>
+ *   <h5 slot="subtitle">Card Subtitle</h5>
+ * </igc-card-header>
+ * ```
  */
 export default class IgcCardHeaderComponent extends LitElement {
     static readonly tagName = "igc-card-header";

package/components/card/card.header.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.header.js","sourceRoot":"","sources":["../../../src/components/card/card.header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kDAAkD,CAAC;AAYpF,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;aACrC,YAAO,GAAG,iBAAiB,CAAC;aAC5B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,sBAAsB,CAAC,CAAC;IAC5C,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/card.header.base.css.js';\nimport { all } from './themes/header.js';\nimport { styles as shared } from './themes/shared/header/card.header.common.css.js';\n\n/** A container for card's header\n * @element igc-card-header\n *\n * @slot thumbnail - Renders header media like icon\n * @slot title - Renders the card title\n * @slot subtitle - Renders the card subtitle\n * @slot - Renders content next to the card title\n *\n * @csspart header - The card header container\n */\nexport default class IgcCardHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-card-header';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCardHeaderComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`\n      <section>\n        <slot name=\"thumbnail\"></slot>\n      </section>\n      <section>\n        <header part=\"header\">\n          <slot part=\"title\" name=\"title\"></slot>\n          <slot part=\"subtitle\" name=\"subtitle\"></slot>\n        </header>\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-header': IgcCardHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.header.js","sourceRoot":"","sources":["../../../src/components/card/card.header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kDAAkD,CAAC;AA0BpF,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;aACrC,YAAO,GAAG,iBAAiB,CAAC;aAC5B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,sBAAsB,CAAC,CAAC;IAC5C,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/card.header.base.css.js';\nimport { all } from './themes/header.js';\nimport { styles as shared } from './themes/shared/header/card.header.common.css.js';\n\n/**\n * A container component for the card's header section.\n * Displays header content including an optional thumbnail, title, subtitle, and additional content.\n *\n * @element igc-card-header\n *\n * @slot thumbnail - Renders header media such as an icon or small image.\n * @slot title - Renders the card title (typically a heading element).\n * @slot subtitle - Renders the card subtitle (typically a smaller heading or text).\n * @slot - Renders additional content displayed next to the title area.\n *\n * @csspart header - The card header text container.\n * @csspart title - The title slot wrapper.\n * @csspart subtitle - The subtitle slot wrapper.\n *\n * @example\n * ```html\n * <igc-card-header>\n *   <igc-avatar slot=\"thumbnail\" initials=\"AB\"></igc-avatar>\n *   <h3 slot=\"title\">Card Title</h3>\n *   <h5 slot=\"subtitle\">Card Subtitle</h5>\n * </igc-card-header>\n * ```\n */\nexport default class IgcCardHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-card-header';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCardHeaderComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`\n      <section>\n        <slot name=\"thumbnail\"></slot>\n      </section>\n      <section>\n        <header part=\"header\">\n          <slot part=\"title\" name=\"title\"></slot>\n          <slot part=\"subtitle\" name=\"subtitle\"></slot>\n        </header>\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-header': IgcCardHeaderComponent;\n  }\n}\n"]}

package/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AACxD,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AACxD,OAAO,sBAAsB,MAAM,kBAAkB,CAAC;AACtD,OAAO,qBAAqB,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8CAA8C,CAAC;AAOhF,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,UAAU;aAC/B,YAAO,GAAG,UAAU,AAAb,CAAc;aACrB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,CACtB,CAAC;IACJ,CAAC;IASD;QACE,KAAK,EAAE,CAAC;QAHH,aAAQ,GAAG,KAAK,CAAC;QAItB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACnB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcCardActionsComponent from './card.actions.js';\nimport IgcCardContentComponent from './card.content.js';\nimport IgcCardHeaderComponent from './card.header.js';\nimport IgcCardMediaComponent from './card.media.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/container/card.common.css.js';\n\n/** A container which wraps different elements related to a single subject\n * @element igc-card\n *\n * @slot - Renders card content\n */\nexport default class IgcCardComponent extends LitElement {\n  public static readonly tagName = 'igc-card';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcCardComponent,\n      IgcCardActionsComponent,\n      IgcCardContentComponent,\n      IgcCardHeaderComponent,\n      IgcCardMediaComponent\n    );\n  }\n\n  /**\n   * Sets card elevated style, otherwise card looks outlined.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public elevated = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card': IgcCardComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AACxD,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AACxD,OAAO,sBAAsB,MAAM,kBAAkB,CAAC;AACtD,OAAO,qBAAqB,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8CAA8C,CAAC;AA2BhF,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,UAAU;aAC/B,YAAO,GAAG,UAAU,AAAb,CAAc;aACrB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,CACtB,CAAC;IACJ,CAAC;IAYD;QACE,KAAK,EAAE,CAAC;QAHH,aAAQ,GAAG,KAAK,CAAC;QAItB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACnB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcCardActionsComponent from './card.actions.js';\nimport IgcCardContentComponent from './card.content.js';\nimport IgcCardHeaderComponent from './card.header.js';\nimport IgcCardMediaComponent from './card.media.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/container/card.common.css.js';\n\n/**\n * A container component that wraps different elements related to a single subject.\n * The card component provides a flexible container for organizing content such as headers,\n * media, text content, and actions.\n *\n * @element igc-card\n *\n * @slot - Renders the card content. Typically contains igc-card-header, igc-card-media, igc-card-content, and igc-card-actions.\n *\n * @example\n * ```html\n * <igc-card>\n *   <igc-card-header>\n *     <h3 slot=\"title\">Card Title</h3>\n *     <h5 slot=\"subtitle\">Card Subtitle</h5>\n *   </igc-card-header>\n *   <igc-card-content>\n *     <p>Card content goes here</p>\n *   </igc-card-content>\n *   <igc-card-actions>\n *     <button slot=\"start\">Action</button>\n *   </igc-card-actions>\n * </igc-card>\n * ```\n */\nexport default class IgcCardComponent extends LitElement {\n  public static readonly tagName = 'igc-card';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcCardComponent,\n      IgcCardActionsComponent,\n      IgcCardContentComponent,\n      IgcCardHeaderComponent,\n      IgcCardMediaComponent\n    );\n  }\n\n  /**\n   * Sets the card to have an elevated appearance with shadow.\n   * When false, the card uses an outlined style with a border.\n   *\n   * @attr elevated\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public elevated = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card': IgcCardComponent;\n  }\n}\n"]}

package/components/card/card.media.d.ts

@@ -1,8 +1,20 @@
 import { LitElement } from 'lit';
-/** A container for card's media - could be an image, gif, video
+/**
+ * A container component for card media content such as images, GIFs, or videos.
+ * This component should be used within an igc-card element to display visual content.
+ *
  * @element igc-card-media
  *
- * @slot - Renders the card media content
+ * @slot - Renders the card media content (e.g., img, video elements).
+ *
+ * @example
+ * ```html
+ * <igc-card>
+ *   <igc-card-media>
+ *     <img src="image.jpg" alt="Card image" />
+ *   </igc-card-media>
+ * </igc-card>
+ * ```
  */
 export default class IgcCardMediaComponent extends LitElement {
     static readonly tagName = "igc-card-media";

package/components/card/card.media.js

@@ -8,7 +8,7 @@ export default class IgcCardMediaComponent extends LitElement {
         registerComponent(IgcCardMediaComponent);
     }
     render() {
-        return html ` <slot></slot> `;
+        return html `<slot></slot>`;
     }
 }
 //# sourceMappingURL=card.media.js.map

package/components/card/card.media.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.media.js","sourceRoot":"","sources":["../../../src/components/card/card.media.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAOzD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,gBAAgB,CAAC;aAC3B,WAAM,GAAG,MAAM,CAAC;IAGhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/card.media.base.css.js';\n\n/** A container for card's media - could be an image, gif, video\n * @element igc-card-media\n *\n * @slot - Renders the card media content\n */\nexport default class IgcCardMediaComponent extends LitElement {\n  public static readonly tagName = 'igc-card-media';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcCardMediaComponent);\n  }\n\n  protected override render() {\n    return html` <slot></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-media': IgcCardMediaComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.media.js","sourceRoot":"","sources":["../../../src/components/card/card.media.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAmBzD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,gBAAgB,CAAC;aAC3B,WAAM,GAAG,MAAM,CAAC;IAGhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/card.media.base.css.js';\n\n/**\n * A container component for card media content such as images, GIFs, or videos.\n * This component should be used within an igc-card element to display visual content.\n *\n * @element igc-card-media\n *\n * @slot - Renders the card media content (e.g., img, video elements).\n *\n * @example\n * ```html\n * <igc-card>\n *   <igc-card-media>\n *     <img src=\"image.jpg\" alt=\"Card image\" />\n *   </igc-card-media>\n * </igc-card>\n * ```\n */\nexport default class IgcCardMediaComponent extends LitElement {\n  public static readonly tagName = 'igc-card-media';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCardMediaComponent);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-media': IgcCardMediaComponent;\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: bootstrap}`;
+export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: bootstrap;--ig-theme-variant: dark}`;
 //# sourceMappingURL=card.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gxBAAgxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: bootstrap}`;\n"]}
+{"version":3,"file":"card.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yyBAAyyB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: bootstrap;--ig-theme-variant: dark}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-300));--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: fluent}`;
+export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-300));--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: fluent;--ig-theme-variant: dark}`;
 //# sourceMappingURL=card.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kwBAAkwB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-300));--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: fluent}`;\n"]}
+{"version":3,"file":"card.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2xBAA2xB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-300));--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: fluent;--ig-theme-variant: dark}`;\n"]}

package/components/card/themes/dark/card.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-gray-50));--header-text-color: var(--ig-card-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.9));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: indigo}`;
+export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.9));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--outline-color: var(--ig-card-outline-color, var(--ig-gray-100));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: indigo;--ig-theme-variant: dark}`;
 //# sourceMappingURL=card.indigo.css.js.map

package/components/card/themes/dark/card.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gxBAAgxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-gray-50));--header-text-color: var(--ig-card-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.9));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: indigo}`;\n"]}
+{"version":3,"file":"card.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q3BAAq3B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.9));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--outline-color: var(--ig-card-outline-color, var(--ig-gray-100));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: indigo;--ig-theme-variant: dark}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.38));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: material}`;
+export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.38));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: material;--ig-theme-variant: dark}`;
 //# sourceMappingURL=card.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,iyBAAiyB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.38));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: material}`;\n"]}
+{"version":3,"file":"card.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0zBAA0zB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.38));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme: material;--ig-theme-variant: dark}`;\n"]}

package/components/card/themes/dark/card.shared.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-100))}`;
+export const styles = css `:host{--ig-theme-variant: dark}`;
 //# sourceMappingURL=card.shared.css.js.map

package/components/card/themes/dark/card.shared.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0EAA0E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-100))}`;\n"]}
+{"version":3,"file":"card.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/dark/card.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,iCAAiC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-theme-variant: dark}`;\n"]}

package/components/card/themes/light/container/card.bootstrap.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--ig-theme: bootstrap}`;
+export const styles = css `:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--ig-theme: bootstrap;--ig-theme-variant: light}`;
 //# sourceMappingURL=card.bootstrap.css.js.map

package/components/card/themes/light/container/card.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4GAA4G,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--ig-theme: bootstrap}`;\n"]}
+{"version":3,"file":"card.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,sIAAsI,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-800));--ig-theme: bootstrap;--ig-theme-variant: light}`;\n"]}

package/components/card/themes/light/container/card.fluent.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--ig-theme: fluent}`;
+export const styles = css `:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--ig-theme: fluent;--ig-theme-variant: light}`;
 //# sourceMappingURL=card.fluent.css.js.map

package/components/card/themes/light/container/card.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2MAA2M,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--ig-theme: fluent}`;\n"]}
+{"version":3,"file":"card.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qOAAqO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--outline-color: var(--ig-card-outline-color, var(--ig-gray-200));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));--ig-theme: fluent;--ig-theme-variant: light}`;\n"]}

package/components/card/themes/light/container/card.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-800));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-600));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo}`;
+export const styles = css `:host{--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-800));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-600));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo;--ig-theme-variant: light}`;
 //# sourceMappingURL=card.indigo.css.js.map

package/components/card/themes/light/container/card.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uWAAuW,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-800));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-600));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo}`;\n"]}
+{"version":3,"file":"card.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,iYAAiY,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-card-background, var(--ig-gray-900-contrast));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-800));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-600));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo;--ig-theme-variant: light}`;\n"]}

package/components/card/themes/light/container/card.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.54));--ig-theme: material}`;
+export const styles = css `:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.54));--ig-theme: material;--ig-theme-variant: light}`;
 //# sourceMappingURL=card.material.css.js.map

package/components/card/themes/light/container/card.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8QAA8Q,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.54));--ig-theme: material}`;\n"]}
+{"version":3,"file":"card.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wSAAwS,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-900));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-gray-900));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.54));--ig-theme: material;--ig-theme-variant: light}`;\n"]}

package/components/card/themes/light/container/card.shared.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2)}`;
+export const styles = css `:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme-variant: light}`;
 //# sourceMappingURL=card.shared.css.js.map

package/components/card/themes/light/container/card.shared.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.shared.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0vBAA0vB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2)}`;\n"]}
+{"version":3,"file":"card.shared.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/light/container/card.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,oxBAAoxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, var(--ig-gray-900));--subtitle-text-color: var(--ig-card-subtitle-text-color, var(--ig-gray-700));--content-text-color: var(--ig-card-content-text-color, var(--ig-gray-700));--actions-text-color: var(--ig-card-actions-text-color, var(--ig-primary-500));--outline-color: var(--ig-card-outline-color, var(--ig-gray-400));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--ig-theme-variant: light}`;\n"]}

package/components/carousel/carousel-slide.d.ts

@@ -12,7 +12,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
     static register(): void;
     private readonly _internals;
     private readonly _player;
-    private readonly _carousel?;
+    private _carousel?;
     protected get _index(): number;
     protected get _total(): number;
     protected get _animation(): "fade" | "none" | "slideVer" | "slideHor";
@@ -23,6 +23,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
      */
     active: boolean;
     previous: boolean;
+    constructor();
     /**
      * @hidden @internal
      * @deprecated since 5.4.0. Use Carousel's `select` method instead.

package/components/carousel/carousel-slide.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { EaseInOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
+import { createAsyncContext } from '../common/controllers/async-consumer.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { formatString } from '../common/util.js';
@@ -17,18 +17,6 @@ import { animations } from './animations.js';
 import { styles } from './themes/carousel-slide.base.css.js';
 let nextId = 1;
 export default class IgcCarouselSlideComponent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'tabpanel',
-                ariaRoleDescription: 'slide',
-            },
-        });
-        this._player = addAnimationController(this);
-        this.active = false;
-        this.previous = false;
-    }
     static { this.styles = styles; }
     static { this.tagName = 'igc-carousel-slide'; }
     static register() {
@@ -50,6 +38,21 @@ export default class IgcCarouselSlideComponent extends LitElement {
     get _labelFormat() {
         return this._carousel ? this._carousel.slidesLabelFormat : '';
     }
+    constructor() {
+        super();
+        this._internals = addInternalsController(this, {
+            initialARIA: {
+                role: 'tabpanel',
+                ariaRoleDescription: 'slide',
+            },
+        });
+        this._player = addAnimationController(this);
+        this.active = false;
+        this.previous = false;
+        createAsyncContext(this, carouselContext, (carousel) => {
+            this._carousel = carousel;
+        });
+    }
     async toggleAnimation(type, direction = 'normal') {
         const animation = animations.get(this._animation).get(type);
         return await this._player.playExclusive(animation({
@@ -71,9 +74,6 @@ export default class IgcCarouselSlideComponent extends LitElement {
         return html `<slot></slot>`;
     }
 }
-__decorate([
-    consume({ context: carouselContext, subscribe: true })
-], IgcCarouselSlideComponent.prototype, "_carousel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcCarouselSlideComponent.prototype, "active", void 0);

package/components/carousel/carousel-slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-slide.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { carouselContext } from '../common/context.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport { animations } from './animations.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-slide.base.css.js';\n\nlet nextId = 1;\n\n/**\n * A single content container within a set of containers used in the context of an `igc-carousel`.\n *\n * @element igc-carousel-slide\n *\n * @slot Default slot for the carousel slide.\n */\nexport default class IgcCarouselSlideComponent extends LitElement {\n  public static override styles = styles;\n  public static readonly tagName = 'igc-carousel-slide';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselSlideComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'tabpanel',\n      ariaRoleDescription: 'slide',\n    },\n  });\n\n  private readonly _player = addAnimationController(this);\n\n  @consume({ context: carouselContext, subscribe: true })\n  private readonly _carousel?: IgcCarouselComponent;\n\n  protected get _index(): number {\n    return this._carousel ? this._carousel.slides.indexOf(this) : 0;\n  }\n\n  protected get _total(): number {\n    return this._carousel ? this._carousel.slides.length : 0;\n  }\n\n  protected get _animation() {\n    const animation = this._carousel?.animationType ?? 'slide';\n\n    if (animation === 'slide') {\n      return this._carousel?.vertical ? 'slideVer' : 'slideHor';\n    }\n\n    return animation;\n  }\n\n  protected get _labelFormat(): string {\n    return this._carousel ? this._carousel.slidesLabelFormat : '';\n  }\n\n  /**\n   * The current active slide for the carousel component.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ type: Boolean, reflect: true })\n  public previous = false;\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use Carousel's `select` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ): Promise<boolean> {\n    const animation = animations.get(this._animation)!.get(type)!;\n\n    return await this._player.playExclusive(\n      animation({\n        duration: 320,\n        easing: EaseInOut.Quad,\n        direction,\n      })\n    );\n  }\n\n  protected override willUpdate(): void {\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this._index + 1, this._total),\n    });\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || `igc-carousel-slide-${nextId++}`;\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-slide': IgcCarouselSlideComponent;\n  }\n}\n"]}
+{"version":3,"file":"carousel-slide.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { carouselContext } from '../common/context.js';\nimport { createAsyncContext } from '../common/controllers/async-consumer.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport { animations } from './animations.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-slide.base.css.js';\n\nlet nextId = 1;\n\n/**\n * A single content container within a set of containers used in the context of an `igc-carousel`.\n *\n * @element igc-carousel-slide\n *\n * @slot Default slot for the carousel slide.\n */\nexport default class IgcCarouselSlideComponent extends LitElement {\n  public static override styles = styles;\n  public static readonly tagName = 'igc-carousel-slide';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselSlideComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'tabpanel',\n      ariaRoleDescription: 'slide',\n    },\n  });\n\n  private readonly _player = addAnimationController(this);\n\n  private _carousel?: IgcCarouselComponent;\n\n  protected get _index(): number {\n    return this._carousel ? this._carousel.slides.indexOf(this) : 0;\n  }\n\n  protected get _total(): number {\n    return this._carousel ? this._carousel.slides.length : 0;\n  }\n\n  protected get _animation() {\n    const animation = this._carousel?.animationType ?? 'slide';\n\n    if (animation === 'slide') {\n      return this._carousel?.vertical ? 'slideVer' : 'slideHor';\n    }\n\n    return animation;\n  }\n\n  protected get _labelFormat(): string {\n    return this._carousel ? this._carousel.slidesLabelFormat : '';\n  }\n\n  /**\n   * The current active slide for the carousel component.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ type: Boolean, reflect: true })\n  public previous = false;\n\n  constructor() {\n    super();\n\n    // Set carousel reference once provider is ready (addresses Blazor timing issue)\n    createAsyncContext(this, carouselContext, (carousel) => {\n      this._carousel = carousel;\n    });\n  }\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use Carousel's `select` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ): Promise<boolean> {\n    const animation = animations.get(this._animation)!.get(type)!;\n\n    return await this._player.playExclusive(\n      animation({\n        duration: 320,\n        easing: EaseInOut.Quad,\n        direction,\n      })\n    );\n  }\n\n  protected override willUpdate(): void {\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this._index + 1, this._total),\n    });\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || `igc-carousel-slide-${nextId++}`;\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-slide': IgcCarouselSlideComponent;\n  }\n}\n"]}

package/components/carousel/carousel.d.ts

@@ -47,6 +47,7 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     private readonly _slots;
     private readonly _i18nController;
     private readonly _context;
+    private _setCarouselContext;
     private readonly _defaultIndicators;
     private readonly _carouselSlidesContainerRef;
     private readonly _indicatorsContainerRef;

package/components/carousel/carousel.js

@@ -40,6 +40,9 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     static register() {
         registerComponent(IgcCarouselComponent, IgcCarouselIndicatorComponent, IgcCarouselIndicatorContainerComponent, IgcCarouselSlideComponent, IgcIconComponent, IgcButtonComponent);
     }
+    _setCarouselContext() {
+        this._context.setValue(this, true);
+    }
     get _hasProjectedIndicators() {
         return !isEmpty(this._projectedIndicators);
     }
@@ -93,7 +96,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         return this._paused;
     }
     _contextChanged() {
-        this._context.setValue(this, true);
+        this._setCarouselContext();
     }
     _intervalChange() {
         if (!this.isPlaying) {
@@ -179,6 +182,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     }
     async firstUpdated() {
         await this.updateComplete;
+        this._setCarouselContext();
         if (!isEmpty(this._slides)) {
             this._activateSlide(this._slides.findLast((slide) => slide.active) ?? first(this._slides));
         }