@penn-libraries/web 1.3.1 → 1.4.0-dev.0

package/dist/web/pennlibs-hero.entry.esm.js.map

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

package/dist/web/web.css

@@ -176,7 +176,10 @@
 
 :where(.pl-typeset) {
   font-family: var(--pl-font-family);
-  
+  /* Establish a container so descendant headings can use `cqi` units
+     to scale fluidly with the typeset wrapper's width. */
+  container-type: inline-size;
+
   & :is(p, .pl-p) {
     font-family: var(--pl-font-family);
   }
@@ -211,7 +214,10 @@
   }
 
   & :is(h1, .pl-h1) {
+    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the
+       fluid clamp below. */
     font-size: var(--pl-font-size-5xl);
+    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));
     margin-bottom: var(--pl-space-l);
     margin-top: 0;
 
@@ -223,6 +229,7 @@
 
   & :is(h2, .pl-h2) {
     font-size: var(--pl-font-size-4xl);
+    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));
     margin-bottom: var(--pl-space-m);
 
     &::after {
@@ -233,6 +240,7 @@
 
   & :is(h3, .pl-h3) {
     font-size: var(--pl-font-size-xl);
+    font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));
     font-family: var(--pl-font-sans-serif);
     color: var(--pl-color-fg-default);
     margin-bottom: var(--pl-space-m);

package/dist/web/web.esm.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-DF84VN1-.js';
-export { s as setNonce } from './p-DF84VN1-.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-B2uNboIg.js';
+export { s as setNonce } from './p-B2uNboIg.js';
 
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-4d671d86",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["p-f797c7a7",[[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-c978cff4",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["p-15aaa482",[[257,"pennlibs-banner"]]],["p-17a97fcf",[[257,"pennlibs-chat",{"href":[32]}]]],["p-fc772aef",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-dc790d88",[[257,"pennlibs-fallback-img"]]]], options);
+  return bootstrapLazy([["p-3a18e805",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["p-743f4899",[[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-6a15d2f0",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["p-aab8ed2e",[[257,"pennlibs-banner"]]],["p-5ff9bc88",[[257,"pennlibs-chat",{"href":[32]}]]],["p-45f82cb0",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-2466b63f",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map

package/hydrate/index.js

@@ -3660,7 +3660,7 @@ class Chat {
     }; }
 }
 
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
+const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\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.75;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 
 /**
  * A footer component for Penn Libraries websites that displays contact information,
@@ -3834,7 +3834,7 @@ class Header {
     }; }
 }
 
-const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:var(--pl-font-size-4xl)}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
+const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex;container-type:inline-size}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-size:clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__sub-heading{font-size:1em}}";
 
 const getCurrentImageSource = (pictureElement) => {
     const imgElement = pictureElement.querySelector('img');

package/hydrate/index.mjs

@@ -3658,7 +3658,7 @@ class Chat {
     }; }
 }
 
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
+const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\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.75;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 
 /**
  * A footer component for Penn Libraries websites that displays contact information,
@@ -3832,7 +3832,7 @@ class Header {
     }; }
 }
 
-const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:var(--pl-font-size-4xl)}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
+const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex;container-type:inline-size}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-size:clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__sub-heading{font-size:1em}}";
 
 const getCurrentImageSource = (pictureElement) => {
     const imgElement = pictureElement.querySelector('img');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penn-libraries/web",
-  "version": "1.3.1",
+  "version": "1.4.0-dev.0",
   "description": "Reusable web designs for University of Pennsylvania Libraries websites. This package contains our code for shared Web Components and Cascading Style Sheets (CSS).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",