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

package/dist/web/web.esm.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-mkVX9lU0.js';
-export { s as setNonce } from './p-mkVX9lU0.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-kmszRyIe.js';
+export { s as setNonce } from './p-kmszRyIe.js';
 
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-4fb3e5a4",[[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"]}]]],["p-10931f0a",[[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]}]]],["p-7c6382d0",[[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"]]]]],["p-0c1113f4",[[257,"pennlibs-banner"]]],["p-190f0293",[[257,"pennlibs-chat",{"href":[32]}]]],["p-154851d1",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-e426fb61",[[257,"pennlibs-fallback-img"]]]], options);
+  return bootstrapLazy([["p-906263a3",[[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"]}]]],["p-5c02b8da",[[258,"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]}]]],["p-1c0dd1ec",[[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"]]]]],["p-e1947e84",[[257,"pennlibs-banner"]]],["p-badb334a",[[257,"pennlibs-chat",{"href":[32]}]]],["p-d392e98a",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-51bc70b8",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map

package/hydrate/index.js

@@ -737,6 +737,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
+  let scopeId2;
+  {
+    const cmpMeta = hostRef.$cmpMeta$;
+    if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
+      scopeId2 = hostElm["s-sc"];
+      hostElm.classList.add(scopeId2 + "-h");
+    } else if (hostElm["s-sc"]) {
+      delete hostElm["s-sc"];
+    }
+  }
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
     initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
@@ -840,6 +850,11 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
+  if (scopeId2 && slotNodes.length) {
+    slotNodes.forEach((slot) => {
+      slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
+    });
+  }
   if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
@@ -869,6 +884,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
   let childIdSplt;
   let childVNode;
   let i2;
+  const scopeId2 = hostElm["s-sc"];
   if (node.nodeType === 1 /* ElementNode */) {
     childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
     if (childNodeType) {
@@ -891,6 +907,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
+        if (scopeId2 && childIdSplt[0] === hostId) {
+          node["s-si"] = scopeId2;
+          childVNode.$attrs$.class += " " + scopeId2;
+        }
         const slotName = childVNode.$elm$.getAttribute("s-sn");
         if (typeof slotName === "string") {
           if (childVNode.$tag$ === "slot-fb") {
@@ -905,6 +925,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
+            if (scopeId2) {
+              node.classList.add(scopeId2);
+            }
           }
           childVNode.$elm$["s-sn"] = slotName;
           childVNode.$elm$.removeAttribute("s-sn");
@@ -2061,6 +2084,9 @@ var markSlotContentForRelocation = (elm) => {
   }
 };
 var insertBefore = (parent, newNode, reference) => {
+  if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
+  }
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
@@ -2613,6 +2639,9 @@ var connectedCallback = (elm) => {
           if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
+          } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta);
+            elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
@@ -4206,9 +4235,8 @@ class NoImage {
     }; }
 }
 
-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 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}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)}@media (max-width: 26em){h2.sc-pennlibs-feedback{display:block;width:100%}}.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}";
 
-const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
 const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
 const FEEDBACK_QUESTION = 'Did you find what you need?';
 /**
@@ -4232,28 +4260,59 @@ class PennlibsFeedback {
         this.hideQuestion = false;
         this.answer = undefined;
         this.selected = undefined;
+        this.currentUrl = '';
+        this.onNavigate = (event) => {
+            try {
+                const destinationUrl = new URL(event.destination.url).href;
+                if (destinationUrl !== this.currentUrl) {
+                    this.currentUrl = destinationUrl;
+                    this.selected = undefined;
+                    this.answer = undefined;
+                    this.loadStoredAnswer();
+                }
+            }
+            catch (_a) {
+                this.selected = undefined;
+                this.answer = undefined;
+            }
+        };
+    }
+    get storageKey() {
+        return `pennlibs-feedback-${this.currentUrl}`;
+    }
+    connectedCallback() {
+        this.currentUrl = window.location.href;
+        window.navigation.addEventListener('navigate', this.onNavigate);
+    }
+    disconnectedCallback() {
+        window.navigation.removeEventListener('navigate', this.onNavigate);
     }
     componentWillLoad() {
-        const stored = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
+        this.loadStoredAnswer();
+    }
+    loadStoredAnswer() {
+        const stored = sessionStorage.getItem(this.storageKey);
         if (stored) {
             try {
                 const { answer, timestamp } = JSON.parse(stored);
                 if (Date.now() - timestamp > FEEDBACK_TTL) {
-                    sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+                    sessionStorage.removeItem(this.storageKey);
                 }
                 else {
                     this.answer = answer;
                 }
             }
             catch (_a) {
-                sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+                sessionStorage.removeItem(this.storageKey);
             }
         }
     }
-    handleFeedback(answer) {
+    handleSubmit(event) {
         var _a;
+        event.preventDefault();
+        const answer = event.submitter.value;
         this.selected = answer;
-        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
+        sessionStorage.setItem(this.storageKey, JSON.stringify({ answer, timestamp: Date.now() }));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -4266,11 +4325,11 @@ class PennlibsFeedback {
         }, 600);
     }
     render() {
-        return (hAsync("div", { key: 'e470cb9ce96fecddda37c8a557c6670b581d8414', class: "feedback__container" }, hAsync("div", { key: '0f3729d63102379f7219fd9a65c370f05c3f271c', class: "viewport-margins" }, hAsync("div", { key: '3eaa8419d9b5fed5d7cf33de60ab93dd911afa34', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "We'd like to help. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (hAsync("div", { class: "feedback__inline-question" }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected, onClick: () => this.handleFeedback('yes') }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { class: { 'selected': this.selected === 'no' }, disabled: !!this.selected, onClick: () => this.handleFeedback('no') }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: '50da9c1f23d14feeb6a2c408b0461a439331fcd9', class: "feedback__share-feedback" }, hAsync("p", { key: '3580e25ecd7b463bb46103a6aee54a710e88c0ff' }, "To help us improve, ", hAsync("a", { key: '276e226f4487ce94b9de30ae40f964e63f0d045b', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
+        return (hAsync("div", { key: '12bdec6f975166a4c5d451fc1834f70fbce3b424', class: "feedback__container" }, hAsync("div", { key: '4c607ceef5f10760d540d2549a2b186a871714c7', class: "viewport-margins" }, hAsync("div", { key: 'a967498163e05ce60a12bf230d303caa31373c8d', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "We'd like to help. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (hAsync("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: 'f918da2833ae0c64e67a9e95551edaeb78e2ba05', class: "feedback__share-feedback" }, hAsync("p", { key: '12928af116ffadf669cbc694160ee6ca3458528b' }, "To help us improve, ", hAsync("a", { key: '7281b7423677b104fb622a7fdcf8e768517ea84e', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
     static get cmpMeta() { return {
-        "$flags$": 265,
+        "$flags$": 258,
         "$tagName$": "pennlibs-feedback",
         "$members$": {
             "hideQuestion": [4, "hide-question"],

package/hydrate/index.mjs

@@ -735,6 +735,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
+  let scopeId2;
+  {
+    const cmpMeta = hostRef.$cmpMeta$;
+    if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
+      scopeId2 = hostElm["s-sc"];
+      hostElm.classList.add(scopeId2 + "-h");
+    } else if (hostElm["s-sc"]) {
+      delete hostElm["s-sc"];
+    }
+  }
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
     initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
@@ -838,6 +848,11 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
+  if (scopeId2 && slotNodes.length) {
+    slotNodes.forEach((slot) => {
+      slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
+    });
+  }
   if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
@@ -867,6 +882,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
   let childIdSplt;
   let childVNode;
   let i2;
+  const scopeId2 = hostElm["s-sc"];
   if (node.nodeType === 1 /* ElementNode */) {
     childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
     if (childNodeType) {
@@ -889,6 +905,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
+        if (scopeId2 && childIdSplt[0] === hostId) {
+          node["s-si"] = scopeId2;
+          childVNode.$attrs$.class += " " + scopeId2;
+        }
         const slotName = childVNode.$elm$.getAttribute("s-sn");
         if (typeof slotName === "string") {
           if (childVNode.$tag$ === "slot-fb") {
@@ -903,6 +923,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
+            if (scopeId2) {
+              node.classList.add(scopeId2);
+            }
           }
           childVNode.$elm$["s-sn"] = slotName;
           childVNode.$elm$.removeAttribute("s-sn");
@@ -2059,6 +2082,9 @@ var markSlotContentForRelocation = (elm) => {
   }
 };
 var insertBefore = (parent, newNode, reference) => {
+  if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
+  }
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
@@ -2611,6 +2637,9 @@ var connectedCallback = (elm) => {
           if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
+          } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta);
+            elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
@@ -4204,9 +4233,8 @@ class NoImage {
     }; }
 }
 
-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 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}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)}@media (max-width: 26em){h2.sc-pennlibs-feedback{display:block;width:100%}}.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}";
 
-const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
 const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
 const FEEDBACK_QUESTION = 'Did you find what you need?';
 /**
@@ -4230,28 +4258,59 @@ class PennlibsFeedback {
         this.hideQuestion = false;
         this.answer = undefined;
         this.selected = undefined;
+        this.currentUrl = '';
+        this.onNavigate = (event) => {
+            try {
+                const destinationUrl = new URL(event.destination.url).href;
+                if (destinationUrl !== this.currentUrl) {
+                    this.currentUrl = destinationUrl;
+                    this.selected = undefined;
+                    this.answer = undefined;
+                    this.loadStoredAnswer();
+                }
+            }
+            catch (_a) {
+                this.selected = undefined;
+                this.answer = undefined;
+            }
+        };
+    }
+    get storageKey() {
+        return `pennlibs-feedback-${this.currentUrl}`;
+    }
+    connectedCallback() {
+        this.currentUrl = window.location.href;
+        window.navigation.addEventListener('navigate', this.onNavigate);
+    }
+    disconnectedCallback() {
+        window.navigation.removeEventListener('navigate', this.onNavigate);
     }
     componentWillLoad() {
-        const stored = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
+        this.loadStoredAnswer();
+    }
+    loadStoredAnswer() {
+        const stored = sessionStorage.getItem(this.storageKey);
         if (stored) {
             try {
                 const { answer, timestamp } = JSON.parse(stored);
                 if (Date.now() - timestamp > FEEDBACK_TTL) {
-                    sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+                    sessionStorage.removeItem(this.storageKey);
                 }
                 else {
                     this.answer = answer;
                 }
             }
             catch (_a) {
-                sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+                sessionStorage.removeItem(this.storageKey);
             }
         }
     }
-    handleFeedback(answer) {
+    handleSubmit(event) {
         var _a;
+        event.preventDefault();
+        const answer = event.submitter.value;
         this.selected = answer;
-        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
+        sessionStorage.setItem(this.storageKey, JSON.stringify({ answer, timestamp: Date.now() }));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -4264,11 +4323,11 @@ class PennlibsFeedback {
         }, 600);
     }
     render() {
-        return (hAsync("div", { key: 'e470cb9ce96fecddda37c8a557c6670b581d8414', class: "feedback__container" }, hAsync("div", { key: '0f3729d63102379f7219fd9a65c370f05c3f271c', class: "viewport-margins" }, hAsync("div", { key: '3eaa8419d9b5fed5d7cf33de60ab93dd911afa34', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "We'd like to help. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (hAsync("div", { class: "feedback__inline-question" }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected, onClick: () => this.handleFeedback('yes') }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { class: { 'selected': this.selected === 'no' }, disabled: !!this.selected, onClick: () => this.handleFeedback('no') }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: '50da9c1f23d14feeb6a2c408b0461a439331fcd9', class: "feedback__share-feedback" }, hAsync("p", { key: '3580e25ecd7b463bb46103a6aee54a710e88c0ff' }, "To help us improve, ", hAsync("a", { key: '276e226f4487ce94b9de30ae40f964e63f0d045b', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
+        return (hAsync("div", { key: '12bdec6f975166a4c5d451fc1834f70fbce3b424', class: "feedback__container" }, hAsync("div", { key: '4c607ceef5f10760d540d2549a2b186a871714c7', class: "viewport-margins" }, hAsync("div", { key: 'a967498163e05ce60a12bf230d303caa31373c8d', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "We'd like to help. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (hAsync("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: 'f918da2833ae0c64e67a9e95551edaeb78e2ba05', class: "feedback__share-feedback" }, hAsync("p", { key: '12928af116ffadf669cbc694160ee6ca3458528b' }, "To help us improve, ", hAsync("a", { key: '7281b7423677b104fb622a7fdcf8e768517ea84e', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
     static get cmpMeta() { return {
-        "$flags$": 265,
+        "$flags$": 258,
         "$tagName$": "pennlibs-feedback",
         "$members$": {
             "hideQuestion": [4, "hide-question"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "1.2.0",
+  "version": "1.2.1-dev.1",
   "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",