@fabric-msft/copilot-web 7.0.0

package/esm/components/prompt-starter/prompt-starter.js

@@ -0,0 +1,764 @@
+import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+import { attr, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { keyEscape, keyTab, keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { createUniqueId, TooltipDefinition } from '@fabric-msft/fabric-web';
+import { appendTextToTarget } from '../../util/component-utilities/append-text-to-target.js';
+import '../feedback-group/feedback-group.js';
+import { FeedbackGroupStates, FeedbackGroupEventNames } from '../feedback-group/feedback-group.options.js';
+import { definition } from '../feedback-group/feedback-group.definition.js';
+import '../feedback-group/feedback-group.styles.js';
+import '../feedback-group/feedback-group.template.js';
+import '../like-button/like-button.js';
+import { definition as definition$1 } from '../like-button/like-button.definition.js';
+import '../like-button/like-button.options.js';
+import '../dislike-button/dislike-button.js';
+import { definition as definition$2 } from '../dislike-button/dislike-button.definition.js';
+import '../dislike-button/dislike-button.options.js';
+import { PromptStarterFeedbackStates, PromptStarterEvents } from './prompt-starter.options.js';
+import { DesignSystem } from '../design-system.js';
+import '../prompt-placeholder/prompt-placeholder.js';
+import { definition as definition$3 } from '../prompt-placeholder/prompt-placeholder.definition.js';
+import '../prompt-placeholder/prompt-placeholder.styles.js';
+import '../prompt-placeholder/prompt-placeholder.template.js';
+
+var _PromptStarter_instances, _PromptStarter_eventController, _PromptStarter_PROMPT_STARTER_TOOLTIP_ANCHOR_ID_PREFIX, _PromptStarter_tooltipAnchorId, _PromptStarter_toolbarFocusableElements_get, _PromptStarter_reattachListenersIfConnected, _PromptStarter_updateTextContent, _PromptStarter_extractPlaceholderTexts, _PromptStarter_preparePromptWithPlaceholder, _PromptStarter_getTargetValue, _PromptStarter_setCursorAtPosition, _PromptStarter_handleMouseLeave, _PromptStarter_handleMouseDown, _PromptStarter_handleMouseUp, _PromptStarter_handleHostFocus, _PromptStarter_isFocusWithinElement, _PromptStarter_isFocusInToolbar, _PromptStarter_handleHostBlur, _PromptStarter_handleToolbarBlur, _PromptStarter_focusPromptBody, _PromptStarter_handleToolbarKeydown, _PromptStarter_handleFeedbackChange, _PromptStarter_shouldDelegateKeyEvent, _PromptStarter_handleKeydown, _PromptStarter_handleKeyup, _PromptStarter_isInteractiveElement, _PromptStarter_resetToolbarTabIndex, _PromptStarter_emitSelectEvent, _PromptStarter_createTooltipAnchorId, _PromptStarter_attachListeners, _PromptStarter_attachToolbarListenersToElement, _PromptStarter_attachFeedbackButtonListeners, _PromptStarter_detachListeners;
+/**
+ * PromptStarter
+ * @summary A clickable card component for displaying and selecting prompts with feedback functionality. Provides keyboard navigation, accessibility features, and event handling for prompt selection and feedback management via an integrated tooltip toolbar.
+ *
+ * @example
+ * ```html
+ * <fabric-prompt-starter prompt="Example Prompt" category="Example Category">
+ *   <div>Default Prompt Content</div>
+ *   <div slot="footer">
+ *     <svg />
+ *   </div>
+ * </fabric-prompt-starter>
+ * ```
+ *
+ * @attr {string} prompt - The value associated with the prompt starter
+ * @attr {string} category - The prompt starter's category
+ * @attr {string} target - The target element ID to append the prompt to on selection
+ * @attr {PromptStarterFeedbackState} feedback - The feedback state: 'none', 'liked', or 'disliked'. Writable for state persistence.
+ *
+ * @prop {string} prompt - The prompt starter's prompt content
+ * @prop {string} category - The prompt starter's category
+ * @prop {string[]} placeholders - Array of placeholder texts extracted from slotted content (readonly). Derived from elements with ID prefixed with 'prompt-placeholder', in order of detection
+ * @prop {string} placeholderText - The first placeholder text for convenience (readonly). Empty string if no placeholders exist
+ * @prop {string} mainText - The main text content derived from slotted content. Lowercase and trimmed - used for filtering
+ * @prop {HTMLElement[]} slottedPrompt - The default slotted content
+ * @prop {PromptStarterFeedbackState} feedbackState - Current feedback state (readonly): 'none', 'liked', or 'disliked'
+ * @prop {PromptStarterFeedbackState} feedback - The feedback state: 'none', 'liked', or 'disliked'. Writable for state persistence.
+ * @prop {string} target - The target element ID to append the prompt to on selection
+ *
+ * @slot - Default slot for prompt content
+ * @slot footer - Slot for the footer content
+ * @slot toolbar-actions - Slot for custom actions in the tooltip toolbar
+ * @slot icon - Header icon slot for displaying an icon above the prompt content
+ * @slot like - Slot for custom like button (passes through to feedback-group). Default provides fabric-like-button with aria-label="Like this prompt"
+ * @slot dislike - Slot for custom dislike button (passes through to feedback-group). Default provides fabric-dislike-button with aria-label="Dislike this prompt"
+ *
+ * @csspart prompt-starter - The main card container
+ *
+ * @method handleClick - Handles the click event and triggers the submission
+ * @method handleKeydown - Handles key down event on the Prompt Starter body for prompt selection
+ * @method handleKeyup - Handles key up event for Space activation
+ * @method handleTooltipClick - Prevents tooltip interactions from selecting the card
+ * @method handleToolbarKeydown - Handles arrow key navigation within the tooltip toolbar
+ * @method appendPromptToTarget - Appends the prompt to the configured target element
+ * @method updateTextContent - Updates the mainText property from the slotted content
+ * @method slottedPromptChanged - Handles changes to the slottedPrompt
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM
+ * @method disconnectedCallback - Lifecycle callback when component is disconnected from DOM
+ *
+ * @fires prompt-select - Fires when the card is selected. Detail includes prompt, placeholders array (in detection order), and target reference.
+ *
+ * @extends FASTElement
+ * @tagname fabric-prompt-starter
+ * @public
+ */
+/**
+ * Tag name for the prompt-placeholder component.
+ * @internal
+ */
+const PROMPT_PLACEHOLDER_TAG = `${DesignSystem.prefix}-prompt-placeholder`;
+class PromptStarter extends FASTElement {
+  constructor() {
+    super(...arguments);
+    _PromptStarter_instances.add(this);
+    // Centralized controller to manage all event listeners added by this component
+    _PromptStarter_eventController.set(this, null);
+    // Constants for constructing fabric-tooltip.anchor ID
+    _PromptStarter_PROMPT_STARTER_TOOLTIP_ANCHOR_ID_PREFIX.set(this, "fabric-prompt-starter-tooltip-anchor-");
+    _PromptStarter_tooltipAnchorId.set(this, "");
+    /**
+     * The prompt starter's prompt content.
+     *
+     * @type {string}
+     * @public
+     */
+    this.prompt = "";
+    /**
+     * The prompt starter's category.
+     *
+     * @type {string}
+     * @public
+     */
+    this.category = "";
+    /**
+     * The main text content derived from slotted content
+     * Lowercase and trimmed - used for filtering
+     * @public
+     */
+    this.mainText = "";
+    /**
+     * Slotted like button elements (pass-through to feedback-group).
+     * @internal
+     */
+    this.slottedLikeButton = [];
+    /**
+     * Slotted dislike button elements (pass-through to feedback-group).
+     * @internal
+     */
+    this.slottedDislikeButton = [];
+    /**
+     * The target element ID to append the prompt to when selected.
+     * @public
+     */
+    this.target = "";
+    /**
+     * All placeholder texts extracted from slotted content, in order of detection.
+     * Derived from elements with IDs prefixed with 'prompt-placeholder'.
+     * When present, placeholders are removed from the appended text and cursor
+     * is positioned at the first placeholder location.
+     * @public
+     * @readonly
+     */
+    this.placeholders = [];
+    /**
+     * Indicates whether the prompt starter has been activated/pressed.
+     * @public
+     */
+    this.pressed = false;
+    /**
+     * The feedback state of the prompt starter.
+     * Accepts 'none', 'liked', or 'disliked'. Writable for state persistence.
+     * @public
+     */
+    this.feedback = PromptStarterFeedbackStates.none;
+    /**
+     * Handles the click event and triggers the submission.
+     * Ignores clicks originating from interactive elements within the card.
+     * This currently only handles link entities.
+     */
+    this.handleClick = e => {
+      // Check if click originated from an interactive element using composedPath
+      // to properly traverse shadow DOM boundaries
+      if (e) {
+        const isFromInteractive = e.composedPath().some(el => __classPrivateFieldGet(this, _PromptStarter_isInteractiveElement, "f").call(this, el));
+        // Let the interactive element handle the click
+        if (isFromInteractive) {
+          return true;
+        }
+      }
+      if (this.prompt) {
+        this.appendPromptToTarget();
+        __classPrivateFieldGet(this, _PromptStarter_emitSelectEvent, "f").call(this);
+      }
+      return true;
+    };
+    _PromptStarter_handleMouseLeave.set(this, () => {
+      __classPrivateFieldGet(this, _PromptStarter_handleMouseUp, "f").call(this);
+      __classPrivateFieldGet(this, _PromptStarter_handleHostBlur, "f").call(this);
+    });
+    /**
+     * Handles mousedown to set pressed state.
+     * @internal
+     */
+    _PromptStarter_handleMouseDown.set(this, () => {
+      this.pressed = true;
+    });
+    /**
+     * Handles mouseup to reset pressed state.
+     * @internal
+     */
+    _PromptStarter_handleMouseUp.set(this, () => {
+      this.pressed = false;
+    });
+    /** Prevent tooltip interactions from selecting the card. */
+    this.handleTooltipClick = e => {
+      e.stopPropagation();
+    };
+    /**
+     * Shows the tooltip when the prompt card receives focus.
+     * @internal
+     */
+    _PromptStarter_handleHostFocus.set(this, () => {
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.mouseenterAnchorHandler();
+    });
+    /**
+     * Checks if the given element (or its children) contains the active element.
+     * @internal
+     */
+    _PromptStarter_isFocusWithinElement.set(this, el => {
+      const activeElement = document.activeElement;
+      return el === activeElement || el.contains(activeElement);
+    });
+    /**
+     * Checks if focus is currently within the toolbar or any of its focusable elements.
+     * @internal
+     */
+    _PromptStarter_isFocusInToolbar.set(this, () => {
+      var _a, _b;
+      const activeElement = document.activeElement;
+      if ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) return true;
+      if ((_b = this.feedbackGroup) === null || _b === void 0 ? void 0 : _b.contains(activeElement)) return true;
+      return __classPrivateFieldGet(this, _PromptStarter_instances, "a", _PromptStarter_toolbarFocusableElements_get).some(el => __classPrivateFieldGet(this, _PromptStarter_isFocusWithinElement, "f").call(this, el));
+    });
+    /**
+     * Hides the tooltip when the prompt card loses focus.
+     * @internal
+     */
+    _PromptStarter_handleHostBlur.set(this, () => {
+      setTimeout(() => {
+        var _a;
+        if (__classPrivateFieldGet(this, _PromptStarter_isFocusInToolbar, "f").call(this)) return;
+        // Focus left the prompt card and tooltip entirely, hide the tooltip
+        __classPrivateFieldGet(this, _PromptStarter_resetToolbarTabIndex, "f").call(this);
+        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.mouseleaveAnchorHandler();
+      }, 0);
+    });
+    /**
+     * Handles blur on toolbar elements, checking if focus is leaving the tooltip entirely.
+     * @internal
+     */
+    _PromptStarter_handleToolbarBlur.set(this, () => {
+      setTimeout(() => {
+        if (document.activeElement === this.component) {
+          __classPrivateFieldGet(this, _PromptStarter_resetToolbarTabIndex, "f").call(this);
+          return;
+        }
+        if (__classPrivateFieldGet(this, _PromptStarter_isFocusInToolbar, "f").call(this)) return;
+        // Focus left the tooltip entirely, hide it and reset tabindex
+        __classPrivateFieldGet(this, _PromptStarter_resetToolbarTabIndex, "f").call(this);
+      }, 0);
+    });
+    /** Returns focus to the prompt card body. @internal */
+    _PromptStarter_focusPromptBody.set(this, () => {
+      var _a;
+      (_a = this.component) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+    /**
+     * Handles keydown events within the tooltip toolbar.
+     * - Escape: returns focus to the prompt card
+     * - Tab: exits the toolbar
+     * - Arrow Left/Right: cycles focus through toolbar items
+     * @internal
+     */
+    _PromptStarter_handleToolbarKeydown.set(this, event => {
+      if (event.key === keyEscape) {
+        event.preventDefault();
+        event.stopPropagation();
+        __classPrivateFieldGet(this, _PromptStarter_focusPromptBody, "f").call(this);
+        return;
+      }
+      if (event.key === keyTab) {
+        __classPrivateFieldGet(this, _PromptStarter_resetToolbarTabIndex, "f").call(this);
+        return;
+      }
+      if (event.key !== keyArrowLeft && event.key !== keyArrowRight) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const elements = __classPrivateFieldGet(this, _PromptStarter_instances, "a", _PromptStarter_toolbarFocusableElements_get);
+      if (elements.length === 0) return;
+      const currentElement = event.currentTarget;
+      const currentIndex = elements.indexOf(currentElement);
+      if (currentIndex === -1) return;
+      const direction = event.key === keyArrowRight ? 1 : -1;
+      const nextIndex = (currentIndex + direction + elements.length) % elements.length;
+      elements.forEach(el => el.tabIndex = -1);
+      elements[nextIndex].tabIndex = 0;
+      elements[nextIndex].focus();
+    });
+    /**
+     * Handles feedback change events from the feedback group.
+     * Updates the feedback attribute to stay in sync.
+     * @internal
+     */
+    _PromptStarter_handleFeedbackChange.set(this, event => {
+      var _a, _b;
+      const customEvent = event;
+      const newState = (_b = (_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : FeedbackGroupStates.none;
+      this.feedback = newState;
+    });
+    /**
+     * Checks if an event originated from an interactive element or within the toolbar.
+     * @internal
+     */
+    _PromptStarter_shouldDelegateKeyEvent.set(this, e => {
+      const path = e.composedPath();
+      // Check for interactive elements (links, buttons)
+      if (path.some(el => __classPrivateFieldGet(this, _PromptStarter_isInteractiveElement, "f").call(this, el))) {
+        return true;
+      }
+      // Check for toolbar elements
+      return path.some(el => {
+        if (!(el instanceof HTMLElement)) return false;
+        return el.getAttribute("role") === "toolbar" || el === this.tooltip || el.tagName.toLowerCase() === "fabric-tooltip" || el.classList.contains("tooltip");
+      });
+    });
+    /**
+     * Handles key down event on the Prompt Card body for prompt selection.
+     * @internal
+     */
+    _PromptStarter_handleKeydown.set(this, e => {
+      if (e.key === keyEnter || e.key === keySpace) {
+        if (__classPrivateFieldGet(this, _PromptStarter_shouldDelegateKeyEvent, "f").call(this, e)) return true;
+        e.stopPropagation();
+        if (e.key === keyEnter) {
+          e.preventDefault();
+          this.appendPromptToTarget();
+          __classPrivateFieldGet(this, _PromptStarter_emitSelectEvent, "f").call(this);
+        } else {
+          e.preventDefault(); // Prevent scrolling; activation occurs on keyup
+        }
+      }
+      return true;
+    });
+    /**
+     * Space should activate on keyup to align with native button behavior
+     * @internal
+     */
+    _PromptStarter_handleKeyup.set(this, e => {
+      if (e.key === keySpace) {
+        if (__classPrivateFieldGet(this, _PromptStarter_shouldDelegateKeyEvent, "f").call(this, e)) return true;
+        e.stopPropagation();
+        this.pressed = false;
+        if (this.prompt) {
+          this.appendPromptToTarget();
+          __classPrivateFieldGet(this, _PromptStarter_emitSelectEvent, "f").call(this);
+        }
+      }
+      return true;
+    });
+    /** Checks if an event target is an interactive element (e.g., link, button) that should handle its own events. */
+    _PromptStarter_isInteractiveElement.set(this, el => {
+      if (!(el instanceof HTMLElement) || el === this) {
+        return false;
+      }
+      // Check for links
+      if (el.hasAttribute("href")) {
+        return true;
+      }
+      // Check for buttons (native or custom elements with button role or "button" in tag name)
+      const tagName = el.tagName.toLowerCase();
+      if (tagName === "button" || el.getAttribute("role") === "button" || tagName.includes("button")) {
+        return true;
+      }
+      return false;
+    });
+    /**
+     * Resets the tabindex of all toolbar focusable elements.
+     * Sets the first element to tabindex 0 and all others to -1.
+     * @internal
+     */
+    _PromptStarter_resetToolbarTabIndex.set(this, () => {
+      const elements = __classPrivateFieldGet(this, _PromptStarter_instances, "a", _PromptStarter_toolbarFocusableElements_get);
+      elements.forEach((el, index) => {
+        el.tabIndex = index === 0 ? 0 : -1;
+      });
+    });
+    /**
+     * Emits a custom "prompt-select" event with the current prompt value and placeholder metadata.
+     * @fires prompt-select - Contains the prompt value, placeholders array, and target reference in the detail
+     * @internal
+     */
+    _PromptStarter_emitSelectEvent.set(this, () => {
+      const eventDetails = {
+        target: this,
+        prompt: this.prompt,
+        placeholders: [...this.placeholders]
+      };
+      this.dispatchEvent(new CustomEvent(PromptStarterEvents.promptSelect, {
+        bubbles: true,
+        composed: true,
+        detail: eventDetails
+      }));
+    });
+    /**
+     * Creates a unique tooltip anchor ID for this prompt card instance.
+     * Uses a prefix and incremented counter to ensure uniqueness across multiple instances.
+     * @returns string - the generated unique tooltip anchor ID.
+     * @internal
+     */
+    _PromptStarter_createTooltipAnchorId.set(this, () => {
+      __classPrivateFieldSet(this, _PromptStarter_tooltipAnchorId, createUniqueId(__classPrivateFieldGet(this, _PromptStarter_PROMPT_STARTER_TOOLTIP_ANCHOR_ID_PREFIX, "f")), "f");
+      return __classPrivateFieldGet(this, _PromptStarter_tooltipAnchorId, "f");
+    });
+    /** Attach all event listeners using a shared AbortController signal */
+    _PromptStarter_attachListeners.set(this, () => {
+      var _a, _b;
+      (_a = __classPrivateFieldGet(this, _PromptStarter_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+      __classPrivateFieldSet(this, _PromptStarter_eventController, new AbortController(), "f");
+      const {
+        signal
+      } = __classPrivateFieldGet(this, _PromptStarter_eventController, "f");
+      const btn = this.component;
+      if (btn) {
+        btn.addEventListener("mousedown", __classPrivateFieldGet(this, _PromptStarter_handleMouseDown, "f"), {
+          signal
+        });
+        btn.addEventListener("mouseup", __classPrivateFieldGet(this, _PromptStarter_handleMouseUp, "f"), {
+          signal
+        });
+        btn.addEventListener("mouseleave", __classPrivateFieldGet(this, _PromptStarter_handleMouseLeave, "f"), {
+          signal
+        });
+        btn.addEventListener("keydown", __classPrivateFieldGet(this, _PromptStarter_handleKeydown, "f"), {
+          signal
+        });
+        btn.addEventListener("keyup", __classPrivateFieldGet(this, _PromptStarter_handleKeyup, "f"), {
+          signal
+        });
+        btn.addEventListener("mouseenter", __classPrivateFieldGet(this, _PromptStarter_handleHostFocus, "f"), {
+          signal
+        });
+        btn.addEventListener("focus", __classPrivateFieldGet(this, _PromptStarter_handleHostFocus, "f"), {
+          signal
+        });
+        btn.addEventListener("blur", __classPrivateFieldGet(this, _PromptStarter_handleHostBlur, "f"), {
+          signal
+        });
+      }
+      const contentContainer = this.contentContainer;
+      if (contentContainer) {
+        contentContainer.addEventListener("mouseenter", __classPrivateFieldGet(this, _PromptStarter_handleHostFocus, "f"), {
+          signal
+        });
+        contentContainer.addEventListener("mouseleave", __classPrivateFieldGet(this, _PromptStarter_handleHostFocus, "f"), {
+          signal
+        });
+      }
+      const tooltip = this.tooltip;
+      if (tooltip) {
+        tooltip.addEventListener("keydown", __classPrivateFieldGet(this, _PromptStarter_handleToolbarKeydown, "f"), {
+          signal
+        });
+      }
+      // Listen to feedback-change events from the feedback group
+      const feedbackGroup = this.feedbackGroup;
+      if (feedbackGroup) {
+        feedbackGroup.addEventListener(FeedbackGroupEventNames.feedbackChange, __classPrivateFieldGet(this, _PromptStarter_handleFeedbackChange, "f"), {
+          signal
+        });
+        // Defer button listener attachment to allow slots to be assigned
+        __classPrivateFieldGet(this, _PromptStarter_attachFeedbackButtonListeners, "f").call(this, signal);
+      }
+      (_b = this.slottedToolbarActions) === null || _b === void 0 ? void 0 : _b.forEach(node => {
+        if (node instanceof HTMLElement) {
+          __classPrivateFieldGet(this, _PromptStarter_attachToolbarListenersToElement, "f").call(this, node, signal);
+        }
+      });
+    });
+    /** Attaches toolbar keydown and blur listeners to an element. @internal */
+    _PromptStarter_attachToolbarListenersToElement.set(this, (el, signal) => {
+      el.addEventListener("keydown", __classPrivateFieldGet(this, _PromptStarter_handleToolbarKeydown, "f"), {
+        signal
+      });
+      el.addEventListener("blur", __classPrivateFieldGet(this, _PromptStarter_handleToolbarBlur, "f"), {
+        signal
+      });
+    });
+    /**
+     * Attaches keyboard and blur listeners to the feedback buttons.
+     * Defers attachment if buttons aren't available yet (waiting for template render).
+     * @internal
+     */
+    _PromptStarter_attachFeedbackButtonListeners.set(this, signal => {
+      var _a, _b, _c, _d, _e, _f;
+      const likeButton = (_b = (_a = this.slottedLikeButton) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("fabric-like-button");
+      const dislikeButton = (_e = (_d = this.slottedDislikeButton) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : (_f = this.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector("fabric-dislike-button");
+      if (!likeButton || !dislikeButton) {
+        Updates.enqueue(() => __classPrivateFieldGet(this, _PromptStarter_attachFeedbackButtonListeners, "f").call(this, signal));
+        return;
+      }
+      if (signal.aborted) return;
+      __classPrivateFieldGet(this, _PromptStarter_attachToolbarListenersToElement, "f").call(this, likeButton, signal);
+      __classPrivateFieldGet(this, _PromptStarter_attachToolbarListenersToElement, "f").call(this, dislikeButton, signal);
+    });
+    /** Abort and clear the current controller to remove all listeners @internal */
+    _PromptStarter_detachListeners.set(this, () => {
+      var _a;
+      (_a = __classPrivateFieldGet(this, _PromptStarter_eventController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+      __classPrivateFieldSet(this, _PromptStarter_eventController, null, "f");
+    });
+  }
+  /**
+   * The first placeholder text, for convenience.
+   * Returns empty string if no placeholders exist.
+   * @public
+   * @readonly
+   */
+  get placeholderText() {
+    var _a;
+    return (_a = this.placeholders[0]) !== null && _a !== void 0 ? _a : "";
+  }
+  /** Current feedback state (readonly). Returns the feedback attribute value. */
+  get feedbackState() {
+    return this.feedback;
+  }
+  /**
+   * Handles changes to the feedback attribute.
+   * Syncs the feedback state to the internal feedback group.
+   * @internal
+   */
+  feedbackChanged(_oldValue, newValue) {
+    if (this.feedbackGroup && this.feedbackGroup.state !== newValue) {
+      this.feedbackGroup.state = newValue;
+    }
+  }
+  /** The id used to anchor the internal tooltip. */
+  get tooltipAnchorId() {
+    return !!__classPrivateFieldGet(this, _PromptStarter_tooltipAnchorId, "f") ? __classPrivateFieldGet(this, _PromptStarter_tooltipAnchorId, "f") : __classPrivateFieldGet(this, _PromptStarter_createTooltipAnchorId, "f").call(this);
+  }
+  /**
+   * Handles changes to the feedback group reference.
+   * Attaches event listeners when the feedback group is available.
+   * @internal
+   */
+  feedbackGroupChanged() {
+    if (this.$fastController.isConnected) {
+      __classPrivateFieldGet(this, _PromptStarter_attachListeners, "f").call(this);
+      // Sync the feedback state to the feedback group
+      if (this.feedbackGroup && this.feedback) {
+        this.feedbackGroup.state = this.feedback;
+      }
+    }
+  }
+  /**
+   * Handles changes to the slotted toolbar actions.
+   * Attaches keydown listeners to new slotted elements for arrow key navigation.
+   * @internal
+   */
+  slottedToolbarActionsChanged() {
+    __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_reattachListenersIfConnected).call(this);
+  }
+  /**
+   * Handles changes to the slotted like button.
+   * Re-attaches listeners when custom like button is slotted.
+   * @internal
+   */
+  slottedLikeButtonChanged() {
+    __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_reattachListenersIfConnected).call(this);
+  }
+  /**
+   * Handles changes to the slotted dislike button.
+   * Re-attaches listeners when custom dislike button is slotted.
+   * @internal
+   */
+  slottedDislikeButtonChanged() {
+    __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_reattachListenersIfConnected).call(this);
+  }
+  /**
+   * Handles changes to the slottedPrompt
+   * @param prev - Previous slotted nodes
+   * @param next - New slotted nodes
+   */
+  slottedPromptChanged(_prev, next) {
+    var _a;
+    __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_updateTextContent).call(this);
+    if (this.$fastController.isConnected && !this.prompt) {
+      const textContent = (_a = next === null || next === void 0 ? void 0 : next.map(node => node.textContent).join("")) !== null && _a !== void 0 ? _a : "";
+      this.prompt = textContent.trim();
+    }
+  }
+  buttonChanged(_prev, next) {
+    // Rewire listeners whenever the ref changes
+    // Abort previous listeners so we don't accumulate duplicates
+    __classPrivateFieldGet(this, _PromptStarter_detachListeners, "f").call(this);
+    if (next) {
+      __classPrivateFieldGet(this, _PromptStarter_attachListeners, "f").call(this);
+    }
+  }
+  /**
+   * Appends the current prompt to the configured target element (if any).
+   * Supports native inputs/textareas and custom elements exposing a `value` prop
+   * (e.g., fabric-textarea). Emits input/change events after mutation.
+   * If a placeholder is defined, the placeholder text is excluded from the appended
+   * content and the cursor is positioned where the placeholder would have been.
+   * @internal
+   */
+  appendPromptToTarget() {
+    if (!this.target || !this.prompt) return;
+    const el = document.getElementById(this.target);
+    if (!el) return;
+    const {
+      promptToAppend,
+      cursorPosition
+    } = __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_preparePromptWithPlaceholder).call(this, el);
+    const res = appendTextToTarget(el, promptToAppend);
+    if (!res.ok) return;
+    // Position cursor at where placeholder would have been
+    if (cursorPosition !== null) {
+      __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_setCursorAtPosition).call(this, el, cursorPosition);
+    }
+    // Emit input/change according to target type
+    try {
+      if (el instanceof HTMLElement) {
+        el.dispatchEvent(new Event("input", {
+          bubbles: true,
+          composed: true
+        }));
+        el.dispatchEvent(new Event("change", {
+          bubbles: true,
+          composed: true
+        }));
+      }
+    } catch {}
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TooltipDefinition.define(DesignSystem.registry);
+    definition.define(DesignSystem.registry);
+    definition$1.define(DesignSystem.registry);
+    definition$2.define(DesignSystem.registry);
+    definition$3.define(DesignSystem.registry);
+    __classPrivateFieldGet(this, _PromptStarter_attachListeners, "f").call(this);
+  }
+  /**
+   * Lifecycle callback when component is disconnected from the DOM.
+   * Removes event listeners.
+   *
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _PromptStarter_detachListeners, "f").call(this);
+  }
+}
+_PromptStarter_eventController = new WeakMap(), _PromptStarter_PROMPT_STARTER_TOOLTIP_ANCHOR_ID_PREFIX = new WeakMap(), _PromptStarter_tooltipAnchorId = new WeakMap(), _PromptStarter_handleMouseLeave = new WeakMap(), _PromptStarter_handleMouseDown = new WeakMap(), _PromptStarter_handleMouseUp = new WeakMap(), _PromptStarter_handleHostFocus = new WeakMap(), _PromptStarter_isFocusWithinElement = new WeakMap(), _PromptStarter_isFocusInToolbar = new WeakMap(), _PromptStarter_handleHostBlur = new WeakMap(), _PromptStarter_handleToolbarBlur = new WeakMap(), _PromptStarter_focusPromptBody = new WeakMap(), _PromptStarter_handleToolbarKeydown = new WeakMap(), _PromptStarter_handleFeedbackChange = new WeakMap(), _PromptStarter_shouldDelegateKeyEvent = new WeakMap(), _PromptStarter_handleKeydown = new WeakMap(), _PromptStarter_handleKeyup = new WeakMap(), _PromptStarter_isInteractiveElement = new WeakMap(), _PromptStarter_resetToolbarTabIndex = new WeakMap(), _PromptStarter_emitSelectEvent = new WeakMap(), _PromptStarter_createTooltipAnchorId = new WeakMap(), _PromptStarter_attachListeners = new WeakMap(), _PromptStarter_attachToolbarListenersToElement = new WeakMap(), _PromptStarter_attachFeedbackButtonListeners = new WeakMap(), _PromptStarter_detachListeners = new WeakMap(), _PromptStarter_instances = new WeakSet(), _PromptStarter_toolbarFocusableElements_get = function _PromptStarter_toolbarFocusableElements_get() {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const elements = [];
+  // Get the like button - either slotted by user or query shadow DOM for default
+  const likeBtn = (_b = (_a = this.slottedLikeButton) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("fabric-like-button");
+  if (likeBtn) {
+    elements.push(likeBtn);
+  }
+  // Get the dislike button - either slotted by user or query shadow DOM for default
+  const dislikeBtn = (_e = (_d = this.slottedDislikeButton) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : (_f = this.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector("fabric-dislike-button");
+  if (dislikeBtn) {
+    elements.push(dislikeBtn);
+  }
+  // Include slotted toolbar actions
+  (_g = this.slottedToolbarActions) === null || _g === void 0 ? void 0 : _g.forEach(node => {
+    if (node instanceof HTMLElement) {
+      elements.push(node);
+    }
+  });
+  return elements;
+}, _PromptStarter_reattachListenersIfConnected = function _PromptStarter_reattachListenersIfConnected() {
+  if (this.$fastController.isConnected) {
+    __classPrivateFieldGet(this, _PromptStarter_attachListeners, "f").call(this);
+  }
+}, _PromptStarter_updateTextContent = function _PromptStarter_updateTextContent() {
+  const elements = this.slottedPrompt || [];
+  const raw = elements.filter(element => element.nodeType === Node.TEXT_NODE || element.nodeType === Node.ELEMENT_NODE).map(element => {
+    var _a;
+    return (_a = element.textContent) !== null && _a !== void 0 ? _a : "";
+  }).join(" ");
+  this.mainText = raw.replace(/\s+/g, " ").trim().toLowerCase();
+  // Extract placeholder texts from elements with ID prefixed with 'prompt-placeholder'
+  __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_extractPlaceholderTexts).call(this);
+}, _PromptStarter_extractPlaceholderTexts = function _PromptStarter_extractPlaceholderTexts() {
+  var _a;
+  const elements = this.slottedPrompt || [];
+  const foundPlaceholders = [];
+  for (const element of elements) {
+    if (element.nodeType !== Node.ELEMENT_NODE) continue;
+    // Check if this element is a prompt-placeholder component
+    if (element.tagName.toLowerCase() === PROMPT_PLACEHOLDER_TAG) {
+      const placeholder = element;
+      const value = placeholder.getPlaceholderValue();
+      if (value) foundPlaceholders.push(value);
+    }
+    // Search for prompt-placeholder components within child elements
+    const placeholderComponents = (_a = element.querySelectorAll) === null || _a === void 0 ? void 0 : _a.call(element, PROMPT_PLACEHOLDER_TAG);
+    if (placeholderComponents) {
+      for (const placeholderEl of placeholderComponents) {
+        const placeholder = placeholderEl;
+        const value = placeholder.getPlaceholderValue();
+        if (value) foundPlaceholders.push(value);
+      }
+    }
+  }
+  this.placeholders = foundPlaceholders;
+}, _PromptStarter_preparePromptWithPlaceholder = function _PromptStarter_preparePromptWithPlaceholder(target) {
+  if (this.placeholders.length === 0) {
+    return {
+      promptToAppend: this.prompt,
+      cursorPosition: null
+    };
+  }
+  let promptToAppend = this.prompt;
+  let cursorPosition = null;
+  const currentValue = __classPrivateFieldGet(this, _PromptStarter_instances, "m", _PromptStarter_getTargetValue).call(this, target);
+  const baseOffset = currentValue ? currentValue.length + 1 : 0;
+  // Process placeholders in order - remove all, cursor at first
+  for (const placeholder of this.placeholders) {
+    const placeholderIndex = promptToAppend.indexOf(placeholder);
+    if (placeholderIndex === -1) continue;
+    // Set cursor position for the first placeholder only
+    if (cursorPosition === null) {
+      cursorPosition = baseOffset + placeholderIndex;
+    }
+    // Remove this placeholder from the prompt
+    promptToAppend = promptToAppend.slice(0, placeholderIndex) + promptToAppend.slice(placeholderIndex + placeholder.length);
+  }
+  return {
+    promptToAppend,
+    cursorPosition
+  };
+}, _PromptStarter_getTargetValue = function _PromptStarter_getTargetValue(target) {
+  var _a, _b;
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+    return (_a = target.value) !== null && _a !== void 0 ? _a : "";
+  }
+  if (target.inputRef) {
+    return (_b = target.inputRef.value) !== null && _b !== void 0 ? _b : "";
+  }
+  if (typeof (target === null || target === void 0 ? void 0 : target.value) === "string") {
+    return target.value;
+  }
+  return "";
+}, _PromptStarter_setCursorAtPosition = function _PromptStarter_setCursorAtPosition(target, position) {
+  var _a;
+  // Determine the actual input element to manipulate
+  // For custom elements like fabric-textarea, use inputRef if available
+  const inputEl = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement ? target : (_a = target.inputRef) !== null && _a !== void 0 ? _a : null;
+  if (!inputEl) return;
+  // Focus the input and set cursor position (no selection, just caret)
+  try {
+    inputEl.focus();
+    inputEl.setSelectionRange(position, position);
+  } catch {}
+};
+__decorate([attr], PromptStarter.prototype, "prompt", void 0);
+__decorate([attr], PromptStarter.prototype, "category", void 0);
+__decorate([observable], PromptStarter.prototype, "mainText", void 0);
+__decorate([observable], PromptStarter.prototype, "slottedPrompt", void 0);
+__decorate([observable], PromptStarter.prototype, "slottedToolbarActions", void 0);
+__decorate([observable], PromptStarter.prototype, "slottedLikeButton", void 0);
+__decorate([observable], PromptStarter.prototype, "slottedDislikeButton", void 0);
+__decorate([attr], PromptStarter.prototype, "target", void 0);
+__decorate([observable], PromptStarter.prototype, "placeholders", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], PromptStarter.prototype, "pressed", void 0);
+__decorate([attr], PromptStarter.prototype, "feedback", void 0);
+__decorate([observable], PromptStarter.prototype, "component", void 0);
+__decorate([observable], PromptStarter.prototype, "contentContainer", void 0);
+__decorate([observable], PromptStarter.prototype, "feedbackGroup", void 0);
+__decorate([observable], PromptStarter.prototype, "tooltip", void 0);
+
+export { PromptStarter };