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

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { e as setAssetPath } from './index-Di48-Vtw.js';
+export { e as setAssetPath } from './index-D9dYrmUF.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-Di48-Vtw.js';
-export { s as setNonce } from './index-Di48-Vtw.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-D9dYrmUF.js';
+export { s as setNonce } from './index-D9dYrmUF.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["pennlibs-autocomplete_3",[[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]}]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]],["pennlibs-feedback",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
+  return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[1],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32]}]]],["pennlibs-autocomplete_3",[[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]}]]],["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-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/pennlibs-autocomplete_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, d as getElement, a as getAssetPath } from './index-Di48-Vtw.js';
+import { r as registerInstance, c as createEvent, h, d as getElement, a as getAssetPath } from './index-D9dYrmUF.js';
 
 const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
 

package/dist/esm/pennlibs-banner.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getAssetPath, h } from './index-Di48-Vtw.js';
+import { r as registerInstance, a as getAssetPath, h } from './index-D9dYrmUF.js';
 
 const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
 

package/dist/esm/pennlibs-chat.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Di48-Vtw.js';
+import { r as registerInstance, h } from './index-D9dYrmUF.js';
 
 const pennlibsChatCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  line-height: normal;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\na {\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, #faa755, #fcca99);\n  border-radius: 1em;\n  position: fixed;\n  bottom: 0.75em;\n  right: 0.75em;\n  box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n  color: var(--pl-color-penn-blue);\n  text-decoration: none;\n  font-weight: 500;\n  padding: 0.15em;\n  font-size: 1em;\n\n  @media (min-width: 820px) {\n    bottom: 1.5em;\n    right: 1.5em;\n    width: auto;\n    padding: 0.15em 0.75em;\n    padding-left: 0.5em;\n  }\n}\n\na:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n  width: 2.5em;\n  height: 2.5em;\n}\n\nspan {\n  display: none;\n  font-size: 1.1em;\n\n  @media (min-width: 820px) {\n    display: inline;\n  }\n}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getAssetPath, h } from './index-Di48-Vtw.js';
+import { r as registerInstance, a as getAssetPath, h } from './index-D9dYrmUF.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)}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Di48-Vtw.js';
+import { r as registerInstance, c as createEvent, h } from './index-D9dYrmUF.js';
 
 const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box}@media print{:host{display:none}}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;justify-content:center}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:600}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n    0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as getElement } from './index-Di48-Vtw.js';
+import { r as registerInstance, h, d as getElement } from './index-D9dYrmUF.js';
 
 const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1.1;font-size:3em;font-weight:bold;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
 

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

@@ -0,0 +1,130 @@
+import { r as registerInstance, h, d as getElement } from './index-D9dYrmUF.js';
+
+const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%}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:auto;min-height:200px}.fallback-container pennlibs-fallback-img{width:100%;height:100%}";
+
+const PIXEL_DENSITY_MULTIPLIERS = [0.5, 0.75, 1, 1.5, 2];
+const DEFAULT_IMAGE_SIZES = [400, 600, 800, 1200, 1600, 2400];
+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.
+         *
+         * `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;
+        };
+    }
+    buildIIIFUrl(width, format = 'jpg') {
+        const sizeParam = width ? `${width},` : 'max';
+        return `${this.baseUrl}/${this.uuid}/${this.region}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
+    }
+    generateSrcset(sizes, format) {
+        const uniqueSizes = [...new Set(sizes)].sort((a, b) => a - b);
+        const srcsetEntries = uniqueSizes.map(size => {
+            const url = this.buildIIIFUrl(size, format);
+            return `${url} ${size}w`;
+        });
+        return srcsetEntries.join(', ');
+    }
+    getOptimalSizes() {
+        if (this.observedWidth) {
+            const baseSizes = PIXEL_DENSITY_MULTIPLIERS.map(multiplier => Math.round(this.observedWidth * multiplier));
+            return baseSizes;
+        }
+        return [...DEFAULT_IMAGE_SIZES];
+    }
+    componentDidLoad() {
+        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;
+                    }
+                    // Trigger re-render with optimized sizes
+                    this.isLoaded = this.isLoaded;
+                }
+            });
+            this.resizeObserver.observe(this.hostElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    render() {
+        const sizes = this.getOptimalSizes();
+        if (this.hasError && this.showFallback) {
+            return (h("div", { class: "fallback-container" }, h("pennlibs-fallback-img", null)));
+        }
+        const imgClasses = {
+            'iiif-img': true,
+            'loaded': this.isLoaded
+        };
+        const defaultSize = sizes[0];
+        return (h("picture", null, h("source", { type: "image/webp", srcSet: this.generateSrcset(sizes, 'webp'), sizes: "100vw" }), h("img", { class: imgClasses, src: this.buildIIIFUrl(defaultSize, 'jpg'), srcSet: this.generateSrcset(sizes, 'jpg'), sizes: "100vw", alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
+    }
+    get hostElement() { return getElement(this); }
+};
+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}\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: auto;\n  min-height: 200px;\n}\n\n.fallback-container pennlibs-fallback-img {\n  width: 100%;\n  height: 100%;\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITY_MULTIPLIERS = [0.5, 0.75, 1, 1.5, 2] as const;\nconst DEFAULT_IMAGE_SIZES = [400, 600, 800, 1200, 1600, 2400] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Automatically generates optimal image sources for different viewport sizes and pixel densities,\n * with modern WebP format and JPG fallback support.\n *\n * @component\n * @example\n * <pennlibs-iiif-img\n *   uuid=\"063ff35c-bbdd-4b63-bbdd-6206590e20d5\"\n *   alt=\"\">\n * </pennlibs-iiif-img>\n */\n@Component({\n  tag: 'pennlibs-iiif-img',\n  styleUrl: 'pennlibs-iiif-img.css',\n  shadow: true,\n})\nexport class IIIFImg {\n  private resizeObserver?: ResizeObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.\n   */\n  @Prop() uuid!: string;\n\n  /**\n   * Alternative text that describes the image content for screen readers and when images fail to load.\n   * Use an empty string for purely decorative images.\n   */\n  @Prop() alt!: string;\n\n  /**\n   * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\n   * Defines the rectangular portion of the underlying image to return.\n   * \n   * `full`: The full image is returned, without any cropping.\n   * \n   * `square`: A square area where width and height equal the shorter dimension.\n   * \n   * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n   * \n   * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.\n   * \n   * @default 'full'\n   */\n  @Prop() region?: string = 'full';\n\n  /**\n   * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\n   * Specifies mirroring and clockwise rotation in degrees (0-360).\n   * \n   * `n`: Rotation in degrees only.\n   * \n   * `!n`: Mirror the image vertically, then rotate by n degrees.\n   * \n   * @default '0'\n   */\n  @Prop() rotation?: string = '0';\n\n  /**\n   * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\n   * Controls the color delivery mode.\n   * \n   * `default`: The server's default quality.\n   * \n   * `color`: Full color information.\n   * \n   * `gray`: Grayscale rendering.\n   * \n   * `bitonal`: Black and white only.\n   * \n   * @default 'default'\n   */\n  @Prop() quality?: string = 'default';\n\n  /**\n   * Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\n   * or \"eager\" to load immediately.\n   * @default 'lazy'\n   */\n  @Prop() loading?: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * Whether to display a fallback placeholder image when the IIIF image fails to load.\n   * @default true\n   */\n  @Prop() showFallback?: boolean = true;\n\n  @State() isLoaded: boolean = false;\n  @State() hasError: boolean = false;\n\n  private observedWidth?: number;\n\n  private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n  private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n    const sizeParam = width ? `${width},` : 'max';\n    return `${this.baseUrl}/${this.uuid}/${this.region}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n  }\n\n  private generateSrcset(sizes: number[], format: ImageFormat): string {\n    const uniqueSizes = [...new Set(sizes)].sort((a, b) => a - b);\n\n    const srcsetEntries = uniqueSizes.map(size => {\n      const url = this.buildIIIFUrl(size, format);\n      return `${url} ${size}w`;\n    });\n\n    return srcsetEntries.join(', ');\n  }\n\n  private getOptimalSizes(): number[] {\n    if (this.observedWidth) {\n      const baseSizes = PIXEL_DENSITY_MULTIPLIERS.map(multiplier =>\n        Math.round(this.observedWidth! * multiplier)\n      );\n\n      return baseSizes;\n    }\n\n    return [...DEFAULT_IMAGE_SIZES];\n  }\n\n  private handleLoad = () => {\n    this.isLoaded = true;\n  };\n\n  private handleError = () => {\n    this.hasError = true;\n  };\n\n  componentDidLoad() {\n    if ('ResizeObserver' in window) {\n      this.resizeObserver = new ResizeObserver(entries => {\n        for (const entry of entries) {\n          this.observedWidth = Math.round(entry.contentRect.width);\n\n          if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = undefined;\n          }\n\n          // Trigger re-render with optimized sizes\n          this.isLoaded = this.isLoaded;\n        }\n      });\n\n      this.resizeObserver.observe(this.hostElement);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n  }\n\n  render() {\n    const sizes = this.getOptimalSizes();\n\n    if (this.hasError && this.showFallback) {\n      return (\n        <div class=\"fallback-container\">\n          <pennlibs-fallback-img />\n        </div>\n      );\n    }\n\n    const imgClasses = {\n      'iiif-img': true,\n      'loaded': this.isLoaded\n    };\n\n    const defaultSize = sizes[0];\n\n    return (\n      <picture>\n        <source\n          type=\"image/webp\"\n          srcSet={this.generateSrcset(sizes, 'webp')}\n          sizes=\"100vw\"\n        />\n\n        <img\n          class={imgClasses}\n          src={this.buildIIIFUrl(defaultSize, 'jpg')}\n          srcSet={this.generateSrcset(sizes, 'jpg')}\n          sizes=\"100vw\"\n          alt={this.alt}\n          loading={this.loading}\n          onLoad={this.handleLoad}\n          onError={this.handleError}\n        />\n      </picture>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,yZAAyZ;;ACIpb,MAAM,yBAAyB,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAU;AACjE,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU;MAmBzD,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAqBE;;;;;;;;;;;;;AAaG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAEhC;;;;;;;;;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;AAIjB,QAAA,IAAO,CAAA,OAAA,GAAG,8CAA8C;AA8BjE,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;AAoEF;AAtGS,IAAA,YAAY,CAAC,KAAc,EAAE,MAAA,GAAsB,KAAK,EAAA;AAC9D,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,CAAG,EAAA,KAAK,CAAG,CAAA,CAAA,GAAG,KAAK;QAC7C,OAAO,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,IAAI,SAAS,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE;;IAGtG,cAAc,CAAC,KAAe,EAAE,MAAmB,EAAA;QACzD,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE7D,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,IAAG;YAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;AAC3C,YAAA,OAAO,CAAG,EAAA,GAAG,CAAI,CAAA,EAAA,IAAI,GAAG;AAC1B,SAAC,CAAC;AAEF,QAAA,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGzB,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,CAAC,UAAU,IACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAc,GAAG,UAAU,CAAC,CAC7C;AAED,YAAA,OAAO,SAAS;;AAGlB,QAAA,OAAO,CAAC,GAAG,mBAAmB,CAAC;;IAWjC,gBAAgB,GAAA;AACd,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;;;AAIjC,oBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;;AAEjC,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;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE;QAEpC,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;AAED,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC;QAE5B,QACE,CAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,EAC1C,KAAK,EAAC,OAAO,EACb,CAAA,EAEF,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,EACzC,KAAK,EAAC,OAAO,EACb,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/esm/web.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Di48-Vtw.js';
-export { s as setNonce } from './index-Di48-Vtw.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-D9dYrmUF.js';
+export { s as setNonce } from './index-D9dYrmUF.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-autocomplete_3",[[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]}]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]],["pennlibs-feedback",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
+  return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[1],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32]}]]],["pennlibs-autocomplete_3",[[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]}]]],["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-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.js.map

package/dist/types/components/pennlibs-iiif-img/pennlibs-iiif-img.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+ * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+ * with modern WebP format and JPG fallback support.
+ *
+ * @component
+ * @example
+ * <pennlibs-iiif-img
+ *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+ *   alt="">
+ * </pennlibs-iiif-img>
+ */
+export declare class IIIFImg {
+    private resizeObserver?;
+    hostElement: HTMLElement;
+    /**
+     * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.
+     */
+    uuid: string;
+    /**
+     * Alternative text that describes the image content for screen readers and when images fail to load.
+     * Use an empty string for purely decorative images.
+     */
+    alt: string;
+    /**
+     * 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.
+     *
+     * `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'
+     */
+    region?: string;
+    /**
+     * 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'
+     */
+    rotation?: string;
+    /**
+     * 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'
+     */
+    quality?: string;
+    /**
+     * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
+     * or "eager" to load immediately.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
+    /**
+     * Whether to display a fallback placeholder image when the IIIF image fails to load.
+     * @default true
+     */
+    showFallback?: boolean;
+    isLoaded: boolean;
+    hasError: boolean;
+    private observedWidth?;
+    private readonly baseUrl;
+    private buildIIIFUrl;
+    private generateSrcset;
+    private getOptimalSizes;
+    private handleLoad;
+    private handleError;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -89,6 +89,51 @@ export namespace Components {
      */
     interface PennlibsHero {
     }
+    /**
+     * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+     * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+     * with modern WebP format and JPG fallback support.
+     * @component 
+     * @example <pennlibs-iiif-img
+     *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+     *   alt="">
+     * </pennlibs-iiif-img>
+     */
+    interface PennlibsIiifImg {
+        /**
+          * Alternative text that describes the image content for screen readers and when images fail to load. Use an empty string for purely decorative images.
+         */
+        "alt": string;
+        /**
+          * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport, or "eager" to load immediately.
+          * @default 'lazy'
+         */
+        "loading"?: 'lazy' | 'eager';
+        /**
+          * 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'
+         */
+        "quality"?: string;
+        /**
+          * 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.  `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'
+         */
+        "region"?: string;
+        /**
+          * 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'
+         */
+        "rotation"?: string;
+        /**
+          * Whether to display a fallback placeholder image when the IIIF image fails to load.
+          * @default true
+         */
+        "showFallback"?: boolean;
+        /**
+          * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.
+         */
+        "uuid": string;
+    }
 }
 export interface PennlibsAutocompleteCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -217,6 +262,22 @@ declare global {
         prototype: HTMLPennlibsHeroElement;
         new (): HTMLPennlibsHeroElement;
     };
+    /**
+     * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+     * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+     * with modern WebP format and JPG fallback support.
+     * @component 
+     * @example <pennlibs-iiif-img
+     *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+     *   alt="">
+     * </pennlibs-iiif-img>
+     */
+    interface HTMLPennlibsIiifImgElement extends Components.PennlibsIiifImg, HTMLStencilElement {
+    }
+    var HTMLPennlibsIiifImgElement: {
+        prototype: HTMLPennlibsIiifImgElement;
+        new (): HTMLPennlibsIiifImgElement;
+    };
     interface HTMLElementTagNameMap {
         "pennlibs-autocomplete": HTMLPennlibsAutocompleteElement;
         "pennlibs-banner": HTMLPennlibsBannerElement;
@@ -226,6 +287,7 @@ declare global {
         "pennlibs-footer": HTMLPennlibsFooterElement;
         "pennlibs-header": HTMLPennlibsHeaderElement;
         "pennlibs-hero": HTMLPennlibsHeroElement;
+        "pennlibs-iiif-img": HTMLPennlibsIiifImgElement;
     }
 }
 declare namespace LocalJSX {
@@ -322,6 +384,51 @@ declare namespace LocalJSX {
      */
     interface PennlibsHero {
     }
+    /**
+     * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+     * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+     * with modern WebP format and JPG fallback support.
+     * @component 
+     * @example <pennlibs-iiif-img
+     *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+     *   alt="">
+     * </pennlibs-iiif-img>
+     */
+    interface PennlibsIiifImg {
+        /**
+          * Alternative text that describes the image content for screen readers and when images fail to load. Use an empty string for purely decorative images.
+         */
+        "alt": string;
+        /**
+          * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport, or "eager" to load immediately.
+          * @default 'lazy'
+         */
+        "loading"?: 'lazy' | 'eager';
+        /**
+          * 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'
+         */
+        "quality"?: string;
+        /**
+          * 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.  `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'
+         */
+        "region"?: string;
+        /**
+          * 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'
+         */
+        "rotation"?: string;
+        /**
+          * Whether to display a fallback placeholder image when the IIIF image fails to load.
+          * @default true
+         */
+        "showFallback"?: boolean;
+        /**
+          * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.
+         */
+        "uuid": string;
+    }
     interface IntrinsicElements {
         "pennlibs-autocomplete": PennlibsAutocomplete;
         "pennlibs-banner": PennlibsBanner;
@@ -331,6 +438,7 @@ declare namespace LocalJSX {
         "pennlibs-footer": PennlibsFooter;
         "pennlibs-header": PennlibsHeader;
         "pennlibs-hero": PennlibsHero;
+        "pennlibs-iiif-img": PennlibsIiifImg;
     }
 }
 export { LocalJSX as JSX };
@@ -387,6 +495,17 @@ declare module "@stencil/core" {
              * @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
              */
             "pennlibs-hero": LocalJSX.PennlibsHero & JSXBase.HTMLAttributes<HTMLPennlibsHeroElement>;
+            /**
+             * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+             * Automatically generates optimal image sources for different viewport sizes and pixel densities,
+             * with modern WebP format and JPG fallback support.
+             * @component 
+             * @example <pennlibs-iiif-img
+             *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+             *   alt="">
+             * </pennlibs-iiif-img>
+             */
+            "pennlibs-iiif-img": LocalJSX.PennlibsIiifImg & JSXBase.HTMLAttributes<HTMLPennlibsIiifImgElement>;
         }
     }
 }

package/dist/web/index.esm.js

@@ -1,2 +1,2 @@
-export { e as setAssetPath } from './p-Di48-Vtw.js';
+export { e as setAssetPath } from './p-D9dYrmUF.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/web/{p-7cbd16c0.entry.js → p-43d9c2d4.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getAssetPath, h } from './p-Di48-Vtw.js';
+import { r as registerInstance, a as getAssetPath, h } from './p-D9dYrmUF.js';
 
 const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
 

package/dist/{esm/index-Di48-Vtw.js → web/p-D9dYrmUF.js}

@@ -1107,6 +1107,11 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
     return propValue;
   }
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -2210,6 +2215,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 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-Di48-Vtw.js.map
+//# sourceMappingURL=p-D9dYrmUF.js.map
 
-//# sourceMappingURL=index-Di48-Vtw.js.map
+//# sourceMappingURL=p-D9dYrmUF.js.map