@penn-libraries/web 1.1.0-dev.7 → 1.1.1-dev.1

package/dist/collection/components/pennlibs-iiif-img/pennlibs-iiif-img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-iiif-img.js","sourceRoot":"","sources":["../../../src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITY_MULTIPLIERS = [0.5, 0.75, 1, 1.5, 2] as const;\nconst DEFAULT_IMAGE_SIZES = [400, 600, 800, 1200, 1600, 2400] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Automatically generates optimal image sources for different viewport sizes and pixel densities,\n * with modern WebP format and JPG fallback support.\n *\n * @component\n * @example\n * <pennlibs-iiif-img\n *   uuid=\"063ff35c-bbdd-4b63-bbdd-6206590e20d5\"\n *   alt=\"\">\n * </pennlibs-iiif-img>\n */\n@Component({\n  tag: 'pennlibs-iiif-img',\n  styleUrl: 'pennlibs-iiif-img.css',\n  shadow: true,\n})\nexport class IIIFImg {\n  private resizeObserver?: ResizeObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.\n   */\n  @Prop() uuid!: string;\n\n  /**\n   * Alternative text that describes the image content for screen readers and when images fail to load.\n   * Use an empty string for purely decorative images.\n   */\n  @Prop() alt!: string;\n\n  /**\n   * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\n   * Defines the rectangular portion of the underlying image to return.\n   * \n   * `full`: The full image is returned, without any cropping.\n   * \n   * `square`: A square area where width and height equal the shorter dimension.\n   * \n   * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n   * \n   * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.\n   * \n   * @default 'full'\n   */\n  @Prop() region?: string = 'full';\n\n  /**\n   * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\n   * Specifies mirroring and clockwise rotation in degrees (0-360).\n   * \n   * `n`: Rotation in degrees only.\n   * \n   * `!n`: Mirror the image vertically, then rotate by n degrees.\n   * \n   * @default '0'\n   */\n  @Prop() rotation?: string = '0';\n\n  /**\n   * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\n   * Controls the color delivery mode.\n   * \n   * `default`: The server's default quality.\n   * \n   * `color`: Full color information.\n   * \n   * `gray`: Grayscale rendering.\n   * \n   * `bitonal`: Black and white only.\n   * \n   * @default 'default'\n   */\n  @Prop() quality?: string = 'default';\n\n  /**\n   * Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\n   * or \"eager\" to load immediately.\n   * @default 'lazy'\n   */\n  @Prop() loading?: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * Whether to display a fallback placeholder image when the IIIF image fails to load.\n   * @default true\n   */\n  @Prop() showFallback?: boolean = true;\n\n  @State() isLoaded: boolean = false;\n  @State() hasError: boolean = false;\n\n  private observedWidth?: number;\n\n  private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n  private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n    const sizeParam = width ? `${width},` : 'max';\n    return `${this.baseUrl}/${this.uuid}/${this.region}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n  }\n\n  private generateSrcset(sizes: number[], format: ImageFormat): string {\n    const uniqueSizes = [...new Set(sizes)].sort((a, b) => a - b);\n\n    const srcsetEntries = uniqueSizes.map(size => {\n      const url = this.buildIIIFUrl(size, format);\n      return `${url} ${size}w`;\n    });\n\n    return srcsetEntries.join(', ');\n  }\n\n  private getOptimalSizes(): number[] {\n    if (this.observedWidth) {\n      const baseSizes = PIXEL_DENSITY_MULTIPLIERS.map(multiplier =>\n        Math.round(this.observedWidth! * multiplier)\n      );\n\n      return baseSizes;\n    }\n\n    return [...DEFAULT_IMAGE_SIZES];\n  }\n\n  private handleLoad = () => {\n    this.isLoaded = true;\n  };\n\n  private handleError = () => {\n    this.hasError = true;\n  };\n\n  componentDidLoad() {\n    if ('ResizeObserver' in window) {\n      this.resizeObserver = new ResizeObserver(entries => {\n        for (const entry of entries) {\n          this.observedWidth = Math.round(entry.contentRect.width);\n\n          if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = undefined;\n          }\n\n          // Trigger re-render with optimized sizes\n          this.isLoaded = this.isLoaded;\n        }\n      });\n\n      this.resizeObserver.observe(this.hostElement);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n  }\n\n  render() {\n    const sizes = this.getOptimalSizes();\n\n    if (this.hasError && this.showFallback) {\n      return (\n        <div class=\"fallback-container\">\n          <pennlibs-fallback-img />\n        </div>\n      );\n    }\n\n    const imgClasses = {\n      'iiif-img': true,\n      'loaded': this.isLoaded\n    };\n\n    const defaultSize = sizes[0];\n\n    return (\n      <picture>\n        <source\n          type=\"image/webp\"\n          srcSet={this.generateSrcset(sizes, 'webp')}\n          sizes=\"100vw\"\n        />\n\n        <img\n          class={imgClasses}\n          src={this.buildIIIFUrl(defaultSize, 'jpg')}\n          srcSet={this.generateSrcset(sizes, 'jpg')}\n          sizes=\"100vw\"\n          alt={this.alt}\n          loading={this.loading}\n          onLoad={this.handleLoad}\n          onError={this.handleError}\n        />\n      </picture>\n    );\n  }\n}\n"]}

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export { Header as PennlibsHeader } from '../types/components/pennlibs-header/pe
 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';
+export { IIIFImg as PennlibsIiifImg } from '../types/components/pennlibs-iiif-img/pennlibs-iiif-img';
+export { defineCustomElement as defineCustomElementPennlibsIiifImg } from './pennlibs-iiif-img';
 
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { PennlibsAutocomplete, defineCustomElement as defineCustomElementPennlibsAutocomplete } from './pennlibs-autocomplete.js';
 export { PennlibsBanner, defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner.js';
 export { PennlibsChat, defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat.js';
@@ -7,6 +7,7 @@ export { PennlibsFeedback, defineCustomElement as defineCustomElementPennlibsFee
 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';
+export { PennlibsIiifImg, defineCustomElement as defineCustomElementPennlibsIiifImg } from './pennlibs-iiif-img.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/components/pennlibs-autocomplete.js

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
 
 const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.activated = createEvent(this, "pl:activated", 7);
         this.showSuggestions = false;
@@ -144,22 +146,19 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
     }
     handleEscape() {
         this.reset();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     handleEnter() {
         if (this.canSelect())
@@ -181,16 +180,22 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
         if (this.currentIndex < 0)
             return;
         const selectedOption = this.options[this.currentIndex];
+        this.applySelection(selectedOption);
+        this.emitActivation(selectedOption);
+        this.closeSuggestions();
+    }
+    applySelection(option) {
         const input = this.getInput();
-        if (input) {
-            input.value = selectedOption.value;
-            this.originalValue = selectedOption.value;
-        }
+        if (!input)
+            return;
+        input.value = option.value;
+        this.originalValue = option.value;
+    }
+    emitActivation(option) {
         this.activated.emit({
             index: this.currentIndex,
-            value: selectedOption.value
+            value: option.value
         });
-        this.closeSuggestions();
     }
     openSuggestions() {
         if (!this.isInputFocused())
@@ -202,12 +207,11 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
-        this.syncInputState();
+        this.syncAriaAttributes();
     }
     closeSuggestions() {
         this.reset();
-        this.syncInputState();
-        this.syncInputValueToSelection();
+        this.syncAll();
     }
     deferCloseSuggestions() {
         if (this.blurTimeout)
@@ -232,7 +236,7 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
         const active = document.activeElement;
         return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
     }
-    syncInputState() {
+    syncAriaAttributes() {
         const input = this.getInput();
         if (!input)
             return;
@@ -247,6 +251,10 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
             ? this.options[this.currentIndex].value
             : this.originalValue;
     }
+    syncAll() {
+        this.syncAriaAttributes();
+        this.syncInputValueToSelection();
+    }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
@@ -265,11 +273,11 @@ const Autocomplete = /*@__PURE__*/ proxyCustomElement(class Autocomplete extends
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (h("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, h("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (h("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return this; }
     static get style() { return pennlibsAutocompleteCss; }
-}, [1, "pennlibs-autocomplete", {
+}, [257, "pennlibs-autocomplete", {
         "for": [1],
         "showSuggestions": [32],
         "currentIndex": [32],

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

@@ -1 +1 @@
-{"file":"pennlibs-autocomplete.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-autocomplete/pennlibs-autocomplete.css?tag=pennlibs-autocomplete&encapsulation=shadow","src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}","import { Component, h, Element, State, Listen, Event, EventEmitter, Prop } from '@stencil/core';\n\ninterface ListboxOption {\n  id: string;\n  html: string;\n  value: string;\n}\n\nexport interface ActivatedEvent {\n  value: string;\n  index: number;\n}\n\n@Component({\n  tag: 'pennlibs-autocomplete',\n  styleUrl: 'pennlibs-autocomplete.css',\n  shadow: true\n})\nexport class Autocomplete {\n  @Element() el!: HTMLElement;\n\n  @Prop() for?: string;\n\n  @State() showSuggestions: boolean = false;\n  @State() currentIndex: number = -1;\n  @State() originalValue: string = '';\n  @State() options: ListboxOption[] = [];\n\n  @Event({ eventName: 'pl:activated' }) activated: EventEmitter<ActivatedEvent>;\n\n  private blurTimeout: number;\n  private mutationObserver: MutationObserver;\n  private readonly keyHandlerMap = {\n    'Escape': () => this.handleEscape(),\n    'ArrowDown': () => this.handleArrowDown(),\n    'ArrowUp': () => this.handleArrowUp(),\n    'Enter': () => this.handleEnter()\n  };\n\n  componentWillLoad() {\n    this.options = this.parseOptionsFromDOM();\n  }\n\n  componentDidLoad() {\n    this.setupInput();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n  }\n\n  private setupMutationObserver(): void {\n    this.mutationObserver = new MutationObserver(() => {\n      this.options = this.parseOptionsFromDOM();\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n  }\n\n  private parseOptionsFromDOM(): ListboxOption[] {\n    const listbox = this.findListbox();\n    if (!listbox) return [];\n\n    const elements = Array.from(listbox.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n    return elements.map((el, i) => this.createOption(el, i));\n  }\n\n  private findListbox(): HTMLOListElement | null {\n    return Array.from(this.el.children).find(child =>\n      child.matches('ol[role=\"listbox\"]')\n    ) as HTMLOListElement;\n  }\n\n  private createOption(element: HTMLElement, index: number): ListboxOption {\n    return {\n      id: element.id || `option-${index}`,\n      html: element.innerHTML,\n      value: element.getAttribute('data-pl-value') || element.textContent?.trim() || ''\n    };\n  }\n\n  private getInput(): HTMLInputElement | null {\n    if (!this.for) return null;\n\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"start\"]') as HTMLSlotElement;\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return null;\n\n    const input = assignedElements[0].querySelector(`input#${this.for}`) as HTMLInputElement;\n    return input || null;\n  }\n\n  private isInputFocused(): boolean {\n    return this.getInput() === document.activeElement;\n  }\n\n  private isTrackedInput(input: HTMLInputElement): boolean {\n    return input?.getAttribute('data-pl-autocomplete-connected') === 'true' &&\n           this.el.contains(input);\n  }\n\n  private setupInput(): void {\n    if (!this.for) {\n      console.warn('<pennlibs-autocomplete> Missing \"for\" attribute. Please add for=\"input-id\" to specify which input to attach to.');\n      return;\n    }\n\n    const input = this.getInput();\n    if (!input) {\n      console.warn(`<pennlibs-autocomplete> No input element found with id=\"${this.for}\". Ensure an input with this id exists.`);\n      return;\n    }\n\n    this.setComboboxAttributes(input);\n    input.setAttribute('data-pl-autocomplete-connected', 'true');\n  }\n\n  private setComboboxAttributes(input: HTMLInputElement): void {\n    input.setAttribute('role', 'combobox');\n    input.setAttribute('aria-autocomplete', 'list');\n    input.setAttribute('aria-expanded', 'false');\n    input.setAttribute('aria-controls', 'listbox');\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.options = this.parseOptionsFromDOM();\n    this.setupInput();\n  }\n\n  @Listen('input', { target: 'body' })\n  handleInputEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) {\n      this.currentIndex = -1;\n      this.openSuggestions();\n    }\n  }\n\n  @Listen('focus', { target: 'body' })\n  handleFocusEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.showSuggestionsPanel();\n  }\n\n  @Listen('blur', { target: 'body' })\n  handleBlurEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.deferCloseSuggestions();\n  }\n\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    if (this.isFocusLeavingComponent(event)) this.closeSuggestions();\n  }\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isInputFocused()) return;\n    if (event.metaKey || event.ctrlKey) return; // Ignore keyboard shortcuts\n\n    const handler = this.keyHandlerMap[event.key];\n    if (handler) {\n      // Don't prevent default for Enter - allow form submission\n      if (event.key !== 'Enter') {\n        event.preventDefault();\n      }\n      handler();\n    }\n  }\n\n  private handleEscape() {\n    this.reset();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleArrowDown() {\n    if (!this.showSuggestions) return;\n    this.moveNext();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleArrowUp() {\n    if (!this.showSuggestions) return;\n    this.movePrevious();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private handleEnter() {\n    if (this.canSelect()) this.selectCurrent();\n  }\n\n  // Navigation\n  private moveNext(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;\n  }\n\n  private movePrevious(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;\n  }\n\n  private canSelect(): boolean {\n    return this.showSuggestions && this.currentIndex >= 0;\n  }\n\n  private selectCurrent(): void {\n    if (this.currentIndex < 0) return;\n\n    const selectedOption = this.options[this.currentIndex];\n    const input = this.getInput();\n\n    if (input) {\n      input.value = selectedOption.value;\n      this.originalValue = selectedOption.value;\n    }\n\n    this.activated.emit({\n      index: this.currentIndex,\n      value: selectedOption.value\n    });\n\n    this.closeSuggestions();\n  }\n\n  private handleOptionClick = (index: number): void => {\n    this.currentIndex = index;\n    this.selectCurrent();\n  }\n\n  private openSuggestions(): void {\n    if (!this.isInputFocused()) return;\n\n    const input = this.getInput();\n    if (input) this.originalValue = input.value;\n\n    this.showSuggestionsPanel();\n  }\n\n  private showSuggestionsPanel(): void {\n    this.showSuggestions = true;\n    this.syncInputState();\n  }\n\n  private closeSuggestions(): void {\n    this.reset();\n    this.syncInputState();\n    this.syncInputValueToSelection();\n  }\n\n  private deferCloseSuggestions(): void {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.isFocusOutsideComponent()) this.closeSuggestions();\n    }, 150) as unknown as number;\n  }\n\n  private reset(): void {\n    this.showSuggestions = false;\n    this.currentIndex = -1;\n  }\n\n  private isFocusLeavingComponent(event: FocusEvent): boolean {\n    const target = event.relatedTarget as HTMLElement;\n    return !target ||\n           (!this.el.contains(target) && !this.el.shadowRoot?.contains(target));\n  }\n\n  private isFocusOutsideComponent(): boolean {\n    const active = document.activeElement;\n    return !this.el.shadowRoot?.contains(active) && active !== this.getInput();\n  }\n\n  private syncInputState(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    this.updateAriaExpanded(input);\n    this.updateAriaActiveDescendant(input);\n  }\n\n  private syncInputValueToSelection(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length\n      ? this.options[this.currentIndex].value\n      : this.originalValue;\n  }\n\n  private updateAriaExpanded(input: HTMLInputElement): void {\n    input.setAttribute('aria-expanded', this.showSuggestions.toString());\n  }\n\n  private updateAriaActiveDescendant(input: HTMLInputElement): void {\n    const hasSelection = this.showSuggestions &&\n                        this.currentIndex >= 0 &&\n                        this.currentIndex < this.options.length;\n    if (hasSelection) {\n      input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);\n    } else {\n      input.removeAttribute('aria-activedescendant');\n    }\n  }\n\n  private shouldShowListbox(): boolean {\n    return this.showSuggestions && this.options.length > 0 && this.isInputFocused();\n  }\n\n  render() {\n    return (\n      <div>\n        <slot name=\"start\" />\n        {this.shouldShowListbox() && (\n          <ol role=\"listbox\" id=\"listbox\">\n            {this.options.map((option, index) => (\n              <li\n                role=\"option\"\n                id={option.id}\n                aria-selected={this.currentIndex === index ? 'true' : 'false'}\n                tabindex=\"-1\"\n                onClick={() => this.handleOptionClick(index)}\n                innerHTML={option.html}\n              />\n            ))}\n          </ol>\n        )}\n      </div>\n    )\n  }\n}\n"],"version":3}
+{"file":"pennlibs-autocomplete.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-autocomplete/pennlibs-autocomplete.css?tag=pennlibs-autocomplete&encapsulation=shadow","src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}","import { Component, h, Element, State, Listen, Event, EventEmitter, Prop } from '@stencil/core';\n\ninterface ListboxOption {\n  id: string;\n  html: string;\n  value: string;\n}\n\nexport interface ActivatedEvent {\n  value: string;\n  index: number;\n}\n\n/**\n * Offer predictive suggestions while typing your search query.\n *\n * @slot start - Content to display at the start (top).\n */\n@Component({\n  tag: 'pennlibs-autocomplete',\n  styleUrl: 'pennlibs-autocomplete.css',\n  shadow: true\n})\nexport class Autocomplete {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The `id` of the input that this autocomplete is attached to.\n   * @prop for\n   */\n  @Prop() for?: string;\n\n  @State() showSuggestions: boolean = false;\n  @State() currentIndex: number = -1;\n  @State() originalValue: string = '';\n  @State() options: ListboxOption[] = [];\n\n  /**\n   * Emitted when a user activates (selects) an autocomplete suggestion.\n   * @event pl:activated\n   */\n  @Event({ eventName: 'pl:activated' }) activated: EventEmitter<ActivatedEvent>;\n\n  private blurTimeout: number;\n  private mutationObserver: MutationObserver;\n  private readonly keyHandlerMap = {\n    'Escape': () => this.handleEscape(),\n    'ArrowDown': () => this.handleArrowDown(),\n    'ArrowUp': () => this.handleArrowUp(),\n    'Enter': () => this.handleEnter()\n  };\n\n  componentWillLoad() {\n    this.options = this.parseOptionsFromDOM();\n  }\n\n  componentDidLoad() {\n    this.setupInput();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n  }\n\n  private setupMutationObserver(): void {\n    this.mutationObserver = new MutationObserver(() => {\n      this.options = this.parseOptionsFromDOM();\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n  }\n\n  private parseOptionsFromDOM(): ListboxOption[] {\n    const listbox = this.findListbox();\n    if (!listbox) return [];\n\n    const elements = Array.from(listbox.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n    return elements.map((el, i) => this.createOption(el, i));\n  }\n\n  private findListbox(): HTMLOListElement | null {\n    return Array.from(this.el.children).find(child =>\n      child.matches('ol[role=\"listbox\"]')\n    ) as HTMLOListElement;\n  }\n\n  private createOption(element: HTMLElement, index: number): ListboxOption {\n    return {\n      id: element.id || `option-${index}`,\n      html: element.innerHTML,\n      value: element.getAttribute('data-pl-value') || element.textContent?.trim() || ''\n    };\n  }\n\n  private getInput(): HTMLInputElement | null {\n    if (!this.for) return null;\n\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"start\"]') as HTMLSlotElement;\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return null;\n\n    const input = assignedElements[0].querySelector(`input#${this.for}`) as HTMLInputElement;\n    return input || null;\n  }\n\n  private isInputFocused(): boolean {\n    return this.getInput() === document.activeElement;\n  }\n\n  private isTrackedInput(input: HTMLInputElement): boolean {\n    return input?.getAttribute('data-pl-autocomplete-connected') === 'true' &&\n           this.el.contains(input);\n  }\n\n  private setupInput(): void {\n    if (!this.for) {\n      console.warn('<pennlibs-autocomplete> Missing \"for\" attribute. Please add for=\"input-id\" to specify which input to attach to.');\n      return;\n    }\n\n    const input = this.getInput();\n    if (!input) {\n      console.warn(`<pennlibs-autocomplete> No input element found with id=\"${this.for}\". Ensure an input with this id exists.`);\n      return;\n    }\n\n    this.setComboboxAttributes(input);\n    input.setAttribute('data-pl-autocomplete-connected', 'true');\n  }\n\n  private setComboboxAttributes(input: HTMLInputElement): void {\n    input.setAttribute('role', 'combobox');\n    input.setAttribute('aria-autocomplete', 'list');\n    input.setAttribute('aria-expanded', 'false');\n    input.setAttribute('aria-controls', 'listbox');\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.options = this.parseOptionsFromDOM();\n    this.setupInput();\n  }\n\n  @Listen('input', { target: 'body' })\n  handleInputEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) {\n      this.currentIndex = -1;\n      this.openSuggestions();\n    }\n  }\n\n  @Listen('focus', { target: 'body' })\n  handleFocusEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.showSuggestionsPanel();\n  }\n\n  @Listen('blur', { target: 'body' })\n  handleBlurEvent(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (this.isTrackedInput(input)) this.deferCloseSuggestions();\n  }\n\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    if (this.isFocusLeavingComponent(event)) this.closeSuggestions();\n  }\n\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isInputFocused()) return;\n    if (event.metaKey || event.ctrlKey) return; // Ignore keyboard shortcuts\n\n    const handler = this.keyHandlerMap[event.key];\n    if (handler) {\n      // Don't prevent default for Enter - allow form submission\n      if (event.key !== 'Enter') {\n        event.preventDefault();\n      }\n      handler();\n    }\n  }\n\n  private handleEscape() {\n    this.reset();\n    this.syncAll();\n  }\n\n  private handleArrowDown() {\n    if (!this.showSuggestions) return;\n    this.moveNext();\n    this.syncAll();\n  }\n\n  private handleArrowUp() {\n    if (!this.showSuggestions) return;\n    this.movePrevious();\n    this.syncAll();\n  }\n\n  private handleEnter() {\n    if (this.canSelect()) this.selectCurrent();\n  }\n\n  // Navigation\n  private moveNext(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;\n  }\n\n  private movePrevious(): void {\n    const lastIndex = this.options.length - 1;\n    this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;\n  }\n\n  private canSelect(): boolean {\n    return this.showSuggestions && this.currentIndex >= 0;\n  }\n\n  private selectCurrent(): void {\n    if (this.currentIndex < 0) return;\n\n    const selectedOption = this.options[this.currentIndex];\n    this.applySelection(selectedOption);\n    this.emitActivation(selectedOption);\n    this.closeSuggestions();\n  }\n\n  private applySelection(option: ListboxOption): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = option.value;\n    this.originalValue = option.value;\n  }\n\n  private emitActivation(option: ListboxOption): void {\n    this.activated.emit({\n      index: this.currentIndex,\n      value: option.value\n    });\n  }\n\n  private handleOptionClick = (index: number): void => {\n    this.currentIndex = index;\n    this.selectCurrent();\n  }\n\n  private openSuggestions(): void {\n    if (!this.isInputFocused()) return;\n\n    const input = this.getInput();\n    if (input) this.originalValue = input.value;\n\n    this.showSuggestionsPanel();\n  }\n\n  private showSuggestionsPanel(): void {\n    this.showSuggestions = true;\n    this.syncAriaAttributes();\n  }\n\n  private closeSuggestions(): void {\n    this.reset();\n    this.syncAll();\n  }\n\n  private deferCloseSuggestions(): void {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.isFocusOutsideComponent()) this.closeSuggestions();\n    }, 150) as unknown as number;\n  }\n\n  private reset(): void {\n    this.showSuggestions = false;\n    this.currentIndex = -1;\n  }\n\n  private isFocusLeavingComponent(event: FocusEvent): boolean {\n    const target = event.relatedTarget as HTMLElement;\n    return !target ||\n           (!this.el.contains(target) && !this.el.shadowRoot?.contains(target));\n  }\n\n  private isFocusOutsideComponent(): boolean {\n    const active = document.activeElement;\n    return !this.el.shadowRoot?.contains(active) && active !== this.getInput();\n  }\n\n  private syncAriaAttributes(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    this.updateAriaExpanded(input);\n    this.updateAriaActiveDescendant(input);\n  }\n\n  private syncInputValueToSelection(): void {\n    const input = this.getInput();\n    if (!input) return;\n\n    input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length\n      ? this.options[this.currentIndex].value\n      : this.originalValue;\n  }\n\n  private syncAll(): void {\n    this.syncAriaAttributes();\n    this.syncInputValueToSelection();\n  }\n\n  private updateAriaExpanded(input: HTMLInputElement): void {\n    input.setAttribute('aria-expanded', this.showSuggestions.toString());\n  }\n\n  private updateAriaActiveDescendant(input: HTMLInputElement): void {\n    const hasSelection = this.showSuggestions &&\n                        this.currentIndex >= 0 &&\n                        this.currentIndex < this.options.length;\n    if (hasSelection) {\n      input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);\n    } else {\n      input.removeAttribute('aria-activedescendant');\n    }\n  }\n\n  private shouldShowListbox(): boolean {\n    return this.showSuggestions && this.options.length > 0 && this.isInputFocused();\n  }\n\n  render() {\n    return (\n      <div>\n        <slot name=\"start\" />\n        {this.shouldShowListbox() && (\n          <ol role=\"listbox\" id=\"listbox\">\n            {this.options.map((option, index) => (\n              <li\n                role=\"option\"\n                id={option.id}\n                aria-selected={this.currentIndex === index ? 'true' : 'false'}\n                tabindex=\"-1\"\n                onClick={() => this.handleOptionClick(index)}\n                innerHTML={option.html}\n              />\n            ))}\n          </ol>\n        )}\n      </div>\n    )\n  }\n}\n"],"version":3}

package/dist/components/pennlibs-banner.js

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/
 const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-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(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-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(--pl-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() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
@@ -14,7 +16,7 @@ const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return pennlibsBannerCss; }
-}, [1, "pennlibs-banner"]);
+}, [257, "pennlibs-banner"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,2kCAA2kC;;MCQxlC,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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --max-width: 1080px;\n}\n\n.viewport-margins {\n  max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.skip-to-content-link {\n  position: absolute;\n  transform: translateY(-300%);\n  background: var(--pl-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(--pl-color-fg-default);\n}\n\n.universal-nav {\n  background: var(--pl-color-penn-blue);\n}\n\n.universal-nav ul {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  scrollbar-color: var(--pl-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(--pl-color-fg-subtle-on-emphasis);\n  padding: 0.5em;\n  text-decoration: none;\n}\n\n.universal-nav a:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: .15em;\n}\n\n.universal-nav__shield-image {\n  vertical-align: sub;\n  height: 1em;\n  padding-right: 0.5em;\n  height: auto;\n}\n","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-banner',\n  styleUrl: 'pennlibs-banner.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Banner {\n  render() {\n    const shieldImageSrc = getAssetPath('./assets/penn-shield.png');\n\n    return (\n      <nav\n        class=\"universal-nav\"\n        aria-label=\"Penn Libraries Websites\"\n      >\n        <a href=\"#main-content\" class=\"skip-to-content-link\">Skip to content</a>\n        <div class=\"viewport-margins\">\n          <ul>\n            <li>\n              <a href=\"https://www.library.upenn.edu/\" class=\"universal-nav__penn-libraries\">\n                <img src={shieldImageSrc} class=\"universal-nav__shield-image\" width=\"16\" height=\"16\" />Penn Libraries\n              </a>\n            </li>\n            <li><a href=\"https://franklin.library.upenn.edu/\">Franklin</a></li>\n            <li><a href=\"https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview\">Account</a></li>\n            <li><a href=\"https://guides.library.upenn.edu/\">Guides</a></li>\n            <li><a href=\"https://colenda.library.upenn.edu/\">Colenda</a></li>\n            <li><a href=\"https://faq.library.upenn.edu/ask\">Ask chat</a></li>\n          </ul>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,2kCAA2kC;;MCQxlC,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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --max-width: 1080px;\n}\n\n.viewport-margins {\n  max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.skip-to-content-link {\n  position: absolute;\n  transform: translateY(-300%);\n  background: var(--pl-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(--pl-color-fg-default);\n}\n\n.universal-nav {\n  background: var(--pl-color-penn-blue);\n}\n\n.universal-nav ul {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  scrollbar-color: var(--pl-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(--pl-color-fg-subtle-on-emphasis);\n  padding: 0.5em;\n  text-decoration: none;\n}\n\n.universal-nav a:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: .15em;\n}\n\n.universal-nav__shield-image {\n  vertical-align: sub;\n  height: 1em;\n  padding-right: 0.5em;\n  height: auto;\n}\n","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-banner',\n  styleUrl: 'pennlibs-banner.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Banner {\n  render() {\n    const shieldImageSrc = getAssetPath('./assets/penn-shield.png');\n\n    return (\n      <nav\n        class=\"universal-nav\"\n        aria-label=\"Penn Libraries Websites\"\n      >\n        <a href=\"#main-content\" class=\"skip-to-content-link\">Skip to content</a>\n        <div class=\"viewport-margins\">\n          <ul>\n            <li>\n              <a href=\"https://www.library.upenn.edu/\" class=\"universal-nav__penn-libraries\">\n                <img src={shieldImageSrc} class=\"universal-nav__shield-image\" width=\"16\" height=\"16\" />Penn Libraries\n              </a>\n            </li>\n            <li><a href=\"https://franklin.library.upenn.edu/\">Franklin</a></li>\n            <li><a href=\"https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview\">Account</a></li>\n            <li><a href=\"https://guides.library.upenn.edu/\">Guides</a></li>\n            <li><a href=\"https://colenda.library.upenn.edu/\">Colenda</a></li>\n            <li><a href=\"https://faq.library.upenn.edu/ask\">Ask chat</a></li>\n          </ul>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pennlibs-chat.js

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const pennlibsChatCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  line-height: normal;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\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(--pl-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(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-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() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.libchat_url = "https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857";
         this.href = "";
@@ -17,7 +19,7 @@ const Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
         return (h("a", { key: '89edeaea008aae32c102d5782e15f09799170956', href: this.href, target: "_blank", "aria-label": "Chat", id: "pennlibs-chat" }, h("svg", { key: '496ef16ba01331ca8601e4549e9c715f970a095e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 82 82" }, h("path", { key: '6bd0f09e3e80faf8ecfefeed9ddc2aa9dbc08eff', 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: '8ac87f21317effb697c28cfcc3ebf288ceb9db5e', 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: '571e0cfea414ce512ec915e03f891d0b311caedd' }, "Chat")));
     }
     static get style() { return pennlibsChatCss; }
-}, [1, "pennlibs-chat", {
+}, [257, "pennlibs-chat", {
         "href": [32]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4qCAA4qC;;MCOvrC,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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  line-height: normal;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\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(--pl-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(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-chat',\n  styleUrl: 'pennlibs-chat.css',\n  shadow: true\n})\nexport class Chat {\n  libchat_url = \"https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857\";\n  @State() href = \"\";\n\n  connectedCallback() {\n    this.href = this.libchat_url + '?referer=' + window.location.href;\n  }\n\n  render() {\n    return (\n      <a\n          href={this.href}\n          target=\"_blank\"\n          aria-label=\"Chat\"\n          id=\"pennlibs-chat\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 82 82\"><path fill=\"#fff\" d=\"M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z\"/><path fill=\"#011f5b\" d=\"M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z\"/></svg>\n          <span>Chat</span>\n        </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4qCAA4qC;;MCOvrC,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;AALjB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;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(--pl-font-family);\n  font-size: var(--pl-font-size);\n  line-height: normal;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\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(--pl-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(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-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-fallback-img.js

@@ -1,33 +1,4 @@
-import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
-
-const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
-
-const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        const shieldImg = getAssetPath('./assets/simplified-shield.webp');
-        return (h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    static get style() { return pennlibsFallbackImgCss; }
-}, [1, "pennlibs-fallback-img"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pennlibs-fallback-img"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pennlibs-fallback-img":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NoImage);
-            }
-            break;
-    } });
-}
+import { N as NoImage, d as defineCustomElement$1 } from './pennlibs-fallback-img2.js';
 
 const PennlibsFallbackImg = NoImage;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/pennlibs-fallback-img.js.map

@@ -1 +1 @@
-{"file":"pennlibs-fallback-img.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,iCAAiC,CAAC;QAEjE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: var(--pl-color-bg-subtle);\n  aspect-ratio: 3/2;\n}\n\n.no-image__img {\n  width: 100%;\n  max-width: 150px;\n  filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-fallback-img',\n  styleUrl: 'pennlibs-fallback-img.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class NoImage {\n  render() {\n    const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n    return (\n      <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n    );\n  }\n} "],"version":3}
+{"file":"pennlibs-fallback-img.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pennlibs-fallback-img2.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
+
+const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
+
+const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        const shieldImg = getAssetPath('./assets/simplified-shield.webp');
+        return (h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return pennlibsFallbackImgCss; }
+}, [257, "pennlibs-fallback-img"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-fallback-img"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-fallback-img":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NoImage);
+            }
+            break;
+    } });
+}
+
+export { NoImage as N, defineCustomElement as d };
+//# sourceMappingURL=pennlibs-fallback-img2.js.map
+
+//# sourceMappingURL=pennlibs-fallback-img2.js.map

package/dist/components/pennlibs-fallback-img2.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-fallback-img2.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,iCAAiC,CAAC;QAEjE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: var(--pl-color-bg-subtle);\n  aspect-ratio: 3/2;\n}\n\n.no-image__img {\n  width: 100%;\n  max-width: 150px;\n  filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-fallback-img',\n  styleUrl: 'pennlibs-fallback-img.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class NoImage {\n  render() {\n    const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n    return (\n      <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n    );\n  }\n} "],"version":3}

package/dist/components/pennlibs-feedback.js

@@ -6,9 +6,11 @@ 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() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.feedbackEvent = createEvent(this, "pennlibs-feedback", 7);
         this.error = false;
@@ -52,7 +54,7 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
         return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes", h("span", { class: "visually-hidden" }, ", I found what I need."))), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No", h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
     }
     static get style() { return pennlibsFeedbackCss; }
-}, [1, "pennlibs-feedback", {
+}, [257, "pennlibs-feedback", {
         "error": [32],
         "answer": [32]
     }]);

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

@@ -1 +1 @@
-{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,muDAAmuD;;ACE/vD,MAAM,oBAAoB,GAAG,0BAA0B;AACvD,MAAM,iBAAiB,GAAG,6BAA6B;AACvD,MAAM,0BAA0B,GAAG,yBAAyB;MAO/CA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;;AAMW,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAM,CAAA,MAAA,GAAuB,SAAS;AA0FhD;IAxEC,iBAAiB,GAAA;AACf,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW;;AAGtE,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE;YACtD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM;;;IAI9E,kBAAkB,GAAA;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;AAC/C,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;;aACrB,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;AAI7B,IAAA,cAAc,CAAC,MAAc,EAAA;;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAEpD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,QAAQ,EAAE,iBAAiB;AAC3B,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;AACzB,YAAA,WAAW,EAAE,CAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,KAAI,SAAS;AACnE,YAAA,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI;AAC9B,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,EAAC,IAAI,EAAA,EAEb,CAA0B,CAAA,QAAA,EAAA,IAAA,EAAA,WAAA,CAAA,EACxB,kCAAA,CAAA,CACA;;AAIV,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;AACxB,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,QAAQ,EAAC,IAAI,EAAA,SAEV,CAAgC,CAAA,QAAA,EAAA,IAAA,EAAA,iBAAA,CAAA,wDAAkD,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,0CAA0C,EAAkC,EAAA,+BAAA,CAAA,EACvK,GAAA,CAAA,CACA;;QAIV,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,iBAAiB,CAAM,EAC5B,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAA,kBAE/C,CAAA,CAAA,MAAA,EAAA,IAAA,SAAS,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAAA,wBAAA,CAA8B,CAAO,CACpE,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAA,kBAE9C,CAAA,CAAA,MAAA,EAAA,IAAA,QAAQ,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAA,8BAAA,CAAoC,CAAO,CACzE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;","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(--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}
+{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,muDAAmuD;;ACE/vD,MAAM,oBAAoB,GAAG,0BAA0B;AACvD,MAAM,iBAAiB,GAAG,6BAA6B;AACvD,MAAM,0BAA0B,GAAG,yBAAyB;MAO/CA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAMW,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAM,CAAA,MAAA,GAAuB,SAAS;AA0FhD;IAxEC,iBAAiB,GAAA;AACf,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW;;AAGtE,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE;YACtD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM;;;IAI9E,kBAAkB,GAAA;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;AAC/C,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;;aACrB,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;AAI7B,IAAA,cAAc,CAAC,MAAc,EAAA;;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAEpD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,QAAQ,EAAE,iBAAiB;AAC3B,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;AACzB,YAAA,WAAW,EAAE,CAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,KAAI,SAAS;AACnE,YAAA,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI;AAC9B,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,EAAC,IAAI,EAAA,EAEb,CAA0B,CAAA,QAAA,EAAA,IAAA,EAAA,WAAA,CAAA,EACxB,kCAAA,CAAA,CACA;;AAIV,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;AACxB,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,QAAQ,EAAC,IAAI,EAAA,SAEV,CAAgC,CAAA,QAAA,EAAA,IAAA,EAAA,iBAAA,CAAA,wDAAkD,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,0CAA0C,EAAkC,EAAA,+BAAA,CAAA,EACvK,GAAA,CAAA,CACA;;QAIV,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,iBAAiB,CAAM,EAC5B,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAA,kBAE/C,CAAA,CAAA,MAAA,EAAA,IAAA,SAAS,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAAA,wBAAA,CAA8B,CAAO,CACpE,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAA,kBAE9C,CAAA,CAAA,MAAA,EAAA,IAAA,QAAQ,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAA,8BAAA,CAAoC,CAAO,CACzE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;","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(--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/components/pennlibs-footer.js

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/
 const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 5.75rem;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.5em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     componentWillLoad() {
@@ -41,7 +43,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }
     static get style() { return pennlibsFooterCss; }
-}, [1, "pennlibs-footer", {
+}, [257, "pennlibs-footer", {
         "navigationByChildren": [32]
     }]);
 function defineCustomElement$1() {