@carbon/web-components 2.62.0 → 2.63.0

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"}

package/es/components/coachmark/coachmark.js

@@ -0,0 +1,290 @@
+/**
+ * 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 HostListenerMixin from "../../globals/mixins/host-listener.js";
+import "../popover/defs.js";
+import "../popover/index.js";
+import { resetCoachmarkDetailsSignal, updateCoachmarkDetailsSignal } from "./coachmark-context.js";
+import coachmark_default$1 from "./coachmark.scss.js";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { SignalWatcher } from "@lit-labs/signals";
+import { makeDraggable } from "@carbon/utilities/makeDraggable";
+//#region src/components/coachmark/coachmark.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.
+*/
+const blockClass = `cds--coachmark`;
+/**
+* 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.
+*/
+let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.align = "top";
+		this.floating = false;
+		this.highContrast = false;
+		this.dropShadow = false;
+		this.caret = false;
+		this.dragAriaLabel = "Picked up the draggable coachmark";
+		this.dragCleanup = null;
+		this.keydownHandler = null;
+		this.moveCounter = 0;
+		this.isDragging = null;
+		this.moveAnnouncement = "";
+		this.handlePopoverClosed = () => {
+			if (this.open) this.open = false;
+		};
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.dragCleanup) this.dragCleanup();
+		if (this.keydownHandler) document.removeEventListener("keydown", this.keydownHandler);
+		resetCoachmarkDetailsSignal();
+	}
+	async setupDraggable() {
+		const popoverContent = (this.shadowRoot?.querySelector(`.${blockClass}--popover`)).querySelector("cds-popover-content");
+		const header = (popoverContent.querySelector(`.${blockClass}--wrapper`).querySelector("slot")?.assignedElements({ flatten: true }))?.find((el) => el.tagName.toLowerCase() === `cds-coachmark-header`);
+		if (header?.updateComplete) await header.updateComplete;
+		requestAnimationFrame(() => {
+			const dragHandle = header.shadowRoot?.querySelector(`.cds--coachmark-header-drag-handle`);
+			const dragInactiveInstruction = "Press Enter or Space to activate drag mode.";
+			const dragActiveInstruction = "Use arrow keys to move the coachmark. Press Enter or Space to exit drag mode.";
+			if (dragHandle) dragHandle.setAttribute("aria-label", dragInactiveInstruction);
+			const draggable = makeDraggable({
+				el: popoverContent,
+				dragHandle: header,
+				focusableDragHandle: dragHandle
+			});
+			const onDragStart = () => {
+				this.isDragging = true;
+				this.moveCounter = 0;
+				this.moveAnnouncement = "";
+				popoverContent.classList.add(`${blockClass}--is-dragging`);
+				if (this.dragAriaLabel) popoverContent.setAttribute("aria-label", this.dragAriaLabel);
+				if (dragHandle) dragHandle.setAttribute("aria-label", dragActiveInstruction);
+				updateCoachmarkDetailsSignal({
+					name: "isDragging",
+					detail: true
+				});
+			};
+			const onDragEnd = () => {
+				this.isDragging = false;
+				this.moveCounter = 0;
+				this.moveAnnouncement = "";
+				popoverContent.classList.remove(`${blockClass}--is-dragging`);
+				popoverContent.removeAttribute("aria-label");
+				if (dragHandle) dragHandle.setAttribute("aria-label", dragInactiveInstruction);
+				updateCoachmarkDetailsSignal({
+					name: "isDragging",
+					detail: false
+				});
+			};
+			const onDragMove = (event) => {
+				const { direction, distance } = event.detail;
+				this.moveCounter += 1;
+				const uniqueMarker = "​".repeat(this.moveCounter);
+				this.moveAnnouncement = `Moved ${direction} ${distance} pixels${uniqueMarker}`;
+			};
+			popoverContent.addEventListener("dragstart", onDragStart);
+			popoverContent.addEventListener("dragend", onDragEnd);
+			popoverContent.addEventListener("dragmove", onDragMove);
+			this.dragCleanup = () => {
+				popoverContent.removeEventListener("dragstart", onDragStart);
+				popoverContent.removeEventListener("dragend", onDragEnd);
+				popoverContent.removeEventListener("dragmove", onDragMove);
+				draggable.cleanup?.();
+			};
+		});
+	}
+	firstUpdated() {
+		this.keydownHandler = (event) => {
+			if (event.key === "Escape" && this.open) this.open = false;
+		};
+		document.addEventListener("keydown", this.keydownHandler);
+	}
+	updated(changedProps) {
+		if (changedProps.has("floating")) if (this.floating) {
+			this.classList.add(`${blockClass}--floating`);
+			this.setupDraggable();
+			updateCoachmarkDetailsSignal({
+				name: "floating",
+				detail: this.floating
+			});
+		} else {
+			this.classList.remove(`${blockClass}--floating`);
+			if (this.dragCleanup) {
+				this.dragCleanup();
+				this.dragCleanup = null;
+			}
+			updateCoachmarkDetailsSignal({
+				name: "floating",
+				detail: false
+			});
+		}
+		if (changedProps.has("position")) {
+			const { x = 0, y = 0 } = this.position ?? {};
+			if (x !== 0 || y !== 0) this.style.transform = `translate(${x}px, ${y}px)`;
+		}
+		if (changedProps.has("open")) {
+			const init = {
+				bubbles: true,
+				composed: true,
+				detail: { open: this.open }
+			};
+			if (this.open) {
+				this.dispatchEvent(new CustomEvent(this.constructor.eventOpen, init));
+				updateCoachmarkDetailsSignal({
+					name: "floating",
+					detail: this.floating ?? false
+				});
+				if (this.floating) {
+					if (this.dragCleanup) {
+						this.dragCleanup();
+						this.dragCleanup = null;
+					}
+					this.setupDraggable();
+				}
+				setTimeout(() => {
+					requestAnimationFrame(() => {
+						let elementToFocus = null;
+						if (this.selectorPrimaryFocus) {
+							const raw = this.selectorPrimaryFocus.trim();
+							const selector = raw.startsWith("#") || raw.startsWith(".") || raw.startsWith("[") ? raw : `.${raw}`;
+							const found = document.querySelector(selector);
+							elementToFocus = found?.shadowRoot?.querySelector("button, [tabindex]") ?? found;
+						}
+						if (!elementToFocus) {
+							const header = (this.shadowRoot?.querySelector(`.${blockClass}--popover cds-popover-content .${blockClass}--wrapper`))?.querySelector("slot")?.assignedElements({ flatten: true })?.find((el) => el.tagName.toLowerCase() === `cds-coachmark-header`);
+							if (header?.shadowRoot) {
+								const dragButton = this.floating ? header.shadowRoot.querySelector(`.cds--coachmark-header-drag-handle`) : null;
+								const closeButton = header.shadowRoot.querySelector(`.cds--coachmark-header-close-button`);
+								elementToFocus = dragButton || closeButton;
+							}
+						}
+						if (elementToFocus) elementToFocus.focus();
+					});
+				}, 100);
+			} else {
+				this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+				updateCoachmarkDetailsSignal({
+					name: "floating",
+					detail: false
+				});
+				requestAnimationFrame(() => {
+					((this.shadowRoot?.querySelector("slot[name=\"trigger\"]"))?.assignedElements({ flatten: true })[0])?.focus();
+				});
+			}
+		}
+	}
+	render() {
+		const caretValue = this.caret !== void 0 ? this.caret : this.floating === true ? false : true;
+		return html`
+      <cds-popover
+        part="popover"
+        exportparts="popover-container"
+        class="${blockClass}--popover"
+        ?open=${this.open}
+        .caret=${caretValue}
+        ?highContrast=${this.highContrast}
+        align=${this.align}
+        .dropShadow=${this.dropShadow}
+        @cds-popover-closed=${this.handlePopoverClosed}>
+        <slot name="trigger"></slot>
+        <cds-popover-content part="popover-content" exportparts="content">
+          <div
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            class="${"cds"}--visually-hidden">
+            ${this.floating ? this.isDragging === true ? "Drag mode active." : this.isDragging === false ? "Drag mode ended." : "" : ""}
+          </div>
+          <div
+            role="status"
+            aria-live="assertive"
+            aria-atomic="true"
+            class="${"cds"}--visually-hidden">
+            ${this.floating ? this.moveAnnouncement : ""}
+          </div>
+          <div class="${blockClass}--wrapper">
+            <slot></slot>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+    `;
+	}
+	/**
+	* The name of the custom event fired when this coachmark is opened.
+	*/
+	static get eventOpen() {
+		return `cds-coachmark-opened`;
+	}
+	/**
+	* The name of the custom event fired when this coachmark is closed.
+	*/
+	static get eventClose() {
+		return `cds-coachmark-closed`;
+	}
+	static {
+		this.styles = coachmark_default$1;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCoachmark.prototype, "open", void 0);
+__decorate([property({
+	reflect: true,
+	type: String
+})], CDSCoachmark.prototype, "align", void 0);
+__decorate([property({ type: Object })], CDSCoachmark.prototype, "position", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCoachmark.prototype, "floating", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCoachmark.prototype, "highContrast", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCoachmark.prototype, "dropShadow", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSCoachmark.prototype, "caret", void 0);
+__decorate([property({
+	attribute: "selector-primary-focus",
+	reflect: true
+})], CDSCoachmark.prototype, "selectorPrimaryFocus", void 0);
+__decorate([property({
+	attribute: "drag-aria-label",
+	reflect: true
+})], CDSCoachmark.prototype, "dragAriaLabel", void 0);
+__decorate([state()], CDSCoachmark.prototype, "isDragging", void 0);
+__decorate([state()], CDSCoachmark.prototype, "moveAnnouncement", void 0);
+CDSCoachmark = __decorate([carbonElement(`cds-coachmark`)], CDSCoachmark);
+var coachmark_default = CDSCoachmark;
+//#endregion
+export { blockClass, coachmark_default as default };
+
+//# sourceMappingURL=coachmark.js.map