@penn-libraries/web 1.0.0-dev.2 → 1.1.0-dev.0

package/dist/cjs/pennlibs-feedback.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var index = require('./index-C0A2bnrZ.js');
+
+const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box}@media print{:host{display:none}}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;justify-content:center}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 0;font-family:var(--pl-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(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-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(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.feedbackEvent = index.createEvent(this, "pennlibs-feedback");
+        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 (index.h("div", { class: "feedback-container" }, index.h("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, index.h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
+        }
+        if (this.answer === 'no') {
+            return (index.h("div", { class: "feedback-container" }, index.h("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", index.h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
+        }
+        return (index.h("div", { class: "feedback-container" }, index.h("h2", null, FEEDBACK_QUESTION), index.h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", index.h("span", null, "Yes", index.h("span", { class: "visually-hidden" }, ", I found what I need."))), index.h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", index.h("span", null, "No", index.h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+    }
+};
+PennlibsFeedback.style = pennlibsFeedbackCss;
+
+exports.pennlibs_feedback = PennlibsFeedback;
+//# sourceMappingURL=pennlibs-feedback.entry.cjs.js.map
+
+//# sourceMappingURL=pennlibs-feedback.cjs.entry.js.map

package/dist/cjs/pennlibs-feedback.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-feedback.entry.cjs.js","mappings":"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","names":["h"],"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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  color: var(--pl-color-fg-default);\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\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  justify-content: center;\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(--pl-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(--pl-color-fg-accent);\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}\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(--pl-font-family);\n  font-weight: 500;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  background: var(--pl-color-bg-default);\n  border: solid 1px var(--pl-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(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\n/* Responsive Adjustments\n---------------------------------------- */\n@media (max-width: 26em) {\n  h2 {\n    display: block;\n    width: 100%;\n    text-align: center;\n  }\n}\n\n.help-us {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n}\n\n/* Accessibility Helpers\n---------------------------------------- */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n/* This ensures the element remains hidden even when focused */\n.visually-hidden:focus,\n.visually-hidden:active {\n  clip: auto;\n  clip-path: none;\n  height: auto;\n  overflow: visible;\n  position: static;\n  white-space: normal;\n  width: auto;\n}","import { Component, h, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback { \n  @State() error: boolean = false;\n  @State() answer: string | undefined = undefined;\n\n  @Event({\n    eventName: 'pennlibs-feedback',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  }) feedbackEvent!: EventEmitter<{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }>;\n\n  private yesMessageRef?: HTMLParagraphElement;\n  private noMessageRef?: HTMLParagraphElement;\n\n  componentWillLoad() {\n    if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n      this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n      this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n    }\n  }\n\n  componentDidRender() {\n    if (this.answer === 'yes' && this.yesMessageRef) {\n      this.yesMessageRef.focus();\n    } else if (this.answer === 'no' && this.noMessageRef) {\n      this.noMessageRef.focus();\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.answer = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n    \n    this.feedbackEvent.emit({\n      question: FEEDBACK_QUESTION,\n      answer: answer,\n      url: window.location.href,\n      pageHeading: document.querySelector('h1')?.textContent || undefined,\n      pageTitle: document.title || undefined\n    });\n  }\n  \n  render() {\n    if (this.answer === 'yes') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.yesMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            <strong>Thank you</strong> for your feedback! 👍\n          </p>\n        </div>\n      );\n    }\n\n    if (this.answer === 'no') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.noMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            To <strong>help us improve</strong>, we'd like to know more about your visit. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a>.\n          </p>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"feedback-container\">\n        <h2>{FEEDBACK_QUESTION}</h2>\n        <button onClick={() => this.handleFeedback('yes')}>\n          👍\n          <span>Yes<span class=\"visually-hidden\">, I found what I need.</span></span>\n        </button>\n        <button onClick={() => this.handleFeedback('no')}>\n          👎\n          <span>No<span class=\"visually-hidden\">, I didn't find what I need.</span></span>\n        </button>\n      </div>\n    )\n  }\n}\n\n"],"version":3}

package/dist/cjs/pennlibs-feedback.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-feedback.entry.cjs.js","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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  color: var(--pl-color-fg-default);\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\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  justify-content: center;\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(--pl-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(--pl-color-fg-accent);\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}\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(--pl-font-family);\n  font-weight: 500;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  background: var(--pl-color-bg-default);\n  border: solid 1px var(--pl-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(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-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"],"names":["h"],"mappings":"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"}

package/dist/cjs/pennlibs-hero.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-C0A2bnrZ.js');
+
+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.1;font-size:3em;font-weight:bold;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:2.5em}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;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 getCurrentImageSource = (pictureElement) => {
+    const imgElement = pictureElement.querySelector('img');
+    return (imgElement === null || imgElement === void 0 ? void 0 : imgElement.currentSrc) || '';
+};
+const Hero = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index.h("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, index.h("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), index.h("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, index.h("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get hostElement() { return index.getElement(this); }
+};
+Hero.style = pennlibsHeroCss;
+
+exports.pennlibs_hero = Hero;
+//# sourceMappingURL=pennlibs-hero.entry.cjs.js.map
+
+//# sourceMappingURL=pennlibs-hero.cjs.entry.js.map

package/dist/cjs/pennlibs-hero.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-hero.entry.cjs.js","mappings":"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","names":["h"],"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.1;\n  font-size: 3em;\n  font-weight: bold;\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: 2.5em;\n  }\n}\n\n.hero__sub-heading {\n  font-size: 1.25em;\n  font-family: var(--pl-font-family);\n  font-weight: 500;\n  color: var(--pl-hero-color);\n  max-width: 52ch;\n  text-wrap: pretty;\n  margin-top: 1em;\n  margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n  text-decoration: underline;\n  text-underline-offset: var(--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}"],"version":3}

package/dist/cjs/pennlibs-hero.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-hero.entry.cjs.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.1;\n  font-size: 3em;\n  font-weight: bold;\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: 2.5em;\n  }\n}\n\n.hero__sub-heading {\n  font-size: 1.25em;\n  font-family: var(--pl-font-family);\n  font-weight: 500;\n  color: var(--pl-hero-color);\n  max-width: 52ch;\n  text-wrap: pretty;\n  margin-top: 1em;\n  margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n  text-decoration: underline;\n  text-underline-offset: var(--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":["h"],"mappings":"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"}

package/dist/cjs/web.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B6HF5D3u.js');
+var index = require('./index-C0A2bnrZ.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["pennlibs-chat_6.cjs",[[1,"pennlibs-chat",{"href":[32]}],[1,"pennlibs-fallback-img"],[1,"pennlibs-feedback",{"error":[32],"answer":[32]}],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-banner.cjs",[[1,"pennlibs-banner"]]]], options);
+  return index.bootstrapLazy([["pennlibs-allow-tracking_4.cjs",[[1,"pennlibs-allow-tracking",{"consentGiven":[32],"hide":[32]}],[1,"pennlibs-autocomplete",{"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"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner.cjs",[[1,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[1,"pennlibs-chat",{"href":[32]}]]],["pennlibs-fallback-img.cjs",[[1,"pennlibs-fallback-img"]]],["pennlibs-feedback.cjs",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["pennlibs-hero.cjs",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "components/pennlibs-autocomplete/pennlibs-autocomplete.js",
+    "components/pennlibs-allow-tracking/pennlibs-allow-tracking.js",
     "components/pennlibs-banner/pennlibs-banner.js",
     "components/pennlibs-chat/pennlibs-chat.js",
     "components/pennlibs-fallback-img/pennlibs-fallback-img.js",

package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.css

@@ -0,0 +1,110 @@
+:host {
+  background: var(--pl-color-penn-blue);
+  display: block;
+  margin: 0;
+  font-family: var(--pl-font-family);
+  font-size: var(--pl-font-size);
+  color: var(--pl-color-fg-on-emphasis);
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  & h2 {
+    font-size: var(--pl-font-size-xl);
+    font-family: var(--pl-font-sans-serif);
+    margin-bottom: 0;
+    margin-top: 0;
+    display: inline-flex;
+    flex-wrap: wrap;
+
+    & span {
+      padding-right: var(--pl-space-xs);
+    }
+  }
+
+  & p {
+    margin: 0;
+  }
+
+  & *:focus {
+    box-shadow: 0 0 0 2px var(--pl-color-bg-accent-emphasis), 0 0 0 4px var(--pl-color-bg-accent);
+    outline: none;
+  }
+
+  & a {
+    color: var(--pl-color-fg-on-emphasis);
+    text-decoration: underline;
+    text-underline-offset: var(--pl-link-text-underline-offset);
+
+    &:hover {
+      text-underline-offset: var(--pl-link-text-underline-offset);
+      text-decoration-thickness: 0.1em;
+    }
+  }
+}
+
+.container {
+  padding: var(--pl-space-m) 0;
+}
+
+.pl-viewport-margins {
+  width: 100%;
+  max-width: var(--pl-viewport-margins-max-width);
+  margin: 0 auto;
+  padding: 0 var(--pl-viewport-margins-gutter, 1em);
+
+  display: flex;
+  gap: var(--pl-space-m);
+  align-items: center;
+  justify-content: space-between;
+
+  flex-wrap: wrap;
+
+  & div:last-of-type {
+    display: flex;
+    gap: var(--pl-space-xs);
+  }
+}
+
+button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.5em 1.5em;
+  font-family: var(--pl-font-family);
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--pl-color-fg-default);
+  background: var(--pl-color-bg-default);
+  border-radius: 1em;
+  box-sizing: border-box;
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: var(--pl-link-text-underline-offset);
+    text-decoration-thickness: 0.1em;
+  }
+}
+
+.stop-sharing {
+  background: none;
+  color: var(--pl-color-fg-on-emphasis);
+  border: solid 1px var(--pl-color-fg-on-emphasis);
+}
+
+.tracking-message {
+  display: flex;
+  gap: var(--pl-space-xs);
+  align-items: center;
+
+  & svg {
+    flex-shrink: 0;
+  }
+}
+
+.tracking-options {
+  flex-wrap: wrap;
+}

package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.js

@@ -0,0 +1,67 @@
+import { h } from "@stencil/core";
+export class AllowTracking {
+    constructor() {
+        this.consentGiven = null;
+        this.hide = true;
+        this.handleAllow = () => {
+            this.setCookie('pennlibs-allow-tracking', 'YES');
+            this.consentGiven = 'YES';
+        };
+        this.handleDoNotTrack = () => {
+            this.setCookie('pennlibs-allow-tracking', 'NO');
+            this.consentGiven = 'NO';
+        };
+        this.handleHide = () => {
+            this.hide = true;
+        };
+    }
+    componentWillLoad() {
+        if (navigator.cookieEnabled) {
+            this.hide = false;
+        }
+        const existingConsent = this.getCookie('pennlibs-allow-tracking');
+        if (existingConsent) {
+            this.consentGiven = existingConsent;
+        }
+    }
+    getCookie(name) {
+        var _a;
+        return ((_a = document.cookie
+            .split('; ')
+            .find(row => row.startsWith(`${name}=`))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) || null;
+    }
+    setCookie(name, value) {
+        document.cookie = `${name}=${value}; path=/; max-age=31536000`;
+    }
+    render() {
+        if (this.hide) {
+            return null;
+        }
+        if (this.consentGiven) {
+            return (h("div", { class: "container" }, h("div", { class: "pl-viewport-margins" }, h("div", null, h("p", null, "You've ", h("strong", null, this.consentGiven === 'YES' ? 'accepted' : 'rejected'), " tracking. You can ", h("a", { href: "#" }, "change this setting"), " at anytime.")), h("div", null, h("button", { onClick: this.handleHide }, "Hide tracking message")))));
+        }
+        return (h("div", { class: "container" }, h("div", { class: "pl-viewport-margins" }, h("div", { class: "tracking-message" }, h(TrackingIcon, null), h("p", null, h("a", { href: "https://www.library.upenn.edu/about/policies/penn-libraries-privacy-policy" }, "We use anonymized data"), " from your visit such as clicks to gather analytics and understand how we can make improvements.")), h("div", { class: "tracking-options" }, h("button", { onClick: this.handleAllow }, "Continue sharing"), h("button", { onClick: this.handleDoNotTrack, class: "stop-sharing" }, "Stop sharing")))));
+    }
+    static get is() { return "pennlibs-allow-tracking"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pennlibs-allow-tracking.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pennlibs-allow-tracking.css"]
+        };
+    }
+    static get states() {
+        return {
+            "consentGiven": {},
+            "hide": {}
+        };
+    }
+}
+function TrackingIcon() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trending-up-down-icon lucide-trending-up-down" }, h("path", { d: "M14.828 14.828 21 21" }), h("path", { d: "M21 16v5h-5" }), h("path", { d: "m21 3-9 9-4-4-6 6" }), h("path", { d: "M21 8V3h-5" })));
+}
+//# sourceMappingURL=pennlibs-allow-tracking.js.map

package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-allow-tracking.js","sourceRoot":"","sources":["../../../src/components/pennlibs-allow-tracking/pennlibs-allow-tracking.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-allow-tracking',\n  styleUrl: 'pennlibs-allow-tracking.css',\n  shadow: true\n})\nexport class AllowTracking {\n  @State() consentGiven: 'YES' | 'NO' | null = null;\n  @State() hide: boolean = true;\n\n  componentWillLoad() {\n    if (navigator.cookieEnabled) {\n      this.hide = false;\n    }\n\n    const existingConsent = this.getCookie('pennlibs-allow-tracking');\n    if (existingConsent) {\n      this.consentGiven = existingConsent as 'YES' | 'NO';\n    }\n  }\n\n  private getCookie(name: string): string | null {\n    return document.cookie\n      .split('; ')\n      .find(row => row.startsWith(`${name}=`))\n      ?.split('=')[1] || null;\n  }\n\n  private setCookie(name: string, value: string) {\n    document.cookie = `${name}=${value}; path=/; max-age=31536000`;\n  }\n\n  private handleAllow = () => {\n    this.setCookie('pennlibs-allow-tracking', 'YES');\n    this.consentGiven = 'YES';\n  }\n\n  private handleDoNotTrack = () => {\n    this.setCookie('pennlibs-allow-tracking', 'NO');\n    this.consentGiven = 'NO';\n  }\n\n  private handleHide = () => {\n    this.hide = true;\n  }\n\n  render() {\n    if (this.hide) {\n      return null;\n    }\n\n    if (this.consentGiven) {\n      return (\n        <div class=\"container\">\n          <div class=\"pl-viewport-margins\">\n            <div>\n              <p>You've <strong>{this.consentGiven === 'YES' ? 'accepted' : 'rejected'}</strong> tracking. You can <a href=\"#\">change this setting</a> at anytime.</p>\n            </div>\n            <div>\n              <button onClick={this.handleHide}>Hide tracking message</button>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"container\">\n        <div class=\"pl-viewport-margins\">\n          <div class=\"tracking-message\">\n            <TrackingIcon /><p><a href=\"https://www.library.upenn.edu/about/policies/penn-libraries-privacy-policy\">We use anonymized data</a> from your visit such as clicks to gather analytics and understand how we can make improvements.</p>\n          </div>\n\n          <div class=\"tracking-options\">\n            <button onClick={this.handleAllow}>Continue sharing</button>\n            <button onClick={this.handleDoNotTrack} class=\"stop-sharing\">Stop sharing</button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nfunction TrackingIcon() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trending-up-down-icon lucide-trending-up-down\"><path d=\"M14.828 14.828 21 21\"/><path d=\"M21 16v5h-5\"/><path d=\"m21 3-9 9-4-4-6 6\"/><path d=\"M21 8V3h-5\"/></svg>\n  )\n}"]}

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

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+  border-radius: 1.25rem;
+  padding: 0;
+  border-top: 0;
+  position: relative;
+}
+
+[role=listbox] {
+  position: absolute;
+  margin-top: var(--pl-space-xs);
+  background: var(--pl-color-bg-default);
+  border-radius: 1.25rem;
+  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;
+  width: 100%;
+  overflow: hidden;
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+}
+
+p {
+  margin: 0;
+  font-size: var(--pl-font-size-s);
+  color: var(--pl-color-fg-subtle);
+  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));
+  font-size: var(--pl-font-size-s);
+  order: 2;
+  font-weight: 500;
+  background: var(--pl-color-bg-subtle);
+  border-radius: 0 0 1.25rem 1.25rem;
+
+  display: flex;
+  gap: var(--pl-space-s) var(--pl-space-l);
+  flex-wrap: wrap;
+}
+
+ol {
+  list-style: none;
+  margin: 0;
+  padding: var(--pl-space-xs) 0;
+  order: 1;
+}
+
+[role=option] {
+  color: var(--pl-color-fg-default);
+  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));
+  text-decoration: none;
+  font-weight: 700; 
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    text-decoration: underline;
+  }
+}
+
+[aria-selected=true] {
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+
+mark {
+  background: none;
+  font-weight: 400;
+}
+
+.suggestion--border {
+  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);
+  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));
+  margin-bottom: var(--pl-space-2xs);
+}