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

package/es-custom/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-custom--coachmark`;
+/**
+* coachmark main component
+* @element cds-custom-coachmark
+* @fires cds-custom-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-custom-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-custom-popover-content");
+		const header = (popoverContent.querySelector(`.${blockClass}--wrapper`).querySelector("slot")?.assignedElements({ flatten: true }))?.find((el) => el.tagName.toLowerCase() === `cds-custom-coachmark-header`);
+		if (header?.updateComplete) await header.updateComplete;
+		requestAnimationFrame(() => {
+			const dragHandle = header.shadowRoot?.querySelector(`.cds-custom--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-custom-popover-content .${blockClass}--wrapper`))?.querySelector("slot")?.assignedElements({ flatten: true })?.find((el) => el.tagName.toLowerCase() === `cds-custom-coachmark-header`);
+							if (header?.shadowRoot) {
+								const dragButton = this.floating ? header.shadowRoot.querySelector(`.cds-custom--coachmark-header-drag-handle`) : null;
+								const closeButton = header.shadowRoot.querySelector(`.cds-custom--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-custom-popover
+        part="popover"
+        exportparts="popover-container"
+        class="${blockClass}--popover"
+        ?open=${this.open}
+        .caret=${caretValue}
+        ?highContrast=${this.highContrast}
+        align=${this.align}
+        .dropShadow=${this.dropShadow}
+        @cds-custom-popover-closed=${this.handlePopoverClosed}>
+        <slot name="trigger"></slot>
+        <cds-custom-popover-content part="popover-content" exportparts="content">
+          <div
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            class="${"cds-custom"}--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-custom"}--visually-hidden">
+            ${this.floating ? this.moveAnnouncement : ""}
+          </div>
+          <div class="${blockClass}--wrapper">
+            <slot></slot>
+          </div>
+        </cds-custom-popover-content>
+      </cds-custom-popover>
+    `;
+	}
+	/**
+	* The name of the custom event fired when this coachmark is opened.
+	*/
+	static get eventOpen() {
+		return `cds-custom-coachmark-opened`;
+	}
+	/**
+	* The name of the custom event fired when this coachmark is closed.
+	*/
+	static get eventClose() {
+		return `cds-custom-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-custom-coachmark`)], CDSCoachmark);
+var coachmark_default = CDSCoachmark;
+//#endregion
+export { blockClass, coachmark_default as default };
+
+//# sourceMappingURL=coachmark.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark.js","names":["customEvent","styles","customElement"],"sources":["../../../src/components/coachmark/coachmark.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 */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } 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.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport '../popover/index';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport { makeDraggable } from '@carbon/utilities/makeDraggable';\nimport {\n  resetCoachmarkDetailsSignal,\n  updateCoachmarkDetailsSignal,\n} from './coachmark-context';\n\nexport const blockClass = `${prefix}--coachmark`;\n\n/**\n * coachmark main component\n * @element cds-custom-coachmark\n * @fires cds-custom-coachmark-opened\n *   The custom event fired when the coachmark is opened.\n *   This event can be used to perform actions such as focusing elements when the coachmark becomes visible.\n * @fires cds-custom-coachmark-closed\n *   The custom event fired when the coachmark is closed.\n *   This event can be used to perform actions such as restoring focus when the coachmark is dismissed.\n */\n@customElement(`${prefix}-coachmark`)\nclass CDSCoachmark extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Specifies whether the component is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n  /**\n   * Where to render the Coachmark relative to its target.\n   */\n  @property({ reflect: true, type: String })\n  align?: string = POPOVER_ALIGNMENT.TOP;\n  /**\n   * Fine tune the position of the target in pixels.\n   */\n  @property({ type: Object })\n  position?: { x: number; y: number };\n  /**\n   * Specifies whether the component is floating or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  floating?: boolean = false;\n  /**\n   * Specify whether the component should be rendered on high-contrast.\n   */\n  @property({ type: Boolean, reflect: true })\n  highContrast?: boolean = false;\n  /**\n   * Specify whether a drop shadow should be rendered on the popover.\n   */\n  @property({ type: Boolean, reflect: true })\n  dropShadow?: boolean = false;\n  /**\n   * Specify whether a caret should be rendered on the popover. This is intended to use only for coachmark patterns.\n   */\n  @property({ type: Boolean, reflect: true })\n  caret?: boolean = false;\n  /**\n   * CSS selector for the element that should receive focus when the coachmark opens.\n   * If not provided, no automatic focus management will occur.\n   */\n  @property({ attribute: 'selector-primary-focus', reflect: true })\n  selectorPrimaryFocus?: string;\n  /**\n   * Aria label for when the floating coachmark is picked up for dragging.\n   */\n  @property({ attribute: 'drag-aria-label', reflect: true })\n  dragAriaLabel?: string = 'Picked up the draggable coachmark';\n\n  private dragCleanup: (() => void) | null = null;\n  private keydownHandler: ((event: KeyboardEvent) => void) | null = null;\n  private moveCounter: number = 0;\n  @state() private isDragging: boolean | null = null;\n  @state() private moveAnnouncement: string = '';\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.dragCleanup) {\n      this.dragCleanup();\n    }\n    if (this.keydownHandler) {\n      document.removeEventListener('keydown', this.keydownHandler);\n    }\n    resetCoachmarkDetailsSignal();\n  }\n\n  private async setupDraggable() {\n    const popover = this.shadowRoot?.querySelector(\n      `.${blockClass}--popover`\n    ) as HTMLElement;\n    const popoverContent = popover.querySelector(\n      'cds-custom-popover-content'\n    ) as HTMLElement;\n    const wrapper = popoverContent.querySelector(\n      `.${blockClass}--wrapper`\n    ) as HTMLElement;\n    const slot = wrapper.querySelector('slot');\n    const assignedElements = slot?.assignedElements({ flatten: true });\n    const header = assignedElements?.find(\n      (el) => el.tagName.toLowerCase() === `${prefix}-coachmark-header`\n    ) as LitElement & HTMLElement;\n    // Wait for coachmark-header to finish rendering the drag handle\n    // (it re-renders based on the signal updated just before this call)\n    if (header?.updateComplete) {\n      await header.updateComplete;\n    }\n    requestAnimationFrame(() => {\n      const dragHandle = header.shadowRoot?.querySelector(\n        `.${prefix}--coachmark-header-drag-handle`\n      ) as HTMLElement;\n\n      const dragInactiveInstruction =\n        'Press Enter or Space to activate drag mode.';\n      const dragActiveInstruction =\n        'Use arrow keys to move the coachmark. Press Enter or Space to exit drag mode.';\n\n      // Set initial instructions as aria-label so the screen reader announces\n      // them when the drag handle is focused (aria-describedby cannot cross\n      // shadow DOM boundaries, so we set the text directly on the element).\n      if (dragHandle) {\n        dragHandle.setAttribute('aria-label', dragInactiveInstruction);\n      }\n\n      const draggable = makeDraggable({\n        el: popoverContent,\n        dragHandle: header,\n        focusableDragHandle: dragHandle,\n      });\n\n      const onDragStart = () => {\n        this.isDragging = true;\n        this.moveCounter = 0;\n        this.moveAnnouncement = '';\n        popoverContent.classList.add(`${blockClass}--is-dragging`);\n        if (this.dragAriaLabel) {\n          popoverContent.setAttribute('aria-label', this.dragAriaLabel);\n        }\n        if (dragHandle) {\n          dragHandle.setAttribute('aria-label', dragActiveInstruction);\n        }\n        updateCoachmarkDetailsSignal({ name: 'isDragging', detail: true });\n      };\n\n      const onDragEnd = () => {\n        this.isDragging = false;\n        this.moveCounter = 0;\n        this.moveAnnouncement = '';\n        popoverContent.classList.remove(`${blockClass}--is-dragging`);\n        popoverContent.removeAttribute('aria-label');\n        if (dragHandle) {\n          dragHandle.setAttribute('aria-label', dragInactiveInstruction);\n        }\n        updateCoachmarkDetailsSignal({ name: 'isDragging', detail: false });\n      };\n\n      const onDragMove = (event: Event) => {\n        const customEvent = event as CustomEvent<{\n          direction: string;\n          distance: number;\n        }>;\n        const { direction, distance } = customEvent.detail;\n        // Increment counter to make each announcement unique\n        this.moveCounter += 1;\n        // Add zero-width space multiplied by counter to make string unique without being announced\n        const uniqueMarker = '\\u200B'.repeat(this.moveCounter);\n        this.moveAnnouncement = `Moved ${direction} ${distance} pixels${uniqueMarker}`;\n      };\n\n      popoverContent.addEventListener('dragstart', onDragStart);\n      popoverContent.addEventListener('dragend', onDragEnd);\n      popoverContent.addEventListener('dragmove', onDragMove as EventListener);\n\n      // store cleanup\n      this.dragCleanup = () => {\n        popoverContent.removeEventListener('dragstart', onDragStart);\n        popoverContent.removeEventListener('dragend', onDragEnd);\n        popoverContent.removeEventListener(\n          'dragmove',\n          onDragMove as EventListener\n        );\n        draggable.cleanup?.();\n      };\n    });\n  }\n\n  firstUpdated() {\n    // Setup Escape key handler\n    this.keydownHandler = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && this.open) {\n        this.open = false;\n      }\n    };\n    document.addEventListener('keydown', this.keydownHandler);\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    if (changedProps.has('floating')) {\n      if (this.floating) {\n        this.classList.add(`${blockClass}--floating`);\n        this.setupDraggable();\n        updateCoachmarkDetailsSignal({\n          name: 'floating',\n          detail: this.floating,\n        });\n      } else {\n        this.classList.remove(`${blockClass}--floating`);\n        if (this.dragCleanup) {\n          this.dragCleanup();\n          this.dragCleanup = null;\n        }\n        updateCoachmarkDetailsSignal({\n          name: 'floating',\n          detail: false,\n        });\n      }\n    }\n\n    if (changedProps.has('position')) {\n      const { x = 0, y = 0 } = this.position ?? {};\n      if (x !== 0 || y !== 0) {\n        this.style.transform = `translate(${x}px, ${y}px)`;\n      }\n    }\n\n    // Dispatch custom events when coachmark opens or closes\n    if (changedProps.has('open')) {\n      const init = {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      };\n\n      if (this.open) {\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSCoachmark).eventOpen,\n            init\n          )\n        );\n        // Sync floating state into the signal so the header renders correctly\n        updateCoachmarkDetailsSignal({\n          name: 'floating',\n          detail: this.floating ?? false,\n        });\n        // Re-create the draggable on every open so the isDragging closure\n        // variable always starts as false (e.g. after Escape-while-dragging).\n        if (this.floating) {\n          if (this.dragCleanup) {\n            this.dragCleanup();\n            this.dragCleanup = null;\n          }\n          this.setupDraggable();\n        }\n\n        // Handle focus management when coachmark opens\n        setTimeout(() => {\n          requestAnimationFrame(() => {\n            let elementToFocus: HTMLElement | null = null;\n\n            if (this.selectorPrimaryFocus) {\n              const raw = this.selectorPrimaryFocus.trim();\n              const selector =\n                raw.startsWith('#') ||\n                raw.startsWith('.') ||\n                raw.startsWith('[')\n                  ? raw\n                  : `.${raw}`;\n              const found = document.querySelector<HTMLElement>(selector);\n              elementToFocus =\n                found?.shadowRoot?.querySelector<HTMLElement>(\n                  'button, [tabindex]'\n                ) ?? found;\n            }\n\n            if (!elementToFocus) {\n              const wrapper = this.shadowRoot?.querySelector(\n                `.${blockClass}--popover cds-custom-popover-content .${blockClass}--wrapper`\n              ) as HTMLElement;\n              const header = wrapper\n                ?.querySelector('slot')\n                ?.assignedElements({ flatten: true })\n                ?.find(\n                  (el) =>\n                    el.tagName.toLowerCase() === `${prefix}-coachmark-header`\n                ) as HTMLElement;\n\n              if (header?.shadowRoot) {\n                // Try drag button for floating coachmarks, fallback to close button\n                const dragButton = this.floating\n                  ? header.shadowRoot.querySelector<HTMLElement>(\n                      `.${prefix}--coachmark-header-drag-handle`\n                    )\n                  : null;\n                const closeButton =\n                  header.shadowRoot.querySelector<HTMLElement>(\n                    `.${prefix}--coachmark-header-close-button`\n                  );\n                elementToFocus = dragButton || closeButton;\n              }\n            }\n            if (elementToFocus) {\n              elementToFocus.focus();\n            }\n          });\n        }, 100);\n      } else {\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSCoachmark).eventClose,\n            init\n          )\n        );\n        // Clear floating from the signal so the header hides the drag button\n        // while the popover is closed (signal persists across open/close cycles)\n        updateCoachmarkDetailsSignal({\n          name: 'floating',\n          detail: false,\n        });\n\n        // Return focus to trigger element when coachmark closes\n        requestAnimationFrame(() => {\n          const triggerSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"trigger\"]'\n          ) as HTMLSlotElement;\n          const triggerElement = triggerSlot?.assignedElements({\n            flatten: true,\n          })[0] as HTMLElement;\n          triggerElement?.focus();\n        });\n      }\n    }\n  }\n\n  private handlePopoverClosed = () => {\n    // Sync coachmark's open state when popover closes\n    // This ensures the states stay in sync for outside clicks\n    if (this.open) {\n      this.open = false;\n    }\n  };\n\n  render() {\n    // Use explicit caret value if provided, otherwise derive from floating state\n    const caretValue =\n      this.caret !== undefined\n        ? this.caret\n        : this.floating === true\n          ? false\n          : true;\n\n    return html`\n      <cds-custom-popover\n        part=\"popover\"\n        exportparts=\"popover-container\"\n        class=\"${blockClass}--popover\"\n        ?open=${this.open}\n        .caret=${caretValue}\n        ?highContrast=${this.highContrast}\n        align=${this.align}\n        .dropShadow=${this.dropShadow}\n        @cds-custom-popover-closed=${this.handlePopoverClosed}>\n        <slot name=\"trigger\"></slot>\n        <cds-custom-popover-content part=\"popover-content\" exportparts=\"content\">\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            class=\"${prefix}--visually-hidden\">\n            ${this.floating\n              ? this.isDragging === true\n                ? 'Drag mode active.'\n                : this.isDragging === false\n                  ? 'Drag mode ended.'\n                  : ''\n              : ''}\n          </div>\n          <div\n            role=\"status\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            class=\"${prefix}--visually-hidden\">\n            ${this.floating ? this.moveAnnouncement : ''}\n          </div>\n          <div class=\"${blockClass}--wrapper\">\n            <slot></slot>\n          </div>\n        </cds-custom-popover-content>\n      </cds-custom-popover>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when this coachmark is opened.\n   */\n  static get eventOpen() {\n    return `${prefix}-coachmark-opened`;\n  }\n\n  /**\n   * The name of the custom event fired when this coachmark is closed.\n   */\n  static get eventClose() {\n    return `${prefix}-coachmark-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCoachmark;\n"],"mappings":"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"}

package/es-custom/components/coachmark/coachmark.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.scss?lit
+var coachmark_default = css([":host{display:inline-block}.cds-custom--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--coachmark--popover{position:fixed}.cds-custom--coachmark--popover cds-custom-popover-content.cds-custom--coachmark--is-dragging::part(content){border-radius:0;box-shadow:0 0 0 .125rem var(--cds-icon-inverse,#fff),0 0 0 .25rem var(--cds-background-inverse,#393939)}"]);
+//#endregion
+export { coachmark_default as default };
+
+//# sourceMappingURL=coachmark.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark.scss.js","names":[],"sources":["../../../src/components/coachmark/coachmark.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/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/config' as *;\n\n$block-class: #{$prefix}--coachmark;\n\n:host {\n  display: inline-block;\n}\n\n.#{$prefix}--visually-hidden {\n  position: absolute;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  margin: -1px;\n  block-size: 1px;\n  clip: rect(0, 0, 0, 0);\n  inline-size: 1px;\n  visibility: inherit;\n  white-space: nowrap;\n}\n\n.#{$block-class}--popover {\n  position: fixed;\n\n  cds-custom-popover-content.#{$block-class}--is-dragging::part(content) {\n    border-radius: 0;\n    box-shadow:\n      0 0 0 $spacing-01 $icon-inverse,\n      0 0 0 $spacing-02 $background-inverse;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,10 @@
+/**
+ * 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 './coachmark';
+import './coachmark-header';
+import './coachmark-body';
+//# sourceMappingURL=index.d.ts.map

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

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

package/es-custom/components/coachmark/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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-body.js";
+import "./coachmark-header.js";
+import "./coachmark.js";