@carbon/web-components 2.62.0 → 2.63.0

package/es-custom/components/card/card-header.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { LitElement } from 'lit';
+/**
+ * Card header — header section of the card.
+ *
+ * @element cds-custom-card-header
+ * @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.
+ * @slot decorator - Slot for cds-custom-ai-label or other decorator element.
+ */
+declare class CDSCardHeader extends LitElement {
+    private _cardContext;
+    private _handleDefaultSlotChange;
+    private _handleDecoratorInteraction;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSCardHeader;
+//# sourceMappingURL=card-header.d.ts.map

package/es-custom/components/card/card-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC;;;;;;GAMG;AACH,cACM,aAAc,SAAQ,UAAU;IAGpC,OAAO,CAAC,YAAY,CAAwC;IAE5D,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,2BAA2B;IAInC,MAAM;IAiBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}

package/es-custom/components/card/card-header.js

@@ -0,0 +1,70 @@
+/**
+ * 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 { cardContext, cardDefaultContext } from "./card-context.js";
+import card_default from "./card.scss.js";
+import { LitElement, html } from "lit";
+import { state } from "lit/decorators.js";
+import { consume } from "@lit/context";
+//#region src/components/card/card-header.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 header — header section of the card.
+*
+* @element cds-custom-card-header
+* @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.
+* @slot decorator - Slot for cds-custom-ai-label or other decorator element.
+*/
+let CDSCardHeader = class CDSCardHeader extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._cardContext = cardDefaultContext;
+	}
+	_handleDefaultSlotChange({ target }) {
+		if (target.assignedElements({ flatten: true }).some((el) => el.matches(`cds-custom-card-title-media`))) this.setAttribute("has-title-media", "");
+		else this.removeAttribute("has-title-media");
+	}
+	_handleDecoratorInteraction(e) {
+		e.stopPropagation();
+	}
+	render() {
+		this._cardContext;
+		return html`
+      <div class="${"cds-custom"}--card__header">
+        <slot @slotchange=${this._handleDefaultSlotChange}></slot>
+        <div
+          class="${"cds-custom"}--card__decorator"
+          role="presentation"
+          @click=${this._handleDecoratorInteraction}
+          @keydown=${this._handleDecoratorInteraction}>
+          <slot name="decorator"></slot>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = card_default;
+	}
+};
+__decorate([consume({
+	context: cardContext,
+	subscribe: true
+}), state()], CDSCardHeader.prototype, "_cardContext", void 0);
+CDSCardHeader = __decorate([carbonElement(`cds-custom-card-header`)], CDSCardHeader);
+var card_header_default = CDSCardHeader;
+//#endregion
+export { card_header_default as default };
+
+//# sourceMappingURL=card-header.js.map

package/es-custom/components/card/card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.js","names":["slot","styles","customElement"],"sources":["../../../src/components/card/card-header.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 { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n  cardContext,\n  cardDefaultContext,\n  type CardContextValue,\n} from './card-context';\nimport styles from './card.scss?lit';\n\n/**\n * Card header — header section of the card.\n *\n * @element cds-custom-card-header\n * @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.\n * @slot decorator - Slot for cds-custom-ai-label or other decorator element.\n */\n@customElement(`${prefix}-card-header`)\nclass CDSCardHeader extends LitElement {\n  @consume({ context: cardContext, subscribe: true })\n  @state()\n  private _cardContext: CardContextValue = cardDefaultContext;\n\n  private _handleDefaultSlotChange({ target }: Event) {\n    const slot = target as HTMLSlotElement;\n    const hasTitleMedia = slot\n      .assignedElements({ flatten: true })\n      .some((el) => el.matches(`${prefix}-card-title-media`));\n\n    if (hasTitleMedia) {\n      this.setAttribute('has-title-media', '');\n    } else {\n      this.removeAttribute('has-title-media');\n    }\n  }\n\n  private _handleDecoratorInteraction(e: Event) {\n    e.stopPropagation();\n  }\n\n  render() {\n    void this._cardContext;\n\n    return html`\n      <div class=\"${prefix}--card__header\">\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n        <div\n          class=\"${prefix}--card__decorator\"\n          role=\"presentation\"\n          @click=${this._handleDecoratorInteraction}\n          @keydown=${this._handleDecoratorInteraction}>\n          <slot name=\"decorator\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCardHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;sBAGI;;CAEzC,yBAAiC,EAAE,UAAiB;EAMlD,IAJsBA,OACnB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,MAAM,OAAO,GAAG,QAAQ,sBAA4B,CAEvC,GACd,KAAK,aAAa,mBAAmB,EAAE;OAEvC,KAAK,gBAAgB,iBAAiB;CAE1C;CAEA,4BAAoC,GAAU;EAC5C,EAAE,gBAAgB;CACpB;CAEA,SAAS;EACP,KAAU;EAEV,OAAO,IAAI;0BACY;4BACC,KAAK,yBAAyB;;yBAEhC;;mBAEP,KAAK,4BAA4B;qBAC/B,KAAK,4BAA4B;;;;;CAKpD;;gBAEgBC;;AAClB;YAvCG,QAAQ;CAAE,SAAS;CAAa,WAAW;AAAK,CAAC,GACjD,MAAM,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;4BAHRC,cAAc,iBAAuB,CAAA,GAAA,aAAA;AA2CtC,IAAA,sBAAe"}

package/es-custom/components/card/card-media.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { LitElement } from 'lit';
+/**
+ * Valid aspect-ratio values for the media slot.
+ */
+type AspectRatio = '16x9' | '9x16' | '2x1' | '1x2' | '4x3' | '3x4' | '1x1' | string;
+/**
+ * Card media — aspect-ratio media slot.
+ *
+ * @element cds-custom-card-media
+ * @slot - Default slot for an image, video, or other media content.
+ */
+declare class CDSCardMedia extends LitElement {
+    private _cardContext;
+    /**
+     * Aspect ratio of the media container in vertical layout.
+     * E.g. `'16x9'`, `'4x3'`, `'1x1'`. Ignored in horizontal layout.
+     */
+    ratio: AspectRatio;
+    /**
+     * Width of the media column in horizontal layout.
+     * Accepts any valid CSS width value (e.g. `'200px'`, `'40%'`).
+     * Has no effect in vertical (default) layout.
+     * @default '33.33%'
+     */
+    mediaWidth: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSCardMedia;
+//# sourceMappingURL=card-media.d.ts.map

package/es-custom/components/card/card-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-media.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAcvC;;GAEG;AACH,KAAK,WAAW,GACZ,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AAEX;;;;;GAKG;AACH,cACM,YAAa,SAAQ,UAAU;IAGnC,OAAO,CAAC,YAAY,CAAwC;IAE5D;;;OAGG;IAEH,KAAK,EAAE,WAAW,CAAM;IAExB;;;;;OAKG;IAEH,UAAU,SAAY;IAEtB,OAAO;IAQP,MAAM;IAyBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC"}

package/es-custom/components/card/card-media.js

@@ -0,0 +1,79 @@
+/**
+ * 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 { cardContext, cardDefaultContext } from "./card-context.js";
+import card_default from "./card.scss.js";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { consume } from "@lit/context";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/card/card-media.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 media — aspect-ratio media slot.
+*
+* @element cds-custom-card-media
+* @slot - Default slot for an image, video, or other media content.
+*/
+let CDSCardMedia = class CDSCardMedia extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._cardContext = cardDefaultContext;
+		this.ratio = "";
+		this.mediaWidth = "33.33%";
+	}
+	updated() {
+		if (this._cardContext.horizontal) this.setAttribute("slot", "media");
+		else this.removeAttribute("slot");
+	}
+	render() {
+		const blockClass = `cds-custom--card`;
+		const { ratio, mediaWidth, _cardContext } = this;
+		if (_cardContext.horizontal) return html`
+        <div
+          class="${blockClass}__media ${blockClass}__media--horizontal"
+          style=${styleMap({ [`--cds--card--media-width`]: mediaWidth })}>
+          <slot></slot>
+        </div>
+      `;
+		return html`<div class=${classMap({
+			[`${blockClass}__media`]: true,
+			[`cds-custom--aspect-ratio`]: Boolean(ratio),
+			[`cds-custom--aspect-ratio--${ratio}`]: Boolean(ratio)
+		})}><slot></slot></div>`;
+	}
+	static {
+		this.styles = card_default;
+	}
+};
+__decorate([consume({
+	context: cardContext,
+	subscribe: true
+}), state()], CDSCardMedia.prototype, "_cardContext", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSCardMedia.prototype, "ratio", void 0);
+__decorate([property({
+	attribute: "media-width",
+	reflect: true
+})], CDSCardMedia.prototype, "mediaWidth", void 0);
+CDSCardMedia = __decorate([carbonElement(`cds-custom-card-media`)], CDSCardMedia);
+var card_media_default = CDSCardMedia;
+//#endregion
+export { card_media_default as default };
+
+//# sourceMappingURL=card-media.js.map

package/es-custom/components/card/card-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.js","names":["styles","customElement"],"sources":["../../../src/components/card/card-media.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 { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n  cardContext,\n  cardDefaultContext,\n  type CardContextValue,\n} from './card-context';\nimport styles from './card.scss?lit';\n\n/**\n * Valid aspect-ratio values for the media slot.\n */\ntype AspectRatio =\n  | '16x9'\n  | '9x16'\n  | '2x1'\n  | '1x2'\n  | '4x3'\n  | '3x4'\n  | '1x1'\n  | string;\n\n/**\n * Card media — aspect-ratio media slot.\n *\n * @element cds-custom-card-media\n * @slot - Default slot for an image, video, or other media content.\n */\n@customElement(`${prefix}-card-media`)\nclass CDSCardMedia extends LitElement {\n  @consume({ context: cardContext, subscribe: true })\n  @state()\n  private _cardContext: CardContextValue = cardDefaultContext;\n\n  /**\n   * Aspect ratio of the media container in vertical layout.\n   * E.g. `'16x9'`, `'4x3'`, `'1x1'`. Ignored in horizontal layout.\n   */\n  @property({ type: String, reflect: true })\n  ratio: AspectRatio = '';\n\n  /**\n   * Width of the media column in horizontal layout.\n   * Accepts any valid CSS width value (e.g. `'200px'`, `'40%'`).\n   * Has no effect in vertical (default) layout.\n   * @default '33.33%'\n   */\n  @property({ attribute: 'media-width', reflect: true })\n  mediaWidth = '33.33%';\n\n  updated() {\n    if (this._cardContext.horizontal) {\n      this.setAttribute('slot', 'media');\n    } else {\n      this.removeAttribute('slot');\n    }\n  }\n\n  render() {\n    const blockClass = `${prefix}--card`;\n    const { ratio, mediaWidth, _cardContext } = this;\n\n    if (_cardContext.horizontal) {\n      return html`\n        <div\n          class=\"${blockClass}__media ${blockClass}__media--horizontal\"\n          style=${styleMap({\n            [`--${prefix}--card--media-width`]: mediaWidth,\n          })}>\n          <slot></slot>\n        </div>\n      `;\n    }\n\n    const classes = classMap({\n      [`${blockClass}__media`]: true,\n      [`${prefix}--aspect-ratio`]: Boolean(ratio),\n      [`${prefix}--aspect-ratio--${ratio}`]: Boolean(ratio),\n    });\n\n    return html`<div class=${classes}><slot></slot></div>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCardMedia;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAA,eAAA,MACM,qBAAqB,WAAW;;;sBAGK;eAOpB;oBASR;;CAEb,UAAU;EACR,IAAI,KAAK,aAAa,YACpB,KAAK,aAAa,QAAQ,OAAO;OAEjC,KAAK,gBAAgB,MAAM;CAE/B;CAEA,SAAS;EACP,MAAM,aAAa;EACnB,MAAM,EAAE,OAAO,YAAY,iBAAiB;EAE5C,IAAI,aAAa,YACf,OAAO,IAAI;;mBAEE,WAAW,UAAU,WAAW;kBACjC,SAAS,GACd,6BAAmC,WACtC,CAAC,EAAE;;;;EAYT,OAAO,IAAI,cANK,SAAS;IACtB,GAAG,WAAW,WAAW;IACzB,sBAA4B,QAAQ,KAAK;IACzC,sBAA4B,UAAU,QAAQ,KAAK;EACtD,CAE+B,EAAE;CACnC;;gBAEgBA;;AAClB;YAtDG,QAAQ;CAAE,SAAS;CAAa,WAAW;AAAK,CAAC,GACjD,MAAM,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;YAON,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;YASxC,SAAS;CAAE,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;2BAnBtDC,cAAc,gBAAsB,CAAA,GAAA,YAAA;AA0DrC,IAAA,qBAAe"}

package/es-custom/components/card/card-title-media.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { LitElement } from 'lit';
+/**
+ * Card title media — media slot positioned to the left of the card title.
+ *
+ * @element cds-custom-card-title-media
+ * @slot - Default slot for an icon, avatar, or pictogram.
+ */
+declare class CDSCardTitleMedia extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSCardTitleMedia;
+//# sourceMappingURL=card-title-media.d.ts.map

package/es-custom/components/card/card-title-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title-media.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-title-media.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;;GAKG;AACH,cACM,iBAAkB,SAAQ,UAAU;IACxC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}

package/es-custom/components/card/card-title-media.js

@@ -0,0 +1,39 @@
+/**
+ * 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 card_default from "./card.scss.js";
+import { LitElement, html } from "lit";
+//#region src/components/card/card-title-media.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 title media — media slot positioned to the left of the card title.
+*
+* @element cds-custom-card-title-media
+* @slot - Default slot for an icon, avatar, or pictogram.
+*/
+let CDSCardTitleMedia = class CDSCardTitleMedia extends LitElement {
+	render() {
+		return html`<div class="${"cds-custom"}--card__title-media"><slot></slot></div>`;
+	}
+	static {
+		this.styles = card_default;
+	}
+};
+CDSCardTitleMedia = __decorate([carbonElement(`cds-custom-card-title-media`)], CDSCardTitleMedia);
+var card_title_media_default = CDSCardTitleMedia;
+//#endregion
+export { card_title_media_default as default };
+
+//# sourceMappingURL=card-title-media.js.map

package/es-custom/components/card/card-title-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title-media.js","names":["styles","customElement"],"sources":["../../../src/components/card/card-title-media.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 { LitElement, html } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './card.scss?lit';\n\n/**\n * Card title media — media slot positioned to the left of the card title.\n *\n * @element cds-custom-card-title-media\n * @slot - Default slot for an icon, avatar, or pictogram.\n */\n@customElement(`${prefix}-card-title-media`)\nclass CDSCardTitleMedia extends LitElement {\n  render() {\n    return html`<div class=\"${prefix}--card__title-media\"><slot></slot></div>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCardTitleMedia;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,oBAAA,MACM,0BAA0B,WAAW;CACzC,SAAS;EACP,OAAO,IAAI,eAAA,MAAsB;CACnC;;gBAEgBA;;AAClB;gCAPCC,cAAc,sBAA4B,CAAA,GAAA,iBAAA;AAS3C,IAAA,2BAAe"}

package/es-custom/components/card/card-title.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 { LitElement } from 'lit';
+/**
+ * Card title — primary heading within cds-custom-card-header.
+ *
+ * @element cds-custom-card-title
+ * @slot - Title text (required).
+ * @slot label - Rich label content rendered above the title (overrides `label` attr).
+ * @slot title-start - Leading icon/content (16px productive, 24px expressive).
+ * @slot title-end - Trailing icon/content.
+ * @slot description - Rich description rendered below the title (overrides `description` attr).
+ */
+declare class CDSCardTitle extends LitElement {
+    /**
+     * Enable truncation on the title text row.
+     */
+    titleTruncate: string | null;
+    /**
+     * Maximum width applied to the title text row when truncation is active.
+     * @default '100%'
+     */
+    maxWidth: string;
+    /**
+     * Optional label text rendered above the title (plain string).
+     * Slot `label` takes precedence when populated.
+     */
+    label: string;
+    /**
+     * Enable truncation on the label.
+     */
+    labelTruncate: string | null;
+    /**
+     * Optional description text rendered below the title (plain string).
+     */
+    description: string;
+    /**
+     * Enable truncation on the description.
+     */
+    descriptionTruncate: string | null;
+    private _hasTitleStart;
+    private _onTitleStartSlotChange;
+    private _parseTruncate;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSCardTitle;
+//# sourceMappingURL=card-title.d.ts.map

package/es-custom/components/card/card-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-title.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAQhD;;;;;;;;;GASG;AACH,cACM,YAAa,SAAQ,UAAU;IACnC;;OAEG;IAEH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC;;;OAGG;IAEH,QAAQ,SAAU;IAElB;;;OAGG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf;;OAEG;IAEH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC;;OAEG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEjC,OAAO,CAAC,cAAc,CAAS;IAExC,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,cAAc;IAOtB,MAAM;IAmFN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC"}

package/es-custom/components/card/card-title.js

@@ -0,0 +1,144 @@
+/**
+ * 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 card_default from "./card.scss.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/card/card-title.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 title — primary heading within cds-custom-card-header.
+*
+* @element cds-custom-card-title
+* @slot - Title text (required).
+* @slot label - Rich label content rendered above the title (overrides `label` attr).
+* @slot title-start - Leading icon/content (16px productive, 24px expressive).
+* @slot title-end - Trailing icon/content.
+* @slot description - Rich description rendered below the title (overrides `description` attr).
+*/
+let CDSCardTitle = class CDSCardTitle extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.titleTruncate = null;
+		this.maxWidth = "100%";
+		this.labelTruncate = null;
+		this.descriptionTruncate = null;
+		this._hasTitleStart = false;
+	}
+	_onTitleStartSlotChange(e) {
+		const slot = e.target;
+		this._hasTitleStart = slot.assignedElements().length > 0;
+	}
+	_parseTruncate(value) {
+		if (value === null) return false;
+		const num = Number(value);
+		if (!isNaN(num) && num > 0) return num;
+		return true;
+	}
+	render() {
+		const blockClass = `cds-custom--card`;
+		const titleTruncate = this._parseTruncate(this.titleTruncate);
+		const labelTruncate = this._parseTruncate(this.labelTruncate);
+		const descTruncate = this._parseTruncate(this.descriptionTruncate);
+		const isTitleMulti = typeof titleTruncate === "number";
+		const isLabelMulti = typeof labelTruncate === "number";
+		const isDescMulti = typeof descTruncate === "number";
+		const titleVars = titleTruncate !== false ? {
+			[`--cds--card--title-max-width`]: this.maxWidth,
+			...isTitleMulti && { [`--cds--card--title-line-clamp`]: String(titleTruncate) }
+		} : {};
+		const labelVars = isLabelMulti ? { [`--cds--card--label-line-clamp`]: String(labelTruncate) } : {};
+		const descVars = isDescMulti ? { [`--cds--card--description-line-clamp`]: String(descTruncate) } : {};
+		const textRowClasses = classMap({
+			[`${blockClass}__title-text-row`]: true,
+			[`${blockClass}__title-text-row--truncate`]: titleTruncate === true,
+			[`${blockClass}__title-text-row--truncate-multi`]: isTitleMulti,
+			[`${blockClass}__title-text-row--with-start-icon`]: this._hasTitleStart
+		});
+		const labelClasses = classMap({
+			[`${blockClass}__label`]: true,
+			[`${blockClass}__label--truncate`]: labelTruncate === true,
+			[`${blockClass}__label--truncate-multi`]: isLabelMulti
+		});
+		const descClasses = classMap({
+			[`${blockClass}__description`]: true,
+			[`${blockClass}__description--truncate`]: descTruncate === true,
+			[`${blockClass}__description--truncate-multi`]: isDescMulti
+		});
+		return html`
+      <div class="${blockClass}__title">
+        <slot name="label">
+          ${this.label ? html`<div class=${labelClasses} style=${styleMap(labelVars)}>
+                ${this.label}
+              </div>` : nothing}
+        </slot>
+
+        <span class=${textRowClasses} style=${styleMap(titleVars)}>
+          <span class="${blockClass}__title-start-icon">
+            <slot
+              name="title-start"
+              @slotchange=${this._onTitleStartSlotChange}></slot>
+          </span>
+          <slot></slot>
+          <span class="${blockClass}__title-end-icon">
+            <slot name="title-end"></slot>
+          </span>
+        </span>
+
+        <slot name="description">
+          ${this.description ? html`<div class=${descClasses} style=${styleMap(descVars)}>
+                ${this.description}
+              </div>` : nothing}
+        </slot>
+      </div>
+    `;
+	}
+	static {
+		this.styles = card_default;
+	}
+};
+__decorate([property({
+	attribute: "title-truncate",
+	reflect: true
+})], CDSCardTitle.prototype, "titleTruncate", void 0);
+__decorate([property({
+	attribute: "max-width",
+	reflect: true
+})], CDSCardTitle.prototype, "maxWidth", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSCardTitle.prototype, "label", void 0);
+__decorate([property({
+	attribute: "label-truncate",
+	reflect: true
+})], CDSCardTitle.prototype, "labelTruncate", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSCardTitle.prototype, "description", void 0);
+__decorate([property({
+	attribute: "description-truncate",
+	reflect: true
+})], CDSCardTitle.prototype, "descriptionTruncate", void 0);
+__decorate([state()], CDSCardTitle.prototype, "_hasTitleStart", void 0);
+CDSCardTitle = __decorate([carbonElement(`cds-custom-card-title`)], CDSCardTitle);
+var card_title_default = CDSCardTitle;
+//#endregion
+export { card_title_default as default };
+
+//# sourceMappingURL=card-title.js.map

package/es-custom/components/card/card-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.js","names":["styles","customElement"],"sources":["../../../src/components/card/card-title.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 { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './card.scss?lit';\n\n/**\n * Card title — primary heading within cds-custom-card-header.\n *\n * @element cds-custom-card-title\n * @slot - Title text (required).\n * @slot label - Rich label content rendered above the title (overrides `label` attr).\n * @slot title-start - Leading icon/content (16px productive, 24px expressive).\n * @slot title-end - Trailing icon/content.\n * @slot description - Rich description rendered below the title (overrides `description` attr).\n */\n@customElement(`${prefix}-card-title`)\nclass CDSCardTitle extends LitElement {\n  /**\n   * Enable truncation on the title text row.\n   */\n  @property({ attribute: 'title-truncate', reflect: true })\n  titleTruncate: string | null = null;\n\n  /**\n   * Maximum width applied to the title text row when truncation is active.\n   * @default '100%'\n   */\n  @property({ attribute: 'max-width', reflect: true })\n  maxWidth = '100%';\n\n  /**\n   * Optional label text rendered above the title (plain string).\n   * Slot `label` takes precedence when populated.\n   */\n  @property({ type: String, reflect: true })\n  label!: string;\n\n  /**\n   * Enable truncation on the label.\n   */\n  @property({ attribute: 'label-truncate', reflect: true })\n  labelTruncate: string | null = null;\n\n  /**\n   * Optional description text rendered below the title (plain string).\n   */\n  @property({ type: String, reflect: true })\n  description!: string;\n\n  /**\n   * Enable truncation on the description.\n   */\n  @property({ attribute: 'description-truncate', reflect: true })\n  descriptionTruncate: string | null = null;\n\n  @state() private _hasTitleStart = false;\n\n  private _onTitleStartSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasTitleStart = slot.assignedElements().length > 0;\n  }\n\n  private _parseTruncate(value: string | null): false | true | number {\n    if (value === null) return false;\n    const num = Number(value);\n    if (!isNaN(num) && num > 0) return num;\n    return true; // boolean attr present\n  }\n\n  render() {\n    const blockClass = `${prefix}--card`;\n\n    const titleTruncate = this._parseTruncate(this.titleTruncate);\n    const labelTruncate = this._parseTruncate(this.labelTruncate);\n    const descTruncate = this._parseTruncate(this.descriptionTruncate);\n\n    const isTitleMulti = typeof titleTruncate === 'number';\n    const isLabelMulti = typeof labelTruncate === 'number';\n    const isDescMulti = typeof descTruncate === 'number';\n\n    const titleVars =\n      titleTruncate !== false\n        ? {\n            [`--${prefix}--card--title-max-width`]: this.maxWidth,\n            ...(isTitleMulti && {\n              [`--${prefix}--card--title-line-clamp`]: String(titleTruncate),\n            }),\n          }\n        : {};\n\n    const labelVars = isLabelMulti\n      ? { [`--${prefix}--card--label-line-clamp`]: String(labelTruncate) }\n      : {};\n\n    const descVars = isDescMulti\n      ? {\n          [`--${prefix}--card--description-line-clamp`]: String(descTruncate),\n        }\n      : {};\n\n    const textRowClasses = classMap({\n      [`${blockClass}__title-text-row`]: true,\n      [`${blockClass}__title-text-row--truncate`]: titleTruncate === true,\n      [`${blockClass}__title-text-row--truncate-multi`]: isTitleMulti,\n      [`${blockClass}__title-text-row--with-start-icon`]: this._hasTitleStart,\n    });\n\n    const labelClasses = classMap({\n      [`${blockClass}__label`]: true,\n      [`${blockClass}__label--truncate`]: labelTruncate === true,\n      [`${blockClass}__label--truncate-multi`]: isLabelMulti,\n    });\n\n    const descClasses = classMap({\n      [`${blockClass}__description`]: true,\n      [`${blockClass}__description--truncate`]: descTruncate === true,\n      [`${blockClass}__description--truncate-multi`]: isDescMulti,\n    });\n\n    return html`\n      <div class=\"${blockClass}__title\">\n        <slot name=\"label\">\n          ${this.label\n            ? html`<div class=${labelClasses} style=${styleMap(labelVars)}>\n                ${this.label}\n              </div>`\n            : nothing}\n        </slot>\n\n        <span class=${textRowClasses} style=${styleMap(titleVars)}>\n          <span class=\"${blockClass}__title-start-icon\">\n            <slot\n              name=\"title-start\"\n              @slotchange=${this._onTitleStartSlotChange}></slot>\n          </span>\n          <slot></slot>\n          <span class=\"${blockClass}__title-end-icon\">\n            <slot name=\"title-end\"></slot>\n          </span>\n        </span>\n\n        <slot name=\"description\">\n          ${this.description\n            ? html`<div class=${descClasses} style=${styleMap(descVars)}>\n                ${this.description}\n              </div>`\n            : nothing}\n        </slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCardTitle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,eAAA,MACM,qBAAqB,WAAW;;;uBAKL;kBAOpB;uBAaoB;6BAYM;wBAEH;;CAElC,wBAAgC,GAAU;EACxC,MAAM,OAAO,EAAE;EACf,KAAK,iBAAiB,KAAK,iBAAiB,CAAC,CAAC,SAAS;CACzD;CAEA,eAAuB,OAA6C;EAClE,IAAI,UAAU,MAAM,OAAO;EAC3B,MAAM,MAAM,OAAO,KAAK;EACxB,IAAI,CAAC,MAAM,GAAG,KAAK,MAAM,GAAG,OAAO;EACnC,OAAO;CACT;CAEA,SAAS;EACP,MAAM,aAAa;EAEnB,MAAM,gBAAgB,KAAK,eAAe,KAAK,aAAa;EAC5D,MAAM,gBAAgB,KAAK,eAAe,KAAK,aAAa;EAC5D,MAAM,eAAe,KAAK,eAAe,KAAK,mBAAmB;EAEjE,MAAM,eAAe,OAAO,kBAAkB;EAC9C,MAAM,eAAe,OAAO,kBAAkB;EAC9C,MAAM,cAAc,OAAO,iBAAiB;EAE5C,MAAM,YACJ,kBAAkB,QACd;IACG,iCAAuC,KAAK;GAC7C,GAAI,gBAAgB,GACjB,kCAAwC,OAAO,aAAa,EAC/D;EACF,IACA,CAAC;EAEP,MAAM,YAAY,eACd,GAAG,kCAAwC,OAAO,aAAa,EAAE,IACjE,CAAC;EAEL,MAAM,WAAW,cACb,GACG,wCAA8C,OAAO,YAAY,EACpE,IACA,CAAC;EAEL,MAAM,iBAAiB,SAAS;IAC7B,GAAG,WAAW,oBAAoB;IAClC,GAAG,WAAW,8BAA8B,kBAAkB;IAC9D,GAAG,WAAW,oCAAoC;IAClD,GAAG,WAAW,qCAAqC,KAAK;EAC3D,CAAC;EAED,MAAM,eAAe,SAAS;IAC3B,GAAG,WAAW,WAAW;IACzB,GAAG,WAAW,qBAAqB,kBAAkB;IACrD,GAAG,WAAW,2BAA2B;EAC5C,CAAC;EAED,MAAM,cAAc,SAAS;IAC1B,GAAG,WAAW,iBAAiB;IAC/B,GAAG,WAAW,2BAA2B,iBAAiB;IAC1D,GAAG,WAAW,iCAAiC;EAClD,CAAC;EAED,OAAO,IAAI;oBACK,WAAW;;YAEnB,KAAK,QACH,IAAI,cAAc,aAAa,SAAS,SAAS,SAAS,EAAE;kBACxD,KAAK,MAAM;wBAEf,QAAQ;;;sBAGA,eAAe,SAAS,SAAS,SAAS,EAAE;yBACzC,WAAW;;;4BAGR,KAAK,wBAAwB;;;yBAGhC,WAAW;;;;;;YAMxB,KAAK,cACH,IAAI,cAAc,YAAY,SAAS,SAAS,QAAQ,EAAE;kBACtD,KAAK,YAAY;wBAErB,QAAQ;;;;CAIpB;;gBAEgBA;;AAClB;YArIG,SAAS;CAAE,WAAW;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,iBAAA,KAAA,CAAA;YAOvD,SAAS;CAAE,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YAOlD,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,WAAW;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,iBAAA,KAAA,CAAA;YAMvD,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,WAAW;CAAwB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,uBAAA,KAAA,CAAA;YAG7D,MAAM,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;2BAxCRC,cAAc,gBAAsB,CAAA,GAAA,YAAA;AA4IrC,IAAA,qBAAe"}

package/es-custom/components/card/card.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { PropertyValues } from 'lit';
+import CDSLink from '../link/link';
+import { type CardContextValue } from './card-context';
+import { CARD_DENSITY, CARD_MEDIA_POSITION } from './defs';
+export { CARD_DENSITY, CARD_MEDIA_POSITION };
+/**
+ * Card — composable container component.
+ *
+ * @element cds-custom-card
+ * @slot - Default slot for cds-custom-card-header, cds-custom-card-body, cds-custom-card-footer, cds-custom-card-media.
+ * @slot decorator - Slot for cds-custom-ai-label. Sets `has-ai-label` attribute when populated.
+ * @slot footer-icon - Override the default ArrowRight icon in the clickable footer.
+ */
+declare class CDSCard extends CDSLink {
+    cardContext: CardContextValue;
+    /** Set to true when a cds-custom-ai-label is found in the decorator slot. */
+    private _hasAILabel;
+    /**
+     * Makes the entire card surface interactive.
+     */
+    clickable: boolean;
+    /**
+     * Mutes all interaction.
+     */
+    disabled: boolean;
+    /**
+     * Controls heading typography inside the card.
+     */
+    density: CARD_DENSITY;
+    /**
+     * Side-by-side layout: cds-custom-card-media on one side, other content stacked.
+     */
+    horizontal: boolean;
+    /**
+     * Position of the media column when `horizontal` is true.
+     * @default 'start'
+     */
+    mediaPosition: CARD_MEDIA_POSITION;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    private _handleDecoratorSlotChange;
+    private _handleDefaultSlotChange;
+    private _handleClick;
+    private _handleKeydown;
+    /** The BEM class map for the root card div/anchor. */
+    private get _cardClasses();
+    /**
+     * The card's inner content layout.
+     */
+    private _renderContent;
+    /** Clickable-footer affordance (aria-hidden, purely decorative). */
+    private _renderClickableFooter;
+    protected _renderInner(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    protected _renderLink(): import("lit-html").TemplateResult<1>;
+    /**
+     * Selector matching the AI Label element.
+     */
+    static get aiLabelItem(): string;
+    static styles: any;
+}
+export default CDSCard;
+//# sourceMappingURL=card.d.ts.map

package/es-custom/components/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAKpD,OAAO,OAAO,MAAM,cAAc,CAAC;AAInC,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAE7C;;;;;;;GAOG;AACH,cACM,OAAQ,SAAQ,OAAO;IAK3B,WAAW,EAAE,gBAAgB,CAAsB;IAInD,sEAAsE;IAEtE,OAAO,CAAC,WAAW,CAAS;IAI5B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,EAAE,YAAY,CAA2B;IAEhD;;OAEG;IAEH,UAAU,UAAS;IAEnB;;;OAGG;IAEH,aAAa,EAAE,mBAAmB,CAA6B;IAI/D,iBAAiB;IAkBjB,UAAU,CAAC,OAAO,EAAE,cAAc;IAkBlC,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,wBAAwB;IAehC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAUtB,sDAAsD;IACtD,OAAO,KAAK,YAAY,GAUvB;IAED;;OAEG;IACH,OAAO,CAAC,cAAc;IAmBtB,oEAAoE;IACpE,OAAO,CAAC,sBAAsB;IAW9B,SAAS,CAAC,YAAY;IAatB,MAAM;IAIN,SAAS,CAAC,WAAW;IA6BrB;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC"}