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

package/dist/web/{p-56b9f10c.entry.js → p-621f166e.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './p-Di48-Vtw.js';
+import { r as registerInstance, c as createEvent, h } from './p-Cst_89-s.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/web/{p-269363bf.entry.js → p-6e0c2de9.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, d as getElement, a as getAssetPath } from './p-Di48-Vtw.js';
+import { r as registerInstance, c as createEvent, h, d as getElement, a as getAssetPath } from './p-Cst_89-s.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}";
 
@@ -275,6 +275,20 @@ const Autocomplete = class {
 };
 Autocomplete.style = pennlibsAutocompleteCss;
 
+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;
+
 const pennlibsFooterCss = ":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  --padding-bottom: 5.75rem;\n}\n\n@media print {\n  :host {\n    display: none;\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n  background: var(--pl-color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer__content {\n  padding: 4em 0;\n}\n\n.website-footer__links-container {\n  gap: 4em 2em;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n  font-size: 0.8em;\n  text-transform: uppercase;\n  letter-spacing: 0.075em;\n  margin-bottom: 1em;\n  opacity: 0.75;\n}\n\n.website-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75em;\n}\n\n.website-footer__links a {\n  text-decoration: none;\n}\n\n.website-footer__links a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n  padding: 1em 0;\n  background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0;\n  flex-direction: row;\n  margin-left: -0.5em;\n\n  @media (max-width: 1080px) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n  }\n}\n\n.website-footer__links--footer a {\n  display: inline-block;\n  padding: 0.5em 0.75em;\n  font-size: 0.875em;\n  opacity: 0.875;\n  font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}";
 
 const Footer = class {
@@ -374,5 +388,248 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-export { Autocomplete as pennlibs_autocomplete, Footer as pennlibs_footer, Header as pennlibs_header };
-//# sourceMappingURL=pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map
+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 { Autocomplete as pennlibs_autocomplete, NoImage as pennlibs_fallback_img, Footer as pennlibs_footer, Header as pennlibs_header, IIIFImg as pennlibs_iiif_img };
+//# sourceMappingURL=pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.esm.js.map

package/dist/web/{p-783e2a87.entry.js → p-848d9acc.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './p-Di48-Vtw.js';
+import { r as registerInstance, h } from './p-Cst_89-s.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/index-Di48-Vtw.js → web/p-Cst_89-s.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'web';
-const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, updatable: true};
+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";
@@ -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);
     }
@@ -1511,10 +1516,19 @@ var insertBefore = (parent, newNode, reference) => {
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
+  const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1718,6 +1732,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -1729,6 +1744,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (instance) {
+      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+        const watchMethods = cmpMeta.$watchers$[propName];
+        if (watchMethods) {
+          watchMethods.map((watchMethodName) => {
+            try {
+              instance[watchMethodName](newVal, oldVal, propName);
+            } catch (e) {
+              consoleError(e, elm);
+            }
+          });
+        }
+      }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         if (instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
@@ -1746,6 +1773,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -1864,8 +1902,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1894,6 +1936,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -1909,6 +1956,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= -9 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$, elm);
     } else {
@@ -2053,6 +2103,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -2068,6 +2119,14 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
@@ -2210,6 +2269,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-Cst_89-s.js.map
 
-//# sourceMappingURL=index-Di48-Vtw.js.map
+//# sourceMappingURL=p-Cst_89-s.js.map