@penn-libraries/web 0.3.0-dev.1 → 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

@@ -0,0 +1,50 @@
+/* web custom elements */
+export { Banner as PennlibsBanner } from '../types/components/pennlibs-banner/pennlibs-banner';
+export { defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner';
+export { Chat as PennlibsChat } from '../types/components/pennlibs-chat/pennlibs-chat';
+export { defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat';
+export { Footer as PennlibsColors } from '../types/components/pennlibs-colors/pennlibs-colors';
+export { defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors';
+export { PennlibsFeedback as PennlibsFeedback } from '../types/components/pennlibs-feedback/pennlibs-feedback';
+export { defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback';
+export { Footer as PennlibsFooter } from '../types/components/pennlibs-footer/pennlibs-footer';
+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)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,11 @@
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { PennlibsBanner, defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner.js';
+export { PennlibsChat, defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat.js';
+export { PennlibsColors, defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors.js';
+export { 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

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

package/dist/components/pennlibs-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsBanner extends Components.PennlibsBanner, HTMLElement {}
+export const PennlibsBanner: {
+    prototype: PennlibsBanner;
+    new (): PennlibsBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-banner.js

@@ -0,0 +1,38 @@
+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 Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const shieldImageSrc = getAssetPath('./assets/penn-shield.png');
+        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 pennlibsBannerCss; }
+}, [1, "pennlibs-banner"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-banner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Banner);
+            }
+            break;
+    } });
+}
+
+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

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

package/dist/components/pennlibs-chat.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsChat extends Components.PennlibsChat, HTMLElement {}
+export const PennlibsChat: {
+    prototype: PennlibsChat;
+    new (): PennlibsChat;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-chat.js

@@ -0,0 +1,43 @@
+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 Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.libchat_url = "https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857";
+        this.href = "";
+    }
+    connectedCallback() {
+        this.href = this.libchat_url + '?referer=' + window.location.href;
+    }
+    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 pennlibsChatCss; }
+}, [1, "pennlibs-chat", {
+        "href": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-chat"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-chat":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Chat);
+            }
+            break;
+    } });
+}
+
+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

@@ -0,0 +1 @@
+{"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.d.ts

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

package/dist/components/pennlibs-colors.js

@@ -0,0 +1,38 @@
+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 Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    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 pennlibsColorsCss; }
+}, [1, "pennlibs-colors", {
+        "navigation": [16]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-colors"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-colors":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Footer);
+            }
+            break;
+    } });
+}
+
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsFeedback extends Components.PennlibsFeedback, HTMLElement {}
+export const PennlibsFeedback: {
+    prototype: PennlibsFeedback;
+    new (): PennlibsFeedback;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-feedback.js

@@ -0,0 +1,79 @@
+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 FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
+const FEEDBACK_QUESTION = 'Did you find what you need?';
+const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedback extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.feedbackEvent = createEvent(this, "pennlibs-feedback", 7);
+        this.error = false;
+        this.answer = undefined;
+    }
+    componentWillLoad() {
+        if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
+            this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
+        }
+        if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {
+            this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
+        }
+    }
+    componentDidRender() {
+        if (this.answer === 'yes' && this.yesMessageRef) {
+            this.yesMessageRef.focus();
+        }
+        else if (this.answer === 'no' && this.noMessageRef) {
+            this.noMessageRef.focus();
+        }
+    }
+    handleFeedback(answer) {
+        var _a;
+        this.answer = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
+        this.feedbackEvent.emit({
+            question: FEEDBACK_QUESTION,
+            answer: answer,
+            url: window.location.href,
+            pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
+            pageTitle: document.title || undefined
+        });
+    }
+    render() {
+        if (this.answer === 'yes') {
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
+        }
+        if (this.answer === 'no') {
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
+        }
+        return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes", h("span", { class: "visually-hidden" }, ", I found what I need."))), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No", h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+    }
+    static get style() { return pennlibsFeedbackCss; }
+}, [1, "pennlibs-feedback", {
+        "error": [32],
+        "answer": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-feedback"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-feedback":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PennlibsFeedback$1);
+            }
+            break;
+    } });
+}
+
+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

@@ -0,0 +1 @@
+{"file":"pennlibs-feedback.js","mappings":"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","names":["PennlibsFeedback","__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-feedback/pennlibs-feedback.css?tag=pennlibs-feedback&encapsulation=shadow","src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"sourcesContent":["/* Component Root Styles\n---------------------------------------- */\n:host {\n  display: block;\n  background: #eeeff4;\n  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}