@penn-libraries/web 1.1.0-dev.6 → 1.1.0-dev.7

package/dist/web/web.esm.js

@@ -17,7 +17,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-909144f6",[[1,"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"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-20c0bd7a",[[1,"pennlibs-banner"]]],["p-cbae5952",[[1,"pennlibs-chat",{"href":[32]}]]],["p-5e385536",[[1,"pennlibs-fallback-img"]]],["p-370e32b1",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-07ad051f",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
+  return bootstrapLazy([["p-e1215158",[[1,"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"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-20c0bd7a",[[1,"pennlibs-banner"]]],["p-cbae5952",[[1,"pennlibs-chat",{"href":[32]}]]],["p-5e385536",[[1,"pennlibs-fallback-img"]]],["p-370e32b1",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-07ad051f",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map
 

package/hydrate/index.js

@@ -3175,6 +3175,12 @@ class Autocomplete {
         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();
@@ -3226,7 +3232,12 @@ class Autocomplete {
         if (!this.for)
             return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        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() {
@@ -3285,35 +3296,33 @@ class Autocomplete {
             return;
         if (event.metaKey || event.ctrlKey)
             return; // Ignore keyboard shortcuts
-        const handler = this.keyHandlers()[event.key];
+        const handler = this.keyHandlerMap[event.key];
         if (handler) {
-            event.preventDefault();
+            // Don't prevent default for Enter - allow form submission
+            if (event.key !== 'Enter') {
+                event.preventDefault();
+            }
             handler();
         }
     }
-    keyHandlers() {
-        return {
-            'Escape': () => this.handleEscape(),
-            'ArrowDown': () => this.handleArrowDown(),
-            'ArrowUp': () => this.handleArrowUp(),
-            'Enter': () => this.handleEnter()
-        };
-    }
     handleEscape() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleEnter() {
         if (this.canSelect())
@@ -3353,7 +3362,6 @@ class Autocomplete {
         if (input)
             this.originalValue = input.value;
         this.showSuggestionsPanel();
-        this.syncInputState();
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
@@ -3362,8 +3370,11 @@ class Autocomplete {
     closeSuggestions() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     deferCloseSuggestions() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
         this.blurTimeout = setTimeout(() => {
             if (this.isFocusOutsideComponent())
                 this.closeSuggestions();
@@ -3390,30 +3401,34 @@ class Autocomplete {
             return;
         this.updateAriaExpanded(input);
         this.updateAriaActiveDescendant(input);
-        this.updateInputValue(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;
     }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
     updateAriaActiveDescendant(input) {
-        const hasSelection = this.showSuggestions && this.currentIndex >= 0;
-        if (hasSelection && this.options[this.currentIndex]) {
+        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');
         }
     }
-    updateInputValue(input) {
-        input.value = this.currentIndex >= 0
-            ? this.options[this.currentIndex].value
-            : this.originalValue;
-    }
     shouldShowListbox() {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (hAsync("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, hAsync("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (hAsync("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, hAsync("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
     static get style() { return pennlibsAutocompleteCss; }

package/hydrate/index.mjs

@@ -3173,6 +3173,12 @@ class Autocomplete {
         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();
@@ -3224,7 +3230,12 @@ class Autocomplete {
         if (!this.for)
             return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        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() {
@@ -3283,35 +3294,33 @@ class Autocomplete {
             return;
         if (event.metaKey || event.ctrlKey)
             return; // Ignore keyboard shortcuts
-        const handler = this.keyHandlers()[event.key];
+        const handler = this.keyHandlerMap[event.key];
         if (handler) {
-            event.preventDefault();
+            // Don't prevent default for Enter - allow form submission
+            if (event.key !== 'Enter') {
+                event.preventDefault();
+            }
             handler();
         }
     }
-    keyHandlers() {
-        return {
-            'Escape': () => this.handleEscape(),
-            'ArrowDown': () => this.handleArrowDown(),
-            'ArrowUp': () => this.handleArrowUp(),
-            'Enter': () => this.handleEnter()
-        };
-    }
     handleEscape() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleEnter() {
         if (this.canSelect())
@@ -3351,7 +3360,6 @@ class Autocomplete {
         if (input)
             this.originalValue = input.value;
         this.showSuggestionsPanel();
-        this.syncInputState();
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
@@ -3360,8 +3368,11 @@ class Autocomplete {
     closeSuggestions() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     deferCloseSuggestions() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
         this.blurTimeout = setTimeout(() => {
             if (this.isFocusOutsideComponent())
                 this.closeSuggestions();
@@ -3388,30 +3399,34 @@ class Autocomplete {
             return;
         this.updateAriaExpanded(input);
         this.updateAriaActiveDescendant(input);
-        this.updateInputValue(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;
     }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
     updateAriaActiveDescendant(input) {
-        const hasSelection = this.showSuggestions && this.currentIndex >= 0;
-        if (hasSelection && this.options[this.currentIndex]) {
+        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');
         }
     }
-    updateInputValue(input) {
-        input.value = this.currentIndex >= 0
-            ? this.options[this.currentIndex].value
-            : this.originalValue;
-    }
     shouldShowListbox() {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (hAsync("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, hAsync("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (hAsync("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, hAsync("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
     static get style() { return pennlibsAutocompleteCss; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "1.1.0-dev.6",
+  "version": "1.1.0-dev.7",
   "description": "Reusable web designs for University of Pennsylvania Libraries websites. This package contains our code for shared Web Components and Cascading Style Sheets (CSS).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",