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

package/dist/web/p-1c0dd1ec.entry.js

@@ -0,0 +1,279 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './p-kmszRyIe.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) {
+        registerInstance(this, hostRef);
+        this.activated = 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 (h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("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); }
+};
+Autocomplete.style = pennlibsAutocompleteCss;
+
+export { Autocomplete as pennlibs_autocomplete };
+//# sourceMappingURL=pennlibs-autocomplete.entry.esm.js.map

package/dist/web/{p-3da26275.entry.js → p-37644cf5.entry.js}

@@ -1,287 +1,10 @@
-import { r as registerInstance, d as createEvent, h, c as getElement, a as getAssetPath } from './p-CNQ9-Wwh.js';
+import { r as registerInstance, c as createEvent, h, d as getAssetPath, a as getElement } from './p-kmszRyIe.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 pennlibsFeedbackCss = ".feedback__container.sc-pennlibs-feedback{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{.sc-pennlibs-feedback-h{display:none}}*.sc-pennlibs-feedback,*.sc-pennlibs-feedback::before,*.sc-pennlibs-feedback::after{box-sizing:border-box}.viewport-margins.sc-pennlibs-feedback{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content.sc-pennlibs-feedback{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question.sc-pennlibs-feedback{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2.sc-pennlibs-feedback{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p.sc-pennlibs-feedback{margin:0;padding:calc(0.5em + 1px) 0}strong.sc-pennlibs-feedback{font-weight:600}a.sc-pennlibs-feedback{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button.sc-pennlibs-feedback{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button.sc-pennlibs-feedback:hover{cursor:pointer}button.sc-pennlibs-feedback:hover span.sc-pennlibs-feedback{text-decoration:underline}button.selected.sc-pennlibs-feedback{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question.sc-pennlibs-feedback+.feedback__share-feedback.sc-pennlibs-feedback,p.sc-pennlibs-feedback{animation:none}.feedback__content.sc-pennlibs-feedback>p.sc-pennlibs-feedback{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*.sc-pennlibs-feedback:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis)}p.sc-pennlibs-feedback:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2.sc-pennlibs-feedback{display:block;width:100%;text-align:center}}.help-us.sc-pennlibs-feedback{display:flex;flex-direction:column;gap:0.5em}.visually-hidden.sc-pennlibs-feedback{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden.sc-pennlibs-feedback:focus,.visually-hidden.sc-pennlibs-feedback:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
 
-const Autocomplete = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.activated = 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 (h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("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); }
-};
-Autocomplete.style = pennlibsAutocompleteCss;
-
-const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
-
-const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
-const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
+const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
 const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
-const FEEDBACK_QUESTION = 'Is this page useful?';
-const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+const FEEDBACK_QUESTION = 'Did you find what you need?';
 const PennlibsFeedback = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -290,27 +13,32 @@ const PennlibsFeedback = class {
          * When true, hides the yes/no question and only shows the "share your feedback" link.
          */
         this.hideQuestion = false;
-        this.error = false;
         this.answer = undefined;
+        this.selected = undefined;
     }
     componentWillLoad() {
-        const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);
-        if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {
-            sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
-            sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);
-        }
-        if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
-            this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
-        }
-        if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {
-            this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
+        const stored = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
+        if (stored) {
+            try {
+                const { answer, timestamp } = JSON.parse(stored);
+                if (Date.now() - timestamp > FEEDBACK_TTL) {
+                    sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+                }
+                else {
+                    this.answer = answer;
+                }
+            }
+            catch (_a) {
+                sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+            }
         }
     }
-    handleFeedback(answer) {
+    handleSubmit(event) {
         var _a;
-        this.answer = answer;
-        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
-        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
+        event.preventDefault();
+        const answer = event.submitter.value;
+        this.selected = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -318,9 +46,12 @@ const PennlibsFeedback = class {
             pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
             pageTitle: document.title || undefined
         });
+        setTimeout(() => {
+            this.answer = answer;
+        }, 600);
     }
     render() {
-        return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
+        return (h("div", { key: '013c3b140f249641d412bd0c19108a6c51d2f12e', class: "feedback__container" }, h("div", { key: 'ef51ab5c419dfdd8679b027882a59171480ea039', class: "viewport-margins" }, h("div", { key: '2c61b86b1e69037d7d63ecde5288bfcc0e1dad75', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '90ccdacc682229570f83867f8d8f587a3e0c16aa', class: "feedback__share-feedback" }, h("p", { key: 'edd15c793ac6af5d31bd98863cd76fce27aed69a' }, "To help us improve, ", h("a", { key: '25f5c322d0fb717b8618b40625af978d57f805bd', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
 };
 PennlibsFeedback.style = pennlibsFeedbackCss;
@@ -428,5 +159,5 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-export { Autocomplete as pennlibs_autocomplete, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
-//# sourceMappingURL=pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map
+export { PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
+//# sourceMappingURL=pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map

package/dist/web/{p-662e4125.entry.js → p-51bc70b8.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getAssetPath, h } from './p-CNQ9-Wwh.js';
+import { r as registerInstance, d as getAssetPath, h } from './p-kmszRyIe.js';
 
 const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
 

package/dist/web/{p-eb633f4d.entry.js → p-906263a3.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, c as getElement } from './p-CNQ9-Wwh.js';
+import { r as registerInstance, h, a as getElement } from './p-kmszRyIe.js';
 
 const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";