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

package/dist/collection/components/pennlibs-hero/pennlibs-hero.js

@@ -51,7 +51,7 @@ export class Hero {
         }
     }
     render() {
-        return (h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (h("div", { key: '4234b8c7129b9ad562e979a62124bb8b059f4906', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '48e60ea4da5432ca67ad355d79043fdefc9f916f', class: "hero__content" }, h("slot", { key: 'f08f58488b758cb0a5fe88d8c05b37fda2332ca4', name: "start" }), h("div", { key: '17a6b7a12512779048dcfa5ef68f58be34743541', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'e059b09f3797425587c268e714e605f8abdd20d7', class: "viewport-margins" }, h("h1", { key: '152d036ee2d7838c6faa072c0ea795c31ea7b120', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: 'e942105a04ab4e75a502dbd19d5f465efb2acb18', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get is() { return "pennlibs-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.d.ts

@@ -5,6 +5,8 @@ export { Banner as PennlibsBanner } from '../types/components/pennlibs-banner/pe
 export { defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner';
 export { Chat as PennlibsChat } from '../types/components/pennlibs-chat/pennlibs-chat';
 export { defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat';
+export { ExpandText as PennlibsExpandText } from '../types/components/pennlibs-expand-text/pennlibs-expand-text';
+export { defineCustomElement as defineCustomElementPennlibsExpandText } from './pennlibs-expand-text';
 export { NoImage as PennlibsFallbackImg } from '../types/components/pennlibs-fallback-img/pennlibs-fallback-img';
 export { defineCustomElement as defineCustomElementPennlibsFallbackImg } from './pennlibs-fallback-img';
 export { PennlibsFeedback as PennlibsFeedback } from '../types/components/pennlibs-feedback/pennlibs-feedback';

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from
 export { PennlibsAutocomplete, defineCustomElement as defineCustomElementPennlibsAutocomplete } from './pennlibs-autocomplete.js';
 export { PennlibsBanner, defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner.js';
 export { PennlibsChat, defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat.js';
+export { PennlibsExpandText, defineCustomElement as defineCustomElementPennlibsExpandText } from './pennlibs-expand-text.js';
 export { PennlibsFallbackImg, defineCustomElement as defineCustomElementPennlibsFallbackImg } from './pennlibs-fallback-img.js';
 export { PennlibsFeedback, defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback.js';
 export { PennlibsFooter, defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer.js';

package/dist/components/index.js.map

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

package/dist/components/pennlibs-expand-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsExpandText extends Components.PennlibsExpandText, HTMLElement {}
+export const PennlibsExpandText: {
+    prototype: PennlibsExpandText;
+    new (): PennlibsExpandText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-expand-text.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pennlibsExpandTextCss = ":host{display:inline-block;position:relative;max-width:100%;vertical-align:bottom}.expand-text{display:block}.expand-text--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pl-expand-text-lines, 3);line-clamp:var(--pl-expand-text-lines, 3);overflow:hidden}.expand-text--expanded{display:inline}.expand-text__fade{position:absolute;right:0;bottom:0;padding-left:2em;background:linear-gradient(\n      to right,\n      transparent,\n      var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em\n    );pointer-events:none}.expand-text__toggle{display:inline-block;vertical-align:baseline;pointer-events:auto;padding:var(--pl-space-3xs) var(--pl-space-s);border:none;background:var(--pl-color-bg-subtle);color:var(--pl-color-fg-default);font-family:var(--pl-font-family);border-radius:var(--pl-border-radius-subtle);font-size:var(--pl-font-size-xs);font-weight:500;line-height:1.5;letter-spacing:0.075rem;text-transform:uppercase;cursor:pointer}.expand-text__toggle:hover{text-decoration:underline;text-decoration-thickness:var(--pl-link-text-decoration-thickness);text-underline-offset:var(--pl-link-text-underline-offset)}.expand-text__toggle:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.expand-text__fade--inline{position:static;padding-left:0;background:none;margin-inline-start:var(--pl-space-2xs, 0.25rem)}";
+
+const ExpandText = /*@__PURE__*/ proxyCustomElement(class ExpandText extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Maximum number of lines to show before truncating.
+         * @prop lines
+         */
+        this.lines = 3;
+        /**
+         * Label for the toggle when content is collapsed.
+         * @prop expand-label
+         */
+        this.expandLabel = 'More';
+        /**
+         * Label for the toggle when content is expanded.
+         * @prop collapse-label
+         */
+        this.collapseLabel = 'Less';
+        this.expanded = false;
+        this.hasOverflow = false;
+        this.measured = false;
+        this.checkOverflow = () => {
+            if (!this.contentEl || this.expanded)
+                return;
+            const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);
+            if (Number.isFinite(lineHeight) && this.lines > 0) {
+                // Require at least two full extra lines of hidden content before the
+                // toggle is worth showing. A near-flush overflow (a few extra words)
+                // makes the toggle look like it reveals nothing meaningful.
+                this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);
+            }
+            else {
+                this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;
+            }
+            this.measured = true;
+        };
+        this.toggle = () => {
+            this.expanded = !this.expanded;
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        if (!this.contentEl)
+            return;
+        // Observe the host (always inline-block) rather than the content span,
+        // which becomes inline when unclamped and stops firing resize events.
+        this.resizeObserver = new ResizeObserver(() => this.checkOverflow());
+        this.resizeObserver.observe(this.el);
+        this.checkOverflow();
+        (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(() => this.checkOverflow());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        const isClamped = !this.expanded && (!this.measured || this.hasOverflow);
+        return (h(Host, { key: '9c1a5be21f67022923982179319c9b0920a3ee00', style: { '--pl-expand-text-lines': String(this.lines) } }, h("span", { key: '54b5721c9df1a81b08e3823b93029f72a8e66852', class: {
+                'expand-text': true,
+                'expand-text--clamped': isClamped,
+                'expand-text--expanded': this.expanded,
+            }, ref: (el) => (this.contentEl = el) }, h("slot", { key: 'f4df852b0d1513741e07825551428807f8cb27c3' })), this.hasOverflow && (h("span", { key: '79104493f870c13070468612a7269072c9607779', class: {
+                'expand-text__fade': true,
+                'expand-text__fade--inline': this.expanded,
+            } }, h("button", { key: 'f723f0265093c78b45b4f3cb6d2fce2549361cdd', type: "button", class: "expand-text__toggle", "aria-expanded": String(this.expanded), onClick: this.toggle }, this.expanded ? this.collapseLabel : this.expandLabel)))));
+    }
+    get el() { return this; }
+    static get style() { return pennlibsExpandTextCss; }
+}, [257, "pennlibs-expand-text", {
+        "lines": [2],
+        "expandLabel": [1, "expand-label"],
+        "collapseLabel": [1, "collapse-label"],
+        "expanded": [32],
+        "hasOverflow": [32],
+        "measured": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-expand-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-expand-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ExpandText);
+            }
+            break;
+    } });
+}
+
+const PennlibsExpandText = ExpandText;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsExpandText, defineCustomElement };
+//# sourceMappingURL=pennlibs-expand-text.js.map
+
+//# sourceMappingURL=pennlibs-expand-text.js.map

package/dist/components/pennlibs-expand-text.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-expand-text.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,s1CAAs1C;;MCcv2C,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEzB;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,MAAM;AAEpC;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAW,MAAM;AAE7B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmB1B,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACtC,YAAA,MAAM,UAAU,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC;AAC1E,YAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;;;;AAIjD,gBAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,UAAU,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;;iBACzE;AACL,gBAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC;;AAElF,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAEO,QAAA,IAAM,CAAA,MAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAChC,SAAC;AAoCF;IAlEC,gBAAgB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;;;AAGrB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QACpE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACpC,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;;IAGxD,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;IAqBnC,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;AACxE,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAA,EAC3D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,sBAAsB,EAAE,SAAS;gBACjC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;aAC3C,EAAA,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,EACZ,eAAA,EAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,MAAM,EAEnB,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAC/C,CACJ,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-expand-text/pennlibs-expand-text.css?tag=pennlibs-expand-text&encapsulation=shadow","src/components/pennlibs-expand-text/pennlibs-expand-text.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n  vertical-align: bottom;\n}\n\n/* `block` so scrollHeight reports the full wrapped content height (inline\n   spans don't, which breaks resize-based overflow detection). */\n.expand-text {\n  display: block;\n}\n\n/* Clamping only applies when the JS measurement says the content meaningfully\n   overflows. Pre-measurement, .expand-text--clamped is on by default so we\n   don't flash the full text before clamping. Post-measurement, it stays on\n   only if the threshold was hit; otherwise the content flows freely. */\n.expand-text--clamped {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--pl-expand-text-lines, 3);\n  line-clamp: var(--pl-expand-text-lines, 3);\n  overflow: hidden;\n}\n\n/* When expanded, switch back to inline so the inline-flow fade button\n   appears at the end of the text on the same line. */\n.expand-text--expanded {\n  display: inline;\n}\n\n/* The fade wrapper inherits the parent's font-size and line-height (via\n   the host), so its `1em` and `1lh` resolve against the parent. That gives\n   us a line-box the height of one parent line, with a baseline at the\n   right place for the inline-block toggle. */\n.expand-text__fade {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  padding-left: 2em;\n  background:\n    linear-gradient(\n      to right,\n      transparent,\n      var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em\n    );\n  pointer-events: none;\n}\n\n.expand-text__toggle {\n  /* Pill chip. inline-block + vertical-align: baseline aligns the toggle's\n     text baseline to the parent's last-line baseline (via the fade's line-box). */\n  display: inline-block;\n  vertical-align: baseline;\n  pointer-events: auto;\n  padding: var(--pl-space-3xs) var(--pl-space-s);\n  border: none;\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius-subtle);\n  font-size: var(--pl-font-size-xs);\n  font-weight: 500;\n  line-height: 1.5;\n  letter-spacing: 0.075rem;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n\n.expand-text__toggle:hover {\n  text-decoration: underline;\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.expand-text__toggle:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* When expanded, drop the fade out of absolute flow so the toggle appears\n   inline at the end of the now-full text. */\n.expand-text__fade--inline {\n  position: static;\n  padding-left: 0;\n  background: none;\n  margin-inline-start: var(--pl-space-2xs, 0.25rem);\n}\n","import { Component, Prop, State, Element, Host, h } from '@stencil/core';\n\n/**\n * Clamp long text to a set number of lines with an inline \"More\" / \"Less\"\n * toggle. Useful for headings, descriptions, or any prose block that can\n * run long in narrow containers.\n *\n * @slot - The content to truncate. Accepts any flow content.\n */\n@Component({\n  tag: 'pennlibs-expand-text',\n  styleUrl: 'pennlibs-expand-text.css',\n  shadow: true,\n})\nexport class ExpandText {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Maximum number of lines to show before truncating.\n   * @prop lines\n   */\n  @Prop() lines: number = 3;\n\n  /**\n   * Label for the toggle when content is collapsed.\n   * @prop expand-label\n   */\n  @Prop() expandLabel: string = 'More';\n\n  /**\n   * Label for the toggle when content is expanded.\n   * @prop collapse-label\n   */\n  @Prop() collapseLabel: string = 'Less';\n\n  @State() expanded: boolean = false;\n  @State() hasOverflow: boolean = false;\n  @State() measured: boolean = false;\n\n  private contentEl?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n\n  componentDidLoad() {\n    if (!this.contentEl) return;\n    // Observe the host (always inline-block) rather than the content span,\n    // which becomes inline when unclamped and stops firing resize events.\n    this.resizeObserver = new ResizeObserver(() => this.checkOverflow());\n    this.resizeObserver.observe(this.el);\n    this.checkOverflow();\n    document.fonts?.ready.then(() => this.checkOverflow());\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  private checkOverflow = () => {\n    if (!this.contentEl || this.expanded) return;\n    const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);\n    if (Number.isFinite(lineHeight) && this.lines > 0) {\n      // Require at least two full extra lines of hidden content before the\n      // toggle is worth showing. A near-flush overflow (a few extra words)\n      // makes the toggle look like it reveals nothing meaningful.\n      this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);\n    } else {\n      this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;\n    }\n    this.measured = true;\n  };\n\n  private toggle = () => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const isClamped = !this.expanded && (!this.measured || this.hasOverflow);\n    return (\n      <Host style={{ '--pl-expand-text-lines': String(this.lines) }}>\n        <span\n          class={{\n            'expand-text': true,\n            'expand-text--clamped': isClamped,\n            'expand-text--expanded': this.expanded,\n          }}\n          ref={(el) => (this.contentEl = el)}\n        >\n          <slot />\n        </span>\n        {this.hasOverflow && (\n          <span\n            class={{\n              'expand-text__fade': true,\n              'expand-text__fade--inline': this.expanded,\n            }}\n          >\n            <button\n              type=\"button\"\n              class=\"expand-text__toggle\"\n              aria-expanded={String(this.expanded)}\n              onClick={this.toggle}\n            >\n              {this.expanded ? this.collapseLabel : this.expandLabel}\n            </button>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -12,7 +12,7 @@ const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLEleme
     }
     render() {
         const shieldImg = getAssetPath('./assets/simplified-shield.webp');
-        return (h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
+        return (h("img", { key: 'fcb8177bb7decae1ffc943b5bc6ddeeabc148cd2', src: shieldImg, alt: "", class: "no-image__img" }));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return pennlibsFallbackImgCss; }

package/dist/components/pennlibs-feedback.js

@@ -83,7 +83,7 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
         }, 600);
     }
     render() {
-        return (h("div", { key: '12bdec6f975166a4c5d451fc1834f70fbce3b424', class: "feedback__container" }, h("div", { key: '4c607ceef5f10760d540d2549a2b186a871714c7', class: "viewport-margins" }, h("div", { key: 'a967498163e05ce60a12bf230d303caa31373c8d', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'f918da2833ae0c64e67a9e95551edaeb78e2ba05', class: "feedback__share-feedback" }, h("p", { key: '12928af116ffadf669cbc694160ee6ca3458528b' }, "To help us improve, ", h("a", { key: '7281b7423677b104fb622a7fdcf8e768517ea84e', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
+        return (h("div", { key: '718c9b67ab9bfec7c946489ca3fa3e607a143889', class: "feedback__container" }, h("div", { key: 'f1d7fb08215224e80ec85ab381a20d017480bc4c', class: "viewport-margins" }, h("div", { key: 'a80b211eb18b1144704eb9dcb7e605328acde70c', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'e441824f32084a83a0e22c0f282ca73f8295464e', class: "feedback__share-feedback" }, h("p", { key: '7df4f4d3b6f6a2b893be59fbe7517aa8f63eb690' }, "To help us improve, ", h("a", { key: '6defbfffc7839fb2038716844998eeb897ed71b0', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
     }
     static get style() { return pennlibsFeedbackCss; }
 }, [257, "pennlibs-feedback", {

package/dist/components/pennlibs-footer.js

@@ -37,12 +37,12 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     }
     render() {
         const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
-        return (h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
+        return (h("footer", { key: '15d1f4477bd137e281fcbf6c1e3b70bf55a8a2e0', class: "website-footer-wrapper" }, h("div", { key: '04954e3b1095b6d510e1bae4e5a453f6ff5cb0ce', class: "website-footer", style: {
                 background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
                 backgroundSize: 'cover',
-            } }, h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7566" }, "(215) 898-7566")), h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            } }, h("div", { key: 'ba8ce4e14e0e9364863fac7a2839397e2e0b941a', class: "viewport-margins" }, h("div", { key: '63f34d4f96b284e724135ed8987cc2d3d2e3fbd1', class: "website-footer__content" }, h("div", { key: 'a1edf943618100610c6624d35193fc9f0f5968b3', class: "website-footer__links-container" }, h("section", { key: 'c7f7f781d1c6b239d520a8dc725381aec6281b8a' }, h("h2", { key: 'dc87452564eb1c1c1e75105ec8195917f7eb97a2', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '8510d8d758daee5d1c08bdbebf2fd741f6bc3b29', class: "website-footer__links" }, h("li", { key: '5975b1488a02111e692fd80e86db0f72baa4d9d3' }, h("a", { key: '2715c1c9c7a0f2ad1d677906eb5a34ab4c04007c', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '4d380fd2e056d972944a3866ebc52e25689cd44c' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3d52db897689c923b85c67159f8c53ca346e98c2' }, h("a", { key: '1010c1d279e1cb11c7a853f0997b5d8aabd33bdc', href: "tel:(215) 898-7566" }, "(215) 898-7566")), h("li", { key: 'f1d61d6e01c5e2a1fced55e145f101ccc37fdf29' }, h("a", { key: 'f1dc654a1af81a5847aef7c9fc21e025eb8dfced', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '1c96e99267b30a59b65f4e3d726ef948be202d2d' }, h("a", { key: '02c308d0c96d6148ca093e5e0882d5d22aa9c1db', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '639a1f5a03b1f646b8a519fa4749980512524f33' }, h("h2", { key: 'e8047c4763458e63d20c4dddd6a35dd6f144c016', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'd496f8fbea5a6c8a9d705c90588b6f750f4a8609', class: "website-footer__links" }, h("li", { key: '57d3280c71d8dcf57db397641c9418910cd4cb84' }, h("a", { key: 'c3203a8e36919031b5a14958765ad05c5e590e50', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '0025893e79dc5fde2a86c8305ff57bd7a4bd5962' }, h("a", { key: '4f20f07275a082c43e3dfdbf23b42487d0cc94da', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '7d6e64d3f6d921e7967b9eea4f307cba5a3c326d' }, h("a", { key: 'b145fc5809b8f2a8225351bd69296da5f803756d', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '471174a0eede78d94704c00d28284cfafc0553e9' }, h("a", { key: '031b7d1aad9f6c27a2898c57cab0b2909d5acc78', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
             this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
-        ]))), h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
+        ]))), h("div", { key: '5ac97b0c44a303ceeb84c88a5da2c7a5417afa55', class: "website-footer__footer" }, h("div", { key: '281481bf6d25945607e1431f634a9f6649b72300', class: "viewport-margins" }, h("ul", { key: '8e4626896cd9dd360eebe55df9f8eb98d485045e', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '021025b20149e8f53e17cf4df1f76a2d9045a52c' }, h("a", { key: '95bd80578f001c06f273800ee9b26c2069c8822c', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: 'be940d241e15c85f07ec8f229e4683ccbaf077e4' }, h("a", { key: '1e8db44efbe98e135495240a42e6e74a3829c665', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '14a7fb2dfdc4fe417fc66ae05b0e30db13739913' }, h("a", { key: '1e572fd1b6c7c48225a65ef58c1f4cdb2f67afd6', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '1aeecdc1384586c45ea1500e2a908a0bde97668e' }, h("a", { key: '9e94479dd864300421900e0e9fe4fbb3251d7524', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'a9d5ce618f8ed4ff4e8360dc11568b067f66101c' }, h("a", { key: '384f77c47f7d28b99fe9fbbf707948a180d973f1', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: 'a203f0efeea4cfd5275cdee380c12bb9d7e04a38' }, h("a", { key: 'a51d4b482d562aca31ff9b97703950562604ad48', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: '43f89da940afef08331d12e2991fa24220afce99', class: "viewport-margins" }, h("p", { key: '25863d379ecb9e7f46186858974a71e150188015', class: "built-with" }, "Built with the ", h("a", { key: '427150399d8b81e090315c01446452f2142bab63', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-header.js

@@ -55,7 +55,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
     }
     render() {
-        return (h("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, h("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, h("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, h("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, h("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
+        return (h("header", { key: '5b9d608f76d32ea50d377d251c2c2153a53b1875', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'b15e4a006b6a29f671df20e8bb65d2e9e71c25f3', class: "website-header__inner-container" }, h("div", { key: '5c3e13c63b317a44dee3b07c2dbcbdc4e33fb40a', class: "website-header__logo-name-container" }, h("a", { key: 'aa2d4a9b55fe73eac1b433da51db7e70c2a9100d', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: 'bff559907d2e26bb2e9f055645a68d7b35558ef5', href: "/", class: "website-header__service-link" }, h("span", { key: '30376d9a13d24c78dd10f11c74acc017bb7ef9ee', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '6bb01b158d0205a4d534b186379c0e00cb1cb076', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: 'bff814b020b3a7c4eee900c19a871e47bebbfac7', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'f1949adb87868902885d65a65504f4ee4eb9c799', class: "website-header__navigation" }, h("button", { key: '7cd866c7dfb52caa705a74c8af5bba443c55257e', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '84270b993db01e2c46ce8a94be6c61a95c59f40a', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: 'ff3234593474b8f5a63836a6f519d85a5fe73ba2', name: "end" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-hero.js

@@ -51,7 +51,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
         }
     }
     render() {
-        return (h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+        return (h("div", { key: '4234b8c7129b9ad562e979a62124bb8b059f4906', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '48e60ea4da5432ca67ad355d79043fdefc9f916f', class: "hero__content" }, h("slot", { key: 'f08f58488b758cb0a5fe88d8c05b37fda2332ca4', name: "start" }), h("div", { key: '17a6b7a12512779048dcfa5ef68f58be34743541', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'e059b09f3797425587c268e714e605f8abdd20d7', class: "viewport-margins" }, h("h1", { key: '152d036ee2d7838c6faa072c0ea795c31ea7b120', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: 'e942105a04ab4e75a502dbd19d5f465efb2acb18', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-02T13:58:36",
+  "timestamp": "2026-06-03T19:41:32",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.1",
@@ -162,6 +162,135 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/pennlibs-expand-text/pennlibs-expand-text.tsx",
+      "encapsulation": "shadow",
+      "tag": "pennlibs-expand-text",
+      "readme": "# pennlibs-expand-text\n\n\n",
+      "docs": "Clamp long text to a set number of lines with an inline \"More\" / \"Less\"\ntoggle. Useful for headings, descriptions, or any prose block that can\nrun long in narrow containers.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- The content to truncate. Accepts any flow content."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "collapseLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "collapse-label",
+          "reflectToAttr": false,
+          "docs": "Label for the toggle when content is expanded.",
+          "docsTags": [
+            {
+              "name": "prop",
+              "text": "collapse-label"
+            },
+            {
+              "name": "default",
+              "text": "'Less'"
+            }
+          ],
+          "default": "'Less'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "expandLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "expand-label",
+          "reflectToAttr": false,
+          "docs": "Label for the toggle when content is collapsed.",
+          "docsTags": [
+            {
+              "name": "prop",
+              "text": "expand-label"
+            },
+            {
+              "name": "default",
+              "text": "'More'"
+            }
+          ],
+          "default": "'More'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "lines",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "lines",
+          "reflectToAttr": false,
+          "docs": "Maximum number of lines to show before truncating.",
+          "docsTags": [
+            {
+              "name": "prop",
+              "text": "lines"
+            },
+            {
+              "name": "default",
+              "text": "3"
+            }
+          ],
+          "default": "3",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The content to truncate. Accepts any flow content."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx",
       "encapsulation": "shadow",

package/dist/{web/p-B2uNboIg.js → esm/index-DJQvPLp9.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@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  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\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    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, 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    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, 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-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, 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.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\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  overflow-wrap: anywhere;\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  /* 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  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\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    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, 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    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, 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-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, 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.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\n}";
 
 /*
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -1112,6 +1112,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
+    if (propType & 2 /* Number */) {
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -1186,7 +1189,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -1361,6 +1368,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -1498,6 +1506,12 @@ 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);
@@ -2257,7 +2271,7 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-B2uNboIg.js.map
+export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+//# sourceMappingURL=index-DJQvPLp9.js.map
 
-//# sourceMappingURL=p-B2uNboIg.js.map
+//# sourceMappingURL=index-DJQvPLp9.js.map