@penn-libraries/web 1.4.0-dev.1 → 1.4.0-dev.3

package/dist/esm/{pennlibs-expand-text_4.entry.js → pennlibs-accordion_5.entry.js}

@@ -1,4 +1,169 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getAssetPath } from './index-CgmxDHmi.js';
+import { r as registerInstance, a as getElement, h, H as Host, c as createEvent, d as getAssetPath } from './index-BXL8iX4F.js';
+
+const pennlibsAccordionCss = "pennlibs-accordion{display:contents}";
+
+let accordionUid = 0;
+const Accordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * When set, only one panel can be open at a time, so opening one closes the
+         * others, like a classic accordion.
+         * @prop single
+         */
+        this.single = false;
+        this.uid = accordionUid++;
+        this.items = [];
+        this.summaries = [];
+        // Roving focus between headers per the WAI-ARIA Accordion keyboard model.
+        // Enter/Space toggling is left to the browser's native <details> behavior.
+        this.onKeydown = (event) => {
+            var _a;
+            const current = event.currentTarget;
+            const index = this.summaries.indexOf(current);
+            if (index === -1)
+                return;
+            const count = this.summaries.length;
+            let next;
+            switch (event.key) {
+                case 'ArrowDown':
+                    next = (index + 1) % count;
+                    break;
+                case 'ArrowUp':
+                    next = (index - 1 + count) % count;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = count - 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            (_a = this.summaries[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onToggle = (event) => {
+            if (!this.single)
+                return;
+            const details = event.target;
+            if (!details.open)
+                return;
+            this.items.forEach((other) => {
+                if (other !== details && other.open)
+                    other.open = false;
+            });
+        };
+    }
+    componentDidLoad() {
+        this.collectItems();
+        this.enhanceItems();
+        this.syncControls(this.el, this.items.some((details) => details.open));
+    }
+    disconnectedCallback() {
+        this.summaries.forEach((summary) => summary.removeEventListener('keydown', this.onKeydown));
+        this.items.forEach((details) => details.removeEventListener('toggle', this.onToggle));
+    }
+    collectItems() {
+        this.items = Array.from(this.el.querySelectorAll(':scope > details, :scope > .pl-details'));
+        this.summaries = this.items
+            .map((details) => details.querySelector(':scope > summary'))
+            .filter((summary) => summary instanceof HTMLElement);
+    }
+    enhanceItems() {
+        this.items.forEach((details, index) => {
+            const summary = details.querySelector(':scope > summary');
+            if (!summary)
+                return;
+            const panel = summary.nextElementSibling;
+            const baseId = `pl-accordion-${this.uid}-${index}`;
+            // Wire the summary (the disclosure button) to its panel as a labelled
+            // region. Native <summary> already exposes the button role and
+            // aria-expanded, so we only add what it lacks.
+            if (!summary.id)
+                summary.id = `${baseId}-summary`;
+            if (panel) {
+                if (!panel.id)
+                    panel.id = `${baseId}-panel`;
+                if (!panel.hasAttribute('role'))
+                    panel.setAttribute('role', 'region');
+                if (!panel.hasAttribute('aria-labelledby'))
+                    panel.setAttribute('aria-labelledby', summary.id);
+                summary.setAttribute('aria-controls', panel.id);
+            }
+            summary.addEventListener('keydown', this.onKeydown);
+            details.addEventListener('toggle', this.onToggle);
+        });
+    }
+    // A declarative toggle-all control: any element marked with
+    // `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+    // accordion; set the value to an accordion's id to control one from elsewhere
+    // on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+    // accordions, or a number for that many levels. `data-pl-expand-label` and
+    // `data-pl-collapse-label` swap its text to match the state.
+    onControlClick(event) {
+        var _a;
+        const control = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-pl-accordion-toggle]');
+        if (!control || this.controlTarget(control) !== this.el)
+            return;
+        event.preventDefault();
+        const expanded = !this.items.some((details) => details.open);
+        this.setAll(this.el, expanded, this.controlDepth(control));
+    }
+    // The accordion a control points at: the element whose id is in the attribute
+    // value, or the closest enclosing accordion when the value is empty.
+    controlTarget(control) {
+        const id = control.getAttribute('data-pl-accordion-toggle');
+        return id ? document.getElementById(id) : control.closest('pennlibs-accordion');
+    }
+    // How many nested levels a control reaches: absent is none, a bare attribute
+    // is every level, and a non-negative number is that many levels down.
+    controlDepth(control) {
+        if (!control.hasAttribute('data-pl-accordion-toggle-deep'))
+            return 0;
+        const raw = control.getAttribute('data-pl-accordion-toggle-deep');
+        if (raw === null || raw === '')
+            return Infinity;
+        const levels = parseInt(raw, 10);
+        return Number.isFinite(levels) && levels >= 0 ? levels : Infinity;
+    }
+    // Expand or collapse every item in an accordion, pushing the same direction
+    // `levels` deep. Each level reads its own single-open rule, so nothing forces
+    // two panels open in a single-open group.
+    setAll(accordion, expanded, levels) {
+        const items = Array.from(accordion.querySelectorAll(':scope > details, :scope > .pl-details'));
+        if (expanded && accordion.single) {
+            items.forEach((details, index) => (details.open = index === 0));
+        }
+        else {
+            items.forEach((details) => (details.open = expanded));
+        }
+        this.syncControls(accordion, expanded);
+        if (levels > 0) {
+            this.nestedAccordions(accordion).forEach((nested) => this.setAll(nested, expanded, levels - 1));
+        }
+    }
+    // The accordions one level down from the given one (not their descendants).
+    nestedAccordions(accordion) {
+        return Array.from(accordion.querySelectorAll('pennlibs-accordion')).filter((node) => { var _a; return ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pennlibs-accordion')) === accordion; });
+    }
+    // Keep every control pointing at an accordion in sync with its state.
+    syncControls(accordion, expanded) {
+        document.querySelectorAll('[data-pl-accordion-toggle]').forEach((control) => {
+            if (this.controlTarget(control) !== accordion)
+                return;
+            control.setAttribute('aria-expanded', String(expanded));
+            const label = expanded
+                ? control.getAttribute('data-pl-collapse-label')
+                : control.getAttribute('data-pl-expand-label');
+            if (label)
+                control.textContent = label;
+        });
+    }
+    get el() { return getElement(this); }
+};
+Accordion.style = pennlibsAccordionCss;
 
 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)}";
 
@@ -259,5 +424,5 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-export { ExpandText as pennlibs_expand_text, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
-//# sourceMappingURL=pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
+export { Accordion as pennlibs_accordion, ExpandText as pennlibs_expand_text, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
+//# sourceMappingURL=pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as getAssetPath, h } from './index-CgmxDHmi.js';
+import { r as registerInstance, d as getAssetPath, h } from './index-BXL8iX4F.js';
 
 const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
 

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CgmxDHmi.js';
+import { r as registerInstance, h, a as getElement } from './index-BXL8iX4F.js';
 
 const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
 

package/dist/esm/web.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CgmxDHmi.js';
-export { s as setNonce } from './index-CgmxDHmi.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-BXL8iX4F.js';
+export { s as setNonce } from './index-BXL8iX4F.js';
 
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-expand-text_4",[[257,"pennlibs-expand-text",{"lines":[2],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"expanded":[32],"hasOverflow":[32],"measured":[32]}],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
+  return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-accordion_5",[[0,"pennlibs-accordion",{"single":[4]},[[4,"click","onControlClick"]]],[257,"pennlibs-expand-text",{"lines":[2],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"expanded":[32],"hasOverflow":[32],"measured":[32]}],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.js.map

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

@@ -0,0 +1,44 @@
+/**
+ * Composes a group of native `<details class="pl-details">` disclosures into an
+ * accordion. The markup is authored as plain styled details elements (see the
+ * Details pattern) so it works and is accessible without JavaScript; once this
+ * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+ * navigation between headers, region wiring, and an optional single-open mode.
+ *
+ * To expand or collapse every item at once, add a control with
+ * `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+ * accordion; set the value to an accordion's id to control one from elsewhere
+ * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+ * accordions, or give it a number to reach that many levels down.
+ * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+ * to match the state.
+ *
+ * This is a light-DOM component. It does not render its own template; it only
+ * enhances the `<details>` children it is given.
+ *
+ * @slot - One or more details items, each styled with the pl-details classes.
+ */
+export declare class Accordion {
+    el: HTMLElement;
+    /**
+     * When set, only one panel can be open at a time, so opening one closes the
+     * others, like a classic accordion.
+     * @prop single
+     */
+    single: boolean;
+    private uid;
+    private items;
+    private summaries;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private collectItems;
+    private enhanceItems;
+    private onKeydown;
+    private onToggle;
+    onControlClick(event: MouseEvent): void;
+    private controlTarget;
+    private controlDepth;
+    private setAll;
+    private nestedAccordions;
+    private syncControls;
+}

package/dist/types/components.d.ts

@@ -8,6 +8,30 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ActivatedEvent } from "./components/pennlibs-autocomplete/pennlibs-autocomplete";
 export { ActivatedEvent } from "./components/pennlibs-autocomplete/pennlibs-autocomplete";
 export namespace Components {
+    /**
+     * Composes a group of native `<details class="pl-details">` disclosures into an
+     * accordion. The markup is authored as plain styled details elements (see the
+     * Details pattern) so it works and is accessible without JavaScript; once this
+     * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+     * navigation between headers, region wiring, and an optional single-open mode.
+     * To expand or collapse every item at once, add a control with
+     * `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+     * accordion; set the value to an accordion's id to control one from elsewhere
+     * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+     * accordions, or give it a number to reach that many levels down.
+     * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+     * to match the state.
+     * This is a light-DOM component. It does not render its own template; it only
+     * enhances the `<details>` children it is given.
+     */
+    interface PennlibsAccordion {
+        /**
+          * When set, only one panel can be open at a time, so opening one closes the others, like a classic accordion.
+          * @prop single
+          * @default false
+         */
+        "single": boolean;
+    }
     /**
      * Offer predictive suggestions while typing your search query.
      */
@@ -186,6 +210,28 @@ export interface PennlibsFeedbackCustomEvent<T> extends CustomEvent<T> {
     target: HTMLPennlibsFeedbackElement;
 }
 declare global {
+    /**
+     * Composes a group of native `<details class="pl-details">` disclosures into an
+     * accordion. The markup is authored as plain styled details elements (see the
+     * Details pattern) so it works and is accessible without JavaScript; once this
+     * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+     * navigation between headers, region wiring, and an optional single-open mode.
+     * To expand or collapse every item at once, add a control with
+     * `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+     * accordion; set the value to an accordion's id to control one from elsewhere
+     * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+     * accordions, or give it a number to reach that many levels down.
+     * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+     * to match the state.
+     * This is a light-DOM component. It does not render its own template; it only
+     * enhances the `<details>` children it is given.
+     */
+    interface HTMLPennlibsAccordionElement extends Components.PennlibsAccordion, HTMLStencilElement {
+    }
+    var HTMLPennlibsAccordionElement: {
+        prototype: HTMLPennlibsAccordionElement;
+        new (): HTMLPennlibsAccordionElement;
+    };
     interface HTMLPennlibsAutocompleteElementEventMap {
         "pl:activated": ActivatedEvent;
     }
@@ -339,6 +385,7 @@ declare global {
         new (): HTMLPennlibsIiifImgElement;
     };
     interface HTMLElementTagNameMap {
+        "pennlibs-accordion": HTMLPennlibsAccordionElement;
         "pennlibs-autocomplete": HTMLPennlibsAutocompleteElement;
         "pennlibs-banner": HTMLPennlibsBannerElement;
         "pennlibs-chat": HTMLPennlibsChatElement;
@@ -352,6 +399,30 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * Composes a group of native `<details class="pl-details">` disclosures into an
+     * accordion. The markup is authored as plain styled details elements (see the
+     * Details pattern) so it works and is accessible without JavaScript; once this
+     * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+     * navigation between headers, region wiring, and an optional single-open mode.
+     * To expand or collapse every item at once, add a control with
+     * `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+     * accordion; set the value to an accordion's id to control one from elsewhere
+     * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+     * accordions, or give it a number to reach that many levels down.
+     * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+     * to match the state.
+     * This is a light-DOM component. It does not render its own template; it only
+     * enhances the `<details>` children it is given.
+     */
+    interface PennlibsAccordion {
+        /**
+          * When set, only one panel can be open at a time, so opening one closes the others, like a classic accordion.
+          * @prop single
+          * @default false
+         */
+        "single"?: boolean;
+    }
     /**
      * Offer predictive suggestions while typing your search query.
      */
@@ -536,6 +607,7 @@ declare namespace LocalJSX {
         "uuid": string;
     }
     interface IntrinsicElements {
+        "pennlibs-accordion": PennlibsAccordion;
         "pennlibs-autocomplete": PennlibsAutocomplete;
         "pennlibs-banner": PennlibsBanner;
         "pennlibs-chat": PennlibsChat;
@@ -552,6 +624,23 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Composes a group of native `<details class="pl-details">` disclosures into an
+             * accordion. The markup is authored as plain styled details elements (see the
+             * Details pattern) so it works and is accessible without JavaScript; once this
+             * component loads it layers on the WAI-ARIA Accordion behavior: keyboard
+             * navigation between headers, region wiring, and an optional single-open mode.
+             * To expand or collapse every item at once, add a control with
+             * `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+             * accordion; set the value to an accordion's id to control one from elsewhere
+             * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+             * accordions, or give it a number to reach that many levels down.
+             * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text
+             * to match the state.
+             * This is a light-DOM component. It does not render its own template; it only
+             * enhances the `<details>` children it is given.
+             */
+            "pennlibs-accordion": LocalJSX.PennlibsAccordion & JSXBase.HTMLAttributes<HTMLPennlibsAccordionElement>;
             /**
              * Offer predictive suggestions while typing your search query.
              */

package/dist/web/index.esm.js

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

package/dist/web/{p-eda436e7.entry.js → p-5bf6e5f8.entry.js}

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

package/dist/web/{p-2d7c03b3.entry.js → p-5f1cef00.entry.js}

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

package/dist/web/{p-7c1febd2.entry.js → p-61ae9fb2.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './p-CgmxDHmi.js';
+import { r as registerInstance, h, a as getElement } from './p-BXL8iX4F.js';
 
 const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
 

package/dist/web/{p-6ff0271c.entry.js → p-64e74684.entry.js}

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

package/dist/web/{p-b674bdca.entry.js → p-8b17cc4d.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as getAssetPath, h } from './p-CgmxDHmi.js';
+import { r as registerInstance, d as getAssetPath, h } from './p-BXL8iX4F.js';
 
 const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
 

package/dist/web/{p-6eef97ad.entry.js → p-9de28f5c.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './p-CgmxDHmi.js';
+import { r as registerInstance, h } from './p-BXL8iX4F.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-CgmxDHmi.js → web/p-BXL8iX4F.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}\n\n/*\n  Details\n\n  Styles a native <details>/<summary> as a disclosure: a subtle card whose\n  border and divider appear when open, with the default marker replaced by a\n  chevron that rotates on open. Pure CSS, no JavaScript required. Add\n  `.pl-details` to the <details>, `.pl-details__summary` to the <summary>, and\n  `.pl-details__content` to the panel that follows it.\n\n  Ported from the finding-aids prototype (`.faa-guide__details`).\n*/\n\n.pl-details {\n  border-radius: var(--pl-border-radius);\n  background: var(--pl-color-bg-subtle);\n  border: solid 1px transparent;\n}\n\n.pl-details[open] {\n  border-color: var(--pl-color-fg-subtle);\n}\n\n.pl-details[open] > .pl-details__summary {\n  border-bottom: solid 1px var(--pl-color-fg-subtle);\n}\n\n/* Headings used as the summary label shouldn't add their own bottom margin. */\n.pl-details__summary :is(h1, h2, h3, h4, h5, h6) {\n  margin-bottom: 0;\n}\n\n.pl-details__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pl-space-s);\n  cursor: pointer;\n  list-style: none;\n  padding: var(--pl-space-xs) var(--pl-space-m);\n}\n\n.pl-details__summary:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.pl-details__summary:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Remove the default disclosure triangle (Safari/Chrome use this marker). */\n.pl-details__summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Custom chevron that rotates 180° when the panel is open. */\n.pl-details__summary::after {\n  content: '';\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n  background: currentColor;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  transition: transform 0.2s ease;\n}\n\n.pl-details[open] > .pl-details__summary::after {\n  transform: rotate(180deg);\n}\n\n/* The content revealed when the disclosure is open. */\n.pl-details__content {\n  padding: var(--pl-space-m);\n  background: var(--pl-color-bg-default);\n  border-radius: 0 0 var(--pl-border-radius) var(--pl-border-radius);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pl-details__summary::after {\n    transition: none;\n  }\n}";
 
 /*
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -1645,7 +1645,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
-    instance = instance.render() ;
+    instance = instance.render && instance.render();
     {
       hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
@@ -2272,6 +2272,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 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-CgmxDHmi.js.map
+//# sourceMappingURL=p-BXL8iX4F.js.map
 
-//# sourceMappingURL=index-CgmxDHmi.js.map
+//# sourceMappingURL=p-BXL8iX4F.js.map