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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DJo51Q03.js');
+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}";
 
@@ -277,21 +277,57 @@ const Autocomplete = class {
 };
 Autocomplete.style = pennlibsAutocompleteCss;
 
-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)}";
+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 NoImage = class {
+const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
+const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
+const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
+const FEEDBACK_QUESTION = 'Is this page useful?';
+const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+const PennlibsFeedback = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.feedbackEvent = index.createEvent(this, "pennlibs-feedback");
+        /**
+         * When true, hides the yes/no question and only shows the "share your feedback" link.
+         */
+        this.hideQuestion = false;
+        this.error = false;
+        this.answer = 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';
+        }
+    }
+    handleFeedback(answer) {
+        var _a;
+        this.answer = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
+        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
+        this.feedbackEvent.emit({
+            question: FEEDBACK_QUESTION,
+            answer: answer,
+            url: window.location.href,
+            pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
+            pageTitle: document.title || undefined
+        });
     }
     render() {
-        const shieldImg = index.getAssetPath('./assets/simplified-shield.webp');
-        return (index.h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
+        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"), "."))))));
     }
-    static get assetsDirs() { return ["assets"]; }
 };
-NoImage.style = pennlibsFallbackImgCss;
+PennlibsFeedback.style = pennlibsFeedbackCss;
 
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 5.75rem;\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.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-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 Footer = class {
     constructor(hostRef) {
@@ -320,12 +356,12 @@ const Footer = class {
     }
     render() {
         const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
-        return (index.h("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, index.h("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
+        return (index.h("footer", { key: 'bc08bfaa926d4a5032cd089e735d2120d4982fb7', class: "website-footer-wrapper" }, index.h("div", { key: 'f9491e7d0b774e1ee4fb5fe9dfe3644c008e4aa4', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, index.h("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, index.h("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, index.h("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, index.h("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, index.h("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, index.h("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, index.h("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, index.h("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, index.h("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, index.h("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, index.h("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, index.h("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, index.h("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, index.h("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, index.h("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, index.h("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, 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 && [
             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: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, index.h("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, index.h("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, index.h("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, index.h("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, index.h("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, index.h("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, index.h("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, index.h("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+        ]))), 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")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }
@@ -383,259 +419,15 @@ const Header = class {
         return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (index.h("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, index.h("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, index.h("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, index.h("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), index.h("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (index.h("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, index.h("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
+        return (index.h("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, index.h("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, index.h("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, index.h("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), index.h("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (index.h("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, index.h("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }
 };
 Header.style = pennlibsHeaderCss;
 
-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%}";
-
-const PIXEL_DENSITIES = [1, 1.5, 2];
-const IIIFImg = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
-         * Defines the rectangular portion of the underlying image to return.
-         *
-         * `full`: The full image is returned, without any cropping.
-         *
-         * `square`: A square area where width and height equal the shorter dimension.
-         *
-         * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies
-         * a centered crop based on the source image dimensions and sets the CSS aspect-ratio
-         * property for layout reservation.
-         *
-         * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
-         *
-         * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
-         *
-         * @default 'full'
-         */
-        this.region = 'full';
-        /**
-         * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
-         * Specifies mirroring and clockwise rotation in degrees (0-360).
-         *
-         * `n`: Rotation in degrees only.
-         *
-         * `!n`: Mirror the image vertically, then rotate by n degrees.
-         *
-         * @default '0'
-         */
-        this.rotation = '0';
-        /**
-         * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
-         * Controls the color delivery mode.
-         *
-         * `default`: The server's default quality.
-         *
-         * `color`: Full color information.
-         *
-         * `gray`: Grayscale rendering.
-         *
-         * `bitonal`: Black and white only.
-         *
-         * @default 'default'
-         */
-        this.quality = 'default';
-        /**
-         * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
-         * or "eager" to load immediately.
-         * @default 'lazy'
-         */
-        this.loading = 'lazy';
-        /**
-         * Whether to display a fallback placeholder image when the IIIF image fails to load.
-         * @default true
-         */
-        this.showFallback = true;
-        this.isLoaded = false;
-        this.hasError = false;
-        this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
-        this.handleLoad = () => {
-            this.isLoaded = true;
-        };
-        this.handleError = () => {
-            this.hasError = true;
-        };
-    }
-    /**
-     * Fetch IIIF image info to get actual dimensions.
-     */
-    async fetchImageInfo() {
-        try {
-            const currentUuid = this.uuid; // Capture current UUID
-            const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;
-            const response = await fetch(infoUrl);
-            if (!response.ok) {
-                console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);
-                return;
-            }
-            const info = await response.json();
-            // Only update dimensions if UUID hasn't changed during fetch
-            // (protects against race conditions if component updates)
-            if (this.uuid === currentUuid) {
-                this.imageDimensions = {
-                    width: info.width,
-                    height: info.height,
-                };
-                this.fetchedUuid = currentUuid;
-            }
-        }
-        catch (error) {
-            console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);
-        }
-    }
-    /**
-     * Check if a region value matches aspect ratio format (e.g., "16:9", "4:3", "3:2").
-     */
-    isAspectRatio(value) {
-        return /^\d+:\d+$/.test(value);
-    }
-    /**
-     * Set CSS custom property for aspect ratio on the host element.
-     */
-    setAspectRatioCss(aspectRatio) {
-        const [widthRatio, heightRatio] = aspectRatio.split(':');
-        this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);
-    }
-    /**
-     * Clear CSS custom property for aspect ratio from the host element.
-     */
-    clearAspectRatioCss() {
-        this.hostElement.style.removeProperty('--aspect-ratio');
-    }
-    /**
-     * Format a number for IIIF percentage values (remove trailing zeros).
-     * IIIF spec requires no trailing zeros per section 4.7.
-     */
-    formatPercent(value) {
-        return value.toFixed(2).replace(/\.?0+$/, '');
-    }
-    /**
-     * Calculate a centered crop region for a given aspect ratio.
-     * Requires actual image dimensions to calculate correctly.
-     * @param aspectRatio - The target aspect ratio (e.g., "3:2" or "2:3")
-     * @returns A IIIF percentage-based region string (e.g., "pct:0,16.67,100,66.67")
-     */
-    calculateCenteredCrop(aspectRatio) {
-        if (!this.imageDimensions) {
-            throw new Error('Image dimensions required for aspect ratio calculation');
-        }
-        const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);
-        const targetRatio = widthRatio / heightRatio;
-        const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;
-        // Determine if we need to crop width or height
-        if (sourceRatio > targetRatio) {
-            // Source is wider than target - crop left and right
-            const widthPercent = (targetRatio / sourceRatio) * 100;
-            const xOffset = (100 - widthPercent) / 2;
-            return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;
-        }
-        else {
-            // Source is taller than target - crop top and bottom
-            const heightPercent = (sourceRatio / targetRatio) * 100;
-            const yOffset = (100 - heightPercent) / 2;
-            return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;
-        }
-    }
-    /**
-     * Get the region parameter for the IIIF URL.
-     */
-    getRegionParam() {
-        // Handle custom aspect ratios
-        let regionParam = this.region || 'full';
-        if (this.isAspectRatio(regionParam)) {
-            // Only apply crop if we have dimensions for the current UUID
-            if (this.imageDimensions && this.fetchedUuid === this.uuid) {
-                regionParam = this.calculateCenteredCrop(regionParam);
-            }
-            else {
-                // Use full image until dimensions are loaded
-                regionParam = 'full';
-            }
-        }
-        return regionParam;
-    }
-    buildIIIFUrl(width, format = 'jpg') {
-        const sizeParam = width ? `${width},` : 'max';
-        const regionParam = this.getRegionParam();
-        return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
-    }
-    generateSrcset(baseWidth, format) {
-        return PIXEL_DENSITIES.map(density => {
-            const width = Math.round(baseWidth * density);
-            const url = this.buildIIIFUrl(width, format);
-            return `${url} ${density}x`;
-        }).join(', ');
-    }
-    handleRegionChange(newValue, oldValue) {
-        // Only process if region actually changed
-        if (newValue === oldValue) {
-            return;
-        }
-        // If new region is an aspect ratio, set CSS and fetch info
-        if (newValue && this.isAspectRatio(newValue)) {
-            this.setAspectRatioCss(newValue);
-            this.fetchImageInfo();
-        }
-        else {
-            // Clear aspect ratio CSS if no longer using aspect ratio format
-            this.clearAspectRatioCss();
-        }
-    }
-    componentDidLoad() {
-        // Set CSS aspect ratio and fetch image info if using aspect ratio format
-        if (this.region && this.isAspectRatio(this.region)) {
-            this.setAspectRatioCss(this.region);
-            this.fetchImageInfo();
-        }
-        if ('ResizeObserver' in window) {
-            this.resizeObserver = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    this.observedWidth = Math.round(entry.contentRect.width);
-                    if (this.resizeObserver) {
-                        this.resizeObserver.disconnect();
-                        this.resizeObserver = undefined;
-                    }
-                }
-            });
-            this.resizeObserver.observe(this.hostElement);
-        }
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-    }
-    render() {
-        // Show placeholder until we've measured the component width
-        if (!this.observedWidth) {
-            return index.h("pennlibs-fallback-img", null);
-        }
-        if (this.hasError && this.showFallback) {
-            return (index.h("div", { class: "fallback-container" }, index.h("pennlibs-fallback-img", null)));
-        }
-        const imgClasses = {
-            'iiif-img': true,
-            'loaded': this.isLoaded
-        };
-        return (index.h("picture", null, index.h("source", { type: "image/webp", srcSet: this.generateSrcset(this.observedWidth, 'webp') }), index.h("img", { class: imgClasses, src: this.buildIIIFUrl(this.observedWidth, 'jpg'), srcSet: this.generateSrcset(this.observedWidth, 'jpg'), alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "region": ["handleRegionChange"]
-    }; }
-};
-IIIFImg.style = pennlibsIiifImgCss;
-
 exports.pennlibs_autocomplete = Autocomplete;
-exports.pennlibs_fallback_img = NoImage;
+exports.pennlibs_feedback = PennlibsFeedback;
 exports.pennlibs_footer = Footer;
 exports.pennlibs_header = Header;
-exports.pennlibs_iiif_img = IIIFImg;
-//# sourceMappingURL=pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.cjs.js.map
+//# sourceMappingURL=pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DJo51Q03.js');
+var index = require('./index-Ag6DtE87.js');
 
 const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DJo51Q03.js');
+var index = require('./index-Ag6DtE87.js');
 
 const pennlibsChatCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  line-height: normal;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\na {\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, #faa755, #fcca99);\n  border-radius: 1em;\n  position: fixed;\n  bottom: 0.75em;\n  right: 0.75em;\n  box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n  color: var(--pl-color-penn-blue);\n  text-decoration: none;\n  font-weight: 500;\n  padding: 0.15em;\n  font-size: 1em;\n\n  @media (min-width: 820px) {\n    bottom: 1.5em;\n    right: 1.5em;\n    width: auto;\n    padding: 0.15em 0.75em;\n    padding-left: 0.5em;\n  }\n}\n\na:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}";
 

package/dist/cjs/pennlibs-fallback-img.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-Ag6DtE87.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)}";
+
+const NoImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const shieldImg = index.getAssetPath('./assets/simplified-shield.webp');
+        return (index.h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+NoImage.style = pennlibsFallbackImgCss;
+
+exports.pennlibs_fallback_img = NoImage;
+//# sourceMappingURL=pennlibs-fallback-img.entry.cjs.js.map

package/dist/cjs/pennlibs-fallback-img.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-fallback-img.entry.cjs.js","sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: var(--pl-color-bg-subtle);\n  aspect-ratio: 3/2;\n}\n\n.no-image__img {\n  width: 100%;\n  max-width: 150px;\n  filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-fallback-img',\n  styleUrl: 'pennlibs-fallback-img.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class NoImage {\n  render() {\n    const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n    return (\n      <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n    );\n  }\n} "],"names":["getAssetPath","h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,GAAA,MAAA;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAGA,kBAAY,CAAC,iCAAiC,CAAC;QAEjE,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DJo51Q03.js');
+var index = require('./index-Ag6DtE87.js');
 
 const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1.1;font-size:3em;font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
 
@@ -49,7 +49,7 @@ const Hero = class {
         }
     }
     render() {
-        return (index.h("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, index.h("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), index.h("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, index.h("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (index.h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, index.h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), index.h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, index.h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }