@penn-libraries/web 0.3.0-dev.2 → 0.3.0-dev.3

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

@@ -0,0 +1,132 @@
+:host {
+  --hero-height: clamp(62vh, 32rem, 32rem);
+  --hero-heading-font: var(--font-serif);
+  --max-width: 1080px;
+  --color-typo: var(--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(--max-width);
+  margin: 0 auto;
+  padding: 0 1em;
+}
+
+/* Start of Selection */
+/* Hero section */
+.hero {
+  position: relative;
+  min-height: var(--hero-height);
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 33%;
+  display: flex;
+}
+/* End of Selection */
+
+.hero::before {
+  content: "";
+  display: flex;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  position: absolute;
+  background: linear-gradient(365deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 30%, 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.8) 20%, rgba(1, 31, 91, 0.2) 50%, rgba(1, 31, 91, 0.05) 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-bottom: 3em;
+  padding-bottom: 3em;
+}
+
+.hero__heading {
+  text-shadow: 1px 1px 2px var(--color-fg-default);
+  line-height: 1.1;
+  font-size: 2.75em;
+  font-weight: bold;
+  font-family: var(--hero-heading-font);
+  text-wrap: pretty;
+  max-width: 30ch;
+  margin: 0;
+  color: var(--color-typo);
+}
+
+@media (max-width: 920px) {
+  .hero__heading {
+    font-size: 2.5em;
+  }
+}
+
+.hero__sub-heading {
+  font-size: 1.15em;
+  font-family: var(--font-family);
+  font-weight: 500;
+  color: var(--color-typo);
+  max-width: 52ch;
+  text-wrap: pretty;
+  margin-top: 1em;
+  margin-bottom: 0;
+}
+
+.hero__sub-heading a {
+  text-decoration: underline;
+  text-underline-offset: var(--link-text-underline-offset);
+  text-decoration-thickness: var(--link-text-decoration-thickness);
+  color: var(--color-typo);
+}
+
+.hero__sub-heading a:hover {
+  text-decoration-thickness: var(--link-hover-text-decoration-thickness);
+}
+
+.hero__sub-heading strong {
+  font-weight: bold;
+}
+
+@media (max-width: 620px) {
+  .hero__heading {
+    font-size: 2em;
+  }
+
+  .hero__sub-heading {
+    font-size: 1em;
+  }
+}

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

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+const getCurrentImageSource = (pictureElement) => {
+    const imgElement = pictureElement.querySelector('img');
+    return (imgElement === null || imgElement === void 0 ? void 0 : imgElement.currentSrc) || '';
+};
+export class Hero {
+    constructor() {
+        this.heroPictureElement = null;
+        this.heroHeadingElement = null;
+        this.heroParagraphElement = null;
+        this.heroSrc = "";
+        this.lastSrc = "";
+    }
+    componentWillLoad() {
+        const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]');
+        if (heroPictureElement) {
+            this.heroPictureElement = heroPictureElement;
+            this.startWatchingCurrentSrc(heroPictureElement);
+        }
+        const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]');
+        if (heroHeadingElement) {
+            this.heroHeadingElement = heroHeadingElement;
+        }
+        const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]');
+        if (heroParagraphElement) {
+            this.heroParagraphElement = heroParagraphElement;
+        }
+    }
+    startWatchingCurrentSrc(pictureElement) {
+        const checkCurrentSrc = () => {
+            const currentSrc = getCurrentImageSource(pictureElement);
+            if (currentSrc !== this.lastSrc) {
+                this.lastSrc = currentSrc;
+                this.heroSrc = currentSrc;
+            }
+            this.animationFrameId = requestAnimationFrame(checkCurrentSrc);
+        };
+        this.animationFrameId = requestAnimationFrame(checkCurrentSrc);
+    }
+    disconnectedCallback() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    render() {
+        return (h("div", { key: 'a9f470be574a52eade05a10e04a12d34e60bd984', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '1d724b488bc11d0b11a01a03383465ba2b757ab2', class: "hero__content" }, h("slot", { key: 'e20ba8d4666efac20daa222f3ce79678a68c9bb7', name: "start" }), h("div", { key: '7da9a596442428179a62e269a58de00b0c19dde1', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'a06f22f686812710ec48088bf9526c9adabecca4', class: "viewport-margins" }, h("h1", { key: '3347afff89dc914dee6b7230a95f9d837df18f09', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '1342909f8f7b8413210e5a3fa16e615aa656980e', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+    }
+    static get is() { return "pennlibs-hero"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pennlibs-hero.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pennlibs-hero.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get states() {
+        return {
+            "heroPictureElement": {},
+            "heroHeadingElement": {},
+            "heroParagraphElement": {},
+            "heroSrc": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=pennlibs-hero.js.map

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

@@ -0,0 +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}"]}

package/dist/components/index.d.ts

@@ -11,6 +11,8 @@ export { Footer as PennlibsFooter } from '../types/components/pennlibs-footer/pe
 export { defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer';
 export { Header as PennlibsHeader } from '../types/components/pennlibs-header/pennlibs-header';
 export { defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header';
+export { Hero as PennlibsHero } from '../types/components/pennlibs-hero/pennlibs-hero';
+export { defineCustomElement as defineCustomElementPennlibsHero } from './pennlibs-hero';
 
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"

package/dist/components/index.js

@@ -5,5 +5,7 @@ export { PennlibsColors, defineCustomElement as defineCustomElementPennlibsColor
 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';
+export { PennlibsHero, defineCustomElement as defineCustomElementPennlibsHero } from './pennlibs-hero.js';
+//# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pennlibs-banner.js

@@ -1,7 +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 PennlibsBannerStyle0 = pennlibsBannerCss;
 
 const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement {
     constructor() {
@@ -14,7 +13,7 @@ const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement
         return (h("nav", { key: '5d8f303bc3db4445a91add6e57b6c20df8d0eb1a', class: "universal-nav", "aria-label": "Penn Libraries Websites" }, h("a", { key: 'd4617491f77f3a5a64c4434a5281da140ed32329', href: "#main-content", class: "skip-to-content-link" }, "Skip to content"), h("div", { key: '3858f6cea1a85336126908b0a3b0084735ac7deb', class: "viewport-margins" }, h("ul", { key: '18c4ae556af007616953db377b778186ff9cb31b' }, h("li", { key: '375aaa6be82566185cbb484ff082ed514861f1e2' }, h("a", { key: '4b8f30ed7eab1ae71de3097a4ece4887468558a7', href: "https://www.library.upenn.edu/", class: "universal-nav__penn-libraries" }, h("img", { key: '77c00c1b66d7c0775d4ab830f4bcdac94c21cf72', src: shieldImageSrc, class: "universal-nav__shield-image", width: "16", height: "16" }), "Penn Libraries")), h("li", { key: 'd0055db7eff99adc0fb46f0c3c62c8710ffad217' }, h("a", { key: '1f3245f1a96ae4f5ba037f7bbbf9278d79a8bc01', href: "https://franklin.library.upenn.edu/" }, "Franklin")), h("li", { key: '605908137ec7c38143acd911f9cf67ee842f3cbe' }, h("a", { key: 'c97cf1d1b1c8b3964088b2f4f6231b730e784f5c', href: "https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview" }, "Account")), h("li", { key: 'cace330f410469ba715646858dde02323a1b6da8' }, h("a", { key: 'dc7adbbf75d443055a079d17acbad0ae71ea7bf5', href: "https://guides.library.upenn.edu/" }, "Guides")), h("li", { key: 'daa02dc5b510e4dcc8190c9e954df30c1aeecb8b' }, h("a", { key: 'be4fdefc5fa281365551eada13dc18809e7e5872', href: "https://colenda.library.upenn.edu/" }, "Colenda")), h("li", { key: '8ee4491bb2f9c80cd26c984bf1bf2f0a2b0b2b29' }, h("a", { key: 'e4be73893a0a174634edeaa461f0e394c16057f5', href: "https://faq.library.upenn.edu/ask" }, "Ask chat"))))));
     }
     static get assetsDirs() { return ["assets"]; }
-    static get style() { return PennlibsBannerStyle0; }
+    static get style() { return pennlibsBannerCss; }
 }, [1, "pennlibs-banner"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -34,5 +33,6 @@ const PennlibsBanner = Banner;
 const defineCustomElement = defineCustomElement$1;
 
 export { PennlibsBanner, defineCustomElement };
+//# sourceMappingURL=pennlibs-banner.js.map
 
 //# sourceMappingURL=pennlibs-banner.js.map

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

@@ -1 +1 @@
-{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,shCAAshC,CAAC;AACjjC,6BAAe,iBAAiB;;MCOnB,MAAM;;;;;;IACjB,MAAM;QACJ,MAAM,cAAc,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAAC;QAEhE,QACE,4DACE,KAAK,EAAC,eAAe,gBACV,yBAAyB,IAEpC,0DAAG,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,sBAAsB,sBAAoB,EACxE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DACE,6DACE,0DAAG,IAAI,EAAC,gCAAgC,EAAC,KAAK,EAAC,+BAA+B,IAC5E,4DAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,mBACrF,CACD,EACL,6DAAI,0DAAG,IAAI,EAAC,qCAAqC,eAAa,CAAK,EACnE,6DAAI,0DAAG,IAAI,EAAC,2GAA2G,cAAY,CAAK,EACxI,6DAAI,0DAAG,IAAI,EAAC,mCAAmC,aAAW,CAAK,EAC/D,6DAAI,0DAAG,IAAI,EAAC,oCAAoC,cAAY,CAAK,EACjE,6DAAI,0DAAG,IAAI,EAAC,mCAAmC,eAAa,CAAK,CAC9D,CACD,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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,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}

package/dist/components/pennlibs-chat.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const pennlibsChatCss = ":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: normal;\n}\n\na {\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, #faa755, #fcca99);\n  border-radius: 1em;\n  position: fixed;\n  bottom: 0.75em;\n  right: 0.75em;\n  box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n  color: var(--color-penn-blue);\n  text-decoration: none;\n  font-weight: 500;\n  padding: 0.15em;\n  font-size: 1em;\n\n  @media (min-width: 820px) {\n    bottom: 1.5em;\n    right: 1.5em;\n    width: auto;\n    padding: 0.15em 0.75em;\n    padding-left: 0.5em;\n  }\n}\n\na:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}";
-const PennlibsChatStyle0 = pennlibsChatCss;
 
 const Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
     constructor() {
@@ -17,7 +16,7 @@ const Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
     render() {
         return (h("a", { key: '7e987c36da941c639917c16b2aa273262c1cabbb', href: this.href, target: "_blank", "aria-label": "Chat", id: "pennlibs-chat" }, h("svg", { key: '74dedb9dce8e714dc58df0f88149c157ae8f3ee0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 82 82" }, h("path", { key: '0bbdb855437c5c35ef3067e328c72325c0e40f6e', fill: "#fff", d: "M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z" }), h("path", { key: '23832dead6b6c2efe3353fef8c0367c50f7bffea', fill: "#011f5b", d: "M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z" })), h("span", { key: '5fe7d4714917699688a27cfac156e3cc88545d4c' }, "Chat")));
     }
-    static get style() { return PennlibsChatStyle0; }
+    static get style() { return pennlibsChatCss; }
 }, [1, "pennlibs-chat", {
         "href": [32]
     }]);
@@ -39,5 +38,6 @@ const PennlibsChat = Chat;
 const defineCustomElement = defineCustomElement$1;
 
 export { PennlibsChat, defineCustomElement };
+//# sourceMappingURL=pennlibs-chat.js.map
 
 //# sourceMappingURL=pennlibs-chat.js.map

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

@@ -1 +1 @@
-{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8lCAA8lC,CAAC;AACvnC,2BAAe,eAAe;;MCMjB,IAAI;;;;;QACf,gBAAW,GAAG,4GAA4G,CAAC;oBAC3G,EAAE;;IAElB,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;KACnE;IAED,MAAM;QACJ,QACE,0DACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,gBACJ,MAAM,EACjB,EAAE,EAAC,eAAe,IAElB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8OAA8O,GAAE,EAAA,6DAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,qfAAqf,GAAE,CAAM,EACp1B,sEAAiB,CACf,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pennlibs-chat/pennlibs-chat.css?tag=pennlibs-chat&encapsulation=shadow","src/components/pennlibs-chat/pennlibs-chat.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: normal;\n}\n\na {\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, #faa755, #fcca99);\n  border-radius: 1em;\n  position: fixed;\n  bottom: 0.75em;\n  right: 0.75em;\n  box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n  color: var(--color-penn-blue);\n  text-decoration: none;\n  font-weight: 500;\n  padding: 0.15em;\n  font-size: 1em;\n\n  @media (min-width: 820px) {\n    bottom: 1.5em;\n    right: 1.5em;\n    width: auto;\n    padding: 0.15em 0.75em;\n    padding-left: 0.5em;\n  }\n}\n\na:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-chat',\n  styleUrl: 'pennlibs-chat.css',\n  shadow: true\n})\nexport class Chat {\n  libchat_url = \"https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857\";\n  @State() href = \"\";\n\n  connectedCallback() {\n    this.href = this.libchat_url + '?referer=' + window.location.href;\n  }\n\n  render() {\n    return (\n      <a\n          href={this.href}\n          target=\"_blank\"\n          aria-label=\"Chat\"\n          id=\"pennlibs-chat\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 82 82\"><path fill=\"#fff\" d=\"M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z\"/><path fill=\"#011f5b\" d=\"M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z\"/></svg>\n          <span>Chat</span>\n        </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8lCAA8lC;;MCOzmC,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;AALjB,IAAA,WAAA,GAAA;;;;AAME,QAAA,IAAW,CAAA,WAAA,GAAG,4GAA4G;AACjH,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;AAmBnB;IAjBC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;;IAGnE,MAAM,GAAA;QACJ,QACE,CACI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,EACJ,YAAA,EAAA,MAAM,EACjB,EAAE,EAAC,eAAe,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8OAA8O,EAAE,CAAA,EAAA,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,qfAAqf,GAAE,CAAM,EACp1B,CAAiB,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAA,CAAA,CACf;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-chat/pennlibs-chat.css?tag=pennlibs-chat&encapsulation=shadow","src/components/pennlibs-chat/pennlibs-chat.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: normal;\n}\n\na {\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, #faa755, #fcca99);\n  border-radius: 1em;\n  position: fixed;\n  bottom: 0.75em;\n  right: 0.75em;\n  box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n  color: var(--color-penn-blue);\n  text-decoration: none;\n  font-weight: 500;\n  padding: 0.15em;\n  font-size: 1em;\n\n  @media (min-width: 820px) {\n    bottom: 1.5em;\n    right: 1.5em;\n    width: auto;\n    padding: 0.15em 0.75em;\n    padding-left: 0.5em;\n  }\n}\n\na:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-chat',\n  styleUrl: 'pennlibs-chat.css',\n  shadow: true\n})\nexport class Chat {\n  libchat_url = \"https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857\";\n  @State() href = \"\";\n\n  connectedCallback() {\n    this.href = this.libchat_url + '?referer=' + window.location.href;\n  }\n\n  render() {\n    return (\n      <a\n          href={this.href}\n          target=\"_blank\"\n          aria-label=\"Chat\"\n          id=\"pennlibs-chat\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 82 82\"><path fill=\"#fff\" d=\"M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z\"/><path fill=\"#011f5b\" d=\"M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z\"/></svg>\n          <span>Chat</span>\n        </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pennlibs-colors.js

@@ -1,19 +1,17 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const pennlibsColorsCss = ":host{font-family:var(--font-family);font-size:var(--font-size);--max-width:1080px}*{box-sizing:border-box}.viewport-margins{max-width:var(--max-width);margin:0 auto;padding:0 1rem}.colors-container{display:grid;grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr));gap:2rem;margin-bottom:2rem}.colors-container code{display:block;width:100%;padding:3em 1.5em}.colors-container code+code{margin-top:1em}.colors-container code span{font-size:0.875em;display:inline-block;background:var(--color-bg-default);padding:0.25em 0.5em}.colors-container code{display:flex;justify-content:space-between}h2{font-size:1.25em;font-weight:600;margin-bottom:0.25em}";
-const PennlibsColorsStyle0 = pennlibsColorsCss;
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.navigation = undefined;
     }
     render() {
         return (h("div", { key: '9f542188f271269c4fc80ba573a0c81d1b922ce5', class: "viewport-margins" }, h("div", { key: '5510d2b2929024295b79dcf08f3dfb513d32f1e1', class: "colors-container" }, h("section", { key: '267aeba4265212039ead9d685ed5f0365c1d9ea9' }, h("h2", { key: '96b71a5d957e6d073fda11fe0776f1aa28ec6242' }, "Penn Brand"), h("code", { key: 'eb7ee55fd2d9d7a9b92e49047728bd73b4a6325d', style: { background: "var(--color-penn-red)" } }, h("span", { key: 'eb0cba284064bca572d3320ac1bc0ab3c084782c' }, "var(--color-penn-red)"), h("span", { key: '0984fbbf1285c65699782e24de71705700d515bb' }, "#990000")), h("code", { key: '3be80e5ac704e3f0159d62b59ee925203350271c', style: { background: "var(--color-penn-blue)" } }, h("span", { key: 'd065b15d92de05cfd87689cc741e3de451bae162' }, "var(--color-penn-blue)"), h("span", { key: '24d997f1a3300f93cb24f80727d20835e54f6854' }, "#011F5B"))), h("section", { key: 'f61959632c280040021b50b90992ce6ff7a0ddba' }, h("h2", { key: '286438030304371a4935577645a67fb88fbea00f' }, "Grays"), h("code", { key: '2fec1c2f0d68c95f13a94df7638c20fde38e8ea5', style: { background: "var(--color-gray-dark)" } }, h("span", { key: '8c6120e6f425fdd93b46ab94bea7e62053a90cc6' }, "var(--color-gray-dark)"), h("span", { key: 'b3a9e0c3c197492f08685c7c02175a26ae4f7670' }, "#2D3545")), h("code", { key: '977312372e2182ff3e8b794427df3f70e4917c42', style: { background: "var(--color-gray)" } }, h("span", { key: 'bd45ec6acf84c622def674840f2802969073a1d9' }, "var(--color-gray)"), h("span", { key: '7c1f5c3c9172af250d08b669932885c4fae90350' }, "#595F6A")), h("code", { key: 'b87e7c03ca66c7b737066a56f40ec8342d4b61c3', style: { background: "var(--color-gray-light)" } }, h("span", { key: '87b6d2a9926364f25640716e300f8e0b733a2f13' }, "var(--color-gray-light)"), h("span", { key: '50cc222746d85afcd9a0ec95868d131821922ecf' }, "#F5F5F6"))), h("section", { key: '1c98f2bcd5f933fa0e4fab4a5d642006307a1591' }, h("h2", { key: '28895da4151817bb35380f5a753a92717bcfd049' }, "Blue"), h("code", { key: 'ae058e22494317a20952700cee2ac11ffd0cc930', style: { background: "var(--color-blue)" } }, h("span", { key: 'bbea4e1a76d7c6bb06c819da39bd555db7fa270c' }, "var(--color-blue)"), h("span", { key: '22a092922cf487751d1f6e4dbc686350dd332b0f' }, "#0E5696")), h("code", { key: 'a2ef61f288c3642e380f3f24d1fbd28428b46b5f', style: { background: "var(--color-blue-light)" } }, h("span", { key: '3ecf70ab57d4a72a293ce7bf67a8c310867c2ea5' }, "var(--color-blue-light)"), h("span", { key: '35f3cb70b4582fad09bc31ce7dc7a0d9e0bc61ea' }, "#D4E4F2"))), h("section", { key: '1a9e813bd05855c8f66d84e361036bf8fcaa5b13' }, h("h2", { key: 'd27fa31c99504099007aba3bfe3f3a0ffd62d599' }, "Green"), h("code", { key: 'ce36bd67afa0a8f485bc8e3ada85cc15acd81021', style: { background: "var(--color-green)" } }, h("span", { key: '63cb3575d25bc33dd99804a7a5e9c9385bcce575' }, "var(--color-green)"), h("span", { key: 'bf3c8b8458d6737f08d731c0e7c15d57a28e54c4' }, "#267434")), h("code", { key: 'e05b12768fe80c34e43f03e7ba6c156939992560', style: { background: "var(--color-green-light)" } }, h("span", { key: '2915e9c6db7fb99fc175cd9a53d77902cb79e4ea' }, "var(--color-green-light)"), h("span", { key: '7d12f9900fdbcd886bea1ba230d60396ae40ebc7' }, "#F1F7E1"))), h("section", { key: '6f93947d46430e52cfcad2e94d0a17112c93e3c3' }, h("h2", { key: '44f40d2e1565583a75bc4a1bfae69235dfa00ddc' }, "Orange"), h("code", { key: '4d8a84d9c38d5579b91793d601c091508acf95a1', style: { background: "var(--color-orange)" } }, h("span", { key: '97be89d1f5d6d5538ac1b8d14b8dbb181749f952' }, "var(--color-orange)"), h("span", { key: '49cdf22c413e741fd95df18e5edc0230de4f6751' }, "#BD4718")), h("code", { key: 'b5acfbbc33513842a816272c58e27b300df66962', style: { background: "var(--color-orange-light)" } }, h("span", { key: '01963c472a4730a616a38642ee9758514b557128' }, "var(--color-orange-light)"), h("span", { key: '997937894214fd05808298d2911b2779c0021cb1' }, "#FEEDDD"))), h("section", { key: '90a086ee4a3a79430497399ef053904a1511a018' }, h("h2", { key: '641c77ec7d3613b1cba2aedaee1d792c9c2a0c6a' }, "Purple"), h("code", { key: '4a25606bdd37055d42511264c537b6761e08ec79', style: { background: "var(--color-purple)" } }, h("span", { key: 'd0dd674c8624f1a2a2d8edaf45bebf2f010874bd' }, "var(--color-purple)"), h("span", { key: '301e06171b3ef5efe41e2b45904e1c74abe254f7' }, "#80317F")), h("code", { key: 'ee7be83b1d86e9c2694f908574e31298cf407280', style: { background: "var(--color-purple-light)" } }, h("span", { key: 'ff64954fb723c749ddf9662336e73dbba566338c' }, "var(--color-purple-light)"), h("span", { key: 'fc00ed6ad6750212a2d07122aa1d6bce95cfbaa2' }, "#F2DFED"))))));
     }
-    static get style() { return PennlibsColorsStyle0; }
+    static get style() { return pennlibsColorsCss; }
 }, [1, "pennlibs-colors", {
         "navigation": [16]
     }]);
@@ -35,5 +33,6 @@ const PennlibsColors = Footer;
 const defineCustomElement = defineCustomElement$1;
 
 export { PennlibsColors, defineCustomElement };
+//# sourceMappingURL=pennlibs-colors.js.map
 
 //# sourceMappingURL=pennlibs-colors.js.map

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

@@ -1 +1 @@
-{"file":"pennlibs-colors.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ipBAAipB,CAAC;AAC5qB,6BAAe,iBAAiB;;MCMnB,MAAM;;;;;;;IAYjB,MAAM;QAEJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,kEACE,0EAAmB,EACnB,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,uBAAuB,EAAE,IAClD,uFAAkC,EAClC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAC,IAClD,wFAAmC,EACnC,yEAAoB,CACf,CACC,EAEV,kEACE,qEAAc,EACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,IACnD,wFAAmC,EACnC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAC9C,mFAA8B,EAC9B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE,IACpD,yFAAoC,EACpC,yEAAoB,CACf,CACC,EAEV,kEACE,oEAAa,EACb,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAC9C,mFAA8B,EAC9B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE,IACpD,yFAAoC,EACpC,yEAAoB,CACf,CACC,EAEV,kEACE,qEAAc,EACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,IAC/C,oFAA+B,EAC/B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,0BAA0B,EAAE,IACrD,0FAAqC,EACrC,yEAAoB,CACf,CACC,EAEV,kEACE,sEAAe,EACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,IAChD,qFAAgC,EAChC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,IACtD,2FAAsC,EACtC,yEAAoB,CACf,CACC,EAEV,kEACE,sEAAe,EACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,IAChD,qFAAgC,EAChC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,IACtD,2FAAsC,EACtC,yEAAoB,CACf,CACC,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pennlibs-colors/pennlibs-colors.css?tag=pennlibs-colors&encapsulation=shadow","src/components/pennlibs-colors/pennlibs-colors.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1rem;\n}\n\n.colors-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));\n  gap: 2rem;\n  margin-bottom: 2rem;\n}\n\n\n.colors-container code {\n  display: block;\n  width: 100%;\n  padding: 3em 1.5em;\n}\n\n.colors-container code + code {\n  margin-top: 1em;\n}\n\n.colors-container code span {\n  font-size: 0.875em;\n  display: inline-block;\n  background: var(--color-bg-default);\n  padding: 0.25em 0.5em;\n}\n\n.colors-container code {\n  display: flex;\n  justify-content: space-between;\n}\n\nh2 {\n  font-size: 1.25em;\n  font-weight: 600;\n  margin-bottom: 0.25em;\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-colors',\n  styleUrl: 'pennlibs-colors.css',\n  shadow: true\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  render() {\n    \n    return (\n      <div class=\"viewport-margins\">\n        <div class=\"colors-container\">\n          <section>\n            <h2>Penn Brand</h2>\n            <code style={{ background: \"var(--color-penn-red)\" }}>\n              <span>var(--color-penn-red)</span>\n              <span>#990000</span>\n            </code>\n            <code style={{ background: \"var(--color-penn-blue)\"}}>\n              <span>var(--color-penn-blue)</span>\n              <span>#011F5B</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Grays</h2>\n            <code style={{ background: \"var(--color-gray-dark)\" }}>\n              <span>var(--color-gray-dark)</span>\n              <span>#2D3545</span>\n            </code>\n            <code style={{ background: \"var(--color-gray)\" }}>\n              <span>var(--color-gray)</span>\n              <span>#595F6A</span>\n            </code>\n            <code style={{ background: \"var(--color-gray-light)\" }}>\n              <span>var(--color-gray-light)</span>\n              <span>#F5F5F6</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Blue</h2>\n            <code style={{ background: \"var(--color-blue)\" }}>\n              <span>var(--color-blue)</span>\n              <span>#0E5696</span>\n            </code>\n            <code style={{ background: \"var(--color-blue-light)\" }}>\n              <span>var(--color-blue-light)</span>\n              <span>#D4E4F2</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Green</h2>\n            <code style={{ background: \"var(--color-green)\" }}>\n              <span>var(--color-green)</span>\n              <span>#267434</span>\n            </code>\n            <code style={{ background: \"var(--color-green-light)\" }}>\n              <span>var(--color-green-light)</span>\n              <span>#F1F7E1</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Orange</h2>\n            <code style={{ background: \"var(--color-orange)\" }}>\n              <span>var(--color-orange)</span>\n              <span>#BD4718</span>\n            </code>\n            <code style={{ background: \"var(--color-orange-light)\" }}>\n              <span>var(--color-orange-light)</span>\n              <span>#FEEDDD</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Purple</h2>\n            <code style={{ background: \"var(--color-purple)\" }}>\n              <span>var(--color-purple)</span>\n              <span>#80317F</span>\n            </code>\n            <code style={{ background: \"var(--color-purple-light)\" }}>\n              <span>var(--color-purple-light)</span>\n              <span>#F2DFED</span>\n            </code>\n          </section>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"pennlibs-colors.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-colors/pennlibs-colors.css?tag=pennlibs-colors&encapsulation=shadow","src/components/pennlibs-colors/pennlibs-colors.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1rem;\n}\n\n.colors-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));\n  gap: 2rem;\n  margin-bottom: 2rem;\n}\n\n\n.colors-container code {\n  display: block;\n  width: 100%;\n  padding: 3em 1.5em;\n}\n\n.colors-container code + code {\n  margin-top: 1em;\n}\n\n.colors-container code span {\n  font-size: 0.875em;\n  display: inline-block;\n  background: var(--color-bg-default);\n  padding: 0.25em 0.5em;\n}\n\n.colors-container code {\n  display: flex;\n  justify-content: space-between;\n}\n\nh2 {\n  font-size: 1.25em;\n  font-weight: 600;\n  margin-bottom: 0.25em;\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-colors',\n  styleUrl: 'pennlibs-colors.css',\n  shadow: true\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  render() {\n    \n    return (\n      <div class=\"viewport-margins\">\n        <div class=\"colors-container\">\n          <section>\n            <h2>Penn Brand</h2>\n            <code style={{ background: \"var(--color-penn-red)\" }}>\n              <span>var(--color-penn-red)</span>\n              <span>#990000</span>\n            </code>\n            <code style={{ background: \"var(--color-penn-blue)\"}}>\n              <span>var(--color-penn-blue)</span>\n              <span>#011F5B</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Grays</h2>\n            <code style={{ background: \"var(--color-gray-dark)\" }}>\n              <span>var(--color-gray-dark)</span>\n              <span>#2D3545</span>\n            </code>\n            <code style={{ background: \"var(--color-gray)\" }}>\n              <span>var(--color-gray)</span>\n              <span>#595F6A</span>\n            </code>\n            <code style={{ background: \"var(--color-gray-light)\" }}>\n              <span>var(--color-gray-light)</span>\n              <span>#F5F5F6</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Blue</h2>\n            <code style={{ background: \"var(--color-blue)\" }}>\n              <span>var(--color-blue)</span>\n              <span>#0E5696</span>\n            </code>\n            <code style={{ background: \"var(--color-blue-light)\" }}>\n              <span>var(--color-blue-light)</span>\n              <span>#D4E4F2</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Green</h2>\n            <code style={{ background: \"var(--color-green)\" }}>\n              <span>var(--color-green)</span>\n              <span>#267434</span>\n            </code>\n            <code style={{ background: \"var(--color-green-light)\" }}>\n              <span>var(--color-green-light)</span>\n              <span>#F1F7E1</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Orange</h2>\n            <code style={{ background: \"var(--color-orange)\" }}>\n              <span>var(--color-orange)</span>\n              <span>#BD4718</span>\n            </code>\n            <code style={{ background: \"var(--color-orange-light)\" }}>\n              <span>var(--color-orange-light)</span>\n              <span>#FEEDDD</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Purple</h2>\n            <code style={{ background: \"var(--color-purple)\" }}>\n              <span>var(--color-purple)</span>\n              <span>#80317F</span>\n            </code>\n            <code style={{ background: \"var(--color-purple-light)\" }}>\n              <span>var(--color-purple-light)</span>\n              <span>#F2DFED</span>\n            </code>\n          </section>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pennlibs-feedback.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default);line-height:1.4;box-sizing:border-box}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;max-width:1080px;margin:0 auto}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 0;font-family:var(--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(--color-fg-accent);text-decoration:underline;text-underline-offset:var(--link-text-underline-offset);text-decoration-thickness:var(--link-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;font-family:var(--font-family);font-weight:500;line-height:1.4;color:var(--color-fg-default);background:var(--color-bg-default);border:solid 1px var(--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(--color-bg-attention),\n    0 0 0 3px var(--color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--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 PennlibsFeedbackStyle0 = pennlibsFeedbackCss;
 
 const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
 const FEEDBACK_QUESTION = 'Did you find what you need?';
@@ -52,7 +51,7 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
         }
         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.")))));
     }
-    static get style() { return PennlibsFeedbackStyle0; }
+    static get style() { return pennlibsFeedbackCss; }
 }, [1, "pennlibs-feedback", {
         "error": [32],
         "answer": [32]
@@ -75,5 +74,6 @@ const PennlibsFeedback = PennlibsFeedback$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { PennlibsFeedback, defineCustomElement };
+//# sourceMappingURL=pennlibs-feedback.js.map
 
 //# sourceMappingURL=pennlibs-feedback.js.map

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

@@ -1 +1 @@
-{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6pDAA6pD,CAAC;AAC1rD,+BAAe,mBAAmB;;ACClC,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,iBAAiB,GAAG,6BAA6B,CAAC;AACxD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;MAOhDA,kBAAgB;;;;;;qBACD,KAAK;sBACO,SAAS;;IAkB/C,iBAAiB;QACf,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW,CAAC;SACtE;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE;YACtD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM,CAAC;SAC5E;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;YAC/C,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;SAC3B;KACF;IAED,cAAc,CAAC,MAAc;;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,QAAQ,EAAE,iBAAiB;YAC3B,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;YACzB,WAAW,EAAE,CAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,0CAAE,WAAW,KAAI,SAAS;YACnE,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI,SAAS;SACvC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,SACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,EAAC,IAAI,IAEb,8BAA0B,qCACxB,CACA,EACN;SACH;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACxB,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,SACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,QAAQ,EAAC,IAAI,WAEV,oCAAgC,wDAAkD,SAAG,IAAI,EAAC,0CAA0C,oCAAkC,MACvK,CACA,EACN;SACH;QAED,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAK,iBAAiB,CAAM,EAC5B,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,oBAE/C,uBAAS,YAAM,KAAK,EAAC,iBAAiB,6BAA8B,CAAO,CACpE,EACT,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,oBAE9C,sBAAQ,YAAM,KAAK,EAAC,iBAAiB,mCAAoC,CAAO,CACzE,CACL,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PennlibsFeedback"],"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(--font-family);\n  font-size: var(--font-size);\n  color: var(--color-fg-default);\n  line-height: 1.4;\n  box-sizing: border-box;\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  max-width: 1080px;\n  margin: 0 auto;\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(--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(--color-fg-accent);\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--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(--font-family);\n  font-weight: 500;\n  line-height: 1.4;\n  color: var(--color-fg-default);\n  background: var(--color-bg-default);\n  border: solid 1px var(--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(--color-bg-attention),\n    0 0 0 3px var(--color-bg-emphasis);\n}\n\np:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--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}
+{"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  padding: 1.5em 1em;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--color-fg-default);\n  line-height: 1.4;\n  box-sizing: border-box;\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  max-width: 1080px;\n  margin: 0 auto;\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(--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(--color-fg-accent);\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--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(--font-family);\n  font-weight: 500;\n  line-height: 1.4;\n  color: var(--color-fg-default);\n  background: var(--color-bg-default);\n  border: solid 1px var(--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(--color-bg-attention),\n    0 0 0 3px var(--color-bg-emphasis);\n}\n\np:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--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}

package/dist/components/pennlibs-footer.js

@@ -1,15 +1,12 @@
 import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
 
 const pennlibsFooterCss = ":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n  --padding-bottom: 5.75rem;\n}\n\n.website-footer-wrapper {\n  background: var(--color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--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(14em, 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(--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(--link-text-underline-offset);\n}";
-const PennlibsFooterStyle0 = pennlibsFooterCss;
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.navigation = undefined;
-        this.navigationByChildren = undefined;
     }
     componentWillLoad() {
         this.setNavigationByChildren();
@@ -45,7 +42,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }
-    static get style() { return PennlibsFooterStyle0; }
+    static get style() { return pennlibsFooterCss; }
 }, [1, "pennlibs-footer", {
         "navigation": [16],
         "navigationByChildren": [32]
@@ -68,5 +65,6 @@ const PennlibsFooter = Footer;
 const defineCustomElement = defineCustomElement$1;
 
 export { PennlibsFooter, defineCustomElement };
+//# sourceMappingURL=pennlibs-footer.js.map
 
 //# sourceMappingURL=pennlibs-footer.js.map

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

@@ -1 +1 @@
-{"file":"pennlibs-footer.js","mappings":"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","names":[],"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(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n  --padding-bottom: 5.75rem;\n}\n\n.website-footer-wrapper {\n  background: var(--color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--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(14em, 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(--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(--link-text-underline-offset);\n}","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","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0yDAA0yD;;MCQvzD,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;IAgBjB,iBAAiB,GAAA;QACf,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,uBAAuB,GAAA;AACrB,QAAA,IAAI;AACF,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBAC7B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtE,CAAC,GAAG,EAAE,OAAO,KAAI;AACf,oBAAA,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;wBACf,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,SAAS;AAC9C,wBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,IAAG;AAC1D,4BAAA,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACnD,yBAAC;AACF,qBAAA,CAAC;AAEF,oBAAA,OAAO,GAAG;iBACX,EAAE,EAAE,CAAC;;;QAEV,OAAA,EAAA,EAAM;YACN,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;;;IAI9F,MAAM,GAAA;AACJ,QAAA,MAAM,mBAAmB,GAAG,YAAY,CAAC,yBAAyB,CAAC;AAEnE,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE;gBACpC,UAAU,EAAE,CAA8B,2BAAA,EAAA,mBAAmB,CAAqB,mBAAA,CAAA;AAClF,gBAAA,cAAc,EAAE,OAAO;AACxB,aAAA,EAAA,EACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EAC1C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAoB,EAAA,gBAAA,CAAA,EACvD,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,6FAA6F,EAAA,wBAAmB,CAAM,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,gCAA+B,CAAK,EACtK,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,oBAAoB,EAAA,EAAA,gBAAA,CAAmB,CAAK,EACxD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,0CAA0C,EAAA,EAAA,YAAA,CAAe,CAAK,EAC1E,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,2CAA2C,EAAC,MAAM,EAAC,QAAQ,EAAA,EAAA,qBAAA,CAAwB,CAAK,CACjG,CACG,EACV,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAmB,EAAA,eAAA,CAAA,EACtD,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,wCAAwC,EAAA,EAAA,YAAA,CAAe,CAAK,EACxE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,qCAAqC,EAAA,EAAA,WAAA,CAAc,CAAK,EACpE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,yCAAyC,EAAA,EAAA,UAAA,CAAa,CAAK,EACvE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,iDAAiD,EAAa,EAAA,UAAA,CAAA,CAAK,CAC5E,CACG,EACT,IAAI,CAAC,oBAAoB,IAAI;AAC5B,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,KACnC,CAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM,EAC1D,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,EAAA,EAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KACrB,CAAA,CAAA,IAAA,EAAA,IAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX;SACF,EACA,IAAI,CAAC,UAAU,IAAI;AAClB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,KACzB,CAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM,EAC1D,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,EAAA,EAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KACrB,CAAA,CAAA,IAAA,EAAA,IAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX;SACF,CACG,CACF,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qDAAqD,EAAA,EAC7D,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,wBAAwB,EAAA,EAAA,OAAA,CAAU,CAAK,EACnD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,4CAA4C,EAAA,EAAA,gBAAA,CAAmB,CAAK,EAChF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,wDAAwD,EAAA,EAAA,0CAAA,CAA6C,CAAK,EACtH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,wCAAwC,EAAA,EAAA,YAAA,CAAe,CAAK,EACxE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,6CAA6C,EAAA,EAAA,oBAAA,CAAuB,CAAK,EACrF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,2DAA2D,EAAkC,EAAA,+BAAA,CAAA,CAAK,CAC3G,CACD,CACF,CACC,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n  --padding-bottom: 5.75rem;\n}\n\n.website-footer-wrapper {\n  background: var(--color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--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(14em, 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(--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(--link-text-underline-offset);\n}","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}