@penn-libraries/web 1.1.1-dev.2 → 1.2.0-dev.1

package/dist/esm/pennlibs-iiif-img.entry.js

@@ -0,0 +1,247 @@
+import { r as registerInstance, h, c as getElement } from './index-CNQ9-Wwh.js';
+
+const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
+
+const PIXEL_DENSITIES = [1, 1.5, 2];
+const IIIFImg = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
+         * Defines the rectangular portion of the underlying image to return.
+         *
+         * `full`: The full image is returned, without any cropping.
+         *
+         * `square`: A square area where width and height equal the shorter dimension.
+         *
+         * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies
+         * a centered crop based on the source image dimensions and sets the CSS aspect-ratio
+         * property for layout reservation.
+         *
+         * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
+         *
+         * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
+         *
+         * @default 'full'
+         */
+        this.region = 'full';
+        /**
+         * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
+         * Specifies mirroring and clockwise rotation in degrees (0-360).
+         *
+         * `n`: Rotation in degrees only.
+         *
+         * `!n`: Mirror the image vertically, then rotate by n degrees.
+         *
+         * @default '0'
+         */
+        this.rotation = '0';
+        /**
+         * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
+         * Controls the color delivery mode.
+         *
+         * `default`: The server's default quality.
+         *
+         * `color`: Full color information.
+         *
+         * `gray`: Grayscale rendering.
+         *
+         * `bitonal`: Black and white only.
+         *
+         * @default 'default'
+         */
+        this.quality = 'default';
+        /**
+         * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
+         * or "eager" to load immediately.
+         * @default 'lazy'
+         */
+        this.loading = 'lazy';
+        /**
+         * Whether to display a fallback placeholder image when the IIIF image fails to load.
+         * @default true
+         */
+        this.showFallback = true;
+        this.isLoaded = false;
+        this.hasError = false;
+        this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
+        this.handleLoad = () => {
+            this.isLoaded = true;
+        };
+        this.handleError = () => {
+            this.hasError = true;
+        };
+    }
+    /**
+     * Fetch IIIF image info to get actual dimensions.
+     */
+    async fetchImageInfo() {
+        try {
+            const currentUuid = this.uuid; // Capture current UUID
+            const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;
+            const response = await fetch(infoUrl);
+            if (!response.ok) {
+                console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);
+                return;
+            }
+            const info = await response.json();
+            // Only update dimensions if UUID hasn't changed during fetch
+            // (protects against race conditions if component updates)
+            if (this.uuid === currentUuid) {
+                this.imageDimensions = {
+                    width: info.width,
+                    height: info.height,
+                };
+                this.fetchedUuid = currentUuid;
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);
+        }
+    }
+    /**
+     * Check if a region value matches aspect ratio format (e.g., "16:9", "4:3", "3:2").
+     */
+    isAspectRatio(value) {
+        return /^\d+:\d+$/.test(value);
+    }
+    /**
+     * Set CSS custom property for aspect ratio on the host element.
+     */
+    setAspectRatioCss(aspectRatio) {
+        const [widthRatio, heightRatio] = aspectRatio.split(':');
+        this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);
+    }
+    /**
+     * Clear CSS custom property for aspect ratio from the host element.
+     */
+    clearAspectRatioCss() {
+        this.hostElement.style.removeProperty('--aspect-ratio');
+    }
+    /**
+     * Format a number for IIIF percentage values (remove trailing zeros).
+     * IIIF spec requires no trailing zeros per section 4.7.
+     */
+    formatPercent(value) {
+        return value.toFixed(2).replace(/\.?0+$/, '');
+    }
+    /**
+     * Calculate a centered crop region for a given aspect ratio.
+     * Requires actual image dimensions to calculate correctly.
+     * @param aspectRatio - The target aspect ratio (e.g., "3:2" or "2:3")
+     * @returns A IIIF percentage-based region string (e.g., "pct:0,16.67,100,66.67")
+     */
+    calculateCenteredCrop(aspectRatio) {
+        if (!this.imageDimensions) {
+            throw new Error('Image dimensions required for aspect ratio calculation');
+        }
+        const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);
+        const targetRatio = widthRatio / heightRatio;
+        const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;
+        // Determine if we need to crop width or height
+        if (sourceRatio > targetRatio) {
+            // Source is wider than target - crop left and right
+            const widthPercent = (targetRatio / sourceRatio) * 100;
+            const xOffset = (100 - widthPercent) / 2;
+            return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;
+        }
+        else {
+            // Source is taller than target - crop top and bottom
+            const heightPercent = (sourceRatio / targetRatio) * 100;
+            const yOffset = (100 - heightPercent) / 2;
+            return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;
+        }
+    }
+    /**
+     * Get the region parameter for the IIIF URL.
+     */
+    getRegionParam() {
+        // Handle custom aspect ratios
+        let regionParam = this.region || 'full';
+        if (this.isAspectRatio(regionParam)) {
+            // Only apply crop if we have dimensions for the current UUID
+            if (this.imageDimensions && this.fetchedUuid === this.uuid) {
+                regionParam = this.calculateCenteredCrop(regionParam);
+            }
+            else {
+                // Use full image until dimensions are loaded
+                regionParam = 'full';
+            }
+        }
+        return regionParam;
+    }
+    buildIIIFUrl(width, format = 'jpg') {
+        const sizeParam = width ? `${width},` : 'max';
+        const regionParam = this.getRegionParam();
+        return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
+    }
+    generateSrcset(baseWidth, format) {
+        return PIXEL_DENSITIES.map(density => {
+            const width = Math.round(baseWidth * density);
+            const url = this.buildIIIFUrl(width, format);
+            return `${url} ${density}x`;
+        }).join(', ');
+    }
+    handleRegionChange(newValue, oldValue) {
+        // Only process if region actually changed
+        if (newValue === oldValue) {
+            return;
+        }
+        // If new region is an aspect ratio, set CSS and fetch info
+        if (newValue && this.isAspectRatio(newValue)) {
+            this.setAspectRatioCss(newValue);
+            this.fetchImageInfo();
+        }
+        else {
+            // Clear aspect ratio CSS if no longer using aspect ratio format
+            this.clearAspectRatioCss();
+        }
+    }
+    componentDidLoad() {
+        // Set CSS aspect ratio and fetch image info if using aspect ratio format
+        if (this.region && this.isAspectRatio(this.region)) {
+            this.setAspectRatioCss(this.region);
+            this.fetchImageInfo();
+        }
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.observedWidth = Math.round(entry.contentRect.width);
+                    if (this.resizeObserver) {
+                        this.resizeObserver.disconnect();
+                        this.resizeObserver = undefined;
+                    }
+                }
+            });
+            this.resizeObserver.observe(this.hostElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    render() {
+        // Show placeholder until we've measured the component width
+        if (!this.observedWidth) {
+            return h("pennlibs-fallback-img", null);
+        }
+        if (this.hasError && this.showFallback) {
+            return (h("div", { class: "fallback-container" }, h("pennlibs-fallback-img", null)));
+        }
+        const imgClasses = {
+            'iiif-img': true,
+            'loaded': this.isLoaded
+        };
+        return (h("picture", null, h("source", { type: "image/webp", srcSet: this.generateSrcset(this.observedWidth, 'webp') }), h("img", { class: imgClasses, src: this.buildIIIFUrl(this.observedWidth, 'jpg'), srcSet: this.generateSrcset(this.observedWidth, 'jpg'), alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "region": ["handleRegionChange"]
+    }; }
+};
+IIIFImg.style = pennlibsIiifImgCss;
+
+export { IIIFImg as pennlibs_iiif_img };
+//# sourceMappingURL=pennlibs-iiif-img.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-iiif-img.entry.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":"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"}

package/dist/esm/web.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Cst_89-s.js';
-export { s as setNonce } from './index-Cst_89-s.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CNQ9-Wwh.js';
+export { s as setNonce } from './index-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([["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-feedback",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-autocomplete_5",[[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([["pennlibs-iiif-img",[[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"]}]]],["pennlibs-autocomplete_4",[[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",{"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.js.map

package/dist/types/components/pennlibs-feedback/pennlibs-feedback.d.ts

@@ -1,7 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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>
+ */
 export declare class PennlibsFeedback {
+    /**
+     * When true, hides the yes/no question and only shows the "share your feedback" link.
+     */
+    hideQuestion: boolean;
     error: boolean;
     answer: string | undefined;
+    /**
+     * Emitted when a visitor answers the feedback question. Includes the question,
+     * answer, current URL, and page heading/title for context.
+     */
     feedbackEvent: EventEmitter<{
         question: string;
         answer: string;
@@ -9,10 +28,7 @@ export declare class PennlibsFeedback {
         pageHeading?: string;
         pageTitle?: string;
     }>;
-    private yesMessageRef?;
-    private noMessageRef?;
     componentWillLoad(): void;
-    componentDidRender(): void;
     handleFeedback(answer: string): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -24,7 +24,19 @@ export namespace Components {
     }
     interface PennlibsFallbackImg {
     }
+    /**
+     * 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>
+     */
     interface PennlibsFeedback {
+        /**
+          * When true, hides the yes/no question and only shows the "share your feedback" link.
+          * @default false
+         */
+        "hideQuestion": boolean;
     }
     /**
      * A footer component for Penn Libraries websites that displays contact information,
@@ -191,6 +203,13 @@ declare global {
     pageTitle?: string;
   };
     }
+    /**
+     * 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>
+     */
     interface HTMLPennlibsFeedbackElement extends Components.PennlibsFeedback, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPennlibsFeedbackElementEventMap>(type: K, listener: (this: HTMLPennlibsFeedbackElement, ev: PennlibsFeedbackCustomEvent<HTMLPennlibsFeedbackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -312,7 +331,22 @@ declare namespace LocalJSX {
     }
     interface PennlibsFallbackImg {
     }
+    /**
+     * 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>
+     */
     interface PennlibsFeedback {
+        /**
+          * When true, hides the yes/no question and only shows the "share your feedback" link.
+          * @default false
+         */
+        "hideQuestion"?: boolean;
+        /**
+          * Emitted when a visitor answers the feedback question. Includes the question, answer, current URL, and page heading/title for context.
+         */
         "onPennlibs-feedback"?: (event: PennlibsFeedbackCustomEvent<{
     question: string;
     answer: string;
@@ -452,6 +486,13 @@ declare module "@stencil/core" {
             "pennlibs-banner": LocalJSX.PennlibsBanner & JSXBase.HTMLAttributes<HTMLPennlibsBannerElement>;
             "pennlibs-chat": LocalJSX.PennlibsChat & JSXBase.HTMLAttributes<HTMLPennlibsChatElement>;
             "pennlibs-fallback-img": LocalJSX.PennlibsFallbackImg & JSXBase.HTMLAttributes<HTMLPennlibsFallbackImgElement>;
+            /**
+             * 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>
+             */
             "pennlibs-feedback": LocalJSX.PennlibsFeedback & JSXBase.HTMLAttributes<HTMLPennlibsFeedbackElement>;
             /**
              * A footer component for Penn Libraries websites that displays contact information,

package/dist/web/index.esm.js

@@ -1,2 +1,2 @@
-export { e as setAssetPath } from './p-Cst_89-s.js';
+export { e as setAssetPath } from './p-CNQ9-Wwh.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/web/p-662e4125.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, a as getAssetPath, h } from './p-CNQ9-Wwh.js';
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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"]; }
+};
+NoImage.style = pennlibsFallbackImgCss;
+
+export { NoImage as pennlibs_fallback_img };
+//# sourceMappingURL=pennlibs-fallback-img.entry.esm.js.map

package/dist/{esm/index-Cst_89-s.js → web/p-CNQ9-Wwh.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'web';
 const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: cormorant-garamond, serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3rem;\n  --pl-font-size-4xl: 2.75rem;\n  --pl-font-size-3xl: 2.25rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Avoid text overflows */\n  & :is(p, h1, h2, h3, h4, h5, h6) {\n    overflow-wrap: break-word;\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\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    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  \n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2, h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-weight: 600;\n    line-height: 1.125;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    font-size: var(--pl-font-size-5xl);\n    margin-bottom: 0.5em;\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-3xl);\n    margin-bottom: 0.5em;\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n  \n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n  \n  & dt {\n    font-weight: 600;\n  }\n  \n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.5rem;\n  }\n  \n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n";
+const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n@font-face {\n  font-family: 'Perpetua';\n  src: url('assets/fonts/perpetua.woff2') format('woff2'),\n       url('assets/fonts/perpetua.woff') format('woff');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: 'Perpetua', serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3.5rem;\n  --pl-font-size-4xl: 2.5rem;\n  --pl-font-size-3xl: 2rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Avoid text overflows */\n  & :is(p, h1, h2, h3, h4, h5, h6) {\n    overflow-wrap: break-word;\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\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    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  \n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n    font-weight: 400;\n  }\n\n  & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    line-height: 1;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    font-size: var(--pl-font-size-5xl);\n    margin-bottom: var(--pl-space-l);\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-4xl);\n    margin-bottom: var(--pl-space-m);\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n\n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n\n  & dt {\n    font-weight: 600;\n  }\n\n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.25rem;\n  }\n\n  & dd::after {\n    content: \" ·\";\n    padding-left: var(--pl-space-xs);\n  }\n\n  & dd:has(+ dt)::after {\n    all: unset;\n  }\n\n  & > *:last-child::after {\n    all: unset;\n  }\n\n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n";
 
 /*
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -1186,11 +1186,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)) {
@@ -1365,7 +1361,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -1503,12 +1498,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
-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);
@@ -2268,7 +2257,7 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { getAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-Cst_89-s.js.map
+export { getAssetPath as a, bootstrapLazy as b, getElement as c, createEvent as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+//# sourceMappingURL=p-CNQ9-Wwh.js.map
 
-//# sourceMappingURL=index-Cst_89-s.js.map
+//# sourceMappingURL=p-CNQ9-Wwh.js.map