@penn-libraries/web 0.3.0-dev.4 → 0.3.0

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

@@ -23,14 +23,12 @@ export class Footer {
     }
     render() {
         const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
-        return (h("div", { key: '3c96aac7bf1fdcbdbc625c225ddc0e8898c53e61', class: "website-footer-wrapper" }, h("footer", { key: '99a5cc8d9314d5679939ff45b6c7b75c34b636f1', class: "website-footer", style: {
+        return (h("div", { key: '448d1da492c38d35d0fb016bcf573eb5b30db5d8', class: "website-footer-wrapper" }, h("footer", { key: '600f377998cbd19337cd554cfaa5ce27c16df38e', class: "website-footer", style: {
                 background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, h("div", { key: 'b9557f708fea1b72531115855900c5462c4b0c80', class: "viewport-margins" }, h("div", { key: '7fa44e2c7bccbb965ace27dad6e38a5672eac76b', class: "website-footer__content" }, h("div", { key: '21ffc5801b449db2f79284914b78fff453821d4c', class: "website-footer__links-container" }, h("section", { key: 'f011f1edc1bd2ed8f242f100867c7b631445e073' }, h("h2", { key: '663b91e98e2fdc21471f7575b4654eec2ddfb915', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '7b8f956aa7f1683b1d02dea3ffada72dbaf8b24d', class: "website-footer__links" }, h("li", { key: '31ab710eb506f88ede7cc54afbb682b4bf2db724' }, h("a", { key: '87b041e2041ded6785d958255a86240dea2b56fe', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'd238b7890fa996a3547af2a5df14f983c15e687b' }), "Philadelphia, PA 19104-6206")), h("li", { key: '179c7d6edd9afb43e9df885a90e3f4f05dd1c7b8' }, h("a", { key: 'a784bb6777842c961e219bd3eaa0b9efbd9d24fb', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '64c6ba65dc23d5f10e8d9318d914e59a31ae75a2' }, h("a", { key: '8e91e8c93aee24a72790096fdeb7e0cdce89caac', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '2027b919303e4c8e5d25873d78ac7dd61fcf377b' }, h("a", { key: '157e532c56aa6ede5773f21f4169a9af5f82e5e6', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '95255d9bbef031ec05f7bf0c964b6027026fd2be' }, h("h2", { key: '1f2f9c91903888e0bd374de4e3766b68db02bfc7', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: '32790f2d6e6096b0b05b2e6ef1d24f88a36fc047', class: "website-footer__links" }, h("li", { key: '6233fa7c740be6aef6937ccca64293cb18019c6e' }, h("a", { key: '172452c25b2926f486f5122ec6a43127316497e3', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '8d59fa988ddb0057bfa3fd5e50e4101309502774' }, h("a", { key: 'c9ffb0c2120f46e5a2753782c3c53405f30eb3cf', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: 'bd14021edb6ae03dc961d7f2992d78db7923e474' }, h("a", { key: 'c8c4204ffc9a54e258d1168ab02c3c01c6f26186', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '31e36c9b62bdadc961573ddff3bb79a7c5dbfeca' }, h("a", { key: 'dc59bd19fc27370eae2739b38cc3fa73656b0154', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, h("div", { key: 'f03133cf821365bc36c373680fb136b608e304a6', class: "viewport-margins" }, h("div", { key: '8610071ad39eea548d3738637b9a2848533be7b3', class: "website-footer__content" }, h("div", { key: '634ce838b8dbaac61db226f6c53a765b1475058c', class: "website-footer__links-container" }, h("section", { key: '70d93f0000bf2e323d2ca0250b7c357988c6603d' }, h("h2", { key: 'b54fd36b15d8c2e6059a6bd9bb7b5c0958d16b93', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'f9815d823c8132fe83da9400b02a2a5b15f0d4db', class: "website-footer__links" }, h("li", { key: 'ee6f365ce3c9f495c33f5f3005807ba1fe303cc9' }, h("a", { key: '9d1d0426d0408c3ff067935bc9aa3c246a60eea6', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '7ffbcaafc361ce3a9612b488270669f1fb5bd099' }), "Philadelphia, PA 19104-6206")), h("li", { key: '617d67bc03b2473f91d9dd58cdc912031ad4e127' }, h("a", { key: '310b0a64b3a8d0c455cc17df418e0f99b7cf35f9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: 'ce5b511a8fbfeff9c3c44baf2ef37bcbbbd604b3' }, h("a", { key: 'a2eb3b692e253aa5e8fc469586d96b2399d3f113', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '43d14efe1b6716af9f4b00d3ef5748f87241692b' }, h("a", { key: '975f0345fef09acf7356e75d080507088ac1f340', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '630c9c1668afef59168eb992d1b3428ff47b25ff' }, h("h2", { key: 'efd5ec17ef7ef2abca64fcbbfb92b7f2cc210ebb', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: '8905cc1021ce510a1c0cdc13dd35b588ba02c5c3', class: "website-footer__links" }, h("li", { key: '6237144b00557caab0771b40323de4d5e481d93d' }, h("a", { key: '6d4aaea45a78141411f1148ab789f279a9813861', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '7ad23d4cf8c74d586319e57af8e2f07423a62def' }, h("a", { key: 'c04a846979d8255b8f267da008bf3076008fc989', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '7d5a4b85547abeffdfa6091d3bbcec6ea6ced635' }, h("a", { key: '2e3b040c6887216cbc6d9f8110befec48d5885ab', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '50d77e20b8cd688c11930db60343d4420ec8271a' }, h("a", { key: '5a94b1e6642a98bb4fe0d8148e20fe842a51a048', 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))))))))
-        ], this.navigation && [
-            this.navigation.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: '92ba07834ec5907ab47c59925d5d09d3dc7960df', class: "website-footer__footer" }, h("div", { key: 'f649f0dde206c92a41c10cb871137ccb725f2394', class: "viewport-margins" }, h("ul", { key: '82244f9c342acdcb9dd9ff0ae651c4b4cb2939e4', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '44be5c6a8380af4482a97080df640c34b852a865' }, h("a", { key: '8eb4ffa492285f6a2f3f42df1b2b5a784f042332', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '658402f36047ba302a90521a57e414a995bc19f4' }, h("a", { key: 'a0f85214bea0883b03abd4a1afc8ef97a6eddf27', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '0f43503a3c031967429ef9021457bafa3ec9325b' }, h("a", { key: '21b9c566ef1b8800b41a21ba70e4444128653b9c', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '92b1311cebfe09923505d0c9db17f2cc79bc8b09' }, h("a", { key: 'ed7ca974f5cea0841bb3946efc39cc6e13e8748f', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'effb3c2ef3eb3b8611bf8bf6cba2db907bde3d5d' }, h("a", { key: '1a6f73099f9311e189987988317dda7390dda6a5', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '3b1f57c5073869e4a5f3f4fbd94b28bee437bc72' }, h("a", { key: '4e2ab4fd8a1fcf310a5b67a5a264b7dc5b2aed11', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+        ]))), h("div", { key: 'a04d676e63b6f32b3bd34956e2123e583eb9df89', class: "website-footer__footer" }, h("div", { key: '5c1c5971ec865234ee5a610dc053bf51d3424714', class: "viewport-margins" }, h("ul", { key: '9dd63d58bf9827af3bea1a61b1be4f51b9e615d3', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'f63fd000d7bc7ecc2b3ed384bd74688b5139b0a2' }, h("a", { key: '9073b5678578970edfbc28afa3ebd5acdbb4d733', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '9f212d803845fe3b9b1d7b22c77261946755d21c' }, h("a", { key: 'a86bf479465d4ed13e0951842bdacd4f40e5b856', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '9c11b16f0c2982bd3d56ddbd71aac91a4d9e63a5' }, h("a", { key: '26d0be64aff1d473c2adee9c2ce93ec81347a69b', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '0fcff20974b7ab18d2d3221e2d07b8181a34b028' }, h("a", { key: '2b1eb321365efd0ca8f23691517cf33cff8cd642', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: '9e6c169328723c215f2cd25ce7c20daf0159ff64' }, h("a", { key: 'defb0ceaea20794de2651479a20283e12160c5da', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '53852549d798d8bd1a0150f3c3fbd5e511cdbe24' }, h("a", { key: 'a5ef650e278cb61e25235d1526a7483e3840dae2', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
     }
     static get is() { return "pennlibs-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -45,33 +43,6 @@ export class Footer {
         };
     }
     static get assetsDirs() { return ["assets"]; }
-    static get properties() {
-        return {
-            "navigation": {
-                "type": "unknown",
-                "attribute": "navigation",
-                "mutable": false,
-                "complexType": {
-                    "original": "Array<{\n    heading: string;\n    links: Array<{\n      label: string;\n      href: string;\n    }>;\n  }>",
-                    "resolved": "{ heading: string; links: { label: string; href: string; }[]; }[]",
-                    "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The navigation sections."
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
     static get states() {
         return {
             "navigationByChildren": {}

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

@@ -1 +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, Prop, getAssetPath, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-footer',\n  styleUrl: 'pennlibs-footer.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Footer {\n  /**\n   * The navigation sections.\n   */\n  @Prop() navigation: Array<{\n    heading: string;\n    links: Array<{\n      label: string;\n      href: string;\n    }>;\n  }>;\n\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(--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                {this.navigation && [\n                  this.navigation.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,"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@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(--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"]}

package/dist/collection/components/pennlibs-header/pennlibs-header.css

@@ -13,7 +13,7 @@
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
-  padding: 0 1em;
+  padding: 0 var(--viewport-margins-gutter, 1em);
 }
 
 a {
@@ -62,7 +62,7 @@ a {
   margin-right: 1em;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__logo {
     max-width: 200px;
   }
@@ -83,7 +83,7 @@ a {
   color: var(--color-fg-service);
 }
 
-@media (min-width: 921px) {
+@media (min-width: 1001px) {
   .website-header__service-link {
     padding-left: 0.5em;
   }
@@ -118,7 +118,7 @@ a {
   padding: 1em 0;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__inner-container {
     flex-direction: column;
     align-items: flex-start;
@@ -126,7 +126,7 @@ a {
 }
 
 /* Navigation */
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__navigation {
     width: 100%;
   }
@@ -139,13 +139,13 @@ a {
   padding: 0;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__navigation-list {
     display: none;
   }
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__navigation-list--visible {
     display: block;
     margin-top: 1rem;
@@ -175,7 +175,7 @@ a {
   cursor: pointer;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .website-header__navigation-list a,
   .website-header__navigation-list button {
     padding: 0.75em 0;
@@ -187,7 +187,7 @@ a {
   padding: 0.5em 0;
 }
 
-@media (min-width: 921px) {
+@media (min-width: 1001px) {
   .website-header__navigation-list a,
   .website-header__navigation-list button {
     padding: 0.5em;
@@ -217,7 +217,7 @@ a {
   cursor: pointer;
 }
 
-@media (min-width: 921px) {
+@media (min-width: 1001px) {
   .website-header__navigation-button {
     display: none;
   }

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

@@ -1,10 +1,35 @@
 import { h } from "@stencil/core";
 import { LogoWhite } from "./logo-white";
 import { LogoBlue } from "./logo-blue";
+/**
+ * A header component for Penn Libraries websites that displays the Penn Libraries logo,
+ * service branding, and navigation. Supports both light and dark themes.
+ *
+ * @component
+ * @example
+ * <pennlibs-header
+ *   service-name="Find Books"
+ *   service-lede="Search our catalog and collections"
+ *   theme="light">
+ *   <a href="/search">Search</a>
+ *   <a href="/help">Help</a>
+ * </pennlibs-header>
+ *
+ * @slot end - Content to display at the end of the header (right side)
+ * @slot name-end - Content to display at the end of the service name (right side)
+ *
+ * @prop --max-width: The maximum width of the header.
+ */
 export class Header {
     constructor() {
         /**
-         * The service href that turns the service name into a link.
+         * The URL where the service name links to, typically the service homepage or main landing page.
+         * @default "/"
+         */
+        this.serviceHref = "/";
+        /**
+         * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.
+         * @default 'light'
          */
         this.theme = 'light';
         this.isMenuOpen = false;
@@ -37,7 +62,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: '865c3c13148c36b791d854b420fe34ac05207438', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: '372d85d6a5bdc55a80028adf971b99cf9bd39000', class: "website-header__inner-container" }, h("div", { key: '69b9151390e311f054aeee0fa99ba7f5d6e4f35f', class: "website-header__logo-name-container" }, h("a", { key: '8e5880531e043763b3c7279f3371bff49e1c51f8', 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: '37028e0b96a7e1f2fcd29e2c6a64be9697a9f657', href: "/", class: "website-header__service-link" }, h("span", { key: '808d5aea5f0a3c5cfcc6f889e2f9eefd23d11d1f', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: 'c099359cdc6d0c6344dfb28f34e736bcb12e1b02', class: "website-header__service-lede" }, this.serviceLede)))), h("slot", { key: '85ad871d23d585803233001a6dbaf66735f0785f', name: "center" }), this.navigation.length > 0 && (h("nav", { key: '6d601072d530fe9ace278e10dfbdd05ab65e9d44', class: "website-header__navigation" }, h("button", { key: 'a44c189575fdb6b893a72c66d77264b310277cae', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '6d755b835555e009d80e10aa8cc87882070f819c', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '4a4a5255c453a1a7145f599074308276d84bd2e5', name: "end" }))));
+        return (h("header", { key: 'b0d541f9a2e3d21620cbd918dc87ea4c80637edf', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: '183210681519602789b136aaa6390973c7e5eaf0', class: "website-header__inner-container" }, h("div", { key: '0649770c1890a3e8031cffb3a924b10de08a5118', class: "website-header__logo-name-container" }, h("a", { key: 'c5a262169b3b4dddc9b83a8fbcd31369fb722143', 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: '51e576934b1f0ac003c401bbde70e3de2b3372c7', href: "/", class: "website-header__service-link" }, h("span", { key: '5e2eac2e472aba1040a7267a0291f0b641d563b3', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '48f53ef2c2e120bb164c544da8cd35fbe5db1b41', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: 'cde06b01b63878fd7512e9d7199925ba554514e0', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'f2acf41de326c265720e1aeae9acc88b70e849c8', class: "website-header__navigation" }, h("button", { key: '30c61629bcef5ece260e919d94341f5831c6c588', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: 'f9111fd2cee8e86daabd1f2bc9a1aac38c5b0b76', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: 'f87fc86c587cada45c0e8a8ec87e14f304c753c7', name: "end" }))));
     }
     static get is() { return "pennlibs-header"; }
     static get encapsulation() { return "shadow"; }
@@ -64,10 +89,10 @@ export class Header {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The name of the service."
+                    "text": "The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms."
                 },
                 "getter": false,
                 "setter": false,
@@ -83,10 +108,10 @@ export class Header {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The opening brief sentence introducting the most important aspects of the service."
+                    "text": "A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits."
                 },
                 "getter": false,
                 "setter": false,
@@ -102,29 +127,36 @@ export class Header {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The service href that turns the service name into a link."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"/\""
+                        }],
+                    "text": "The URL where the service name links to, typically the service homepage or main landing page."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"/\""
             },
             "theme": {
                 "type": "string",
                 "attribute": "theme",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The service href that turns the service name into a link."
+                    "tags": [{
+                            "name": "default",
+                            "text": "'light'"
+                        }],
+                    "text": "The visual theme of the header. Light theme uses blue logo, dark theme uses white logo."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, State } from '@stencil/core';\n\nimport { LogoWhite } from \"./logo-white\"\nimport { LogoBlue } from \"./logo-blue\"\n\n@Component({\n  tag: 'pennlibs-header',\n  styleUrl: 'pennlibs-header.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Header {\n  /**\n   * The name of the service.\n   */\n  @Prop() serviceName: string;\n\n  /**\n   * The opening brief sentence introducting the most important aspects of the service.\n   */\n  @Prop() serviceLede: string;\n\n  /**\n   * The service href that turns the service name into a link.\n   */\n  @Prop() serviceHref: string;\n\n  /**\n   * The service href that turns the service name into a link.\n   */\n  @Prop() theme: string = 'light';\n\n  @State() isMenuOpen: boolean = false;\n  @State() navigation = [];\n\n  @Element() hostElement: HTMLElement;\n\n  componentWillLoad() {\n    if (this.navigation.length === 0) {\n      this.setNavigation();\n    }\n  }\n\n  handleToggleMenu() {\n    this.isMenuOpen = !this.isMenuOpen\n  }\n\n  setNavigation() {\n    this.navigation = Array.from(this.hostElement.children).reduce((acc, element) => {\n      if (element.hasAttribute('slot')) {\n        return acc;\n      }\n\n      switch (element.tagName) {\n        case 'A':\n        case 'FORM':\n          acc = acc.concat(element)\n        default:\n          break;\n      }\n\n      return acc;\n    }, []);\n  }\n\n  renderMenuIcon() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path fill=\"currentColor\" d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/></svg>\n    )\n  }\n\n  render() {\n    return (\n      <header class={`viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}`}>\n        <div class=\"website-header__inner-container\">\n          <div class=\"website-header__logo-name-container\">\n            <a href=\"https://www.library.upenn.edu/\" class=\"website-header_logo-link\" aria-label=\"Penn Libraries\">\n            {this.theme === 'dark' ? <LogoWhite /> : <LogoBlue />}\n            </a>\n            {this.serviceName && (\n              <a href=\"/\" class=\"website-header__service-link\">\n                <span class=\"website-header__service-name\">{this.serviceName}</span>\n                {this.serviceLede && <span class=\"website-header__service-lede\">{this.serviceLede}</span>}\n              </a>\n            )}\n          </div>\n\n          <slot name=\"center\" />\n\n          {this.navigation.length > 0 && (\n            <nav class=\"website-header__navigation\">\n              <button class=\"website-header__navigation-button\" aria-expanded={`${this.isMenuOpen}`} onClick={() => this.handleToggleMenu()}>\n              {this.renderMenuIcon()} Menu\n              </button>\n              {this.navigation && (\n                <ol class={`website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}`}>\n                  {this.navigation.map(element => <li innerHTML={element.outerHTML} />)}\n                </ol>\n              )}\n            </nav>\n          )}\n\n          <slot name=\"end\" />\n        </div>\n      </header>\n    );\n  }\n}"]}
+{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, State } from '@stencil/core';\n\nimport { LogoWhite } from \"./logo-white\"\nimport { LogoBlue } from \"./logo-blue\"\n\n/**\n * A header component for Penn Libraries websites that displays the Penn Libraries logo,\n * service branding, and navigation. Supports both light and dark themes.\n * \n * @component\n * @example\n * <pennlibs-header \n *   service-name=\"Find Books\" \n *   service-lede=\"Search our catalog and collections\"\n *   theme=\"light\">\n *   <a href=\"/search\">Search</a>\n *   <a href=\"/help\">Help</a>\n * </pennlibs-header>\n * \n * @slot end - Content to display at the end of the header (right side)\n * @slot name-end - Content to display at the end of the service name (right side)\n * \n * @prop --max-width: The maximum width of the header.\n */\n@Component({\n  tag: 'pennlibs-header',\n  styleUrl: 'pennlibs-header.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Header {\n  /**\n   * The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms.\n   */\n  @Prop() serviceName?: string;\n\n  /**\n   * A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits.\n   */\n  @Prop() serviceLede?: string;\n\n  /**\n   * The URL where the service name links to, typically the service homepage or main landing page.\n   * @default \"/\"\n   */\n  @Prop() serviceHref?: string = \"/\";\n\n  /**\n   * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.\n   * @default 'light'\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  @State() isMenuOpen: boolean = false;\n  @State() navigation = [];\n\n  @Element() hostElement: HTMLElement;\n\n  componentWillLoad() {\n    if (this.navigation.length === 0) {\n      this.setNavigation();\n    }\n  }\n\n  handleToggleMenu() {\n    this.isMenuOpen = !this.isMenuOpen\n  }\n\n  setNavigation() {\n    this.navigation = Array.from(this.hostElement.children).reduce((acc, element) => {\n      if (element.hasAttribute('slot')) {\n        return acc;\n      }\n\n      switch (element.tagName) {\n        case 'A':\n        case 'FORM':\n          acc = acc.concat(element)\n        default:\n          break;\n      }\n\n      return acc;\n    }, []);\n  }\n\n  renderMenuIcon() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path fill=\"currentColor\" d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/></svg>\n    )\n  }\n\n  render() {\n    return (\n      <header class={`viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}`}>\n        <div class=\"website-header__inner-container\">\n          <div class=\"website-header__logo-name-container\">\n            <a href=\"https://www.library.upenn.edu/\" class=\"website-header_logo-link\" aria-label=\"Penn Libraries\">\n            {this.theme === 'dark' ? <LogoWhite /> : <LogoBlue />}\n            </a>\n            {this.serviceName && (\n              <a href=\"/\" class=\"website-header__service-link\">\n                <span class=\"website-header__service-name\">{this.serviceName}</span>\n                {this.serviceLede && <span class=\"website-header__service-lede\">{this.serviceLede}</span>}\n              </a>\n            )}\n            <slot name=\"name-end\" />\n          </div>\n\n          {this.navigation.length > 0 && (\n            <nav class=\"website-header__navigation\">\n              <button class=\"website-header__navigation-button\" aria-expanded={`${this.isMenuOpen}`} onClick={() => this.handleToggleMenu()}>\n              {this.renderMenuIcon()} Menu\n              </button>\n              {this.navigation && (\n                <ol class={`website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}`}>\n                  {this.navigation.map(element => <li innerHTML={element.outerHTML} />)}\n                </ol>\n              )}\n            </nav>\n          )}\n\n          <slot name=\"end\" />\n        </div>\n      </header>\n    );\n  }\n}"]}

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

@@ -25,7 +25,7 @@
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
-  padding: 0 1em;
+  padding: 0 var(--viewport-margins-gutter, 1em);
 }
 
 /* Start of Selection */

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

@@ -3,6 +3,13 @@ const getCurrentImageSource = (pictureElement) => {
     const imgElement = pictureElement.querySelector('img');
     return (imgElement === null || imgElement === void 0 ? void 0 : imgElement.currentSrc) || '';
 };
+/**
+ * Place your most important content in a prominent space, often at the top of your website.
+ *
+ * @slot start - Content to display at the start (top) of the hero.
+ *
+ * @prop --max-width: The maximum width of the hero inner content.
+ */
 export class Hero {
     constructor() {
         this.heroPictureElement = null;
@@ -43,7 +50,7 @@ export class Hero {
         }
     }
     render() {
-        return (h("div", { key: '87c59d996e17ad0de49957658053e61868f91369', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '68e8a1bde0b506c044e0a7d3d63cc5617b52c025', class: "hero__content" }, h("slot", { key: '9a5a94c334922dc17e3d19002f2480d93a1a9612', name: "start" }), h("div", { key: 'abb6ea5015c9810829cde3b8c6a391b2c36298f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '81d5b79af5f5ac2e006ebc594d4d9b4ffa1dbb53', class: "viewport-margins" }, h("h1", { key: '1c6672b6228b8d3d2f2d0666644fc9cb199150a0', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '5ffbee19a06e6ecac28aa84549cc8d0bef112cd2', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (h("div", { key: '838ab1a6f2d633ae5eaa703d25c3de29cc13604e', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: 'bcb746c35ba38046d23034112ef9a86b636ec6d8', class: "hero__content" }, h("slot", { key: '2c02ba0fcdc0cff52d632a874c16dbb58a21aa5f', name: "start" }), h("div", { key: '45af0d061781e3b14c9a6132249c3a600c99ea74', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '54915e79b942440aa68e101ddc338877c2b71d50', class: "viewport-margins" }, h("h1", { key: 'd3b826151f98af69da8a8e0041de371868726a6a', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '0be2c40d72e7f0b271903c3f3f0deb0a6c416992', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get is() { return "pennlibs-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-hero.js","sourceRoot":"","sources":["../../../src/components/pennlibs-hero/pennlibs-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,qBAAqB,GAAG,CAAC,cAAkC,EAAU,EAAE;IAC3E,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;AACtC,CAAC,CAAC;AAQF,MAAM,OAAO,IAAI;IANjB;QAQW,uBAAkB,GAA8B,IAAI,CAAC;QACrD,uBAAkB,GAA8B,IAAI,CAAC;QACrD,yBAAoB,GAAgC,IAAI,CAAC;QACzD,YAAO,GAAW,EAAE,CAAC;QACtB,YAAO,GAAW,EAAE,CAAC;KAyD9B;IAtDC,iBAAiB;QACf,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAuB,CAAC;QAC/G,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;YAC7C,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAuB,CAAC;QACpG,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC/C,CAAC;QAED,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,qBAAqB,CAAyB,CAAC;QAC3G,IAAI,oBAAoB,EAAE,CAAC;YACzB,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,cAAkC;QAChE,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,UAAU,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;YACzD,IAAI,UAAU,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC1B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;QACjE,CAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;YAClE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,GAAG;gBACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,kBAAkB,IAAI,CAC1B,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,2DAAI,KAAK,EAAC,eAAe,EAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,SAAS,GAAI;oBACzE,IAAI,CAAC,oBAAoB,IAAI,0DAAG,KAAK,EAAC,mBAAmB,EAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAI,CACzG,CACP,CACG,CACF,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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@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,"file":"pennlibs-hero.js","sourceRoot":"","sources":["../../../src/components/pennlibs-hero/pennlibs-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,qBAAqB,GAAG,CAAC,cAAkC,EAAU,EAAE;IAC3E,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;AACtC,CAAC,CAAC;AAEF;;;;;;GAMG;AAOH,MAAM,OAAO,IAAI;IANjB;QAQW,uBAAkB,GAA8B,IAAI,CAAC;QACrD,uBAAkB,GAA8B,IAAI,CAAC;QACrD,yBAAoB,GAAgC,IAAI,CAAC;QACzD,YAAO,GAAW,EAAE,CAAC;QACtB,YAAO,GAAW,EAAE,CAAC;KAyD9B;IAtDC,iBAAiB;QACf,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAuB,CAAC;QAC/G,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;YAC7C,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAuB,CAAC;QACpG,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC/C,CAAC;QAED,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,qBAAqB,CAAyB,CAAC;QAC3G,IAAI,oBAAoB,EAAE,CAAC;YACzB,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,cAAkC;QAChE,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,UAAU,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;YACzD,IAAI,UAAU,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC1B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;QACjE,CAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;YAClE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,GAAG;gBACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,kBAAkB,IAAI,CAC1B,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,2DAAI,KAAK,EAAC,eAAe,EAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,SAAS,GAAI;oBACzE,IAAI,CAAC,oBAAoB,IAAI,0DAAG,KAAK,EAAC,mBAAmB,EAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAI,CACzG,CACP,CACG,CACF,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 --max-width: The maximum 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}"]}

package/dist/components/index.d.ts

@@ -3,8 +3,8 @@ export { Banner as PennlibsBanner } from '../types/components/pennlibs-banner/pe
 export { defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner';
 export { Chat as PennlibsChat } from '../types/components/pennlibs-chat/pennlibs-chat';
 export { defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat';
-export { Footer as PennlibsColors } from '../types/components/pennlibs-colors/pennlibs-colors';
-export { defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors';
+export { NoImage as PennlibsFallbackImg } from '../types/components/pennlibs-fallback-img/pennlibs-fallback-img';
+export { defineCustomElement as defineCustomElementPennlibsFallbackImg } from './pennlibs-fallback-img';
 export { PennlibsFeedback as PennlibsFeedback } from '../types/components/pennlibs-feedback/pennlibs-feedback';
 export { defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback';
 export { Footer as PennlibsFooter } from '../types/components/pennlibs-footer/pennlibs-footer';

package/dist/components/index.js

@@ -1,7 +1,7 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { PennlibsBanner, defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner.js';
 export { PennlibsChat, defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat.js';
-export { PennlibsColors, defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors.js';
+export { PennlibsFallbackImg, defineCustomElement as defineCustomElementPennlibsFallbackImg } from './pennlibs-fallback-img.js';
 export { PennlibsFeedback, defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback.js';
 export { PennlibsFooter, defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer.js';
 export { PennlibsHeader, defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header.js';

package/dist/components/pennlibs-banner.js

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

package/dist/components/pennlibs-banner.js.map

@@ -1 +1 @@
-{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,shCAAshC;;MCQniC,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;IACjB,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,YAAY,CAAC,0BAA0B,CAAC;AAE/D,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,gBACV,yBAAyB,EAAA,EAEpC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,sBAAsB,EAAoB,EAAA,iBAAA,CAAA,EACxE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,gCAAgC,EAAC,KAAK,EAAC,+BAA+B,EAAA,EAC5E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAG,CAAA,mBACrF,CACD,EACL,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,qCAAqC,EAAA,EAAA,UAAA,CAAa,CAAK,EACnE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,2GAA2G,EAAA,EAAA,SAAA,CAAY,CAAK,EACxI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,mCAAmC,EAAA,EAAA,QAAA,CAAW,CAAK,EAC/D,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,oCAAoC,EAAA,EAAA,SAAA,CAAY,CAAK,EACjE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mCAAmC,EAAA,EAAA,UAAA,CAAa,CAAK,CAC9D,CACD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-banner/pennlibs-banner.css?tag=pennlibs-banner&encapsulation=shadow","src/components/pennlibs-banner/pennlibs-banner.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n.viewport-margins {\n  max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */\n  margin: 0 auto;\n  padding: 0 0.75em;\n}\n\n.skip-to-content-link {\n  position: absolute;\n  transform: translateY(-300%);\n  background: var(--color-bg-default);\n  left: 0.5em;\n  padding: 0.5em 1em;\n  margin-top: 0.5em;\n  position: absolute;\n}\n\n.skip-to-content-link:focus {\n  transform: translateY(0%);\n  color: var(--color-fg-default);\n}\n\n.universal-nav {\n  background: var(--color-penn-blue);\n}\n\n.universal-nav ul {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  scrollbar-color: var(--color-penn-red);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.universal-nav li {\n  display: inline-block;\n}\n\n.universal-nav a {\n  display: inline-block;\n  text-transform: uppercase;\n  font-size: 0.75em;\n  letter-spacing: 0.075em;\n  font-weight: 600;\n  color: var(--color-fg-subtle-on-emphasis);\n  padding: 0.5em;\n  text-decoration: none;\n}\n\n.universal-nav a:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: .15em;\n}\n\n.universal-nav__shield-image {\n  vertical-align: sub;\n  height: 1em;\n  padding-right: 0.5em;\n  height: auto;\n}\n","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-banner',\n  styleUrl: 'pennlibs-banner.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Banner {\n  render() {\n    const shieldImageSrc = getAssetPath('./assets/penn-shield.png');\n\n    return (\n      <nav\n        class=\"universal-nav\"\n        aria-label=\"Penn Libraries Websites\"\n      >\n        <a href=\"#main-content\" class=\"skip-to-content-link\">Skip to content</a>\n        <div class=\"viewport-margins\">\n          <ul>\n            <li>\n              <a href=\"https://www.library.upenn.edu/\" class=\"universal-nav__penn-libraries\">\n                <img src={shieldImageSrc} class=\"universal-nav__shield-image\" width=\"16\" height=\"16\" />Penn Libraries\n              </a>\n            </li>\n            <li><a href=\"https://franklin.library.upenn.edu/\">Franklin</a></li>\n            <li><a href=\"https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview\">Account</a></li>\n            <li><a href=\"https://guides.library.upenn.edu/\">Guides</a></li>\n            <li><a href=\"https://colenda.library.upenn.edu/\">Colenda</a></li>\n            <li><a href=\"https://faq.library.upenn.edu/ask\">Ask chat</a></li>\n          </ul>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mjCAAmjC;;MCQhkC,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;IACjB,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,YAAY,CAAC,0BAA0B,CAAC;AAE/D,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,gBACV,yBAAyB,EAAA,EAEpC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,sBAAsB,EAAoB,EAAA,iBAAA,CAAA,EACxE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,gCAAgC,EAAC,KAAK,EAAC,+BAA+B,EAAA,EAC5E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAG,CAAA,mBACrF,CACD,EACL,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,qCAAqC,EAAA,EAAA,UAAA,CAAa,CAAK,EACnE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,2GAA2G,EAAA,EAAA,SAAA,CAAY,CAAK,EACxI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,mCAAmC,EAAA,EAAA,QAAA,CAAW,CAAK,EAC/D,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,oCAAoC,EAAA,EAAA,SAAA,CAAY,CAAK,EACjE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mCAAmC,EAAA,EAAA,UAAA,CAAa,CAAK,CAC9D,CACD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-banner/pennlibs-banner.css?tag=pennlibs-banner&encapsulation=shadow","src/components/pennlibs-banner/pennlibs-banner.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n.viewport-margins {\n  max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */\n  margin: 0 auto;\n  padding: 0 var(--viewport-margins-gutter, 1em);\n}\n\n.skip-to-content-link {\n  position: absolute;\n  transform: translateY(-300%);\n  background: var(--color-bg-default);\n  left: 0.5em;\n  padding: 0.5em 1em;\n  margin-top: 0.5em;\n  position: absolute;\n}\n\n.skip-to-content-link:focus {\n  transform: translateY(0%);\n  color: var(--color-fg-default);\n}\n\n.universal-nav {\n  background: var(--color-penn-blue);\n}\n\n.universal-nav ul {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  scrollbar-color: var(--color-penn-red);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.universal-nav li {\n  display: inline-block;\n}\n\n.universal-nav a {\n  display: inline-block;\n  text-transform: uppercase;\n  font-size: 0.75em;\n  letter-spacing: 0.075em;\n  font-weight: 600;\n  color: var(--color-fg-subtle-on-emphasis);\n  padding: 0.5em;\n  text-decoration: none;\n}\n\n.universal-nav a:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: .15em;\n}\n\n.universal-nav__shield-image {\n  vertical-align: sub;\n  height: 1em;\n  padding-right: 0.5em;\n  height: auto;\n}\n","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-banner',\n  styleUrl: 'pennlibs-banner.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Banner {\n  render() {\n    const shieldImageSrc = getAssetPath('./assets/penn-shield.png');\n\n    return (\n      <nav\n        class=\"universal-nav\"\n        aria-label=\"Penn Libraries Websites\"\n      >\n        <a href=\"#main-content\" class=\"skip-to-content-link\">Skip to content</a>\n        <div class=\"viewport-margins\">\n          <ul>\n            <li>\n              <a href=\"https://www.library.upenn.edu/\" class=\"universal-nav__penn-libraries\">\n                <img src={shieldImageSrc} class=\"universal-nav__shield-image\" width=\"16\" height=\"16\" />Penn Libraries\n              </a>\n            </li>\n            <li><a href=\"https://franklin.library.upenn.edu/\">Franklin</a></li>\n            <li><a href=\"https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview\">Account</a></li>\n            <li><a href=\"https://guides.library.upenn.edu/\">Guides</a></li>\n            <li><a href=\"https://colenda.library.upenn.edu/\">Colenda</a></li>\n            <li><a href=\"https://faq.library.upenn.edu/ask\">Ask chat</a></li>\n          </ul>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{pennlibs-colors.d.ts → pennlibs-fallback-img.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PennlibsColors extends Components.PennlibsColors, HTMLElement {}
-export const PennlibsColors: {
-    prototype: PennlibsColors;
-    new (): PennlibsColors;
+interface PennlibsFallbackImg extends Components.PennlibsFallbackImg, HTMLElement {}
+export const PennlibsFallbackImg: {
+    prototype: PennlibsFallbackImg;
+    new (): PennlibsFallbackImg;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/pennlibs-fallback-img.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
+
+const pennlibsFallbackImgCss = ":host{font-family:var(--font-family);font-size:var(--font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
+
+const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const shieldImg = getAssetPath('./assets/simplified-shield.webp');
+        return (h("img", { key: '042513b9ac53d6d78dd2af6a58b8ad18cf82ec0f', src: shieldImg, alt: "", class: "no-image__img" }));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return pennlibsFallbackImgCss; }
+}, [1, "pennlibs-fallback-img"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-fallback-img"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-fallback-img":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NoImage);
+            }
+            break;
+    } });
+}
+
+const PennlibsFallbackImg = NoImage;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsFallbackImg, defineCustomElement };
+//# sourceMappingURL=pennlibs-fallback-img.js.map
+
+//# sourceMappingURL=pennlibs-fallback-img.js.map

package/dist/components/pennlibs-fallback-img.js.map

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