npm - @penn-libraries/web - Versions diffs - 1.1.1-dev.2 → 1.2.0-dev.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAOH,MAAM,OAAO,MAAM;IAKjB,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;QACrB,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;gBAC9B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtE,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBACf,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;wBACf,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,SAAS;wBAC9C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;4BAC1D,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAA;wBACnD,CAAC,CAAC;qBACH,CAAC,CAAA;oBAEF,OAAO,GAAG,CAAC;gBACb,CAAC,EAAE,EAAE,CAAC,CAAC;YACX,CAAC;QACH,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5F,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAEpE,OAAO,CACL,~~4DAAK,~~KAAK,EAAC,wBAAwB;~~YACjC,+DAAQ~~,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE;~~oBACpC~~,UAAU,EAAE,iCAAiC,mBAAmB,qBAAqB;oBACrF,cAAc,EAAE,OAAO;iBACxB;gBACC,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,4DAAK,KAAK,EAAC,iCAAiC;4BAC1C;gCACE,2DAAI,KAAK,EAAC,yBAAyB,qBAAoB;gCACvD,2DAAI,KAAK,EAAC,uBAAuB;oCAC/B;wCAAI,0DAAG,IAAI,EAAC,6FAA6F;;4CAAmB,4DAAM;0EAA+B,CAAK;oCACtK;wCAAI,0DAAG,IAAI,EAAC,oBAAoB,qBAAmB,CAAK;oCACxD;wCAAI,0DAAG,IAAI,EAAC,0CAA0C,iBAAe,CAAK;oCAC1E;wCAAI,0DAAG,IAAI,EAAC,2CAA2C,EAAC,MAAM,EAAC,QAAQ,0BAAwB,CAAK,CACjG,CACG;4BACV;gCACE,2DAAI,KAAK,EAAC,yBAAyB,oBAAmB;gCACtD,2DAAI,KAAK,EAAC,uBAAuB;oCAC/B;wCAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK;oCACxE;wCAAI,0DAAG,IAAI,EAAC,qCAAqC,gBAAc,CAAK;oCACpE;wCAAI,0DAAG,IAAI,EAAC,yCAAyC,eAAa,CAAK;oCACvE;wCAAI,0DAAG,IAAI,EAAC,iDAAiD,eAAa,CAAK,CAC5E,CACG;4BACT,IAAI,CAAC,oBAAoB,IAAI;gCAC5B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvC;oCACE,UAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM;oCAC1D,UAAI,KAAK,EAAC,uBAAuB,IAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB;wCAAI,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX,CAAC;6BACH,CACG,CACF,CACF;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,kBAAkB;wBAC3B,2DAAI,KAAK,EAAC,qDAAqD;4BAC7D;gCAAI,0DAAG,IAAI,EAAC,wBAAwB,YAAU,CAAK;4BACnD;gCAAI,0DAAG,IAAI,EAAC,4CAA4C,qBAAmB,CAAK;4BAChF;gCAAI,0DAAG,IAAI,EAAC,wDAAwD,+CAA6C,CAAK;4BACtH;gCAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK;4BACxE;gCAAI,0DAAG,IAAI,EAAC,6CAA6C,yBAAuB,CAAK;4BACrF;gCAAI,0DAAG,IAAI,EAAC,2DAA2D,oCAAkC,CAAK,CAC3G,CACD,CACF,CACC,~~CACL~~,~~CACP,~~CAAC;IACJ,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/*\n A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <~~div~~ class=\"website-footer-wrapper\">\n <~~footer~~ class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </~~footer~~>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/*\n A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <footer class=\"website-footer-wrapper\">\n <div class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"viewport-margins\">\n <p class=\"built-with\">Built with the <a href=\"https://designsystem.library.upenn.edu/\">Penn Libraries Design System</a></p>\n </div>\n </footer>\n );\n }\n}\n"]}

package/dist/collection/components/pennlibs-header/pennlibs-header.js CHANGED Viewed

@@ -63,7 +63,7 @@ export class Header {
         return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (h("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, h("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, h("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, h("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, h("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
+        return (h("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, h("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, h("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, h("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, h("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
     }
     static get is() { return "pennlibs-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pennlibs-hero/pennlibs-hero.css CHANGED Viewed

@@ -81,7 +81,7 @@
   text-shadow: 1px 1px 2px var(--pl-color-fg-default);
   line-height: 1.1;
   font-size: 3em;
-  font-weight: bold;
+  font-weight: 400;
   font-family: var(--pl-hero-heading-font);
   text-wrap: pretty;
   max-width: 30ch;

package/dist/collection/components/pennlibs-hero/pennlibs-hero.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class Hero {
         }
     }
     render() {
-        return (h("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, h("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), h("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, h("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get is() { return "pennlibs-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/pennlibs-feedback.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;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}@media print{:host{display:none}}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;justify-content:center}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 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-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;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 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_QUESTION = 'Did you find what you need?';
+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$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedback extends HTMLElement {
     constructor(registerHost) {
@@ -13,10 +15,19 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
         }
         this.__attachShadow();
         this.feedbackEvent = createEvent(this, "pennlibs-feedback", 7);
+        /**
+         * 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);
         }
@@ -24,18 +35,11 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
             this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
         }
     }
-    componentDidRender() {
-        if (this.answer === 'yes' && this.yesMessageRef) {
-            this.yesMessageRef.focus();
-        }
-        else if (this.answer === 'no' && this.noMessageRef) {
-            this.noMessageRef.focus();
-        }
-    }
     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,
@@ -45,16 +49,11 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
         });
     }
     render() {
-        if (this.answer === 'yes') {
-            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
-        }
-        if (this.answer === 'no') {
-            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
-        }
-        return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes", h("span", { class: "visually-hidden" }, ", I found what I need."))), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No", h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+        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"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
 }, [257, "pennlibs-feedback", {
+        "hideQuestion": [4, "hide-question"],
         "error": [32],
         "answer": [32]
     }]);

package/dist/components/pennlibs-feedback.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,~~muDAAmuD~~;;~~ACE/vD~~,MAAM,oBAAoB,GAAG,0BAA0B;AACvD,MAAM,~~iBAAiB~~,GAAG,6BAA6B;~~AACvD~~,MAAM,0BAA0B,GAAG,yBAAyB;~~MAO~~/CA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;~~AAMW~~,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAM,CAAA,MAAA,GAAuB,SAAS;~~AA0FhD~~;~~IAxEC~~,iBAAiB,GAAA;~~AACf~~,~~QAAA~~,~~IAAI~~,cAAc,CAAC,OAAO,CAAC,~~oBAAoB~~,CAAC~~,EAAE~~;~~YAChD~~,IAAI,CAAC,~~MAAM~~,GAAG,~~cAAc~~,CAAC,~~OAAO~~,CAAC,~~oBAAoB~~,~~CAAW;;AAGtE~~,~~QAAA~~,~~IAAI~~,cAAc,CAAC,~~OAAO~~,CAAC,~~0BAA0B~~,CAAC~~,EAAE~~;~~YACtD~~,~~IAAI~~,CAAC,~~KAAK~~,~~GAAG~~,cAAc,CAAC,OAAO,CAAC,~~0BAA0B~~,CAAC,~~KAAK,MAAM;;;IAI9E,kBAAkB,GAAA~~;~~QAChB~~,IAAI,~~IAAI,~~CAAC,MAAM,~~KAAK~~,~~KAAK~~,~~IAAI~~,~~IAAI~~,CAAC,~~aAAa~~,~~EAAE;AAC/C~~,~~YAAA~~,IAAI,CAAC,~~aAAa~~,CAAC,~~KAAK~~,EAAE~~;;aACrB~~,IAAI,~~IAAI,~~CAAC,~~MAAM,~~KAAK,~~IAAI~~,~~IAAI~~,~~IAAI,~~CAAC,~~YAAY~~,~~EAAE;AACpD,YAAA,IAAI,~~CAAC,~~YAAY~~,CAAC,KAAK,~~EAAE~~;;;~~AAI7B~~,IAAA,cAAc,CAAC,MAAc,EAAA;;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;~~AAEpD~~,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,QAAQ,EAAE,iBAAiB;AAC3B,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;AACzB,YAAA,WAAW,EAAE,CAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,KAAI,SAAS;AACnE,YAAA,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI;AAC9B,SAAA,CAAC;;IAGJ,MAAM,GAAA;~~AACJ~~,~~QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,~~QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,~~oBAAoB~~,EAAA,~~EAC7B~~,~~CAAA~~,CAAA,~~GAAA~~,EAAA,~~EACE~~,~~GAAG~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,KAAK,~~IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,~~EAAC,~~IAAI~~,EAAA,~~EAEb~~,~~CAA0B~~,CAAA,~~QAAA~~,EAAA,~~IAAA~~,EAAA,~~WAAA~~,~~CAAA~~,~~EACxB~~,~~kCAAA~~,~~CAAA~~,~~CACA;;AAIV~~,~~QAAA~~,~~IAAI~~,IAAI,CAAC,~~MAAM~~,KAAK,IAAI,~~EAAE;AACxB~~,~~YAAA~~,~~QACE~~,~~CAAA,CAAA,KAAA,EAAA,EAAK,~~KAAK,~~EAAC~~,~~oBAAoB,EAAA,EAC7B,~~CAAA,CAAA,GAAA,EAAA,~~EACE~~,~~GAAG~~,~~EAAE~~,~~CAAC~~,~~EAAE~~,~~KAAK,~~IAAI,CAAC,~~YAAY~~,~~GAAG~~,~~EAA0B,EAC3D,QAAQ,EAAC,~~IAAI,~~EAAA~~,~~SAEV~~,~~CAAgC,~~CAAA,~~QAAA~~,EAAA,IAAA,~~EAAA~~,~~iBAAA,CAAA,wDAAkD,~~CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,0CAA0C,~~EAAkC~~,EAAA~~,+BAAA~~,CAAA,~~EACvK~~,~~GAAA~~,CAAA,~~CACA;;QAIV~~,~~QACE~~,CAAA,~~CAAA,~~KAAA,EAAA,~~EAAK~~,KAAK,EAAC,~~oBAAoB~~,EAAA,~~EAC7B~~,~~CAAA~~,CAAA,IAAA,EAAA,IAAA,~~EAAK~~,~~iBAAiB~~,~~CAAM~~,~~EAC5B~~,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAA,~~kBAE~~/C,CAAA,CAAA,MAAA,EAAA,IAAA,~~SAAS,CAAA,CAAA,MAAA,~~EAAA,~~EAAM~~,~~KAAK~~,~~EAAC~~,~~iBAAiB,EAAA,EAAA,wBAAA,CAA8B,CAAO,CACpE,~~EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAA,~~kBAE9C~~,~~CAAA~~,CAAA,MAAA,EAAA,IAAA,~~QAAQ~~,~~CAAM~~,CAAA,~~MAAA~~,EAAA,EAAA,KAAK,EAAC,~~iBAAiB~~,EAAA,EAAA,~~8BAAA~~,~~CAAoC~~,~~CAAO~~,~~CACzE~~,~~CACL;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PennlibsFeedback","__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-feedback/pennlibs-feedback.css?tag=pennlibs-feedback&encapsulation=shadow","src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"sourcesContent":["/* Component Root Styles\n---------------------------------------- /\n:host {\n display: block;\n background: #eeeff4;\n ~~padding: 1.5em 1em;\n~~ font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n color: var(--pl-color-fg-default);\n line-height: 1.4;\n box-sizing: border-box;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n/ ~~Container~~ ~~Layout~~\n~~----------------------------------------~~ /\n.~~feedback~~-~~container~~ {\n ~~display~~: ~~flex~~;\n ~~align-items~~: ~~center~~;\n ~~flex~~-~~wrap~~: ~~wrap~~;\n ~~gap~~: ~~0.5em~~;\n ~~width~~: ~~100%;\~~n ~~justify~~-~~content~~: ~~center~~;\n}\n\n~~@media~~ ~~(max-width:~~ ~~26em) {~~\n .~~feedback~~-~~container~~ {\n ~~justify~~-~~content~~: ~~center~~;\n }\n}\n\n/ Typography\n---------------------------------------- /\nh2 {\n display: inline-block;\n margin: 0 ~~0.5em 0 0~~;\n font-family: var(--pl-font-sans-serif);\n font-size: 1em;\n font-weight: 600;\n}\n\np {\n margin: 0;\n padding: calc(0.5em + 1px) 0;\n}\n\nstrong {\n font-weight: 600;\n}\n\n/ Links\n---------------------------------------- /\na {\n color: var(--pl-color-fg-accent);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n/ Buttons\n---------------------------------------- /\nbutton {\n all: unset;\n display: flex;\n align-items: center;\n gap: 0.5em;\n padding: 0.~~5em~~ 1.~~5em~~;\n font-family: var(--pl-font-family);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pl-color-fg-default);\n background: var(--pl-color-bg-default);\n border: solid 1px var(--pl-color-fg-subtle);\n border-radius: 1em;\n box-sizing: border-box;\n}\n\nbutton:hover {\n cursor: pointer;\n}\n\nbutton:hover span {\n text-decoration: underline;\n}\n\n/ Focus States\n---------------------------------------- /\n:focus {\n outline: 0;\n box-shadow: \n 0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\n/* Responsive Adjustments\n---------------------------------------- /\n@media (max-width: 26em) {\n h2 {\n display: block;\n width: 100%;\n text-align: center;\n }\n}\n\n.help-us {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n/ Accessibility Helpers\n---------------------------------------- /\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/ This ensures the element remains hidden even when focused */\n.visually-hidden:focus,\n.visually-hidden:active {\n clip: auto;\n clip-path: none;\n height: auto;\n overflow: visible;\n position: static;\n white-space: normal;\n width: auto;\n}","import { Component, h, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst ~~FEEDBACK_QUESTION~~ = '~~Did~~ ~~you~~ ~~find~~ ~~what~~ ~~you~~ ~~need~~?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n tag: 'pennlibs-feedback',\n styleUrl: 'pennlibs-feedback.css',\n shadow: true,\n})\nexport class PennlibsFeedback { \n @State() error: boolean = false;\n @State() answer: string \| undefined = undefined;\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 ~~private yesMessageRef?: HTMLParagraphElement;\n private noMessageRef?: HTMLParagraphElement;\n\n~~ componentWillLoad() {\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 componentDidRender() {\n~~ if (~~this~~.~~answer === 'yes' && this.yesMessageRef~~) {\n this.~~yesMessageRef~~.~~focus~~()~~;\n }~~ ~~else if (this.answer~~ === 'no' ~~&& this.noMessageRef) {\n this.noMessageRef.focus()~~;\n }\n }\n\n handleFeedback(answer: string) {\n this.answer = answer;\n sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\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 if (~~this.answer === 'yes') {~~\n ~~return~~ (\n <div class=\"~~feedback~~-~~container~~\">\n <p \n ~~ref=~~{~~(el)~~ => this.~~yesMessageRef~~ = el as ~~HTMLParagraphElement}~~\n ~~tabindex=\"-1\"\n >\n~~ <~~strong~~>Thank you~~</strong>~~ for ~~your~~ ~~feedback!~~ ~~👍\n </~~p>\n ~~</div>\n~~ )~~;\n }\n\n if~~ (this.answer === 'no') ~~{\n return~~ (\n <~~div class=\"feedback-container\">\n <~~p ~~\n ref={(el)~~ => ~~this.noMessageRef~~ ~~= el as HTMLParagraphElement}\n tabindex=\"-1\"\n >\n To <strong>help~~ us ~~improve</strong>, we'd like to~~ know ~~more about your visit~~. ~~Please~~ <a href=\"https://www.library.upenn.edu/contact-us\">~~contact~~ us ~~with~~ ~~your~~ ~~feedback</a>.\n </~~p>\n ~~</div>\n~~ )~~;\n }\n\n return~~ (\n <div class=\"~~feedback~~-~~container~~\">\n <h2>~~{FEEDBACK_QUESTION}</~~h2>\n <button onClick={() => this.handleFeedback('yes')}>\n ~~👍\n~~ <span>Yes<span ~~class=\"visually-hidden\">, I found what I need.</span></span~~>\n </button>\n <button onClick={() => this.handleFeedback('no')}>\n ~~👎\n~~ <span>No<~~span~~ class=\"~~visually~~-~~hidden~~\">, I ~~didn't~~ ~~find~~ ~~what~~ I ~~need.</span></span~~>\n </~~button~~>\n </div>\n )\n }\n}\n\n"],"version":3}
1	+ {"file":"pennlibs-feedback.js","mappings":"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","names":["PennlibsFeedback","__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-feedback/pennlibs-feedback.css?tag=pennlibs-feedback&encapsulation=shadow","src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"sourcesContent":["/* Component Root Styles\n---------------------------------------- /\n:host {\n display: block;\n background: #eeeff4;\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n color: var(--pl-color-fg-default);\n line-height: 1.4;\n box-sizing: border-box;\n padding: 0.75em 0;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n, ::before, ::after {\n box-sizing: border-box;\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.feedback__content {\n display: flex;\n justify-content: space-between;\n gap: var(--pl-space-s);\n flex-wrap: wrap;\n}\n\n/* Container Layout\n---------------------------------------- /\n.feedback__inline-question {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n align-items: center;\n}\n\n/ Typography\n---------------------------------------- /\nh2 {\n display: inline-block;\n margin: 0;\n font-family: var(--pl-font-sans-serif);\n font-size: 1em;\n font-weight: 600;\n}\n\np {\n margin: 0;\n padding: calc(0.5em + 1px) 0;\n}\n\nstrong {\n font-weight: 600;\n}\n\n/ Links\n---------------------------------------- /\na {\n color: var(--pl-color-fg-accent);\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\n/ Buttons\n---------------------------------------- /\nbutton {\n all: unset;\n display: flex;\n align-items: center;\n gap: 0.5em;\n padding: 0.25em 1.25em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pl-color-fg-default);\n background: var(--pl-color-bg-default);\n border: solid 1px var(--pl-color-fg-subtle);\n border-radius: 1em;\n box-sizing: border-box;\n}\n\nbutton:hover {\n cursor: pointer;\n}\n\nbutton:hover span {\n text-decoration: underline;\n}\n\n/ Focus States\n---------------------------------------- /\n:focus {\n outline: 0;\n box-shadow: \n 0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\n/* Responsive Adjustments\n---------------------------------------- /\n@media (max-width: 26em) {\n h2 {\n display: block;\n width: 100%;\n text-align: center;\n }\n}\n\n.help-us {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n/ Accessibility Helpers\n---------------------------------------- /\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/ This ensures the element remains hidden even when focused /\n.visually-hidden:focus,\n.visually-hidden:active {\n clip: auto;\n clip-path: none;\n height: auto;\n overflow: visible;\n position: static;\n white-space: normal;\n width: auto;\n}","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}

package/dist/components/pennlibs-footer.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
-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 = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor(registerHost) {
@@ -33,12 +33,12 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     }
     render() {
         const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
-        return (h("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, h("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
+        return (h("footer", { key: 'bc08bfaa926d4a5032cd089e735d2120d4982fb7', class: "website-footer-wrapper" }, h("div", { key: 'f9491e7d0b774e1ee4fb5fe9dfe3644c008e4aa4', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, h("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, h("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, h("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, h("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, h("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, h("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, h("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, h("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, h("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, h("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, h("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, h("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, h("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, h("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, h("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, h("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, h("div", { key: 'c78698128c26439a783a6872bda1f6ad30010091', class: "viewport-margins" }, h("div", { key: '0fa06835787b2b862adbc972040760505431eee4', class: "website-footer__content" }, h("div", { key: '1f9f9b6e20e67be442295c15bbaed30a9bd4ed6c', class: "website-footer__links-container" }, h("section", { key: 'a1ad90f23aa1e04d2a9ccb65f55aad8bd209865b' }, h("h2", { key: '16c840dae80ded63eeb3dfe4dcd94712b6fbf3cb', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'c474ce0b1f79b630a09a4f290de3b90d4faf6322', class: "website-footer__links" }, h("li", { key: 'ef2c4a81b658238a56345616b638a4b1bdeb86d7' }, h("a", { key: 'fe75576d5007269fd63178b1cc231b6a99dfd183', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '4077d3f62c99b5f33305ead14d28b98cec6f6e7f' }), "Philadelphia, PA 19104-6206")), h("li", { key: 'dcc868203318be48bce9bcb2af7feb429cfea045' }, h("a", { key: 'd4268959f6d6796c4dda913910af4c0e8333b5f3', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '65c7a446f25fde16e6dd13b9cd777522dcfe73de' }, h("a", { key: 'd44ccc291db7ef87492723f5b8c0a6e27dd82b58', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '6dda94dd8c3bd222e251e9b3c26228d6c79c65bc' }, h("a", { key: '8378c775adba4789e107fc365c8f12dc283c5c39', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '927c33a3a55c9b23ef16fb84ed0222e4222d8919' }, h("h2", { key: '73ddc9d2175026ee31d00b6eefda8051be0768aa', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'f51e60d3333e6185d4e94427a09a0907e65e3d92', class: "website-footer__links" }, h("li", { key: '64d2313dbc8064af08d17a040695e39de3a65f99' }, h("a", { key: 'a0c41592ec08c2a77e964270d30284442a6f01c2', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: 'f0cf9bf81683933711a12d73bef11bbbabc2f445' }, h("a", { key: '47b860bca9aa60196b3a037bfe3c1dd1b34b5024', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '9039a7f7fc64465ec2622cdbad079972ebdf4292' }, h("a", { key: '834b7a49f15847d2fa6f405e6e5a6320b0ea5967', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'cb4ca3a5afb95c7e1df0f11773062bfed4c66116' }, h("a", { key: '82b2b1380689cdc1ee29ca55bab4bf5beb8ab825', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
             this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
-        ]))), h("div", { key: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, h("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, h("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, h("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, h("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, h("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, h("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, h("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, h("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+        ]))), h("div", { key: 'a9172ba3d817c03ff081d67ae47aceeac317a916', class: "website-footer__footer" }, h("div", { key: '2307a5282337a64bacbb1ce6574505a549527674', class: "viewport-margins" }, h("ul", { key: '7783498f960416be4bcd4b525d674feae524ed40', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '90c904762368df68012945c96cfde96e34f939a7' }, h("a", { key: '3c8b82331d85746a26ef69200137054aa1be6e72', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '6ec4f2ed752187a65e6ce35644504d11a293972e' }, h("a", { key: '036d0c03234a0a198304fd3075c8d888867bc2d8', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '729e69e9737a13ce8b007176ff2225542b6f76fe' }, h("a", { key: '51410ccd4b0cfc73d1435df78acbf4d7775c9b5a', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: 'af7a7dfaf62607451c5c65daf2554aef228c2293' }, h("a", { key: '924ebc36c5cfdcd9f5b99a783914eaaa9ff9851a', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'd6a72f077412da636a998521382f747d56d0cc98' }, h("a", { key: '6924c765a7b37f335167105a39b719d99937a330', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '0ddfa89abe2f7bb6b44f34443d78e491c5af5d58' }, h("a", { key: 'cbaeccf216d3438a3da9633a29d90c91e225858b', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), h("div", { key: '9fc3fbb6bde995fac83a2ab795022846c19c6e5f', class: "viewport-margins" }, h("p", { key: '73ec7cf307efbfe6565c27ac711a087d450e1372', class: "built-with" }, "Built with the ", h("a", { key: '94ce8d4703ad2b9231ae15cd8018ab74889a48f6', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-footer/pennlibs-footer.css?tag=pennlibs-footer&encapsulation=shadow","src/components/pennlibs-footer/pennlibs-footer.tsx"],"sourcesContent":[":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}","import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/\n A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <div class=\"website-footer-wrapper\">\n <footer class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </footer>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-footer/pennlibs-footer.css?tag=pennlibs-footer&encapsulation=shadow","src/components/pennlibs-footer/pennlibs-footer.tsx"],"sourcesContent":[":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}","import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/\n A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <footer class=\"website-footer-wrapper\">\n <div class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"viewport-margins\">\n <p class=\"built-with\">Built with the <a href=\"https://designsystem.library.upenn.edu/\">Penn Libraries Design System</a></p>\n </div>\n </footer>\n );\n }\n}\n"],"version":3}

package/dist/components/pennlibs-header.js CHANGED Viewed

@@ -55,7 +55,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (h("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, h("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, h("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, h("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, h("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
+        return (h("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, h("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, h("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, h("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, h("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-hero.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-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:bold;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}}";
+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}}";
 const getCurrentImageSource = (pictureElement) => {
     const imgElement = pictureElement.querySelector('img');
@@ -51,7 +51,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
         }
     }
     render() {
-        return (h("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, h("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), h("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, h("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pennlibs-hero.js","mappings":";;AAAA,MAAM,eAAe,GAAG,~~spEAAspE~~;;~~ACE9qE~~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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n --pl-hero-height: clamp(42vh, 32rem, 26rem);\n --pl-hero-heading-font: var(--pl-font-serif);\n --pl-hero-color: var(--pl-color-fg-on-emphasis);\n}\n\n, :before, :after {\n box-sizing: inherit;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.viewport-margins {\n width: 100%;\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/ Start of Selection /\n/ Hero section /\n.hero {\n position: relative;\n min-height: var(--pl-hero-height);\n height: 100%;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: 50% 33%;\n display: flex;\n}\n/ End of Selection /\n\n.hero::before {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n \n.hero::after {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n.hero__content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n z-index: 1;\n}\n\n.hero__heading-container {\n margin-top: auto;\n padding-top: var(--pl-space-3xl);\n padding-bottom: var(--pl-space-3xl);\n}\n\n.hero__heading {\n text-shadow: 1px 1px 2px var(--pl-color-fg-default);\n line-height: 1.1;\n font-size: 3em;\n font-weight: ~~bold~~;\n font-family: var(--pl-hero-heading-font);\n text-wrap: pretty;\n max-width: 30ch;\n margin: 0;\n color: var(--pl-hero-color);\n}\n\n@media (max-width: 920px) {\n .hero__heading {\n font-size: 2.5em;\n }\n}\n\n.hero__sub-heading {\n font-size: 1.25em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n color: var(--pl-hero-color);\n max-width: 52ch;\n text-wrap: pretty;\n margin-top: 1em;\n margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n color: var(--pl-hero-color);\n}\n\n.hero__sub-heading a:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n font-weight: bold;\n}\n\n@media (max-width: 620px) {\n .hero__heading {\n font-size: 2.75em;\n }\n\n .hero__sub-heading {\n font-size: 1em;\n }\n}","import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n const imgElement = pictureElement.querySelector('img');\n return imgElement?.currentSrc \|\| '';\n};\n\n/\n Place your most important content in a prominent space, often at the top of your website.\n \n @slot start - Content to display at the start (top) of the hero.\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the hero inner content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.\n */\n@Component({\n tag: 'pennlibs-hero',\n styleUrl: 'pennlibs-hero.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Hero {\n @Element() hostElement: HTMLElement;\n @State() heroPictureElement: null \| HTMLPictureElement = null;\n @State() heroHeadingElement: null \| HTMLHeadingElement = null;\n @State() heroParagraphElement: null \| HTMLParagraphElement = null;\n @State() heroSrc: string = \"\";\n private lastSrc: string = \"\";\n private animationFrameId: number;\n\n componentWillLoad() {\n const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]') as HTMLPictureElement;\n if (heroPictureElement) {\n this.heroPictureElement = heroPictureElement;\n this.startWatchingCurrentSrc(heroPictureElement);\n }\n\n const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]') as HTMLHeadingElement;\n if (heroHeadingElement) {\n this.heroHeadingElement = heroHeadingElement;\n }\n\n const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]') as HTMLParagraphElement;\n if (heroParagraphElement) {\n this.heroParagraphElement = heroParagraphElement;\n }\n }\n\n private startWatchingCurrentSrc(pictureElement: HTMLPictureElement) {\n const checkCurrentSrc = () => {\n const currentSrc = getCurrentImageSource(pictureElement);\n if (currentSrc !== this.lastSrc) {\n this.lastSrc = currentSrc;\n this.heroSrc = currentSrc;\n }\n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n };\n \n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n }\n\n disconnectedCallback() {\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n }\n }\n\n render() {\n return (\n <div class=\"hero\" style={{ backgroundImage: `url(${this.heroSrc})` }}>\n <div class=\"hero__content\">\n <slot name=\"start\" />\n <div class=\"hero__heading-container\">\n {this.heroHeadingElement && (\n <div class=\"viewport-margins\">\n <h1 class=\"hero__heading\" innerHTML={this.heroHeadingElement.innerText} />\n {this.heroParagraphElement && <p class=\"hero__sub-heading\" innerHTML={this.heroParagraphElement.innerHTML} />}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n}"],"version":3}
1	+ {"file":"pennlibs-hero.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n --pl-hero-height: clamp(42vh, 32rem, 26rem);\n --pl-hero-heading-font: var(--pl-font-serif);\n --pl-hero-color: var(--pl-color-fg-on-emphasis);\n}\n\n, :before, :after {\n box-sizing: inherit;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.viewport-margins {\n width: 100%;\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/ Start of Selection /\n/ Hero section /\n.hero {\n position: relative;\n min-height: var(--pl-hero-height);\n height: 100%;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: 50% 33%;\n display: flex;\n}\n/ End of Selection /\n\n.hero::before {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n \n.hero::after {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n.hero__content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n z-index: 1;\n}\n\n.hero__heading-container {\n margin-top: auto;\n padding-top: var(--pl-space-3xl);\n padding-bottom: var(--pl-space-3xl);\n}\n\n.hero__heading {\n text-shadow: 1px 1px 2px var(--pl-color-fg-default);\n line-height: 1.1;\n font-size: 3em;\n font-weight: 400;\n font-family: var(--pl-hero-heading-font);\n text-wrap: pretty;\n max-width: 30ch;\n margin: 0;\n color: var(--pl-hero-color);\n}\n\n@media (max-width: 920px) {\n .hero__heading {\n font-size: 2.5em;\n }\n}\n\n.hero__sub-heading {\n font-size: 1.25em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n color: var(--pl-hero-color);\n max-width: 52ch;\n text-wrap: pretty;\n margin-top: 1em;\n margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n color: var(--pl-hero-color);\n}\n\n.hero__sub-heading a:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n font-weight: bold;\n}\n\n@media (max-width: 620px) {\n .hero__heading {\n font-size: 2.75em;\n }\n\n .hero__sub-heading {\n font-size: 1em;\n }\n}","import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n const imgElement = pictureElement.querySelector('img');\n return imgElement?.currentSrc \|\| '';\n};\n\n/\n Place your most important content in a prominent space, often at the top of your website.\n \n @slot start - Content to display at the start (top) of the hero.\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the hero inner content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.\n */\n@Component({\n tag: 'pennlibs-hero',\n styleUrl: 'pennlibs-hero.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Hero {\n @Element() hostElement: HTMLElement;\n @State() heroPictureElement: null \| HTMLPictureElement = null;\n @State() heroHeadingElement: null \| HTMLHeadingElement = null;\n @State() heroParagraphElement: null \| HTMLParagraphElement = null;\n @State() heroSrc: string = \"\";\n private lastSrc: string = \"\";\n private animationFrameId: number;\n\n componentWillLoad() {\n const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]') as HTMLPictureElement;\n if (heroPictureElement) {\n this.heroPictureElement = heroPictureElement;\n this.startWatchingCurrentSrc(heroPictureElement);\n }\n\n const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]') as HTMLHeadingElement;\n if (heroHeadingElement) {\n this.heroHeadingElement = heroHeadingElement;\n }\n\n const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]') as HTMLParagraphElement;\n if (heroParagraphElement) {\n this.heroParagraphElement = heroParagraphElement;\n }\n }\n\n private startWatchingCurrentSrc(pictureElement: HTMLPictureElement) {\n const checkCurrentSrc = () => {\n const currentSrc = getCurrentImageSource(pictureElement);\n if (currentSrc !== this.lastSrc) {\n this.lastSrc = currentSrc;\n this.heroSrc = currentSrc;\n }\n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n };\n \n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n }\n\n disconnectedCallback() {\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n }\n }\n\n render() {\n return (\n <div class=\"hero\" style={{ backgroundImage: `url(${this.heroSrc})` }}>\n <div class=\"hero__content\">\n <slot name=\"start\" />\n <div class=\"hero__heading-container\">\n {this.heroHeadingElement && (\n <div class=\"viewport-margins\">\n <h1 class=\"hero__heading\" innerHTML={this.heroHeadingElement.innerText} />\n {this.heroParagraphElement && <p class=\"hero__sub-heading\" innerHTML={this.heroParagraphElement.innerHTML} />}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n}"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-21T15:30:56",
+  "timestamp": "2026-03-13T17:51:10",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.1",
@@ -192,10 +192,49 @@
       "encapsulation": "shadow",
       "tag": "pennlibs-feedback",
       "readme": "# pennlibs-feedback\n\n\n",
-      "docs": "",
-      "docsTags": [],
+      "docs": "A feedback component that asks visitors \"Did you find what you need?\" and\nlinks to a feedback form. The answer is stored in sessionStorage for 5 minutes\nto avoid re-prompting during a browsing session.",
+      "docsTags": [
+        {
+          "name": "example",
+          "text": "<pennlibs-feedback></pennlibs-feedback>"
+        },
+        {
+          "name": "example",
+          "text": "<pennlibs-feedback hide-question></pennlibs-feedback>"
+        }
+      ],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "hideQuestion",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-question",
+          "reflectToAttr": false,
+          "docs": "When true, hides the yes/no question and only shows the \"share your feedback\" link.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
       "methods": [],
       "events": [
         {
@@ -209,7 +248,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted when a visitor answers the feedback question. Includes the question,\nanswer, current URL, and page heading/title for context.",
           "docsTags": []
         }
       ],