@penn-libraries/web 1.2.0-dev.2 → 1.2.0

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-Ag6DtE87.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-autocomplete_4.cjs",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner.cjs",[[257,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero.cjs",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img.cjs",[[257,"pennlibs-fallback-img"]]]], options);
+  return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-feedback_3.cjs",[[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete.cjs",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner.cjs",[[257,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero.cjs",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img.cjs",[[257,"pennlibs-fallback-img"]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/pennlibs-autocomplete.cjs.entry.js

@@ -0,0 +1,281 @@
+'use strict';
+
+var index = require('./index-Ag6DtE87.js');
+
+const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
+
+const Autocomplete = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.activated = index.createEvent(this, "pl:activated");
+        this.showSuggestions = false;
+        this.currentIndex = -1;
+        this.originalValue = '';
+        this.options = [];
+        this.keyHandlerMap = {
+            'Escape': () => this.handleEscape(),
+            'ArrowDown': () => this.handleArrowDown(),
+            'ArrowUp': () => this.handleArrowUp(),
+            'Enter': () => this.handleEnter()
+        };
+        this.handleOptionClick = (index) => {
+            this.currentIndex = index;
+            this.selectCurrent();
+        };
+    }
+    componentWillLoad() {
+        this.options = this.parseOptionsFromDOM();
+    }
+    componentDidLoad() {
+        this.setupInput();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
+        if (this.mutationObserver)
+            this.mutationObserver.disconnect();
+    }
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.options = this.parseOptionsFromDOM();
+        });
+        this.mutationObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    parseOptionsFromDOM() {
+        const listbox = this.findListbox();
+        if (!listbox)
+            return [];
+        const elements = Array.from(listbox.querySelectorAll('[role="option"]'));
+        return elements.map((el, i) => this.createOption(el, i));
+    }
+    findListbox() {
+        return Array.from(this.el.children).find(child => child.matches('ol[role="listbox"]'));
+    }
+    createOption(element, index) {
+        var _a;
+        return {
+            id: element.id || `option-${index}`,
+            html: element.innerHTML,
+            value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
+        };
+    }
+    getInput() {
+        var _a;
+        if (!this.for)
+            return null;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
+        if (!slot)
+            return null;
+        const assignedElements = slot.assignedElements();
+        if (assignedElements.length === 0)
+            return null;
+        const input = assignedElements[0].querySelector(`input#${this.for}`);
+        return input || null;
+    }
+    isInputFocused() {
+        return this.getInput() === document.activeElement;
+    }
+    isTrackedInput(input) {
+        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
+            this.el.contains(input);
+    }
+    setupInput() {
+        if (!this.for) {
+            console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
+            return;
+        }
+        const input = this.getInput();
+        if (!input) {
+            console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
+            return;
+        }
+        this.setComboboxAttributes(input);
+        input.setAttribute('data-pl-autocomplete-connected', 'true');
+    }
+    setComboboxAttributes(input) {
+        input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-autocomplete', 'list');
+        input.setAttribute('aria-expanded', 'false');
+        input.setAttribute('aria-controls', 'listbox');
+    }
+    handleSlotChange() {
+        this.options = this.parseOptionsFromDOM();
+        this.setupInput();
+    }
+    handleInputEvent(event) {
+        const input = event.target;
+        if (this.isTrackedInput(input)) {
+            this.currentIndex = -1;
+            this.openSuggestions();
+        }
+    }
+    handleFocusEvent(event) {
+        const input = event.target;
+        if (this.isTrackedInput(input))
+            this.showSuggestionsPanel();
+    }
+    handleBlurEvent(event) {
+        const input = event.target;
+        if (this.isTrackedInput(input))
+            this.deferCloseSuggestions();
+    }
+    handleFocusOut(event) {
+        if (this.isFocusLeavingComponent(event))
+            this.closeSuggestions();
+    }
+    handleKeyDown(event) {
+        if (!this.isInputFocused())
+            return;
+        if (event.metaKey || event.ctrlKey)
+            return; // Ignore keyboard shortcuts
+        const handler = this.keyHandlerMap[event.key];
+        if (handler) {
+            // Don't prevent default for Enter - allow form submission
+            if (event.key !== 'Enter') {
+                event.preventDefault();
+            }
+            handler();
+        }
+    }
+    handleEscape() {
+        this.reset();
+        this.syncAll();
+    }
+    handleArrowDown() {
+        if (!this.showSuggestions)
+            return;
+        this.moveNext();
+        this.syncAll();
+    }
+    handleArrowUp() {
+        if (!this.showSuggestions)
+            return;
+        this.movePrevious();
+        this.syncAll();
+    }
+    handleEnter() {
+        if (this.canSelect())
+            this.selectCurrent();
+    }
+    // Navigation
+    moveNext() {
+        const lastIndex = this.options.length - 1;
+        this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;
+    }
+    movePrevious() {
+        const lastIndex = this.options.length - 1;
+        this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;
+    }
+    canSelect() {
+        return this.showSuggestions && this.currentIndex >= 0;
+    }
+    selectCurrent() {
+        if (this.currentIndex < 0)
+            return;
+        const selectedOption = this.options[this.currentIndex];
+        this.applySelection(selectedOption);
+        this.emitActivation(selectedOption);
+        this.closeSuggestions();
+    }
+    applySelection(option) {
+        const input = this.getInput();
+        if (!input)
+            return;
+        input.value = option.value;
+        this.originalValue = option.value;
+    }
+    emitActivation(option) {
+        this.activated.emit({
+            index: this.currentIndex,
+            value: option.value
+        });
+    }
+    openSuggestions() {
+        if (!this.isInputFocused())
+            return;
+        const input = this.getInput();
+        if (input)
+            this.originalValue = input.value;
+        this.showSuggestionsPanel();
+    }
+    showSuggestionsPanel() {
+        this.showSuggestions = true;
+        this.syncAriaAttributes();
+    }
+    closeSuggestions() {
+        this.reset();
+        this.syncAll();
+    }
+    deferCloseSuggestions() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
+        this.blurTimeout = setTimeout(() => {
+            if (this.isFocusOutsideComponent())
+                this.closeSuggestions();
+        }, 150);
+    }
+    reset() {
+        this.showSuggestions = false;
+        this.currentIndex = -1;
+    }
+    isFocusLeavingComponent(event) {
+        var _a;
+        const target = event.relatedTarget;
+        return !target ||
+            (!this.el.contains(target) && !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)));
+    }
+    isFocusOutsideComponent() {
+        var _a;
+        const active = document.activeElement;
+        return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
+    }
+    syncAriaAttributes() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.updateAriaExpanded(input);
+        this.updateAriaActiveDescendant(input);
+    }
+    syncInputValueToSelection() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length
+            ? this.options[this.currentIndex].value
+            : this.originalValue;
+    }
+    syncAll() {
+        this.syncAriaAttributes();
+        this.syncInputValueToSelection();
+    }
+    updateAriaExpanded(input) {
+        input.setAttribute('aria-expanded', this.showSuggestions.toString());
+    }
+    updateAriaActiveDescendant(input) {
+        const hasSelection = this.showSuggestions &&
+            this.currentIndex >= 0 &&
+            this.currentIndex < this.options.length;
+        if (hasSelection) {
+            input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);
+        }
+        else {
+            input.removeAttribute('aria-activedescendant');
+        }
+    }
+    shouldShowListbox() {
+        return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
+    }
+    render() {
+        return (index.h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, index.h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', role: "listbox", id: "listbox" }, this.options.map((option, index$1) => (index.h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index$1 ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index$1), innerHTML: option.html })))))));
+    }
+    get el() { return index.getElement(this); }
+};
+Autocomplete.style = pennlibsAutocompleteCss;
+
+exports.pennlibs_autocomplete = Autocomplete;
+//# sourceMappingURL=pennlibs-autocomplete.entry.cjs.js.map

package/dist/cjs/pennlibs-autocomplete.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-autocomplete.entry.cjs.js","sources":["src/components/pennlibs-autocomplete/pennlibs-autocomplete.css?tag=pennlibs-autocomplete&encapsulation=shadow","src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}","import { Component, h, Element, State, Listen, Event, EventEmitter, Prop } from '@stencil/core';\n\ninterface ListboxOption {\n  id: string;\n  html: string;\n  value: string;\n}\n\nexport interface ActivatedEvent {\n  value: string;\n  index: number;\n}\n\n/**\n * Offer predictive suggestions while typing your search query.\n *\n * @slot start - Content to display at the start (top).\n */\n@Component({\n  tag: 'pennlibs-autocomplete',\n  styleUrl: 'pennlibs-autocomplete.css',\n  shadow: true\n})\nexport class Autocomplete {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The `id` of the input that this autocomplete is attached to.\n   * @prop for\n   */\n  @Prop() for?: string;\n\n  @State() showSuggestions: boolean = false;\n  @State() currentIndex: number = -1;\n  @State() originalValue: string = '';\n  @State() options: ListboxOption[] = [];\n\n  /**\n   * Emitted when a user activates (selects) an autocomplete suggestion.\n   * @event pl:activated\n   */\n  @Event({ eventName: 'pl:activated' }) activated: EventEmitter<ActivatedEvent>;\n\n  private blurTimeout: number;\n  private mutationObserver: MutationObserver;\n  private readonly keyHandlerMap = {\n    'Escape': () => this.handleEscape(),\n    'ArrowDown': () => this.handleArrowDown(),\n    'ArrowUp': () => this.handleArrowUp(),\n    'Enter': () => this.handleEnter()\n  };\n\n  componentWillLoad() {\n    this.options = this.parseOptionsFromDOM();\n  }\n\n  componentDidLoad() {\n    this.setupInput();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n  }\n\n  private setupMutationObserver(): void {\n    this.mutationObserver = new MutationObserver(() => {\n      this.options = this.parseOptionsFromDOM();\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n  }\n\n  private parseOptionsFromDOM(): ListboxOption[] {\n    const listbox = this.findListbox();\n    if (!listbox) return [];\n\n    const elements = Array.from(listbox.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n    return elements.map((el, i) => this.createOption(el, i));\n  }\n\n  private findListbox(): HTMLOListElement | null {\n    return Array.from(this.el.children).find(child =>\n      child.matches('ol[role=\"listbox\"]')\n    ) as HTMLOListElement;\n  }\n\n  private createOption(element: HTMLElement, index: number): ListboxOption {\n    return {\n      id: element.id || `option-${index}`,\n      html: element.innerHTML,\n      value: element.getAttribute('data-pl-value') || element.textContent?.trim() || ''\n    };\n  }\n\n  private getInput(): HTMLInputElement | null {\n    if (!this.for) return null;\n\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"start\"]') as HTMLSlotElement;\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return null;\n\n    const input = assignedElements[0].querySelector(`input#${this.for}`) as HTMLInputElement;\n    return input || null;\n  }\n\n  private isInputFocused(): boolean {\n    return this.getInput() === document.activeElement;\n  }\n\n  private isTrackedInput(input: HTMLInputElement): boolean {\n    return input?.getAttribute('data-pl-autocomplete-connected') === 'true' &&\n           this.el.contains(input);\n  }\n\n  private setupInput(): void {\n    if (!this.for) {\n      console.warn('<pennlibs-autocomplete> Missing \"for\" attribute. Please add for=\"input-id\" to specify which input to attach to.');\n      return;\n    }\n\n    const input = this.getInput();\n    if (!input) {\n      console.warn(`<pennlibs-autocomplete> No input element found with id=\"${this.for}\". Ensure an input with this id exists.`);\n      return;\n    }\n\n    this.setComboboxAttributes(input);\n    input.setAttribute('data-pl-autocomplete-connected', 'true');\n  }\n\n  private setComboboxAttributes(input: HTMLInputElement): void {\n    input.setAttribute('role', 'combobox');\n    input.setAttribute('aria-autocomplete', 'list');\n    input.setAttribute('aria-expanded', 'false');\n    input.setAttribute('aria-controls', 'listbox');\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.options = this.parseOptionsFromDOM();\n    this.setupInput();\n  }\n\n  @Listen('input', { target: 'body' })\n  handleInputEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) {\n      this.currentIndex = -1;\n      this.openSuggestions();\n    }\n  }\n\n  @Listen('focus', { target: 'body' })\n  handleFocusEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.showSuggestionsPanel();\n  }\n\n  @Listen('blur', { target: 'body' })\n  handleBlurEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.deferCloseSuggestions();\n  }\n\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    if (this.isFocusLeavingComponent(event)) this.closeSuggestions();\n  }\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isInputFocused()) return;\n    if (event.metaKey || event.ctrlKey) return; // Ignore keyboard shortcuts\n\n    const handler = this.keyHandlerMap[event.key];\n    if (handler) {\n      // Don't prevent default for Enter - allow form submission\n      if (event.key !== 'Enter') {\n        event.preventDefault();\n      }\n      handler();\n    }\n  }\n\n  private handleEscape() {\n    this.reset();\n    this.syncAll();\n  }\n\n  private handleArrowDown() {\n    if (!this.showSuggestions) return;\n    this.moveNext();\n    this.syncAll();\n  }\n\n  private handleArrowUp() {\n    if (!this.showSuggestions) return;\n    this.movePrevious();\n    this.syncAll();\n  }\n\n  private handleEnter() {\n    if (this.canSelect()) this.selectCurrent();\n  }\n\n  // Navigation\n  private moveNext(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;\n  }\n\n  private movePrevious(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;\n  }\n\n  private canSelect(): boolean {\n    return this.showSuggestions && this.currentIndex >= 0;\n  }\n\n  private selectCurrent(): void {\n    if (this.currentIndex < 0) return;\n\n    const selectedOption = this.options[this.currentIndex];\n    this.applySelection(selectedOption);\n    this.emitActivation(selectedOption);\n    this.closeSuggestions();\n  }\n\n  private applySelection(option: ListboxOption): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = option.value;\n    this.originalValue = option.value;\n  }\n\n  private emitActivation(option: ListboxOption): void {\n    this.activated.emit({\n      index: this.currentIndex,\n      value: option.value\n    });\n  }\n\n  private handleOptionClick = (index: number): void => {\n    this.currentIndex = index;\n    this.selectCurrent();\n  }\n\n  private openSuggestions(): void {\n    if (!this.isInputFocused()) return;\n\n    const input = this.getInput();\n    if (input) this.originalValue = input.value;\n\n    this.showSuggestionsPanel();\n  }\n\n  private showSuggestionsPanel(): void {\n    this.showSuggestions = true;\n    this.syncAriaAttributes();\n  }\n\n  private closeSuggestions(): void {\n    this.reset();\n    this.syncAll();\n  }\n\n  private deferCloseSuggestions(): void {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.isFocusOutsideComponent()) this.closeSuggestions();\n    }, 150) as unknown as number;\n  }\n\n  private reset(): void {\n    this.showSuggestions = false;\n    this.currentIndex = -1;\n  }\n\n  private isFocusLeavingComponent(event: FocusEvent): boolean {\n    const target = event.relatedTarget as HTMLElement;\n    return !target ||\n           (!this.el.contains(target) && !this.el.shadowRoot?.contains(target));\n  }\n\n  private isFocusOutsideComponent(): boolean {\n    const active = document.activeElement;\n    return !this.el.shadowRoot?.contains(active) && active !== this.getInput();\n  }\n\n  private syncAriaAttributes(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    this.updateAriaExpanded(input);\n    this.updateAriaActiveDescendant(input);\n  }\n\n  private syncInputValueToSelection(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length\n      ? this.options[this.currentIndex].value\n      : this.originalValue;\n  }\n\n  private syncAll(): void {\n    this.syncAriaAttributes();\n    this.syncInputValueToSelection();\n  }\n\n  private updateAriaExpanded(input: HTMLInputElement): void {\n    input.setAttribute('aria-expanded', this.showSuggestions.toString());\n  }\n\n  private updateAriaActiveDescendant(input: HTMLInputElement): void {\n    const hasSelection = this.showSuggestions &&\n                        this.currentIndex >= 0 &&\n                        this.currentIndex < this.options.length;\n    if (hasSelection) {\n      input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);\n    } else {\n      input.removeAttribute('aria-activedescendant');\n    }\n  }\n\n  private shouldShowListbox(): boolean {\n    return this.showSuggestions && this.options.length > 0 && this.isInputFocused();\n  }\n\n  render() {\n    return (\n      <div>\n        <slot name=\"start\" />\n        {this.shouldShowListbox() && (\n          <ol role=\"listbox\" id=\"listbox\">\n            {this.options.map((option, index) => (\n              <li\n                role=\"option\"\n                id={option.id}\n                aria-selected={this.currentIndex === index ? 'true' : 'false'}\n                tabindex=\"-1\"\n                onClick={() => this.handleOptionClick(index)}\n                innerHTML={option.html}\n              />\n            ))}\n          </ol>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["h","index"],"mappings":"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"}