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

package/dist/cjs/{pennlibs-autocomplete_4.cjs.entry.js → pennlibs-feedback_3.cjs.entry.js}

@@ -2,288 +2,11 @@
 
 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 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}button.selected{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+.feedback__share-feedback,p{animation:none}.feedback__content>p{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*: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 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;
-
-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:600}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) {
         index.registerInstance(this, hostRef);
@@ -292,27 +15,30 @@ 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) {
         var _a;
-        this.answer = answer;
-        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
-        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
+        this.selected = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -320,18 +46,25 @@ 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 (index.h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, index.h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, index.h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "Thank you for letting us know. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (index.h("div", { class: "feedback__inline-question" }, index.h("h2", null, "Did you find what you need?"), index.h("button", { onClick: () => this.handleFeedback('yes') }, index.h("span", null, "Yes")), index.h("button", { onClick: () => this.handleFeedback('no') }, index.h("span", null, "No"))))), index.h("div", { key: '9630ad5e35d6eea2ee63217410607eb50c3babc7', class: "feedback__share-feedback" }, index.h("p", { key: '126aeabf45f338cc07b33ebca09c761611e7c8e1' }, "To help us improve, ", index.h("a", { key: '8af38aed071ad75d60837a18845d28e5645c2768', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
+        return (index.h("div", { key: 'e470cb9ce96fecddda37c8a557c6670b581d8414', class: "feedback__container" }, index.h("div", { key: '0f3729d63102379f7219fd9a65c370f05c3f271c', class: "viewport-margins" }, index.h("div", { key: '3eaa8419d9b5fed5d7cf33de60ab93dd911afa34', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "We'd like to help. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (index.h("div", { class: "feedback__inline-question" }, index.h("h2", null, "Did you find what you need?"), index.h("button", { class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected, onClick: () => this.handleFeedback('yes') }, index.h("span", null, "Yes"), index.h("span", { class: "visually-hidden" }, ", I found what I needed.")), index.h("button", { class: { 'selected': this.selected === 'no' }, disabled: !!this.selected, onClick: () => this.handleFeedback('no') }, index.h("span", null, "No"), index.h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), index.h("div", { key: '50da9c1f23d14feeb6a2c408b0461a439331fcd9', class: "feedback__share-feedback" }, index.h("p", { key: '3580e25ecd7b463bb46103a6aee54a710e88c0ff' }, "To help us improve, ", index.h("a", { key: '276e226f4487ce94b9de30ae40f964e63f0d045b', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
 };
 PennlibsFeedback.style = pennlibsFeedbackCss;
 
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-gray-blue-light);\n}\n\n.built-with {\n  opacity: 0.85;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.5em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
+const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 
 const Footer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * When true, shows a "Built with the Penn Libraries Design System" line below the footer.
+         */
+        this.showBuiltWith = false;
     }
     componentWillLoad() {
         this.setNavigationByChildren();
@@ -356,12 +89,12 @@ const Footer = class {
     }
     render() {
         const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
-        return (index.h("footer", { key: 'bc08bfaa926d4a5032cd089e735d2120d4982fb7', class: "website-footer-wrapper" }, index.h("div", { key: 'f9491e7d0b774e1ee4fb5fe9dfe3644c008e4aa4', class: "website-footer", style: {
+        return (index.h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, index.h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, index.h("div", { key: 'c78698128c26439a783a6872bda1f6ad30010091', class: "viewport-margins" }, index.h("div", { key: '0fa06835787b2b862adbc972040760505431eee4', class: "website-footer__content" }, index.h("div", { key: '1f9f9b6e20e67be442295c15bbaed30a9bd4ed6c', class: "website-footer__links-container" }, index.h("section", { key: 'a1ad90f23aa1e04d2a9ccb65f55aad8bd209865b' }, index.h("h2", { key: '16c840dae80ded63eeb3dfe4dcd94712b6fbf3cb', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: 'c474ce0b1f79b630a09a4f290de3b90d4faf6322', class: "website-footer__links" }, index.h("li", { key: 'ef2c4a81b658238a56345616b638a4b1bdeb86d7' }, index.h("a", { key: 'fe75576d5007269fd63178b1cc231b6a99dfd183', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: '4077d3f62c99b5f33305ead14d28b98cec6f6e7f' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: 'dcc868203318be48bce9bcb2af7feb429cfea045' }, index.h("a", { key: 'd4268959f6d6796c4dda913910af4c0e8333b5f3', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '65c7a446f25fde16e6dd13b9cd777522dcfe73de' }, index.h("a", { key: 'd44ccc291db7ef87492723f5b8c0a6e27dd82b58', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: '6dda94dd8c3bd222e251e9b3c26228d6c79c65bc' }, index.h("a", { key: '8378c775adba4789e107fc365c8f12dc283c5c39', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: '927c33a3a55c9b23ef16fb84ed0222e4222d8919' }, index.h("h2", { key: '73ddc9d2175026ee31d00b6eefda8051be0768aa', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: 'f51e60d3333e6185d4e94427a09a0907e65e3d92', class: "website-footer__links" }, index.h("li", { key: '64d2313dbc8064af08d17a040695e39de3a65f99' }, index.h("a", { key: 'a0c41592ec08c2a77e964270d30284442a6f01c2', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: 'f0cf9bf81683933711a12d73bef11bbbabc2f445' }, index.h("a", { key: '47b860bca9aa60196b3a037bfe3c1dd1b34b5024', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '9039a7f7fc64465ec2622cdbad079972ebdf4292' }, index.h("a", { key: '834b7a49f15847d2fa6f405e6e5a6320b0ea5967', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: 'cb4ca3a5afb95c7e1df0f11773062bfed4c66116' }, index.h("a", { key: '82b2b1380689cdc1ee29ca55bab4bf5beb8ab825', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, index.h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, index.h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, index.h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, index.h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, index.h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, index.h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, index.h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, index.h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, index.h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, index.h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, index.h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, index.h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, index.h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, index.h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, index.h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, index.h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
             this.navigationByChildren.map(section => (index.h("section", null, index.h("h2", { class: "website-footer__heading" }, section.heading), index.h("ul", { class: "website-footer__links" }, section.links.map(link => (index.h("li", null, index.h("a", { href: link.href }, link.label))))))))
-        ]))), index.h("div", { key: 'a9172ba3d817c03ff081d67ae47aceeac317a916', class: "website-footer__footer" }, index.h("div", { key: '2307a5282337a64bacbb1ce6574505a549527674', class: "viewport-margins" }, index.h("ul", { key: '7783498f960416be4bcd4b525d674feae524ed40', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: '90c904762368df68012945c96cfde96e34f939a7' }, index.h("a", { key: '3c8b82331d85746a26ef69200137054aa1be6e72', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: '6ec4f2ed752187a65e6ce35644504d11a293972e' }, index.h("a", { key: '036d0c03234a0a198304fd3075c8d888867bc2d8', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: '729e69e9737a13ce8b007176ff2225542b6f76fe' }, index.h("a", { key: '51410ccd4b0cfc73d1435df78acbf4d7775c9b5a', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: 'af7a7dfaf62607451c5c65daf2554aef228c2293' }, index.h("a", { key: '924ebc36c5cfdcd9f5b99a783914eaaa9ff9851a', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'd6a72f077412da636a998521382f747d56d0cc98' }, index.h("a", { key: '6924c765a7b37f335167105a39b719d99937a330', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '0ddfa89abe2f7bb6b44f34443d78e491c5af5d58' }, index.h("a", { key: 'cbaeccf216d3438a3da9633a29d90c91e225858b', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), index.h("div", { key: '9fc3fbb6bde995fac83a2ab795022846c19c6e5f', class: "viewport-margins" }, index.h("p", { key: '73ec7cf307efbfe6565c27ac711a087d450e1372', class: "built-with" }, "Built with the ", index.h("a", { key: '94ce8d4703ad2b9231ae15cd8018ab74889a48f6', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System")))));
+        ]))), index.h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, index.h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, index.h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, index.h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, index.h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, index.h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, index.h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, index.h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, index.h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (index.h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, index.h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", index.h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }
@@ -426,8 +159,7 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-exports.pennlibs_autocomplete = Autocomplete;
 exports.pennlibs_feedback = PennlibsFeedback;
 exports.pennlibs_footer = Footer;
 exports.pennlibs_header = Header;
-//# sourceMappingURL=pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map
+//# sourceMappingURL=pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map

package/dist/cjs/web.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   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",{"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/collection/components/pennlibs-feedback/pennlibs-feedback.css

@@ -50,7 +50,7 @@ h2 {
   margin: 0;
   font-family: var(--pl-font-sans-serif);
   font-size: 1em;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 p {
@@ -97,6 +97,27 @@ button:hover span {
   text-decoration: underline;
 }
 
+button.selected {
+  background: var(--pl-color-bg-accent-emphasis);
+  color: var(--pl-color-fg-on-emphasis);
+  border-color: var(--pl-color-bg-accent-emphasis);
+}
+
+/* Thank you message fade-in */
+.feedback__inline-question + .feedback__share-feedback,
+p {
+  animation: none;
+}
+
+.feedback__content > p {
+  animation: fadeIn 300ms ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 /* Focus States
 ---------------------------------------- */
 *:focus {

package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js

@@ -1,9 +1,7 @@
 import { h } from "@stencil/core";
-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?';
 /**
  * A feedback component that asks visitors "Did you find what you need?" and
  * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
@@ -21,27 +19,30 @@ export class PennlibsFeedback {
          * 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) {
         var _a;
-        this.answer = answer;
-        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
-        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
+        this.selected = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -49,9 +50,12 @@ export class PennlibsFeedback {
             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("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"))))), h("div", { key: '9630ad5e35d6eea2ee63217410607eb50c3babc7', class: "feedback__share-feedback" }, h("p", { key: '126aeabf45f338cc07b33ebca09c761611e7c8e1' }, "To help us improve, ", h("a", { key: '8af38aed071ad75d60837a18845d28e5645c2768', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
+        return (h("div", { key: 'e470cb9ce96fecddda37c8a557c6670b581d8414', class: "feedback__container" }, h("div", { key: '0f3729d63102379f7219fd9a65c370f05c3f271c', class: "viewport-margins" }, h("div", { key: '3eaa8419d9b5fed5d7cf33de60ab93dd911afa34', 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("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected, onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { class: { 'selected': this.selected === 'no' }, disabled: !!this.selected, onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '50da9c1f23d14feeb6a2c408b0461a439331fcd9', class: "feedback__share-feedback" }, h("p", { key: '3580e25ecd7b463bb46103a6aee54a710e88c0ff' }, "To help us improve, ", h("a", { key: '276e226f4487ce94b9de30ae40f964e63f0d045b', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
     static get is() { return "pennlibs-feedback"; }
     static get encapsulation() { return "shadow"; }
@@ -91,8 +95,8 @@ export class PennlibsFeedback {
     }
     static get states() {
         return {
-            "error": {},
-            "answer": {}
+            "answer": {},
+            "selected": {}
         };
     }
     static get events() {

package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';\nconst FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes\nconst FEEDBACK_QUESTION = 'Is this page useful?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n/**\n * A feedback component that asks visitors \"Did you find what you need?\" and\n * links to a feedback form. The answer is stored in sessionStorage for 5 minutes\n * to avoid re-prompting during a browsing session.\n *\n * @example\n * <pennlibs-feedback></pennlibs-feedback>\n *\n * @example\n * <pennlibs-feedback hide-question></pennlibs-feedback>\n */\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback {\n  /**\n   * When true, hides the yes/no question and only shows the \"share your feedback\" link.\n   */\n  @Prop() hideQuestion: boolean = false;\n\n  @State() error: boolean = false;\n  @State() answer: string | undefined = undefined;\n\n  /**\n   * Emitted when a visitor answers the feedback question. Includes the question,\n   * answer, current URL, and page heading/title for context.\n   */\n  @Event({\n    eventName: 'pennlibs-feedback',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  }) feedbackEvent!: EventEmitter<{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }>;\n\n  componentWillLoad() {\n    const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);\n    if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {\n      sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);\n      sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n      this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n      this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.answer = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n    sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));\n    \n    this.feedbackEvent.emit({\n      question: FEEDBACK_QUESTION,\n      answer: answer,\n      url: window.location.href,\n      pageHeading: document.querySelector('h1')?.textContent || undefined,\n      pageTitle: document.title || undefined\n    });\n  }\n  \n  render() {\n    return (\n      <div class=\"feedback__container\">\n        <div class=\"viewport-margins\">\n          <div class=\"feedback__content\">\n            {!this.hideQuestion && (this.answer === 'yes' ? (\n              <p>Thank you for letting us know.</p>\n            ) : this.answer === 'no' ? (\n              <p>Thank you for letting us know. <a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a> if you need help.</p>\n            ) : (\n              <div class=\"feedback__inline-question\">\n                <h2>Did you find what you need?</h2>\n                <button onClick={() => this.handleFeedback('yes')}>\n                  <span>Yes</span>\n                </button>\n                <button onClick={() => this.handleFeedback('no')}>\n                  <span>No</span>\n                </button>\n              </div>\n            ))}\n            <div class=\"feedback__share-feedback\">\n              <p>To help us improve, <a href=\"http://library.upenn.edu/feedback\">share your feedback</a>.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n\n"]}
+{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;\nconst FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\n\n\n/**\n * A feedback component that asks visitors \"Did you find what you need?\" and\n * links to a feedback form. The answer is stored in sessionStorage for 5 minutes\n * to avoid re-prompting during a browsing session.\n *\n * @example\n * <pennlibs-feedback></pennlibs-feedback>\n *\n * @example\n * <pennlibs-feedback hide-question></pennlibs-feedback>\n */\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback {\n  /**\n   * When true, hides the yes/no question and only shows the \"share your feedback\" link.\n   */\n  @Prop() hideQuestion: boolean = false;\n\n  @State() answer: string | undefined = undefined;\n  @State() selected: string | undefined = undefined;\n\n  /**\n   * Emitted when a visitor answers the feedback question. Includes the question,\n   * answer, current URL, and page heading/title for context.\n   */\n  @Event({\n    eventName: 'pennlibs-feedback',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  }) feedbackEvent!: EventEmitter<{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }>;\n\n  componentWillLoad() {\n    const stored = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);\n    if (stored) {\n      try {\n        const { answer, timestamp } = JSON.parse(stored);\n        if (Date.now() - timestamp > FEEDBACK_TTL) {\n          sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);\n        } else {\n          this.answer = answer;\n        }\n      } catch {\n        sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);\n      }\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.selected = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));\n\n    this.feedbackEvent.emit({\n      question: FEEDBACK_QUESTION,\n      answer: answer,\n      url: window.location.href,\n      pageHeading: document.querySelector('h1')?.textContent || undefined,\n      pageTitle: document.title || undefined\n    });\n\n    setTimeout(() => {\n      this.answer = answer;\n    }, 600);\n  }\n  \n  render() {\n    return (\n      <div class=\"feedback__container\">\n        <div class=\"viewport-margins\">\n          <div class=\"feedback__content\">\n            {!this.hideQuestion && (this.answer === 'yes' ? (\n              <p>Thank you for letting us know.</p>\n            ) : this.answer === 'no' ? (\n              <p>We'd like to help. <a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a> and let us know what you're looking for.</p>\n            ) : (\n              <div class=\"feedback__inline-question\">\n                <h2>Did you find what you need?</h2>\n                <button class={{ 'selected': this.selected === 'yes' }} disabled={!!this.selected} onClick={() => this.handleFeedback('yes')}>\n                  <span>Yes</span><span class=\"visually-hidden\">, I found what I needed.</span>\n                </button>\n                <button class={{ 'selected': this.selected === 'no' }} disabled={!!this.selected} onClick={() => this.handleFeedback('no')}>\n                  <span>No</span><span class=\"visually-hidden\">, I did not find what I needed.</span>\n                </button>\n              </div>\n            ))}\n            <div class=\"feedback__share-feedback\">\n              <p>To help us improve, <a href={`https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}`}>share your feedback</a>.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n\n"]}