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

package/es/components/coachmark/coachmark-header.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 '../button/index';
+declare const CDSCoachmarkHeader_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 & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
+/**
+ * coachmark-header for content header section
+ * @element cds-coachmark-header
+ */
+declare class CDSCoachmarkHeader extends CDSCoachmarkHeader_base {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Tooltip text and aria label for the Drag button icon.
+     */
+    dragIconDescription?: string;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSCoachmarkHeader;
+//# sourceMappingURL=coachmark-header.d.ts.map

package/es/components/coachmark/coachmark-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-header.d.ts","sourceRoot":"","sources":["../../../src/components/coachmark/coachmark-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,iBAAiB,CAAC;;;;;;;;;;uBAcE,CAAC;;;;;AAD5B;;;GAGG;AACH,cACM,kBAAmB,SAAQ,uBAA4C;IAC3E;;OAEG;IAEH,oBAAoB,CAAC,EAAE,MAAM,CAAM;IAEnC;;OAEG;IAEH,mBAAmB,CAAC,EAAE,MAAM,CAAM;IAElC,OAAO,CAAC,YAAY,CAqBlB;IAEF,MAAM;IA+BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC"}

package/es/components/coachmark/coachmark-header.js

@@ -0,0 +1,95 @@
+/**
+ * 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 HostListenerMixin from "../../globals/mixins/host-listener.js";
+import "../button/index.js";
+import { coachmarkDetailsSignal, updateCoachmarkDetailsSignal } from "./coachmark-context.js";
+import coachmark_header_default$1 from "./coachmark-header.scss.js";
+import { LitElement, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { SignalWatcher } from "@lit-labs/signals";
+import Close from "@carbon/icons/es/close/16";
+import Draggable from "@carbon/icons/es/draggable/16";
+//#region src/components/coachmark/coachmark-header.ts
+/**
+* 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.
+*/
+/**
+* coachmark-header for content header section
+* @element cds-coachmark-header
+*/
+let CDSCoachmarkHeader = class CDSCoachmarkHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.closeIconDescription = "";
+		this.dragIconDescription = "";
+		this._handleClick = (event) => {
+			event.stopPropagation();
+			const coachmark = this.closest(`cds-coachmark`);
+			if (coachmark) {
+				coachmark.dispatchEvent(new CustomEvent(`cds-coachmark-request-close`, {
+					bubbles: true,
+					composed: true,
+					cancelable: true,
+					detail: { source: "header-close-button" }
+				}));
+				coachmark.open = false;
+			}
+			updateCoachmarkDetailsSignal({
+				name: "open",
+				detail: false
+			});
+		};
+	}
+	render() {
+		const { floating } = coachmarkDetailsSignal.get();
+		return html`
+      ${floating ? html`
+            <cds-button
+              kind="ghost"
+              size="sm"
+              class="${"cds"}--coachmark-header-drag-handle"
+              tooltip-text="${this.dragIconDescription}">
+              ${iconLoader(Draggable, {
+			slot: "icon",
+			class: `cds--coachmark-header-drag-icon`
+		})}
+            </cds-button>
+          ` : nothing}
+      <slot name="header"></slot>
+      <cds-button
+        kind="ghost"
+        size="sm"
+        class="${"cds"}--coachmark-header-close-button"
+        tooltip-text="${this.closeIconDescription}"
+        @click=${this._handleClick}>
+        ${iconLoader(Close, {
+			slot: "icon",
+			class: `cds--coachmark-header-close-icon`
+		})}
+      </cds-button>
+    `;
+	}
+	static {
+		this.styles = coachmark_header_default$1;
+	}
+};
+__decorate([property({ reflect: true })], CDSCoachmarkHeader.prototype, "closeIconDescription", void 0);
+__decorate([property({ reflect: true })], CDSCoachmarkHeader.prototype, "dragIconDescription", void 0);
+CDSCoachmarkHeader = __decorate([carbonElement(`cds-coachmark-header`)], CDSCoachmarkHeader);
+var coachmark_header_default = CDSCoachmarkHeader;
+//#endregion
+export { coachmark_header_default as default };
+
+//# sourceMappingURL=coachmark-header.js.map

package/es/components/coachmark/coachmark-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-header.js","names":["styles","customElement"],"sources":["../../../src/components/coachmark/coachmark-header.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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 */\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport '../button/index';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './coachmark-header.scss?lit';\nimport Close from '@carbon/icons/es/close/16';\nimport Draggable from '@carbon/icons/es/draggable/16';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport {\n  coachmarkDetailsSignal,\n  updateCoachmarkDetailsSignal,\n} from './coachmark-context';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * coachmark-header for content header section\n * @element cds-coachmark-header\n */\n@customElement(`${prefix}-coachmark-header`)\nclass CDSCoachmarkHeader extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Tooltip text and aria label for the Close button icon.\n   */\n  @property({ reflect: true })\n  closeIconDescription?: string = '';\n\n  /**\n   * Tooltip text and aria label for the Drag button icon.\n   */\n  @property({ reflect: true })\n  dragIconDescription?: string = '';\n\n  private _handleClick = (event: Event) => {\n    event.stopPropagation();\n\n    const coachmark = this.closest(`${prefix}-coachmark`) as HTMLElement | null;\n    if (coachmark) {\n      coachmark.dispatchEvent(\n        new CustomEvent(`${prefix}-coachmark-request-close`, {\n          bubbles: true,\n          composed: true,\n          cancelable: true,\n          detail: { source: 'header-close-button' },\n        })\n      );\n\n      (coachmark as HTMLElement & { open: boolean }).open = false;\n    }\n\n    updateCoachmarkDetailsSignal({\n      name: 'open',\n      detail: false,\n    });\n  };\n\n  render() {\n    const { floating } = coachmarkDetailsSignal.get();\n    return html`\n      ${floating\n        ? html`\n            <cds-button\n              kind=\"ghost\"\n              size=\"sm\"\n              class=\"${prefix}--coachmark-header-drag-handle\"\n              tooltip-text=\"${this.dragIconDescription}\">\n              ${iconLoader(Draggable, {\n                slot: 'icon',\n                class: `${prefix}--coachmark-header-drag-icon`,\n              })}\n            </cds-button>\n          `\n        : nothing}\n      <slot name=\"header\"></slot>\n      <cds-button\n        kind=\"ghost\"\n        size=\"sm\"\n        class=\"${prefix}--coachmark-header-close-button\"\n        tooltip-text=\"${this.closeIconDescription}\"\n        @click=${this._handleClick}>\n        ${iconLoader(Close, {\n          slot: 'icon',\n          class: `${prefix}--coachmark-header-close-icon`,\n        })}\n      </cds-button>\n    `;\n  }\n  static styles = styles;\n}\n\nexport default CDSCoachmarkHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,qBAAA,MACM,2BAA2B,cAAc,kBAAkB,UAAU,CAAC,CAAC,CAAC;;;8BAK5C;6BAMD;uBAEP,UAAiB;GACvC,MAAM,gBAAgB;GAEtB,MAAM,YAAY,KAAK,QAAQ,eAAqB;GACpD,IAAI,WAAW;IACb,UAAU,cACR,IAAI,YAAY,+BAAqC;KACnD,SAAS;KACT,UAAU;KACV,YAAY;KACZ,QAAQ,EAAE,QAAQ,sBAAsB;IAC1C,CAAC,CACH;IAEA,UAA+C,OAAO;GACxD;GAEA,6BAA6B;IAC3B,MAAM;IACN,QAAQ;GACV,CAAC;EACH;;CAEA,SAAS;EACP,MAAM,EAAE,aAAa,uBAAuB,IAAI;EAChD,OAAO,IAAI;QACP,WACE,IAAI;;;;6BAIgB;8BACA,KAAK,oBAAoB;gBACvC,WAAW,WAAW;GACtB,MAAM;GACN,OAAO;EACT,CAAC,EAAE;;cAGP,QAAQ;;;;;uBAKM;wBACA,KAAK,qBAAqB;iBACjC,KAAK,aAAa;UACzB,WAAW,OAAO;GAClB,MAAM;GACN,OAAO;EACT,CAAC,EAAE;;;CAGT;;gBACgBA;;AAClB;YAhEG,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,mBAAA,WAAA,wBAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,mBAAA,WAAA,uBAAA,KAAA,CAAA;iCAX5BC,cAAc,sBAA4B,CAAA,GAAA,kBAAA;AAuE3C,IAAA,2BAAe"}

package/es/components/coachmark/coachmark-header.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/coachmark/coachmark-header.scss?lit
+var coachmark_header_default = css([":host(cds-coachmark-header){display:flex;justify-content:flex-end}:host(cds-coachmark-header) .cds--coachmark-header-drag-handle{margin-inline-end:auto}:host(cds-coachmark-header) .cds--coachmark-header-drag-icon{fill:var(--cds-background,#fff)}:host(cds-coachmark-header) .cds--coachmark-header-close-icon{fill:var(--cds-background,#fff)}"]);
+//#endregion
+export { coachmark_header_default as default };
+
+//# sourceMappingURL=coachmark-header.scss.js.map

package/es/components/coachmark/coachmark-header.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-header.scss.js","names":[],"sources":["../../../src/components/coachmark/coachmark-header.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025, 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/theme' as *;\n@use '@carbon/styles/scss/config' as *;\n\n:host(#{$prefix}-coachmark-header) {\n  display: flex;\n  justify-content: flex-end;\n\n  .#{$prefix}--coachmark-header-drag-handle {\n    margin-inline-end: auto;\n  }\n\n  .#{$prefix}--coachmark-header-drag-icon {\n    fill: $background;\n  }\n\n  .#{$prefix}--coachmark-header-close-icon {\n    fill: $background;\n  }\n}\n"],"mappings":""}

package/es/components/coachmark/coachmark-helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2026, 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.
+ */
+export declare const handleClick: () => void;
+export declare const handleDone: () => void;
+export declare const handleCoachmarkOpened: () => void;
+//# sourceMappingURL=coachmark-helpers.d.ts.map

package/es/components/coachmark/coachmark-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-helpers.d.ts","sourceRoot":"","sources":["../../../src/components/coachmark/coachmark-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,eAAO,MAAM,WAAW,YAGvB,CAAC;AAEF,eAAO,MAAM,UAAU,YAGtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAmBjC,CAAC"}

package/es/components/coachmark/coachmark-helpers.js

@@ -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.
+ */
+
+import "../../globals/settings.js";
+import { coachmarkDetailsSignal } from "./coachmark-context.js";
+//#region src/components/coachmark/coachmark-helpers.ts
+/**
+* Copyright IBM Corp. 2026, 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.
+*/
+const handleClick = () => {
+	document.querySelector(`cds-coachmark`)?.toggleAttribute("open");
+};
+const handleDone = () => {
+	document.querySelector(`cds-coachmark`)?.removeAttribute("open");
+};
+const handleCoachmarkOpened = () => {
+	const details = coachmarkDetailsSignal.get();
+	setTimeout(() => {
+		if (details.floating) (document.querySelector(`cds-coachmark-header`)?.shadowRoot?.querySelector(`.cds--coachmark-header-drag-handle`))?.focus();
+		else document.querySelector(".coachmark-body cds-button")?.focus();
+	}, 100);
+};
+//#endregion
+export { handleClick, handleCoachmarkOpened, handleDone };
+
+//# sourceMappingURL=coachmark-helpers.js.map

package/es/components/coachmark/coachmark-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-helpers.js","names":[],"sources":["../../../src/components/coachmark/coachmark-helpers.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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 { prefix } from '../../globals/settings';\nimport { coachmarkDetailsSignal } from './coachmark-context';\n\nexport const handleClick = () => {\n  const coachmark = document.querySelector(`${prefix}-coachmark`);\n  coachmark?.toggleAttribute('open');\n};\n\nexport const handleDone = () => {\n  const coachmark = document.querySelector(`${prefix}-coachmark`);\n  coachmark?.removeAttribute('open');\n};\n\nexport const handleCoachmarkOpened = () => {\n  const details = coachmarkDetailsSignal.get();\n\n  setTimeout(() => {\n    if (details.floating) {\n      // Focus on drag handle for floating coachmark\n      const header = document.querySelector(`${prefix}-coachmark-header`);\n      const dragHandle = header?.shadowRoot?.querySelector(\n        `.${prefix}--coachmark-header-drag-handle`\n      ) as HTMLElement;\n      dragHandle?.focus();\n    } else {\n      // Focus on done button for non-floating coachmark\n      const doneButton = document.querySelector(\n        '.coachmark-body cds-button'\n      ) as HTMLElement;\n      doneButton?.focus();\n    }\n  }, 100);\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAa,oBAAoB;CAE/B,SAD2B,cAAc,eACjC,CAAC,EAAE,gBAAgB,MAAM;AACnC;AAEA,MAAa,mBAAmB;CAE9B,SAD2B,cAAc,eACjC,CAAC,EAAE,gBAAgB,MAAM;AACnC;AAEA,MAAa,8BAA8B;CACzC,MAAM,UAAU,uBAAuB,IAAI;CAE3C,iBAAiB;EACf,IAAI,QAAQ,UAMV,CAJe,SAAS,cAAc,sBACd,CAAC,EAAE,YAAY,cACrC,oCACF,EAAA,EACY,MAAM;OAMlB,SAH4B,cAC1B,4BAEO,CAAC,EAAE,MAAM;CAEtB,GAAG,GAAG;AACR"}

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2026, 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 '../../button/button';
+declare const CDSCoachmarkTagline_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;
+/**
+ * DO NOT USE. This component is for the exclusive use
+ * of other Onboarding components.
+ *
+ * Coachmark tagline component.
+ *
+ * @element cds-coachmark-tagline
+ * @fires cds-coachmark-tagline-close - Custom event fired when close button is clicked
+ * @fires cds-coachmark-tagline-cta-click - Custom event fired when tagline CTA is clicked
+ */
+declare class CDSCoachmarkTagline extends CDSCoachmarkTagline_base {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription: string;
+    /**
+     * The title of the tagline.
+     */
+    title: string;
+    /**
+     * Whether the tagline is open.
+     */
+    open: boolean;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handles the close button click event.
+     */
+    private _handleClose;
+    /**
+     * Handles the CTA button click event.
+     */
+    private _handleCtaClick;
+    /**
+     * Handles the CTA button double click event.
+     */
+    private _handleCtaDoubleClick;
+    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 CDSCoachmarkTagline;
+//# sourceMappingURL=coachmark-tagline.d.ts.map

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-tagline.d.ts","sourceRoot":"","sources":["../../../../src/components/coachmark/coachmark-tagline/coachmark-tagline.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,qBAAqB,CAAC;;;;;;;;;;uBASR,CAAC;;;;;AAJtB;;;;;;;;;GASG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IAEH,oBAAoB,SAAW;IAE/B;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,UAAS;IAEb,YAAY;IAIZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAY7B,MAAM;IAsBN,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,mBAAmB,CAAC"}

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.js

@@ -0,0 +1,130 @@
+/**
+ * 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 HostListenerMixin from "../../../globals/mixins/host-listener.js";
+import "../../button/button.js";
+import coachmark_tagline_default$1 from "./coachmark-tagline.scss.js";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import Close16 from "@carbon/icons/es/close/16.js";
+import Idea16 from "@carbon/icons/es/idea/16.js";
+//#region src/components/coachmark/coachmark-tagline/coachmark-tagline.ts
+/**
+* Copyright IBM Corp. 2026, 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.
+*/
+const blockClass = `cds--coachmark-tagline`;
+/**
+* DO NOT USE. This component is for the exclusive use
+* of other Onboarding components.
+*
+* Coachmark tagline component.
+*
+* @element cds-coachmark-tagline
+* @fires cds-coachmark-tagline-close - Custom event fired when close button is clicked
+* @fires cds-coachmark-tagline-cta-click - Custom event fired when tagline CTA is clicked
+*/
+let CDSCoachmarkTagline = class CDSCoachmarkTagline extends HostListenerMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.closeIconDescription = "Close";
+		this.title = "";
+		this.open = false;
+	}
+	firstUpdated() {
+		this.classList.add(blockClass);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) if (this.open) this.classList.add(`${blockClass}--open`);
+		else this.classList.remove(`${blockClass}--open`);
+	}
+	/**
+	* Handles the close button click event.
+	*/
+	_handleClose() {
+		const closeEvent = new CustomEvent(`cds-coachmark-tagline-close`, {
+			bubbles: true,
+			composed: true,
+			detail: {}
+		});
+		this.dispatchEvent(closeEvent);
+	}
+	/**
+	* Handles the CTA button click event.
+	*/
+	_handleCtaClick(event) {
+		const ctaClickEvent = new CustomEvent(`cds-coachmark-tagline-cta-click`, {
+			bubbles: true,
+			composed: true,
+			detail: { originalEvent: event }
+		});
+		this.dispatchEvent(ctaClickEvent);
+	}
+	/**
+	* Handles the CTA button double click event.
+	*/
+	_handleCtaDoubleClick(event) {
+		const ctaDoubleClickEvent = new CustomEvent(`cds-coachmark-tagline-cta-dblclick`, {
+			bubbles: true,
+			composed: true,
+			detail: { originalEvent: event }
+		});
+		this.dispatchEvent(ctaDoubleClickEvent);
+	}
+	render() {
+		return html`
+      <button
+        class="${blockClass}__cta"
+        @click="${this._handleCtaClick}"
+        @dblclick="${this._handleCtaDoubleClick}">
+        ${iconLoader(Idea16, { slot: "icon" })} ${this.title}
+      </button>
+      <div class="${blockClass}--close-btn-container">
+        <cds-button
+          kind="ghost"
+          size="sm"
+          tooltip-text="${this.closeIconDescription}"
+          has-icon-only
+          class="${blockClass}--close-btn"
+          @click="${this._handleClose}">
+          ${iconLoader(Close16, { slot: "icon" })}
+        </cds-button>
+      </div>
+    `;
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = coachmark_tagline_default$1;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "close-icon-description"
+})], CDSCoachmarkTagline.prototype, "closeIconDescription", void 0);
+__decorate([property({ type: String })], CDSCoachmarkTagline.prototype, "title", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "open"
+})], CDSCoachmarkTagline.prototype, "open", void 0);
+CDSCoachmarkTagline = __decorate([carbonElement(`cds-coachmark-tagline`)], CDSCoachmarkTagline);
+var coachmark_tagline_default = CDSCoachmarkTagline;
+//#endregion
+export { coachmark_tagline_default as default };
+
+//# sourceMappingURL=coachmark-tagline.js.map

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-tagline.js","names":["styles","customElement"],"sources":["../../../../src/components/coachmark/coachmark-tagline/coachmark-tagline.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026, 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 } from 'lit/decorators.js';\nimport { prefix } from '../../../globals/settings';\nimport HostListenerMixin from '../../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../../globals/decorators/carbon-element';\nimport styles from './coachmark-tagline.scss?lit';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport Idea16 from '@carbon/icons/es/idea/16.js';\nimport '../../button/button';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\n\nconst blockClass = `${prefix}--coachmark-tagline`;\n\n/**\n * DO NOT USE. This component is for the exclusive use\n * of other Onboarding components.\n *\n * Coachmark tagline component.\n *\n * @element cds-coachmark-tagline\n * @fires cds-coachmark-tagline-close - Custom event fired when close button is clicked\n * @fires cds-coachmark-tagline-cta-click - Custom event fired when tagline CTA is clicked\n */\n@customElement(`${prefix}-coachmark-tagline`)\nclass CDSCoachmarkTagline extends HostListenerMixin(LitElement) {\n  /**\n   * Tooltip text and aria label for the Close button icon.\n   */\n  @property({ type: String, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * The title of the tagline.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Whether the tagline is open.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'open' })\n  open = false;\n\n  firstUpdated() {\n    this.classList.add(blockClass);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.classList.add(`${blockClass}--open`);\n      } else {\n        this.classList.remove(`${blockClass}--open`);\n      }\n    }\n  }\n\n  /**\n   * Handles the close button click event.\n   */\n  private _handleClose() {\n    const closeEvent = new CustomEvent(`${prefix}-coachmark-tagline-close`, {\n      bubbles: true,\n      composed: true,\n      detail: {},\n    });\n    this.dispatchEvent(closeEvent);\n  }\n\n  /**\n   * Handles the CTA button click event.\n   */\n  private _handleCtaClick(event: Event) {\n    const ctaClickEvent = new CustomEvent(\n      `${prefix}-coachmark-tagline-cta-click`,\n      {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: event },\n      }\n    );\n    this.dispatchEvent(ctaClickEvent);\n  }\n\n  /**\n   * Handles the CTA button double click event.\n   */\n  private _handleCtaDoubleClick(event: Event) {\n    const ctaDoubleClickEvent = new CustomEvent(\n      `${prefix}-coachmark-tagline-cta-dblclick`,\n      {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: event },\n      }\n    );\n    this.dispatchEvent(ctaDoubleClickEvent);\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"${blockClass}__cta\"\n        @click=\"${this._handleCtaClick}\"\n        @dblclick=\"${this._handleCtaDoubleClick}\">\n        ${iconLoader(Idea16, { slot: 'icon' })} ${this.title}\n      </button>\n      <div class=\"${blockClass}--close-btn-container\">\n        <cds-button\n          kind=\"ghost\"\n          size=\"sm\"\n          tooltip-text=\"${this.closeIconDescription}\"\n          has-icon-only\n          class=\"${blockClass}--close-btn\"\n          @click=\"${this._handleClose}\">\n          ${iconLoader(Close16, { slot: 'icon' })}\n        </cds-button>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\nexport default CDSCoachmarkTagline;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,aAAa;;;;;;;;;;;AAYnB,IAAA,sBAAA,MACM,4BAA4B,kBAAkB,UAAU,CAAC,CAAC;;;8BAKvC;eAMf;cAMD;;CAEP,eAAe;EACb,KAAK,UAAU,IAAI,UAAU;CAC/B;CAEA,QAAQ,mBAAyC;EAC/C,IAAI,kBAAkB,IAAI,MAAM,GAC9B,IAAI,KAAK,MACP,KAAK,UAAU,IAAI,GAAG,WAAW,OAAO;OAExC,KAAK,UAAU,OAAO,GAAG,WAAW,OAAO;CAGjD;;;;CAKA,eAAuB;EACrB,MAAM,aAAa,IAAI,YAAY,+BAAqC;GACtE,SAAS;GACT,UAAU;GACV,QAAQ,CAAC;EACX,CAAC;EACD,KAAK,cAAc,UAAU;CAC/B;;;;CAKA,gBAAwB,OAAc;EACpC,MAAM,gBAAgB,IAAI,YACxB,mCACA;GACE,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,eAAe,MAAM;EACjC,CACF;EACA,KAAK,cAAc,aAAa;CAClC;;;;CAKA,sBAA8B,OAAc;EAC1C,MAAM,sBAAsB,IAAI,YAC9B,sCACA;GACE,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,eAAe,MAAM;EACjC,CACF;EACA,KAAK,cAAc,mBAAmB;CACxC;CAEA,SAAS;EACP,OAAO,IAAI;;iBAEE,WAAW;kBACV,KAAK,gBAAgB;qBAClB,KAAK,sBAAsB;UACtC,WAAW,QAAQ,EAAE,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM;;oBAEzC,WAAW;;;;0BAIL,KAAK,qBAAqB;;mBAEjC,WAAW;oBACV,KAAK,aAAa;YAC1B,WAAW,SAAS,EAAE,MAAM,OAAO,CAAC,EAAE;;;;CAIhD;;2BAE2B;GACzB,GAAG,WAAW;GACd,gBAAgB;EAClB;;;gBAEgBA;;AAClB;YAnGG,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAyB,CAAC,CAAA,GAAA,oBAAA,WAAA,wBAAA,KAAA,CAAA;YAM9D,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,SAAA,KAAA,CAAA;YAMzB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,QAAA,KAAA,CAAA;kCAjB9DC,cAAc,uBAA6B,CAAA,GAAA,mBAAA;AAyG5C,IAAA,4BAAe"}

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.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/coachmark/coachmark-tagline/coachmark-tagline.scss?lit
+var coachmark_tagline_default = css([".cds--coachmark-tagline{position:fixed;z-index:1000;display:grid;overflow:hidden;border-radius:.125rem .125rem 0 0;background:#6929c4;background-image:linear-gradient(90deg,#001d6c,#6929c4);color:#fff!important;grid-template-columns:[cta-col] auto [close-btn-col] 2.5rem;inline-size:18rem;inset-block-end:0;inset-inline-end:1rem;opacity:1;transition:opacity .24s cubic-bezier(.2,0,1,.9) .3s;transition-delay:.24s}@media (prefers-reduced-motion){.cds--coachmark-tagline{transition:none}}.cds--coachmark-tagline:before{position:absolute;z-index:-1;background:linear-gradient(90deg,#0043ce,#6929c4);content:\"\";inset:0;opacity:0;transition:opacity .24s cubic-bezier(.2,0,1,.9)}@media (prefers-reduced-motion){.cds--coachmark-tagline:before{transition:none}}.cds--coachmark-tagline:hover:before{opacity:1}.cds--coachmark-tagline--is-open{background:#fff;opacity:0}.cds--coachmark-tagline--is-open cds--coachmark-tagline__cta{opacity:0}.cds--coachmark-tagline--is-open cds--coachmark-tagline--close-btn{display:none}.cds--coachmark-tagline--is-open:before{background:#fff}.cds--coachmark-tagline__cta{display:grid;padding:.5rem 0;border:none;background:transparent;color:#fff!important;grid-template-columns:[icon-col] 2rem [body-col] auto;text-align:start;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px)}.cds--coachmark-tagline__cta:focus{box-shadow:inset 0 0 0 3px #6929c4,inset 0 0 0 .25rem #fff;outline:1px solid transparent}.cds--coachmark-tagline__cta:hover{cursor:pointer!important}.cds--coachmark-tagline__cta .cds--coachmark-tagline__idea{justify-self:center}.cds--coachmark-tagline--close-btn-container{block-size:2rem;inline-size:2rem;margin-inline-start:auto}.cds--coachmark-tagline--close-btn{border-color:transparent!important;border-radius:0;block-size:2rem;color:#fff;inline-size:2rem;margin-inline-start:auto!important;outline:1px solid transparent}.cds--coachmark-tagline--close-btn:active{background-color:var(--cds-button-secondary-active,#6f6f6f)}.cds--coachmark-tagline--close-btn:focus{box-shadow:inset 0 0 0 1px var(--cds-background-inverse,#393939),inset 0 0 0 .125rem #fff!important}.cds--coachmark-tagline--close-btn svg>path{margin:0;fill:#fff!important}.cds--coachmark-tagline--close-btn:hover{background-color:#7c3dd6!important}.cds--coachmark-tagline--open{background:#fff;opacity:0}.cds--coachmark-tagline--open .cds--coachmark-tagline__cta{opacity:0}.cds--coachmark-tagline--open .cds--coachmark-tagline--close-btn{display:none}.cds--coachmark-tagline--open:before{background:#fff}.cds--coachmark-tagline__cta svg{justify-self:center}"]);
+//#endregion
+export { coachmark_tagline_default as default };
+
+//# sourceMappingURL=coachmark-tagline.scss.js.map

package/es/components/coachmark/coachmark-tagline/coachmark-tagline.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark-tagline.scss.js","names":[],"sources":["../../../../src/components/coachmark/coachmark-tagline/coachmark-tagline.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2026, 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/colors' as *;\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/components/coachmark/coachmark-tagline' as\n  coachmark-tagline-styles;\n\n@include coachmark-tagline-styles.coachmark-tagline;\n\n$block-class: #{$prefix}--coachmark-tagline;\n\n.#{$block-class} {\n  &--open {\n    background: $white-0;\n    opacity: 0;\n\n    .#{$block-class}__cta {\n      opacity: 0;\n    }\n\n    .#{$block-class}--close-btn {\n      display: none;\n    }\n\n    &::before {\n      background: $white-0;\n    }\n  }\n\n  &__cta {\n    svg {\n      justify-self: center;\n    }\n  }\n}\n"],"mappings":""}

package/es/components/coachmark/coachmark-tagline/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2026, 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 './coachmark-tagline';
+//# sourceMappingURL=index.d.ts.map

package/es/components/coachmark/coachmark-tagline/index.d.ts.map

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

package/es/components/coachmark/coachmark-tagline/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 "./coachmark-tagline.js";

package/es/components/coachmark/coachmark.d.ts

@@ -0,0 +1,97 @@
+/**
+ * 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 '../popover/index';
+export declare const blockClass = "cds--coachmark";
+declare const CDSCoachmark_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 & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
+/**
+ * coachmark main component
+ * @element cds-coachmark
+ * @fires cds-coachmark-opened
+ *   The custom event fired when the coachmark is opened.
+ *   This event can be used to perform actions such as focusing elements when the coachmark becomes visible.
+ * @fires cds-coachmark-closed
+ *   The custom event fired when the coachmark is closed.
+ *   This event can be used to perform actions such as restoring focus when the coachmark is dismissed.
+ */
+declare class CDSCoachmark extends CDSCoachmark_base {
+    /**
+     * Specifies whether the component is currently open.
+     */
+    open: boolean;
+    /**
+     * Where to render the Coachmark relative to its target.
+     */
+    align?: string;
+    /**
+     * Fine tune the position of the target in pixels.
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Specifies whether the component is floating or not.
+     */
+    floating?: boolean;
+    /**
+     * Specify whether the component should be rendered on high-contrast.
+     */
+    highContrast?: boolean;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover.
+     */
+    dropShadow?: boolean;
+    /**
+     * Specify whether a caret should be rendered on the popover. This is intended to use only for coachmark patterns.
+     */
+    caret?: boolean;
+    /**
+     * CSS selector for the element that should receive focus when the coachmark opens.
+     * If not provided, no automatic focus management will occur.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Aria label for when the floating coachmark is picked up for dragging.
+     */
+    dragAriaLabel?: string;
+    private dragCleanup;
+    private keydownHandler;
+    private moveCounter;
+    private isDragging;
+    private moveAnnouncement;
+    disconnectedCallback(): void;
+    private setupDraggable;
+    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    private handlePopoverClosed;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The name of the custom event fired when this coachmark is opened.
+     */
+    static get eventOpen(): string;
+    /**
+     * The name of the custom event fired when this coachmark is closed.
+     */
+    static get eventClose(): string;
+    static styles: any;
+}
+export default CDSCoachmark;
+//# sourceMappingURL=coachmark.d.ts.map

package/es/components/coachmark/coachmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark.d.ts","sourceRoot":"","sources":["../../../src/components/coachmark/coachmark.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,kBAAkB,CAAC;AAQ1B,eAAO,MAAM,UAAU,mBAAyB,CAAC;;;;;;;;;;uBAIhD,CAAD;;;;;AAFA;;;;;;;;;GASG;AACH,cACM,YAAa,SAAQ,iBAA4C;IACrE;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IACtB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAyB;IACvC;;OAEG;IAEH,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAS;IAC3B;;OAEG;IAEH,YAAY,CAAC,EAAE,OAAO,CAAS;IAC/B;;OAEG;IAEH,UAAU,CAAC,EAAE,OAAO,CAAS;IAC7B;;OAEG;IAEH,KAAK,CAAC,EAAE,OAAO,CAAS;IACxB;;;OAGG;IAEH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAuC;IAE7D,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,cAAc,CAAiD;IACvE,OAAO,CAAC,WAAW,CAAa;IACvB,OAAO,CAAC,UAAU,CAAwB;IAC1C,OAAO,CAAC,gBAAgB,CAAc;IAE/C,oBAAoB;YAWN,cAAc;IAmG5B,YAAY;IAUZ,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA0I1C,OAAO,CAAC,mBAAmB,CAMzB;IAEF,MAAM;IAkDN;;OAEG;IACH,MAAM,KAAK,SAAS,WAEnB;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC"}