@penn-libraries/web 0.3.0-dev.5 → 0.3.1

package/dist/components/pennlibs-hero.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--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}.hero{position:relative;min-height:var(--hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top: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}}";
+const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--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 var(--viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top: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}}";
 
 const getCurrentImageSource = (pictureElement) => {
     const imgElement = pictureElement.querySelector('img');
@@ -49,7 +49,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
         }
     }
     render() {
-        return (h("div", { key: 'e7da72dc8de6e2039c4b1158fb41b5ca6279b01b', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '1a17497f3da0857c01c3bf0871312c9ebe350475', class: "hero__content" }, h("slot", { key: '4b3747eeec4170ce12f3ec7e8b575e611327f39b', name: "start" }), h("div", { key: 'f915238e4b2ad0ea221b51c51ccc19b36985be12', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '71181c2ae063871138a3c8338305422b2e0c7315', class: "viewport-margins" }, h("h1", { key: 'c52fbf359e35d152441d2704d271b83c9999026a', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '7acf7c6aa459cd083a8101642b218888277ccadd', 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 assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

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

@@ -1 +1 @@
-{"file":"pennlibs-hero.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n  --hero-height: clamp(42vh, 32rem, 26rem);\n  --hero-heading-font: var(--font-serif);\n  --max-width: 1080px;\n  --color-typo: var(--color-fg-on-emphasis);\n}\n\n*, *:before, *:after {\n  box-sizing: inherit;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.viewport-margins {\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n/* Start of Selection */\n/* Hero section */\n.hero {\n  position: relative;\n  min-height: var(--hero-height);\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: 50% 33%;\n  display: flex;\n}\n/* End of Selection */\n\n.hero::before {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);\n  z-index: 0;\n}\n\n  \n.hero::after {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);\n  z-index: 0;\n}\n\n.hero__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  z-index: 1;\n}\n\n.hero__heading-container {\n  margin-top: auto;\n  padding-top: 3em;\n  padding-bottom: 3em;\n}\n\n.hero__heading {\n  text-shadow: 1px 1px 2px var(--color-fg-default);\n  line-height: 1.1;\n  font-size: 2.75em;\n  font-weight: bold;\n  font-family: var(--hero-heading-font);\n  text-wrap: pretty;\n  max-width: 30ch;\n  margin: 0;\n  color: var(--color-typo);\n}\n\n@media (max-width: 920px) {\n  .hero__heading {\n    font-size: 2.5em;\n  }\n}\n\n.hero__sub-heading {\n  font-size: 1.15em;\n  font-family: var(--font-family);\n  font-weight: 500;\n  color: var(--color-typo);\n  max-width: 52ch;\n  text-wrap: pretty;\n  margin-top: 1em;\n  margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-text-decoration-thickness);\n  color: var(--color-typo);\n}\n\n.hero__sub-heading a:hover {\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n  font-weight: bold;\n}\n\n@media (max-width: 620px) {\n  .hero__heading {\n    font-size: 2em;\n  }\n\n  .hero__sub-heading {\n    font-size: 1em;\n  }\n}","import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n  const imgElement = pictureElement.querySelector('img');\n  return imgElement?.currentSrc || '';\n};\n\n/**\n * Place your most important content in a prominent space, often at the top of your website.\n *\n * @slot start - Content to display at the start (top) of the hero.\n * \n * @prop --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}"],"version":3}
+{"file":"pennlibs-hero.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n  --hero-height: clamp(42vh, 32rem, 26rem);\n  --hero-heading-font: var(--font-serif);\n  --max-width: 1080px;\n  --color-typo: var(--color-fg-on-emphasis);\n}\n\n*, *:before, *:after {\n  box-sizing: inherit;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.viewport-margins {\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 var(--viewport-margins-gutter, 1em);\n}\n\n/* Start of Selection */\n/* Hero section */\n.hero {\n  position: relative;\n  min-height: var(--hero-height);\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: 50% 33%;\n  display: flex;\n}\n/* End of Selection */\n\n.hero::before {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);\n  z-index: 0;\n}\n\n  \n.hero::after {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);\n  z-index: 0;\n}\n\n.hero__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  z-index: 1;\n}\n\n.hero__heading-container {\n  margin-top: auto;\n  padding-top: 3em;\n  padding-bottom: 3em;\n}\n\n.hero__heading {\n  text-shadow: 1px 1px 2px var(--color-fg-default);\n  line-height: 1.1;\n  font-size: 2.75em;\n  font-weight: bold;\n  font-family: var(--hero-heading-font);\n  text-wrap: pretty;\n  max-width: 30ch;\n  margin: 0;\n  color: var(--color-typo);\n}\n\n@media (max-width: 920px) {\n  .hero__heading {\n    font-size: 2.5em;\n  }\n}\n\n.hero__sub-heading {\n  font-size: 1.15em;\n  font-family: var(--font-family);\n  font-weight: 500;\n  color: var(--color-typo);\n  max-width: 52ch;\n  text-wrap: pretty;\n  margin-top: 1em;\n  margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-text-decoration-thickness);\n  color: var(--color-typo);\n}\n\n.hero__sub-heading a:hover {\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n  font-weight: bold;\n}\n\n@media (max-width: 620px) {\n  .hero__heading {\n    font-size: 2em;\n  }\n\n  .hero__sub-heading {\n    font-size: 1em;\n  }\n}","import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n  const imgElement = pictureElement.querySelector('img');\n  return imgElement?.currentSrc || '';\n};\n\n/**\n * Place your most important content in a prominent space, often at the top of your website.\n *\n * @slot start - Content to display at the start (top) of the hero.\n * \n * @prop --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}"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-05T14:01:33",
+  "timestamp": "2025-06-17T13:48:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.29.3",
@@ -44,43 +44,14 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/pennlibs-colors/pennlibs-colors.tsx",
+      "filePath": "src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx",
       "encapsulation": "shadow",
-      "tag": "pennlibs-colors",
-      "readme": "# pennlibs-colors\n\n\n",
-      "docs": "",
+      "tag": "pennlibs-fallback-img",
+      "readme": "# pennlibs-fallback-img\n\nA placeholder component that displays a grayed-out Penn shield logo, typically used as a fallback when Fallback image is available.\n",
+      "docs": "A placeholder component that displays a grayed-out Penn shield logo, typically used as a fallback when Fallback image is available.",
       "docsTags": [],
       "usage": {},
-      "props": [
-        {
-          "name": "navigation",
-          "type": "{ heading: string; links: { label: string; href: string; }[]; }[]",
-          "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"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "navigation",
-          "reflectToAttr": false,
-          "docs": "The navigation sections.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "{ heading: string; links: { label: string; href: string; }[]; }[]"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
+      "props": [],
       "methods": [],
       "events": [],
       "listeners": [],
@@ -162,6 +133,10 @@
           "name": "slot",
           "text": "end - Content to display at the end of the header (right side)"
         },
+        {
+          "name": "slot",
+          "text": "name-end - Content to display at the end of the service name (right side)"
+        },
         {
           "name": "prop",
           "text": "--max-width: The maximum width of the header."
@@ -287,6 +262,10 @@
         {
           "name": "end",
           "docs": "Content to display at the end of the header (right side)"
+        },
+        {
+          "name": "name-end",
+          "docs": "Content to display at the end of the service name (right side)"
         }
       ],
       "parts": [],

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["pennlibs-chat_5",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-banner",[[1,"pennlibs-banner"]]],["pennlibs-colors",[[1,"pennlibs-colors",{"navigation":[16]}]]]], options);
+  return bootstrapLazy([["pennlibs-chat_6",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-fallback-img"],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-banner",[[1,"pennlibs-banner"]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, g as getAssetPath, h } from './index-BAQIT3Vo.js';
 
-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 = class {
     constructor(hostRef) {

package/dist/esm/pennlibs-banner.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-banner.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,shCAAshC;;MCQniC,MAAM,GAAA,MAAA;;;;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;;;;;;;;"}
+{"version":3,"file":"pennlibs-banner.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,mjCAAmjC;;MCQhkC,MAAM,GAAA,MAAA;;;;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;;;;;;;;"}