@carbon/ibm-products-web-components 0.43.0 → 0.44.0

package/es/components/coachmark/coachmark.js

@@ -11,7 +11,7 @@ import coachmark_default$1 from "./coachmark.scss.js";
 import { makeDraggable } from "../../utilities/makeDraggable/makeDraggable.js";
 import { resetCoachmarkDetailsSignal, updateCoachmarkDetailsSignal } from "./coachmark-context.js";
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { SignalWatcher } from "@lit-labs/signals";
@@ -46,7 +46,12 @@ let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(Li
 		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;
 		};
@@ -54,46 +59,89 @@ let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(Li
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this.dragCleanup) this.dragCleanup();
+		if (this.keydownHandler) document.removeEventListener("keydown", this.keydownHandler);
 		resetCoachmarkDetailsSignal();
 	}
-	setupDraggable() {
+	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() === `c4p-coachmark-header`);
+		if (header?.updateComplete) await header.updateComplete;
 		requestAnimationFrame(() => {
 			const dragHandle = header.shadowRoot?.querySelector(`.c4p--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 = () => {
-				popoverContent.classList.add("is-dragging");
-				popoverContent.setAttribute("aria-label", "Picked up the draggable popoverContent");
+				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 = () => {
-				popoverContent.classList.remove("is-dragging");
-				popoverContent.setAttribute("aria-label", "Draggable popoverContent was dropped");
+				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() {
-		if (this.floating) {
+		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
+			});
 		}
-	}
-	updated(changedProps) {
 		if (changedProps.has("position")) {
 			const { x = 0, y = 0 } = this.position ?? {};
 			if (x !== 0 || y !== 0) this.style.transform = `translate(${x}px, ${y}px)`;
@@ -104,8 +152,49 @@ let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(Li
 				composed: true,
 				detail: { open: this.open }
 			};
-			if (this.open) this.dispatchEvent(new CustomEvent(this.constructor.eventOpen, init));
-			else this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+			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() === `c4p-coachmark-header`);
+							if (header?.shadowRoot) {
+								const dragButton = this.floating ? header.shadowRoot.querySelector(`.c4p--coachmark-header-drag-handle`) : null;
+								const closeButton = header.shadowRoot.querySelector(`.c4p--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() {
@@ -119,11 +208,27 @@ let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(Li
         .caret=${caretValue}
         ?highContrast=${this.highContrast}
         align=${this.align}
-        ?dropShadow=${this.dropShadow}
+        .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="${"c4p"}--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="${"c4p"}--visually-hidden"
+          >
+            ${this.floating ? this.moveAnnouncement : ""}
+          </div>
           <div class="${blockClass}--wrapper">
             <slot></slot>
           </div>
@@ -160,9 +265,28 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSCoachmark.prototype, "floating", void 0);
-__decorate([property({ reflect: true })], CDSCoachmark.prototype, "highContrast", void 0);
-__decorate([property({ reflect: true })], CDSCoachmark.prototype, "dropShadow", void 0);
-__decorate([property({ reflect: true })], CDSCoachmark.prototype, "caret", 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(`c4p-coachmark`)], CDSCoachmark);
 var coachmark_default = CDSCoachmark;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"coachmark.js","names":["styles","customElement"],"sources":["../../../src/components/coachmark/coachmark.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025\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 '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport styles from './coachmark.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport '@carbon/web-components/es/components/popover/index.js';\nimport { POPOVER_ALIGNMENT } from '@carbon/web-components/es/components/popover/defs.js';\nimport { makeDraggable } from '../../utilities/makeDraggable/makeDraggable';\nimport {\n  resetCoachmarkDetailsSignal,\n  updateCoachmarkDetailsSignal,\n} from './coachmark-context';\n\nexport const blockClass = `${prefix}--coachmark`;\n\n/**\n * coachmark main component\n * @element c4p-coachmark\n * @fires c4p-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 c4p-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({ reflect: true })\n  highContrast?: boolean = false;\n  /**\n   * Specify whether a drop shadow should be rendered on the popover.\n   */\n  @property({ 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({ reflect: true })\n  caret?: boolean = false;\n\n  private dragCleanup: (() => void) | null = null;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.dragCleanup) {\n      this.dragCleanup();\n    }\n    resetCoachmarkDetailsSignal();\n  }\n\n  private setupDraggable() {\n    const popover = this.shadowRoot?.querySelector(\n      `.${blockClass}--popover`\n    ) as HTMLElement;\n    const popoverContent = popover.querySelector(\n      'cds-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 HTMLElement;\n    requestAnimationFrame(() => {\n      const dragHandle = header.shadowRoot?.querySelector(\n        `.${prefix}--coachmark-header-drag-handle`\n      ) as HTMLElement;\n\n      const draggable = makeDraggable({\n        el: popoverContent,\n        dragHandle: header,\n        focusableDragHandle: dragHandle,\n      });\n\n      const onDragStart = () => {\n        popoverContent.classList.add('is-dragging');\n        popoverContent.setAttribute(\n          'aria-label',\n          'Picked up the draggable popoverContent'\n        );\n      };\n      const onDragEnd = () => {\n        popoverContent.classList.remove('is-dragging');\n        popoverContent.setAttribute(\n          'aria-label',\n          'Draggable popoverContent was dropped'\n        );\n      };\n\n      popoverContent.addEventListener('dragstart', onDragStart);\n      popoverContent.addEventListener('dragend', onDragEnd);\n\n      // store cleanup\n      this.dragCleanup = () => {\n        popoverContent.removeEventListener('dragstart', onDragStart);\n        popoverContent.removeEventListener('dragend', onDragEnd);\n        draggable.cleanup?.();\n      };\n    });\n  }\n\n  firstUpdated() {\n    if (this.floating) {\n      this.classList.add(`${blockClass}--floating`);\n      this.setupDraggable();\n      updateCoachmarkDetailsSignal({\n        name: 'floating',\n        detail: this.floating,\n      });\n    }\n  }\n\n  updated(changedProps: Map<string, unknown>) {\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      } else {\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSCoachmark).eventClose,\n            init\n          )\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-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-popover-closed=${this.handlePopoverClosed}\n      >\n        <slot name=\"trigger\"></slot>\n        <cds-popover-content part=\"popover-content\" exportparts=\"content\">\n          <div class=\"${blockClass}--wrapper\">\n            <slot></slot>\n          </div>\n        </cds-popover-content>\n      </cds-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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"}
+{"version":3,"file":"coachmark.js","names":["customEvent","styles","customElement"],"sources":["../../../src/components/coachmark/coachmark.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025\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 '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport styles from './coachmark.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport '@carbon/web-components/es/components/popover/index.js';\nimport { POPOVER_ALIGNMENT } from '@carbon/web-components/es/components/popover/defs.js';\nimport { makeDraggable } from '../../utilities/makeDraggable/makeDraggable';\nimport {\n  resetCoachmarkDetailsSignal,\n  updateCoachmarkDetailsSignal,\n} from './coachmark-context';\n\nexport const blockClass = `${prefix}--coachmark`;\n\n/**\n * coachmark main component\n * @element c4p-coachmark\n * @fires c4p-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 c4p-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-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-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-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-popover-closed=${this.handlePopoverClosed}\n      >\n        <slot name=\"trigger\"></slot>\n        <cds-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          >\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          >\n            ${this.floating ? this.moveAnnouncement : ''}\n          </div>\n          <div class=\"${blockClass}--wrapper\">\n            <slot></slot>\n          </div>\n        </cds-popover-content>\n      </cds-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/components/coachmark/coachmark.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from "lit";
 //#region src/components/coachmark/coachmark.scss?lit
-var coachmark_default = css([".c4p--coachmark-beacon{position:relative}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:before{display:none}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:after{background-color:#4589ff;block-size:.75rem;border-radius:50%;content:\"\";inline-size:.75rem;inset-block-start:.625rem;inset-inline-start:.625rem;position:absolute}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus{outline:transparent}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus:before{block-size:18px;border-radius:100%;content:\"\";display:block;inline-size:18px;inset-block-start:7px;inset-inline-start:7px;outline:.125rem var(--cds-focus,#0f62fe) solid;position:absolute}.c4p--coachmark-beacon .c4p--coachmark-beacon__target{background-color:transparent;block-size:2rem;border:none;border-radius:50%;cursor:pointer;display:flex;inline-size:2rem;padding:0}.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle{animation:none}.c4p--coachmark-beacon__center{block-size:5rem;inline-size:5rem;inset-block-start:-1.375rem;inset-inline-start:-1.375rem;pointer-events:none;position:absolute;z-index:6900}.c4p--coachmark-beacon__center circle{animation:ripple 2s infinite;fill:var(--cds-support-info,#0043ce);fill-opacity:0;-webkit-mask-image:none;mask-image:none;stroke:var(--cds-support-info,#0043ce);stroke-opacity:0;stroke-width:1px;transition-timing-function:motion exit,productive}@media (prefers-reduced-motion){.c4p--coachmark-beacon__center circle{animation:none}}@keyframes ripple{0%{fill-opacity:0;r:1px;stroke-opacity:0;transition-timing-function:cubic-bezier(0,0,.38,.9)}31%{fill-opacity:.2;stroke-opacity:1}62%{fill-opacity:0;r:32px;stroke-opacity:0}to{fill-opacity:0;r:32px;stroke-opacity:0}}@keyframes ring-ripple{0%{fill-opacity:0;r:12px;stroke-opacity:0;transition-timing-function:cubic-bezier(0,0,.38,.9)}31%{fill-opacity:.2;stroke-opacity:1}62%{fill-opacity:0;r:32px;stroke-opacity:0}to{fill-opacity:0;r:32px;stroke-opacity:0}}:host{display:inline-block}.c4p--coachmark--popover{position:fixed}.c4p--coachmark--popover cds-popover-content.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)}"]);
+var coachmark_default = css([".c4p--coachmark-beacon{position:relative}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:before{display:none}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:after{background-color:#4589ff;block-size:.75rem;border-radius:50%;content:\"\";inline-size:.75rem;inset-block-start:.625rem;inset-inline-start:.625rem;position:absolute}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus{outline:transparent}.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus:before{block-size:18px;border-radius:100%;content:\"\";display:block;inline-size:18px;inset-block-start:7px;inset-inline-start:7px;outline:.125rem var(--cds-focus,#0f62fe) solid;position:absolute}.c4p--coachmark-beacon .c4p--coachmark-beacon__target{background-color:transparent;block-size:2rem;border:none;border-radius:50%;cursor:pointer;display:flex;inline-size:2rem;padding:0}.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle{animation:none}.c4p--coachmark-beacon__center{block-size:5rem;inline-size:5rem;inset-block-start:-1.375rem;inset-inline-start:-1.375rem;pointer-events:none;position:absolute;z-index:6900}.c4p--coachmark-beacon__center circle{animation:ripple 2s infinite;fill:var(--cds-support-info,#0043ce);fill-opacity:0;-webkit-mask-image:none;mask-image:none;stroke:var(--cds-support-info,#0043ce);stroke-opacity:0;stroke-width:1px;transition-timing-function:motion exit,productive}@media (prefers-reduced-motion){.c4p--coachmark-beacon__center circle{animation:none}}@keyframes ripple{0%{fill-opacity:0;r:1px;stroke-opacity:0;transition-timing-function:cubic-bezier(0,0,.38,.9)}31%{fill-opacity:.2;stroke-opacity:1}62%{fill-opacity:0;r:32px;stroke-opacity:0}to{fill-opacity:0;r:32px;stroke-opacity:0}}@keyframes ring-ripple{0%{fill-opacity:0;r:12px;stroke-opacity:0;transition-timing-function:cubic-bezier(0,0,.38,.9)}31%{fill-opacity:.2;stroke-opacity:1}62%{fill-opacity:0;r:32px;stroke-opacity:0}to{fill-opacity:0;r:32px;stroke-opacity:0}}:host{display:inline-block}.c4p--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--coachmark--popover{position:fixed}.c4p--coachmark--popover cds-popover-content.c4p--coachmark--is-dragging::part(content),.c4p--coachmark--popover cds-popover-content.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 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"coachmark.scss.js","names":[],"sources":["../../../src/components/coachmark/coachmark.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025\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/ibm-products-styles/scss/config';\n@use '@carbon/ibm-products-styles/scss/components/Coachmark/_coachmark-beacon';\n\n$prefix: config.$pkg-prefix;\n$carbon-prefix: config.$carbon-prefix;\n\n$block-class: #{$prefix}--coachmark;\n\n:host {\n  display: inline-block;\n}\n\n.#{$block-class}--popover {\n  position: fixed;\n\n  /* stylelint-disable-next-line selector-type-no-unknown */\n  #{$carbon-prefix}-popover-content.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":""}
+{"version":3,"file":"coachmark.scss.js","names":[],"sources":["../../../src/components/coachmark/coachmark.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025\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/ibm-products-styles/scss/config';\n@use '@carbon/ibm-products-styles/scss/components/Coachmark/_coachmark-beacon';\n\n$prefix: config.$pkg-prefix;\n$carbon-prefix: config.$carbon-prefix;\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  /* stylelint-disable-next-line selector-type-no-unknown */\n  #{$carbon-prefix}-popover-content.is-dragging::part(content),\n  #{$carbon-prefix}-popover-content.#{$block-class}--is-dragging::part(\n      content\n    ) {\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":""}