@carbon/web-components 2.63.0-rc.0 → 2.63.0

package/es/components/card/card.js

@@ -0,0 +1,185 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import iconLoader from "../../globals/internal/icon-loader.js";
+import link_default from "../link/link.js";
+import { cardContext, cardDefaultContext } from "./card-context.js";
+import { CARD_DENSITY, CARD_MEDIA_POSITION } from "./defs.js";
+import card_default$1 from "./card.scss.js";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { provide } from "@lit/context";
+import ArrowRight16 from "@carbon/icons/es/arrow--right/16.js";
+//#region src/components/card/card.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Card — composable container component.
+*
+* @element cds-card
+* @slot - Default slot for cds-card-header, cds-card-body, cds-card-footer, cds-card-media.
+* @slot decorator - Slot for cds-ai-label. Sets `has-ai-label` attribute when populated.
+* @slot footer-icon - Override the default ArrowRight icon in the clickable footer.
+*/
+let CDSCard = class CDSCard extends link_default {
+	constructor(..._args) {
+		super(..._args);
+		this.cardContext = cardDefaultContext;
+		this._hasAILabel = false;
+		this.clickable = false;
+		this.disabled = false;
+		this.density = "productive";
+		this.horizontal = false;
+		this.mediaPosition = "start";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.clickable && !this.href && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) console.error("[cds-card] A clickable card must have an accessible name. Set `aria-label` or `aria-labelledby` on the element.");
+	}
+	willUpdate(changed) {
+		super.willUpdate?.(changed);
+		if (changed.has("clickable") || changed.has("disabled") || changed.has("horizontal")) this.cardContext = {
+			clickable: this.clickable,
+			disabled: this.disabled,
+			horizontal: this.horizontal
+		};
+	}
+	_handleDecoratorSlotChange({ target }) {
+		const hasAILabel = target.assignedElements().some((el) => el.matches(`cds-ai-label`));
+		this._hasAILabel = hasAILabel;
+		if (hasAILabel) this.setAttribute("has-ai-label", "");
+		else this.removeAttribute("has-ai-label");
+	}
+	_handleDefaultSlotChange({ target }) {
+		if (target.assignedElements({ flatten: true }).some((el) => el.matches(`cds-card-actions`))) this.setAttribute("has-actions", "");
+		else this.removeAttribute("has-actions");
+	}
+	_handleClick(e) {
+		if (this.disabled) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	}
+	_handleKeydown(e) {
+		if (this.disabled) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+	}
+	/** The BEM class map for the root card div/anchor. */
+	get _cardClasses() {
+		const { clickable, disabled, density, _hasAILabel, horizontal } = this;
+		return classMap({
+			[`cds--card`]: true,
+			[`cds--card--clickable`]: clickable && !disabled,
+			[`cds--card--disabled`]: disabled,
+			[`cds--card--${density}`]: true,
+			[`cds--card--has-ai-label`]: _hasAILabel,
+			[`cds--card--horizontal`]: horizontal
+		});
+	}
+	/**
+	* The card's inner content layout.
+	*/
+	_renderContent() {
+		const { horizontal, mediaPosition } = this;
+		if (!horizontal) return html`<slot @slotchange=${this._handleDefaultSlotChange}></slot>`;
+		const mediaSlot = html`<slot name="media"></slot>`;
+		const contentDiv = html`
+      <div class="${"cds"}--card__content">
+        <slot @slotchange=${this._handleDefaultSlotChange}></slot>
+      </div>
+    `;
+		return mediaPosition === "end" ? html`${contentDiv}${mediaSlot}` : html`${mediaSlot}${contentDiv}`;
+	}
+	/** Clickable-footer affordance (aria-hidden, purely decorative). */
+	_renderClickableFooter() {
+		return html`
+      <div class="${"cds"}--card__clickable-footer" aria-hidden="true">
+        <slot name="footer-icon">
+          ${iconLoader(ArrowRight16, { "aria-hidden": "true" })}
+        </slot>
+      </div>
+    `;
+	}
+	_renderInner() {
+		const { clickable } = this;
+		return html`
+      <div class=${this._cardClasses}>
+        ${this._renderContent()}
+        ${clickable ? this._renderClickableFooter() : nothing}
+        <slot
+          name="decorator"
+          @slotchange=${this._handleDecoratorSlotChange}></slot>
+      </div>
+    `;
+	}
+	render() {
+		return this._renderLink();
+	}
+	_renderLink() {
+		const { href, clickable, disabled } = this;
+		if (href) return disabled ? this._renderDisabledLink() : super._renderLink();
+		if (clickable) return html`
+        <div
+          role="button"
+          tabindex=${disabled ? -1 : 0}
+          aria-disabled=${disabled}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}>
+          ${this._renderInner()}
+        </div>
+      `;
+		return html`<div>${this._renderInner()}</div>`;
+	}
+	/**
+	* Selector matching the AI Label element.
+	*/
+	static get aiLabelItem() {
+		return `cds-ai-label`;
+	}
+	static {
+		this.styles = card_default$1;
+	}
+};
+__decorate([provide({ context: cardContext }), property({ attribute: false })], CDSCard.prototype, "cardContext", void 0);
+__decorate([state()], CDSCard.prototype, "_hasAILabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCard.prototype, "clickable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCard.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSCard.prototype, "density", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCard.prototype, "horizontal", void 0);
+__decorate([property({
+	attribute: "media-position",
+	reflect: true
+})], CDSCard.prototype, "mediaPosition", void 0);
+CDSCard = __decorate([carbonElement(`cds-card`)], CDSCard);
+var card_default = CDSCard;
+//#endregion
+export { CARD_DENSITY, CARD_MEDIA_POSITION, card_default as default };
+
+//# sourceMappingURL=card.js.map

package/es/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["CDSLink","slot","styles","customElement"],"sources":["../../../src/components/card/card.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { provide } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport ArrowRight16 from '@carbon/icons/es/arrow--right/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n  cardContext,\n  cardDefaultContext,\n  type CardContextValue,\n} from './card-context';\nimport { CARD_DENSITY, CARD_MEDIA_POSITION } from './defs';\nimport styles from './card.scss?lit';\n\nexport { CARD_DENSITY, CARD_MEDIA_POSITION };\n\n/**\n * Card — composable container component.\n *\n * @element cds-card\n * @slot - Default slot for cds-card-header, cds-card-body, cds-card-footer, cds-card-media.\n * @slot decorator - Slot for cds-ai-label. Sets `has-ai-label` attribute when populated.\n * @slot footer-icon - Override the default ArrowRight icon in the clickable footer.\n */\n@customElement(`${prefix}-card`)\nclass CDSCard extends CDSLink {\n  // ─── Context ──────────────────────────────────────────────────────────────\n\n  @provide({ context: cardContext })\n  @property({ attribute: false })\n  cardContext: CardContextValue = cardDefaultContext;\n\n  // ─── Internal state ───────────────────────────────────────────────────────\n\n  /** Set to true when a cds-ai-label is found in the decorator slot. */\n  @state()\n  private _hasAILabel = false;\n\n  // ─── Properties / Attributes ──────────────────────────────────────────────\n\n  /**\n   * Makes the entire card surface interactive.\n   */\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  /**\n   * Mutes all interaction.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Controls heading typography inside the card.\n   */\n  @property({ type: String, reflect: true })\n  density: CARD_DENSITY = CARD_DENSITY.PRODUCTIVE;\n\n  /**\n   * Side-by-side layout: cds-card-media on one side, other content stacked.\n   */\n  @property({ type: Boolean, reflect: true })\n  horizontal = false;\n\n  /**\n   * Position of the media column when `horizontal` is true.\n   * @default 'start'\n   */\n  @property({ attribute: 'media-position', reflect: true })\n  mediaPosition: CARD_MEDIA_POSITION = CARD_MEDIA_POSITION.START;\n\n  // ─── Lifecycle ────────────────────────────────────────────────────────────\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Accessible name requirement for clickable (non-link) cards.\n    if (\n      this.clickable &&\n      !this.href &&\n      !this.getAttribute('aria-label') &&\n      !this.getAttribute('aria-labelledby')\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(\n        `[cds-card] A clickable card must have an accessible name. ` +\n          `Set \\`aria-label\\` or \\`aria-labelledby\\` on the element.`\n      );\n    }\n  }\n\n  willUpdate(changed: PropertyValues) {\n    super.willUpdate?.(changed);\n\n    if (\n      changed.has('clickable') ||\n      changed.has('disabled') ||\n      changed.has('horizontal')\n    ) {\n      this.cardContext = {\n        clickable: this.clickable,\n        disabled: this.disabled,\n        horizontal: this.horizontal,\n      };\n    }\n  }\n\n  // ─── Slot handlers ────────────────────────────────────────────────────────\n\n  private _handleDecoratorSlotChange({ target }: Event) {\n    const slot = target as HTMLSlotElement;\n    const hasAILabel = slot\n      .assignedElements()\n      .some((el) => el.matches(`${prefix}-ai-label`));\n\n    this._hasAILabel = hasAILabel;\n\n    if (hasAILabel) {\n      this.setAttribute('has-ai-label', '');\n    } else {\n      this.removeAttribute('has-ai-label');\n    }\n  }\n\n  private _handleDefaultSlotChange({ target }: Event) {\n    const slot = target as HTMLSlotElement;\n    const hasActions = slot\n      .assignedElements({ flatten: true })\n      .some((el) => el.matches(`${prefix}-card-actions`));\n\n    if (hasActions) {\n      this.setAttribute('has-actions', '');\n    } else {\n      this.removeAttribute('has-actions');\n    }\n  }\n\n  // ─── Event handlers (non-link clickable mode) ─────────────────────────────\n\n  private _handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.stopPropagation();\n      e.preventDefault();\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault(); // prevent Space from scrolling\n      (e.currentTarget as HTMLElement).click();\n    }\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n\n  /** The BEM class map for the root card div/anchor. */\n  private get _cardClasses() {\n    const { clickable, disabled, density, _hasAILabel, horizontal } = this;\n    return classMap({\n      [`${prefix}--card`]: true,\n      [`${prefix}--card--clickable`]: clickable && !disabled,\n      [`${prefix}--card--disabled`]: disabled,\n      [`${prefix}--card--${density}`]: true,\n      [`${prefix}--card--has-ai-label`]: _hasAILabel,\n      [`${prefix}--card--horizontal`]: horizontal,\n    });\n  }\n\n  /**\n   * The card's inner content layout.\n   */\n  private _renderContent() {\n    const { horizontal, mediaPosition } = this;\n\n    if (!horizontal) {\n      return html`<slot @slotchange=${this._handleDefaultSlotChange}></slot>`;\n    }\n\n    const mediaSlot = html`<slot name=\"media\"></slot>`;\n    const contentDiv = html`\n      <div class=\"${prefix}--card__content\">\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n      </div>\n    `;\n\n    return mediaPosition === CARD_MEDIA_POSITION.END\n      ? html`${contentDiv}${mediaSlot}`\n      : html`${mediaSlot}${contentDiv}`;\n  }\n\n  /** Clickable-footer affordance (aria-hidden, purely decorative). */\n  private _renderClickableFooter() {\n    return html`\n      <div class=\"${prefix}--card__clickable-footer\" aria-hidden=\"true\">\n        <slot name=\"footer-icon\">\n          ${iconLoader(ArrowRight16, { 'aria-hidden': 'true' })}\n        </slot>\n      </div>\n    `;\n  }\n\n  // ─── CDSLink overrides ────────────────────────────────────────────────────\n  protected _renderInner() {\n    const { clickable } = this;\n    return html`\n      <div class=${this._cardClasses}>\n        ${this._renderContent()}\n        ${clickable ? this._renderClickableFooter() : nothing}\n        <slot\n          name=\"decorator\"\n          @slotchange=${this._handleDecoratorSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  render() {\n    return this._renderLink();\n  }\n\n  protected _renderLink() {\n    const { href, clickable, disabled } = this;\n\n    // Link card — delegate to CDSLink's implementation, but render a <p>\n    // (via _renderDisabledLink) when disabled to suppress navigation.\n    if (href) {\n      return disabled ? this._renderDisabledLink() : super._renderLink();\n    }\n\n    // Non-link clickable card — div with button semantics.\n    if (clickable) {\n      return html`\n        <div\n          role=\"button\"\n          tabindex=${disabled ? -1 : 0}\n          aria-disabled=${disabled}\n          @click=${this._handleClick}\n          @keydown=${this._handleKeydown}>\n          ${this._renderInner()}\n        </div>\n      `;\n    }\n\n    // Static card — plain div, no interaction semantics.\n    return html`<div>${this._renderInner()}</div>`;\n  }\n\n  // ─── Static ───────────────────────────────────────────────────────────────\n\n  /**\n   * Selector matching the AI Label element.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCard;\n"],"mappings":"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"}

package/es/components/card/card.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from "lit";
+//#region src/components/card/card.scss?lit
+var card_default = css([".cds--card{position:relative;background-color:var(--cds-layer);color:var(--cds-text-primary,#161616)}.cds--card--clickable{display:block;border:1px solid var(--cds-border-tile-01,#c6c6c6);cursor:pointer;text-decoration:none;transition:background-color .11s cubic-bezier(.2,0,.38,.9)}.cds--card--clickable:hover{background-color:var(--cds-layer-hover)}.cds--card--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--card--clickable:focus{outline-style:dotted}}.cds--card--clickable:focus{outline-offset:0}.cds--card--clickable:active{background-color:var(--cds-layer-active)}.cds--card__clickable-footer{display:flex;align-items:center;justify-content:flex-end;padding:1rem;color:var(--cds-icon-interactive,#0f62fe)}.cds--card--disabled .cds--card__clickable-footer{color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--card--disabled{border-color:var(--cds-border-disabled,#c6c6c6);background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;pointer-events:none}.cds--card__header{position:relative;display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-columns:auto 1fr;row-gap:0}.cds--card__body{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);padding-block:1rem;padding-inline:1rem}.cds--card__body--flush{padding:0}.cds--card__footer{display:flex;align-items:center;padding:1rem}.cds--card__footer:has(>.cds--card__action){overflow:hidden;padding:0;border-block-start:1px solid var(--cds-border-subtle);gap:1px}.cds--card__footer>.cds--card__action:not(:has(.cds--btn--icon-only)){flex:1 0 0;min-inline-size:0}.cds--card__footer>.cds--card__action:not(:has(.cds--btn--icon-only))>*>.cds--btn,.cds--card__footer>.cds--card__action:not(:has(.cds--btn--icon-only))>.cds--btn{inline-size:100%;max-inline-size:none}.cds--card__footer>.cds--card__action:has(.cds--btn--icon-only){flex:0 0 auto;margin-inline-start:auto}.cds--card__footer>.cds--card__action:has(.cds--btn--icon-only)+.cds--card__action:has(.cds--btn--icon-only){margin-inline-start:0}.cds--card__action{display:inline-flex}.cds--card__header-media{display:flex;align-items:flex-start;justify-content:flex-start;grid-column:1/-1;margin-block:1rem;margin-inline:1rem;max-block-size:4rem}.cds--card__media{grid-column:1/-1;inline-size:100%}.cds--card__media:after,.cds--card__media:before{display:none}.cds--card__media.cds--aspect-ratio--16x9{aspect-ratio:16/9}.cds--card__media.cds--aspect-ratio--9x16{aspect-ratio:9/16}.cds--card__media.cds--aspect-ratio--2x1{aspect-ratio:2/1}.cds--card__media.cds--aspect-ratio--1x2{aspect-ratio:1/2}.cds--card__media.cds--aspect-ratio--4x3{aspect-ratio:4/3}.cds--card__media.cds--aspect-ratio--3x4{aspect-ratio:3/4}.cds--card__media.cds--aspect-ratio--3x2{aspect-ratio:3/2}.cds--card__media.cds--aspect-ratio--2x3{aspect-ratio:2/3}.cds--card__media.cds--aspect-ratio--1x1{aspect-ratio:1/1}.cds--card__media>*{position:static;block-size:100%;inline-size:100%;-o-object-fit:cover;object-fit:cover}.cds--card--horizontal{display:flex;flex-direction:row;align-items:stretch}.cds--card__media--horizontal{overflow:hidden;flex-basis:var(--cds--card--media-width,33.33%);flex-shrink:0;align-self:stretch}.cds--card--horizontal>.cds--card__content{display:flex;flex:1 1 0;flex-direction:column;min-inline-size:0}.cds--card--horizontal>.cds--card__content>.cds--card__body{flex:1 0 auto}.cds--card--horizontal>.cds--card__content>.cds--card__footer{margin-block-start:auto}.cds--card__title .cds--card__label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);color:var(--cds-text-secondary,#525252)}.cds--card--disabled .cds--card__label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--card__label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--card__label--truncate-multi{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--cds--card--label-line-clamp);text-overflow:ellipsis}.cds--card__title{display:flex;overflow:hidden;flex-direction:column;gap:.125rem;margin-inline:1rem;min-inline-size:0}.cds--card__header>.cds--card__title{margin-block:1rem}.cds--card--expressive .cds--card__title-text-row{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0)}.cds--card--productive .cds--card__title-text-row{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);line-height:var(--cds-heading-compact-02-line-height,1.375);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0)}.cds--card__title-text-row{display:block}.cds--card__title-text-row--truncate{white-space:nowrap}.cds--card__title-text-row--truncate,.cds--card__title-text-row--truncate-multi{overflow:hidden;max-inline-size:var(--cds--card--title-max-width,100%);text-overflow:ellipsis}.cds--card__title-text-row--truncate-multi{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--cds--card--title-line-clamp)}.cds--card__title-text-row--with-start-icon{display:flex;align-items:flex-start;gap:.5rem}.cds--card__title-text-row--with-end-icon{display:block}.cds--card__title-start-icon{display:flex;flex-shrink:0;margin-block-start:.125rem}.cds--card__title-end-icon{display:inline-flex;align-items:center;margin-inline-start:.5rem;vertical-align:middle}.cds--card__title .cds--card__description{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);color:var(--cds-text-secondary,#525252)}.cds--card--disabled .cds--card__description{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--card__description--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--card__description--truncate-multi{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--cds--card--description-line-clamp);text-overflow:ellipsis}.cds--card__title-media{display:flex;flex-shrink:0;align-items:flex-start;justify-content:center;grid-column:1;margin-block-start:1rem;margin-inline-start:1rem;max-block-size:4rem}.cds--card__header:has(>.cds--card__title-media)>.cds--card__title{grid-column:2;margin-inline-start:0}.cds--card__actions{position:absolute;display:inline-flex;align-items:center;justify-content:flex-end;block-size:2rem;gap:.25rem;inline-size:50%;inset-block-start:.5rem;inset-inline-end:.5rem;max-inline-size:50%}.cds--card--has-ai-label{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--card__decorator{position:absolute;z-index:1;display:flex;align-items:center;block-size:2rem;inset-block-start:.5rem;inset-inline-end:.5rem}.cds--card--has-ai-label .cds--card__title{padding-inline-end:3rem}.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__title{padding-inline-end:10rem}.cds--card--has-ai-label .cds--card__label{padding-inline-end:3rem}.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__label{padding-inline-end:10rem}.cds--card--has-ai-label .cds--card__description{padding-inline-end:3rem}.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__description{padding-inline-end:10rem}.cds--card--has-ai-label .cds--card__actions{inset-inline-end:2.5rem}.cds--card--clickable.cds--card--has-ai-label:before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;position:absolute;display:block;block-size:100%;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1));content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}.cds--card--clickable.cds--card--has-ai-label:hover:before{opacity:1}:host-context(cds-card-header) .cds--card__title{margin-block:1rem}:host(cds-card-title) .cds--card__title-text-row{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);line-height:var(--cds-heading-compact-02-line-height,1.375);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0)}:host-context(cds-card[density=productive]) .cds--card__title-text-row{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);line-height:var(--cds-heading-compact-02-line-height,1.375);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0)}:host-context(cds-card[density=expressive]) .cds--card__title-text-row{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0)}:host-context(cds-card[disabled]) .cds--card__label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host-context(cds-card[disabled]) .cds--card__description{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host-context(cds-card[horizontal]) .cds--card__body{flex:1 0 auto}:host-context(cds-card[horizontal]) .cds--card__footer{margin-block-start:auto}:host-context(cds-card[has-ai-label]) .cds--card__title{padding-inline-end:3rem}:host-context(cds-card[has-ai-label]) .cds--card__label{padding-inline-end:3rem}:host-context(cds-card[has-ai-label]) .cds--card__description{padding-inline-end:3rem}:host-context(cds-card[has-ai-label][has-actions]) .cds--card__title{padding-inline-end:10rem}:host-context(cds-card[has-ai-label][has-actions]) .cds--card__label{padding-inline-end:10rem}:host-context(cds-card[has-ai-label][has-actions]) .cds--card__description{padding-inline-end:10rem}:host-context(cds-card-header[has-title-media]) .cds--card__title{grid-column:2;margin-inline-start:0}:host(cds-card-footer[has-actions]) .cds--card__footer{overflow:hidden;justify-content:flex-end;padding:0;border-block-start:1px solid var(--cds-border-subtle);gap:1px}:host(cds-card-action:not([icon-only])){flex:1 0 0;min-inline-size:0}:host(cds-card-action:not([icon-only])) .cds--card__action{display:flex;inline-size:100%}:host(cds-card-action:not([icon-only])) .cds--card__action>::slotted(*){inline-size:100%;max-inline-size:none}:host(cds-card-action[icon-only]){flex:0 0 auto}:host(cds-card){display:block}:host(cds-card) a[part=link]{color:inherit;text-decoration:none}:host(cds-card) a[part=link]:active,:host(cds-card) a[part=link]:focus,:host(cds-card) a[part=link]:hover{color:inherit;text-decoration:none}:host(cds-card-header){display:block}:host(cds-card-body){display:block}:host(cds-card-footer){display:block}:host(cds-card-media){display:block}:host(cds-card-header-media){display:flex;align-items:flex-start;justify-content:flex-start;grid-column:1/-1;margin-block:1rem;margin-inline:1rem;max-block-size:4rem}:host(cds-card-header-media) .cds--card__header-media{display:contents}:host(cds-card-title){display:block;min-inline-size:0}:host(cds-card-title-media){display:block}:host(cds-card-header) .cds--card__header ::slotted(cds-card-actions){position:absolute;display:inline-flex;align-items:center;justify-content:flex-end;block-size:2rem;gap:.25rem;inline-size:50%;inset-block-start:.5rem;inset-inline-end:.5rem;max-inline-size:50%}:host(cds-card-actions){position:relative}:host(cds-card-actions) .cds--card__actions-overflow-menu{position:absolute;inset-block-start:0;inset-inline-end:0}:host(cds-card-action){display:block}:host(cds-card-action[data-hidden]){display:none}"]);
+//#endregion
+export { card_default as default };
+
+//# sourceMappingURL=card.scss.js.map

package/es/components/card/card.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.scss.js","names":[],"sources":["../../../src/components/card/card.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type' as *;\n// `@use` runs the module's `_index.scss` once, which already includes the\n// `card.card` mixin — do not `@include` it again here or every rule from\n// the shared @carbon/styles card mixin gets emitted twice.\n@use '@carbon/styles/scss/components/card' as card;\n\n:host-context(#{$prefix}-card-header) .#{$prefix}--card__title {\n  margin-block: $spacing-05;\n}\n\n:host(#{$prefix}-card-title) .#{$prefix}--card__title-text-row {\n  // Base / fallback — productive is the default density.\n  @include type-style('heading-compact-02');\n}\n\n:host-context(#{$prefix}-card[density='productive'])\n  .#{$prefix}--card__title-text-row {\n  @include type-style('heading-compact-02');\n}\n\n:host-context(#{$prefix}-card[density='expressive'])\n  .#{$prefix}--card__title-text-row {\n  @include type-style('heading-03');\n}\n\n:host-context(#{$prefix}-card[disabled]) .#{$prefix}--card__label {\n  color: $text-disabled;\n}\n\n:host-context(#{$prefix}-card[disabled]) .#{$prefix}--card__description {\n  color: $text-disabled;\n}\n\n:host-context(#{$prefix}-card[horizontal]) .#{$prefix}--card__body {\n  flex: 1 0 auto;\n}\n\n:host-context(#{$prefix}-card[horizontal]) .#{$prefix}--card__footer {\n  margin-block-start: auto;\n}\n\n:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__title {\n  padding-inline-end: calc($spacing-07 + $spacing-05);\n}\n\n:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__label {\n  padding-inline-end: calc($spacing-07 + $spacing-05);\n}\n\n:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__description {\n  padding-inline-end: calc($spacing-07 + $spacing-05);\n}\n\n:host-context(#{$prefix}-card[has-ai-label][has-actions])\n  .#{$prefix}--card__title {\n  padding-inline-end: $spacing-13;\n}\n\n:host-context(#{$prefix}-card[has-ai-label][has-actions])\n  .#{$prefix}--card__label {\n  padding-inline-end: $spacing-13;\n}\n\n:host-context(#{$prefix}-card[has-ai-label][has-actions])\n  .#{$prefix}--card__description {\n  padding-inline-end: $spacing-13;\n}\n\n:host-context(#{$prefix}-card-header[has-title-media])\n  .#{$prefix}--card__title {\n  grid-column: 2;\n  margin-inline-start: 0;\n}\n\n:host(#{$prefix}-card-footer[has-actions]) .#{$prefix}--card__footer {\n  overflow: hidden;\n  justify-content: flex-end;\n  padding: 0;\n  border-block-start: 1px solid $border-subtle;\n  gap: 1px;\n}\n\n:host(#{$prefix}-card-action:not([icon-only])) {\n  flex: 1 0 0;\n  min-inline-size: 0;\n\n  .#{$prefix}--card__action {\n    display: flex;\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--card__action > ::slotted(*) {\n    inline-size: 100%;\n    max-inline-size: none;\n  }\n}\n\n// Icon-only actions: fixed width. The footer container's justify-content:flex-end\n// pushes the whole group to the trailing edge, so no per-item margin trick needed.\n// Original: .cds--card__footer > .cds--card__action:has(.cds--btn--icon-only)\n\n:host(#{$prefix}-card-action[icon-only]) {\n  flex: 0 0 auto;\n}\n\n// ─── Host-level display ───────────────────────────────────────────────────────\n\n:host(#{$prefix}-card) {\n  display: block;\n}\n\n:host(#{$prefix}-card) a[part='link'] {\n  color: inherit;\n  text-decoration: none;\n\n  &:hover,\n  &:focus,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n}\n\n:host(#{$prefix}-card-header) {\n  display: block;\n}\n\n:host(#{$prefix}-card-body) {\n  display: block;\n}\n\n:host(#{$prefix}-card-footer) {\n  display: block;\n}\n\n:host(#{$prefix}-card-media) {\n  display: block;\n}\n\n:host(#{$prefix}-card-header-media) {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  grid-column: 1 / -1;\n  margin-block: $spacing-05;\n  margin-inline: $spacing-05;\n  max-block-size: $spacing-10;\n}\n\n:host(#{$prefix}-card-header-media) .#{$prefix}--card__header-media {\n  display: contents;\n}\n\n:host(#{$prefix}-card-title) {\n  display: block;\n  min-inline-size: 0;\n}\n\n:host(#{$prefix}-card-title-media) {\n  display: block;\n}\n\n:host(#{$prefix}-card-header)\n  .#{$prefix}--card__header\n  ::slotted(#{$prefix}-card-actions) {\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-end;\n  block-size: $spacing-07;\n  gap: $spacing-02;\n  inline-size: 50%;\n  inset-block-start: $spacing-03;\n  inset-inline-end: $spacing-03;\n  max-inline-size: 50%;\n}\n\n:host(#{$prefix}-card-actions) {\n  // Provide a positioning context for the shadow-DOM overflow menu.\n  position: relative;\n}\n\n// The overflow menu renders in shadow DOM but visually aligns with the\n// sentinel (which is hidden when not overflowing). `position:absolute` takes\n// it out of flow; the host's `position:relative` is the containing block.\n:host(#{$prefix}-card-actions) .#{$prefix}--card__actions-overflow-menu {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n}\n\n:host(#{$prefix}-card-action) {\n  display: block;\n}\n\n// The overflow handler sets data-hidden on items that don't fit.\n// This hides them from view while keeping them in the DOM for measurement.\n:host(#{$prefix}-card-action[data-hidden]) {\n  display: none;\n}\n"],"mappings":""}

package/es/components/card/defs.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Card density.
+ */
+export declare enum CARD_DENSITY {
+    /**
+     * Productive density — heading-compact-02 typography.
+     */
+    PRODUCTIVE = "productive",
+    /**
+     * Expressive density — heading-03 typography.
+     */
+    EXPRESSIVE = "expressive"
+}
+/**
+ * Horizontal card media position.
+ */
+export declare enum CARD_MEDIA_POSITION {
+    /**
+     * Media on the inline-start side (default).
+     */
+    START = "start",
+    /**
+     * Media on the inline-end side.
+     */
+    END = "end"
+}
+//# sourceMappingURL=defs.d.ts.map

package/es/components/card/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/card/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,YAAY;IACtB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,oBAAY,mBAAmB;IAC7B;;OAEG;IACH,KAAK,UAAU;IAEf;;OAEG;IACH,GAAG,QAAQ;CACZ"}

package/es/components/card/defs.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//#region src/components/card/defs.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Card density.
+*/
+let CARD_DENSITY = /* @__PURE__ */ function(CARD_DENSITY) {
+	/**
+	* Productive density — heading-compact-02 typography.
+	*/
+	CARD_DENSITY["PRODUCTIVE"] = "productive";
+	/**
+	* Expressive density — heading-03 typography.
+	*/
+	CARD_DENSITY["EXPRESSIVE"] = "expressive";
+	return CARD_DENSITY;
+}({});
+/**
+* Horizontal card media position.
+*/
+let CARD_MEDIA_POSITION = /* @__PURE__ */ function(CARD_MEDIA_POSITION) {
+	/**
+	* Media on the inline-start side (default).
+	*/
+	CARD_MEDIA_POSITION["START"] = "start";
+	/**
+	* Media on the inline-end side.
+	*/
+	CARD_MEDIA_POSITION["END"] = "end";
+	return CARD_MEDIA_POSITION;
+}({});
+//#endregion
+export { CARD_DENSITY, CARD_MEDIA_POSITION };
+
+//# sourceMappingURL=defs.js.map

package/es/components/card/defs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/card/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Card density.\n */\nexport enum CARD_DENSITY {\n  /**\n   * Productive density — heading-compact-02 typography.\n   */\n  PRODUCTIVE = 'productive',\n\n  /**\n   * Expressive density — heading-03 typography.\n   */\n  EXPRESSIVE = 'expressive',\n}\n\n/**\n * Horizontal card media position.\n */\nexport enum CARD_MEDIA_POSITION {\n  /**\n   * Media on the inline-start side (default).\n   */\n  START = 'start',\n\n  /**\n   * Media on the inline-end side.\n   */\n  END = 'end',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,eAAL,yBAAA,cAAA;;;;CAIL,aAAA,gBAAA;;;;CAKA,aAAA,gBAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,IAAY,sBAAL,yBAAA,qBAAA;;;;CAIL,oBAAA,WAAA;;;;CAKA,oBAAA,SAAA;;AACF,EAAA,CAAA,CAAA"}

package/es/components/card/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './card';
+import './card-header';
+import './card-body';
+import './card-footer';
+import './card-media';
+import './card-header-media';
+import './card-title';
+import './card-title-media';
+import './card-actions';
+import './card-action';
+//# sourceMappingURL=index.d.ts.map

package/es/components/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,eAAe,CAAC"}

package/es/components/card/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "./card.js";
+import "./card-action.js";
+import "./card-actions.js";
+import "./card-body.js";
+import "./card-footer.js";
+import "./card-header.js";
+import "./card-header-media.js";
+import "./card-media.js";
+import "./card-title.js";
+import "./card-title-media.js";

package/es/components/tile/clickable-tile.js

@@ -16,8 +16,8 @@ import tile_default from "./tile.scss.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import AILabel24 from "@carbon/icons/es/ai-label/24.js";
 import ArrowRight16 from "@carbon/icons/es/arrow--right/16.js";
+import AILabel24 from "@carbon/icons/es/ai-label/24.js";
 import Error16 from "@carbon/icons/es/error/16.js";
 //#region src/components/tile/clickable-tile.ts
 /**

package/es/components/user-avatar/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './user-avatar';
+//# sourceMappingURL=index.d.ts.map

package/es/components/user-avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,eAAe,CAAC"}

package/es/components/user-avatar/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "./user-avatar.js";

package/es/components/user-avatar/user-avatar.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2025, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '../tooltip/index';
+declare const CDSUserAvatar_base: {
+    new (...args: any[]): {
+        _handles: Set<import("../../globals/internal/handle").default>;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+    };
+    _hostListeners: {
+        [listenerName: string]: {
+            [type: string]: {
+                options?: boolean | AddEventListenerOptions;
+            };
+        };
+    };
+} & typeof LitElement;
+/**
+ * User Avatar.
+ *
+ * @element cds-user-avatar
+ */
+declare class CDSUserAvatar extends CDSUserAvatar_base {
+    /**
+     * Specify the text of the tooltip.
+     * Can be string
+     */
+    tooltipText: any;
+    /**
+     * Specify the alignment of the tooltip.
+     */
+    tooltipAlignment: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the
+     * user's full name. The first two capital letters of the user's name will be
+     * used as the name.
+     */
+    name: any;
+    /**
+     * Set the size of the avatar circle.
+     */
+    size: string;
+    /**
+     * When passing the image prop, supply a full path to the image to be
+     * displayed.
+     */
+    image: any;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the
+     * image for screen reader.
+     */
+    imageDescription: any;
+    /**
+     * Specify the background color for UserAvatar.
+     */
+    backgroundColor: string;
+    /**
+     * Set theme in which the component will be rendered.
+     */
+    theme: any;
+    private _hasRenderIcon;
+    private _observerMutation;
+    private _handleMutation;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: any;
+}
+export default CDSUserAvatar;
+//# sourceMappingURL=user-avatar.d.ts.map

package/es/components/user-avatar/user-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/user-avatar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,kBAAkB,CAAC;;;;;;;;;;uBAaiB,CAAC;;;;;AAP5C;;;;GAIG;AAEH,cACM,aAAc,SAAQ,kBAA6B;IACvD;;;OAGG;IAEH,WAAW,MAAC;IAEZ;;OAEG;IAEH,gBAAgB,SAAY;IAE5B;;;;OAIG;IAEH,IAAI,MAAC;IAEL;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;;OAGG;IAEH,KAAK,MAAC;IAEN;;;OAGG;IAEH,gBAAgB,MAAC;IAEjB;;OAEG;IAEH,eAAe,SAAkB;IAEjC;;OAEG;IAEH,KAAK,MAAC;IAGN,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,eAAe,CAErB;IAEF,iBAAiB;IAYjB,oBAAoB;IAQpB,OAAO,CAAC,aAAa;IAIrB,MAAM;IAiEN,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}