npm - @penn-libraries/web - Versions diffs - 1.2.0-dev.0 → 1.2.0-dev.2 - Mend

@penn-libraries/web 1.2.0-dev.0 → 1.2.0-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/dist/web/pennlibs-fallback-img.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pennlibs-fallback-img.entry.esm.js","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} "],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,GAAA,MAAA;;;;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;;;;;;;;"}

package/dist/web/pennlibs-iiif-img.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pennlibs-iiif-img.entry.esm.js","sources":["src/components/pennlibs-iiif-img/pennlibs-iiif-img.css?tag=pennlibs-iiif-img&encapsulation=shadow","src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n max-width: 100%;\n align-self: flex-start;\n aspect-ratio: var(--aspect-ratio, auto);\n}\n\npicture {\n display: block;\n line-height: 0;\n}\n\n.iiif-img {\n display: block;\n width: 100%;\n max-width: 100%;\n height: auto;\n opacity: 0;\n filter: blur(5px);\n transition: opacity 0.15s ease-in, filter 0.15s ease-in;\n}\n\n.iiif-img.loaded {\n opacity: 1;\n filter: blur(0);\n}\n\n.fallback-container {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.fallback-container pennlibs-fallback-img {\n width: 100%;\n height: 100%;\n}\n\npennlibs-fallback-img {\n display: block;\n width: 100%;\n height: 100%;\n}\n","import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITIES = [1, 1.5, 2] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Measures its own rendered width and automatically generates optimal image sources at\n * multiple pixel densities (1x, 1.5x, 2x) 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 * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies\n * a centered crop based on the source image dimensions and sets the CSS aspect-ratio\n * property for layout reservation.\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({ reflect: true }) 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 @State() imageDimensions?: { width: number; height: number };\n @State() observedWidth?: number;\n\n private fetchedUuid?: string; // Track which UUID these dimensions belong to\n\n private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n /**\n * Fetch IIIF image info to get actual dimensions.\n */\n private async fetchImageInfo(): Promise<void> {\n try {\n const currentUuid = this.uuid; // Capture current UUID\n const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;\n const response = await fetch(infoUrl);\n if (!response.ok) {\n console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);\n return;\n }\n const info = await response.json();\n\n // Only update dimensions if UUID hasn't changed during fetch\n // (protects against race conditions if component updates)\n if (this.uuid === currentUuid) {\n this.imageDimensions = {\n width: info.width,\n height: info.height,\n };\n this.fetchedUuid = currentUuid;\n }\n } catch (error) {\n console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);\n }\n }\n\n /**\n * Check if a region value matches aspect ratio format (e.g., \"16:9\", \"4:3\", \"3:2\").\n */\n private isAspectRatio(value: string): boolean {\n return /^\\d+:\\d+$/.test(value);\n }\n\n /**\n * Set CSS custom property for aspect ratio on the host element.\n */\n private setAspectRatioCss(aspectRatio: string): void {\n const [widthRatio, heightRatio] = aspectRatio.split(':');\n this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);\n }\n\n /**\n * Clear CSS custom property for aspect ratio from the host element.\n */\n private clearAspectRatioCss(): void {\n this.hostElement.style.removeProperty('--aspect-ratio');\n }\n\n /**\n * Format a number for IIIF percentage values (remove trailing zeros).\n * IIIF spec requires no trailing zeros per section 4.7.\n */\n private formatPercent(value: number): string {\n return value.toFixed(2).replace(/\\.?0+$/, '');\n }\n\n /**\n * Calculate a centered crop region for a given aspect ratio.\n * Requires actual image dimensions to calculate correctly.\n * @param aspectRatio - The target aspect ratio (e.g., \"3:2\" or \"2:3\")\n * @returns A IIIF percentage-based region string (e.g., \"pct:0,16.67,100,66.67\")\n */\n private calculateCenteredCrop(aspectRatio: string): string {\n if (!this.imageDimensions) {\n throw new Error('Image dimensions required for aspect ratio calculation');\n }\n\n const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);\n const targetRatio = widthRatio / heightRatio;\n const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;\n\n // Determine if we need to crop width or height\n if (sourceRatio > targetRatio) {\n // Source is wider than target - crop left and right\n const widthPercent = (targetRatio / sourceRatio) * 100;\n const xOffset = (100 - widthPercent) / 2;\n return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;\n } else {\n // Source is taller than target - crop top and bottom\n const heightPercent = (sourceRatio / targetRatio) * 100;\n const yOffset = (100 - heightPercent) / 2;\n return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;\n }\n }\n\n /**\n * Get the region parameter for the IIIF URL.\n */\n private getRegionParam(): string {\n // Handle custom aspect ratios\n let regionParam = this.region || 'full';\n if (this.isAspectRatio(regionParam)) {\n // Only apply crop if we have dimensions for the current UUID\n if (this.imageDimensions && this.fetchedUuid === this.uuid) {\n regionParam = this.calculateCenteredCrop(regionParam);\n } else {\n // Use full image until dimensions are loaded\n regionParam = 'full';\n }\n }\n\n return regionParam;\n }\n\n private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n const sizeParam = width ? `${width},` : 'max';\n const regionParam = this.getRegionParam();\n return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n }\n\n private generateSrcset(baseWidth: number, format: ImageFormat): string {\n return PIXEL_DENSITIES.map(density => {\n const width = Math.round(baseWidth * density);\n const url = this.buildIIIFUrl(width, format);\n return `${url} ${density}x`;\n }).join(', ');\n }\n\n\n private handleLoad = () => {\n this.isLoaded = true;\n };\n\n private handleError = () => {\n this.hasError = true;\n };\n\n @Watch('region')\n handleRegionChange(newValue: string, oldValue: string) {\n // Only process if region actually changed\n if (newValue === oldValue) {\n return;\n }\n\n // If new region is an aspect ratio, set CSS and fetch info\n if (newValue && this.isAspectRatio(newValue)) {\n this.setAspectRatioCss(newValue);\n this.fetchImageInfo();\n } else {\n // Clear aspect ratio CSS if no longer using aspect ratio format\n this.clearAspectRatioCss();\n }\n }\n\n componentDidLoad() {\n // Set CSS aspect ratio and fetch image info if using aspect ratio format\n if (this.region && this.isAspectRatio(this.region)) {\n this.setAspectRatioCss(this.region);\n this.fetchImageInfo();\n }\n\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 });\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 // Show placeholder until we've measured the component width\n if (!this.observedWidth) {\n return <pennlibs-fallback-img />;\n }\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 return (\n <picture>\n <source\n type=\"image/webp\"\n srcSet={this.generateSrcset(this.observedWidth, 'webp')}\n />\n\n <img\n class={imgClasses}\n src={this.buildIIIFUrl(this.observedWidth, 'jpg')}\n srcSet={this.generateSrcset(this.observedWidth, 'jpg')}\n alt={this.alt}\n loading={this.loading}\n onLoad={this.handleLoad}\n onError={this.handleError}\n />\n </picture>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,ggBAAggB;;ACI3hB,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAU;MAmB/B,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAqBE;;;;;;;;;;;;;;;;;AAiBG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAEjD;;;;;;;;;AASG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,GAAG;AAE/B;;;;;;;;;;;;;AAaG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,SAAS;AAEpC;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAsB,MAAM;AAE3C;;;AAGG;AACK,QAAA,IAAY,CAAA,YAAA,GAAa,IAAI;AAE5B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMjB,QAAA,IAAO,CAAA,OAAA,GAAG,8CAA8C;AA2HjE,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAuFF;AAtNC;;AAEG;AACK,IAAA,MAAM,cAAc,GAAA;AAC1B,QAAA,IAAI;AACF,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;YAC9B,MAAM,OAAO,GAAG,CAAG,EAAA,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,WAAW,CAAA,UAAA,CAAY;AAC1D,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC;AACrC,YAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;AAChB,gBAAA,OAAO,CAAC,KAAK,CAAC,sCAAsC,WAAW,CAAA,CAAE,CAAC;gBAClE;;AAEF,YAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;;;AAIlC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;gBAC7B,IAAI,CAAC,eAAe,GAAG;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;iBACpB;AACD,gBAAA,IAAI,CAAC,WAAW,GAAG,WAAW;;;QAEhC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAsC,mCAAA,EAAA,IAAI,CAAC,IAAI,CAAG,CAAA,CAAA,EAAE,KAAK,CAAC;;;AAI5E;;AAEG;AACK,IAAA,aAAa,CAAC,KAAa,EAAA;AACjC,QAAA,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGhC;;AAEG;AACK,IAAA,iBAAiB,CAAC,WAAmB,EAAA;AAC3C,QAAA,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC;AACxD,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,UAAU,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,CAAC;;AAGxF;;AAEG;IACK,mBAAmB,GAAA;QACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;;AAGzD;;;AAGG;AACK,IAAA,aAAa,CAAC,KAAa,EAAA;AACjC,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;;AAG/C;;;;;AAKG;AACK,IAAA,qBAAqB,CAAC,WAAmB,EAAA;AAC/C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC;;AAG3E,QAAA,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;AACpE,QAAA,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW;AAC5C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM;;AAG5E,QAAA,IAAI,WAAW,GAAG,WAAW,EAAE;;YAE7B,MAAM,YAAY,GAAG,CAAC,WAAW,GAAG,WAAW,IAAI,GAAG;YACtD,MAAM,OAAO,GAAG,CAAC,GAAG,GAAG,YAAY,IAAI,CAAC;AACxC,YAAA,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAM,GAAA,EAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM;;aAChF;;YAEL,MAAM,aAAa,GAAG,CAAC,WAAW,GAAG,WAAW,IAAI,GAAG;YACvD,MAAM,OAAO,GAAG,CAAC,GAAG,GAAG,aAAa,IAAI,CAAC;AACzC,YAAA,OAAO,CAAS,MAAA,EAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;;;AAI1F;;AAEG;IACK,cAAc,GAAA;;AAEpB,QAAA,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM;AACvC,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;;AAEnC,YAAA,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,EAAE;AAC1D,gBAAA,WAAW,GAAG,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAC;;iBAChD;;gBAEL,WAAW,GAAG,MAAM;;;AAIxB,QAAA,OAAO,WAAW;;AAGZ,IAAA,YAAY,CAAC,KAAc,EAAE,MAAA,GAAsB,KAAK,EAAA;AAC9D,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,CAAG,EAAA,KAAK,CAAG,CAAA,CAAA,GAAG,KAAK;AAC7C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QACzC,OAAO,CAAA,EAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,WAAW,CAAA,CAAA,EAAI,SAAS,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE;;IAGtG,cAAc,CAAC,SAAiB,EAAE,MAAmB,EAAA;AAC3D,QAAA,OAAO,eAAe,CAAC,GAAG,CAAC,OAAO,IAAG;YACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;YAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC;AAC5C,YAAA,OAAO,CAAG,EAAA,GAAG,CAAI,CAAA,EAAA,OAAO,GAAG;AAC7B,SAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;IAaf,kBAAkB,CAAC,QAAgB,EAAE,QAAgB,EAAA;;AAEnD,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB;;;QAIF,IAAI,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;AAC5C,YAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;YAChC,IAAI,CAAC,cAAc,EAAE;;aAChB;;YAEL,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,gBAAgB,GAAA;;AAEd,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;AAClD,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC;YACnC,IAAI,CAAC,cAAc,EAAE;;AAGvB,QAAA,IAAI,gBAAgB,IAAI,MAAM,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AACjD,gBAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AAC3B,oBAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAExD,oBAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,wBAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;AAChC,wBAAA,IAAI,CAAC,cAAc,GAAG,SAAS;;;AAGrC,aAAC,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;;IAIjD,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;AAChC,YAAA,IAAI,CAAC,cAAc,GAAG,SAAS;;;IAInC,MAAM,GAAA;;AAEJ,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,OAAO,gCAAyB;;QAGlC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;AACtC,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAyB,CAAA,uBAAA,EAAA,IAAA,CAAA,CACrB;;AAIV,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI,CAAC;SAChB;QAED,QACE,CAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EACvD,CAAA,EAEF,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,EACjD,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,EACtD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,CACzB,CACM;;;;;;;;;;;"}

package/dist/web/web.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-RqnbThKP.js';
-export { s as setNonce } from './p-RqnbThKP.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-CNQ9-Wwh.js';
+export { s as setNonce } from './p-CNQ9-Wwh.js';
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-8ac5ef70",[[257,"pennlibs-banner"]]],["p-ce09ae2e",[[257,"pennlibs-chat",{"href":[32]}]]],["p-780e656e",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-b7b01d67",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-f37f3865",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}],[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-footer",{"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[257,"pennlibs-fallback-img"]]]], options);
+  return bootstrapLazy([["p-eb633f4d",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["p-3da26275",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-a34e1e3e",[[257,"pennlibs-banner"]]],["p-c96a3643",[[257,"pennlibs-chat",{"href":[32]}]]],["p-b6e686d1",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-662e4125",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map

package/hydrate/index.js CHANGED Viewed

@@ -1605,11 +1605,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if (memberName === "ref") {
-    if (newValue) {
-      newValue(elm);
-    }
-  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -1852,7 +1848,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         {
           checkSlotFallbackVisibility = true;
@@ -2065,12 +2060,6 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
-  }
-};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -3671,7 +3660,7 @@ class Chat {
     }; }
 }
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 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 pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 /**
  * A footer component for Penn Libraries websites that displays contact information,
@@ -3701,6 +3690,10 @@ const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  fon
 class Footer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * When true, shows a "Built with the Penn Libraries Design System" line below the footer.
+         */
+        this.showBuiltWith = false;
     }
     componentWillLoad() {
         this.setNavigationByChildren();
@@ -3725,12 +3718,12 @@ class Footer {
     }
     render() {
         const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
-        return (hAsync("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, hAsync("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
+        return (hAsync("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, hAsync("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, hAsync("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, hAsync("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, hAsync("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, hAsync("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, hAsync("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), hAsync("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, hAsync("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, hAsync("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", hAsync("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), hAsync("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, hAsync("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), hAsync("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, hAsync("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), hAsync("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, hAsync("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), hAsync("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, hAsync("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), hAsync("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, hAsync("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, hAsync("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), hAsync("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, hAsync("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), hAsync("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, hAsync("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), hAsync("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, hAsync("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, hAsync("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, hAsync("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, hAsync("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, hAsync("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, hAsync("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), hAsync("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, hAsync("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, hAsync("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", hAsync("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), hAsync("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, hAsync("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), hAsync("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, hAsync("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), hAsync("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, hAsync("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), hAsync("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, hAsync("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), hAsync("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, hAsync("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, hAsync("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), hAsync("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, hAsync("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), hAsync("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, hAsync("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), hAsync("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, hAsync("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
             this.navigationByChildren.map(section => (hAsync("section", null, hAsync("h2", { class: "website-footer__heading" }, section.heading), hAsync("ul", { class: "website-footer__links" }, section.links.map(link => (hAsync("li", null, hAsync("a", { href: link.href }, link.label))))))))
-        ]))), hAsync("div", { key: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, hAsync("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, hAsync("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, hAsync("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, hAsync("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), hAsync("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, hAsync("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), hAsync("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, hAsync("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), hAsync("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, hAsync("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), hAsync("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, hAsync("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), hAsync("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, hAsync("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+        ]))), hAsync("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, hAsync("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, hAsync("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, hAsync("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, hAsync("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), hAsync("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, hAsync("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), hAsync("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, hAsync("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), hAsync("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, hAsync("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), hAsync("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, hAsync("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), hAsync("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, hAsync("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (hAsync("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, hAsync("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", hAsync("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -3739,6 +3732,7 @@ class Footer {
         "$flags$": 265,
         "$tagName$": "pennlibs-footer",
         "$members$": {
+            "showBuiltWith": [4, "show-built-with"],
             "navigationByChildren": [32]
         },
         "$listeners$": undefined,
@@ -3818,7 +3812,7 @@ class Header {
         return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, hAsync("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (hAsync("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, hAsync("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, hAsync("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, hAsync("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? hAsync(LogoWhite, null) : hAsync(LogoBlue, null)), this.serviceName && (hAsync("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, hAsync("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && hAsync("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), hAsync("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (hAsync("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, hAsync("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (hAsync("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => hAsync("li", { innerHTML: element.outerHTML })))))), hAsync("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
+        return (hAsync("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, hAsync("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, hAsync("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, hAsync("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? hAsync(LogoWhite, null) : hAsync(LogoBlue, null)), this.serviceName && (hAsync("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, hAsync("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && hAsync("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), hAsync("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (hAsync("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, hAsync("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (hAsync("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => hAsync("li", { innerHTML: element.outerHTML })))))), hAsync("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -3895,7 +3889,7 @@ class Hero {
         }
     }
     render() {
-        return (hAsync("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, hAsync("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, hAsync("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), hAsync("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (hAsync("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, hAsync("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && hAsync("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (hAsync("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, hAsync("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, hAsync("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), hAsync("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (hAsync("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, hAsync("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && hAsync("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -4212,19 +4206,41 @@ class NoImage {
     }; }
 }
-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 pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;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;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}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-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;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_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
+const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
+const FEEDBACK_QUESTION = 'Is this page useful?';
 const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+/**
+ * A feedback component that asks visitors "Did you find what you need?" and
+ * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+ * to avoid re-prompting during a browsing session.
+ *
+ * @example
+ * <pennlibs-feedback></pennlibs-feedback>
+ *
+ * @example
+ * <pennlibs-feedback hide-question></pennlibs-feedback>
+ */
 class PennlibsFeedback {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.feedbackEvent = createEvent(this, "pennlibs-feedback");
+        /**
+         * When true, hides the yes/no question and only shows the "share your feedback" link.
+         */
+        this.hideQuestion = false;
         this.error = false;
         this.answer = undefined;
     }
     componentWillLoad() {
+        const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);
+        if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {
+            sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+            sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);
+        }
         if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
             this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
         }
@@ -4232,18 +4248,11 @@ class PennlibsFeedback {
             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);
+        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -4253,19 +4262,14 @@ class PennlibsFeedback {
         });
     }
     render() {
-        if (this.answer === 'yes') {
-            return (hAsync("div", { class: "feedback-container" }, hAsync("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, hAsync("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
-        }
-        if (this.answer === 'no') {
-            return (hAsync("div", { class: "feedback-container" }, hAsync("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", hAsync("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
-        }
-        return (hAsync("div", { class: "feedback-container" }, hAsync("h2", null, FEEDBACK_QUESTION), hAsync("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", hAsync("span", null, "Yes", hAsync("span", { class: "visually-hidden" }, ", I found what I need."))), hAsync("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", hAsync("span", null, "No", hAsync("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+        return (hAsync("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, hAsync("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, hAsync("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "Thank you for letting us know. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (hAsync("div", { class: "feedback__inline-question" }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { onClick: () => this.handleFeedback('yes') }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { onClick: () => this.handleFeedback('no') }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, hAsync("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", hAsync("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "pennlibs-feedback",
         "$members$": {
+            "hideQuestion": [4, "hide-question"],
             "error": [32],
             "answer": [32]
         },

package/hydrate/index.mjs CHANGED Viewed

@@ -1603,11 +1603,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if (memberName === "ref") {
-    if (newValue) {
-      newValue(elm);
-    }
-  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -1850,7 +1846,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         {
           checkSlotFallbackVisibility = true;
@@ -2063,12 +2058,6 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
-  }
-};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -3669,7 +3658,7 @@ class Chat {
     }; }
 }
-const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 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 pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 3em;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n  font-weight: 500;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n\n  &:hover {\n    text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n  }\n}\n\n.built-with {\n  opacity: 0.875;\n  margin: 0; \n  padding: 1.5em 0;\n  font-size: 0.875em;\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.75em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 /**
  * A footer component for Penn Libraries websites that displays contact information,
@@ -3699,6 +3688,10 @@ const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  fon
 class Footer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * When true, shows a "Built with the Penn Libraries Design System" line below the footer.
+         */
+        this.showBuiltWith = false;
     }
     componentWillLoad() {
         this.setNavigationByChildren();
@@ -3723,12 +3716,12 @@ class Footer {
     }
     render() {
         const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
-        return (hAsync("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, hAsync("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
+        return (hAsync("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, hAsync("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, hAsync("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, hAsync("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, hAsync("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, hAsync("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, hAsync("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), hAsync("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, hAsync("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, hAsync("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", hAsync("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), hAsync("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, hAsync("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), hAsync("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, hAsync("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), hAsync("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, hAsync("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), hAsync("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, hAsync("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), hAsync("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, hAsync("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, hAsync("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), hAsync("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, hAsync("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), hAsync("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, hAsync("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), hAsync("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, hAsync("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, hAsync("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, hAsync("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, hAsync("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, hAsync("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, hAsync("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), hAsync("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, hAsync("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, hAsync("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", hAsync("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), hAsync("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, hAsync("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), hAsync("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, hAsync("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), hAsync("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, hAsync("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), hAsync("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, hAsync("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), hAsync("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, hAsync("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, hAsync("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), hAsync("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, hAsync("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), hAsync("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, hAsync("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), hAsync("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, hAsync("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
             this.navigationByChildren.map(section => (hAsync("section", null, hAsync("h2", { class: "website-footer__heading" }, section.heading), hAsync("ul", { class: "website-footer__links" }, section.links.map(link => (hAsync("li", null, hAsync("a", { href: link.href }, link.label))))))))
-        ]))), hAsync("div", { key: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, hAsync("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, hAsync("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, hAsync("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, hAsync("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), hAsync("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, hAsync("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), hAsync("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, hAsync("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), hAsync("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, hAsync("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), hAsync("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, hAsync("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), hAsync("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, hAsync("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+        ]))), hAsync("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, hAsync("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, hAsync("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, hAsync("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, hAsync("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), hAsync("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, hAsync("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), hAsync("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, hAsync("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), hAsync("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, hAsync("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), hAsync("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, hAsync("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), hAsync("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, hAsync("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (hAsync("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, hAsync("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", hAsync("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -3737,6 +3730,7 @@ class Footer {
         "$flags$": 265,
         "$tagName$": "pennlibs-footer",
         "$members$": {
+            "showBuiltWith": [4, "show-built-with"],
             "navigationByChildren": [32]
         },
         "$listeners$": undefined,
@@ -3816,7 +3810,7 @@ class Header {
         return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, hAsync("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (hAsync("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, hAsync("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, hAsync("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, hAsync("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? hAsync(LogoWhite, null) : hAsync(LogoBlue, null)), this.serviceName && (hAsync("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, hAsync("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && hAsync("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), hAsync("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (hAsync("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, hAsync("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (hAsync("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => hAsync("li", { innerHTML: element.outerHTML })))))), hAsync("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
+        return (hAsync("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, hAsync("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, hAsync("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, hAsync("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? hAsync(LogoWhite, null) : hAsync(LogoBlue, null)), this.serviceName && (hAsync("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, hAsync("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && hAsync("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), hAsync("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (hAsync("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, hAsync("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (hAsync("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => hAsync("li", { innerHTML: element.outerHTML })))))), hAsync("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -3893,7 +3887,7 @@ class Hero {
         }
     }
     render() {
-        return (hAsync("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, hAsync("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, hAsync("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), hAsync("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (hAsync("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, hAsync("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && hAsync("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (hAsync("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, hAsync("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, hAsync("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), hAsync("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (hAsync("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, hAsync("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && hAsync("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return getElement(this); }
@@ -4210,19 +4204,41 @@ class NoImage {
     }; }
 }
-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 pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;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;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}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-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;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_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
+const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
+const FEEDBACK_QUESTION = 'Is this page useful?';
 const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+/**
+ * A feedback component that asks visitors "Did you find what you need?" and
+ * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+ * to avoid re-prompting during a browsing session.
+ *
+ * @example
+ * <pennlibs-feedback></pennlibs-feedback>
+ *
+ * @example
+ * <pennlibs-feedback hide-question></pennlibs-feedback>
+ */
 class PennlibsFeedback {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.feedbackEvent = createEvent(this, "pennlibs-feedback");
+        /**
+         * When true, hides the yes/no question and only shows the "share your feedback" link.
+         */
+        this.hideQuestion = false;
         this.error = false;
         this.answer = undefined;
     }
     componentWillLoad() {
+        const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);
+        if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {
+            sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
+            sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);
+        }
         if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
             this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
         }
@@ -4230,18 +4246,11 @@ class PennlibsFeedback {
             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);
+        sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
         this.feedbackEvent.emit({
             question: FEEDBACK_QUESTION,
             answer: answer,
@@ -4251,19 +4260,14 @@ class PennlibsFeedback {
         });
     }
     render() {
-        if (this.answer === 'yes') {
-            return (hAsync("div", { class: "feedback-container" }, hAsync("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, hAsync("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
-        }
-        if (this.answer === 'no') {
-            return (hAsync("div", { class: "feedback-container" }, hAsync("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", hAsync("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
-        }
-        return (hAsync("div", { class: "feedback-container" }, hAsync("h2", null, FEEDBACK_QUESTION), hAsync("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", hAsync("span", null, "Yes", hAsync("span", { class: "visually-hidden" }, ", I found what I need."))), hAsync("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", hAsync("span", null, "No", hAsync("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+        return (hAsync("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, hAsync("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, hAsync("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (hAsync("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (hAsync("p", null, "Thank you for letting us know. ", hAsync("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (hAsync("div", { class: "feedback__inline-question" }, hAsync("h2", null, "Did you find what you need?"), hAsync("button", { onClick: () => this.handleFeedback('yes') }, hAsync("span", null, "Yes"), hAsync("span", { class: "visually-hidden" }, ", I found what I needed.")), hAsync("button", { onClick: () => this.handleFeedback('no') }, hAsync("span", null, "No"), hAsync("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), hAsync("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, hAsync("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", hAsync("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "pennlibs-feedback",
         "$members$": {
+            "hideQuestion": [4, "hide-question"],
             "error": [32],
             "answer": [32]
         },

package/package.json CHANGED Viewed

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