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

package/dist/components/pennlibs-hero.js

@@ -51,7 +51,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
         }
     }
     render() {
-        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 })))))));
+        return (h("div", { key: '11c5fe7ac2c3605ccbb6b7acd979469d136195c8', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '06d216d91c1c8330c1dbdb6084231c98b840387f', class: "hero__content" }, h("slot", { key: 'dd7516040bb5e8440f6acf8651675119686f0ce5', name: "start" }), h("div", { key: '81146751e4ae8e6a13a64236fba980ff66b01385', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: 'b46fb33705a043210e37f97f76abe56d9f96ce4a', class: "viewport-margins" }, h("h1", { key: 'e5f05c78315b3dcfe9c26fcd7c49bc338bc2d5b1', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '37a220f154057e74feaaa591ae25183de4c45880', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/pennlibs-service-switcher.d.ts

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

package/dist/components/pennlibs-service-switcher.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pennlibsServiceSwitcherCss = ".sc-pennlibs-service-switcher-h{position:relative;display:inline-flex;align-items:center;font-family:var(--pl-font-family);font-size:var(--pl-font-size)}.service-switcher__trigger.sc-pennlibs-service-switcher{all:unset;display:inline-flex;align-items:center;justify-content:center;padding:var(--pl-space-xs);border-radius:var(--pl-border-radius);cursor:pointer;color:var(--color-fg-service, var(--pl-color-penn-blue));background:var(--pl-color-bg-subtle);border:solid 1px transparent}.service-switcher__trigger.sc-pennlibs-service-switcher:hover{border-color:var(--pl-color-fg-subtle)}[theme=\"dark\"].sc-pennlibs-service-switcher-h .service-switcher__trigger.sc-pennlibs-service-switcher{background:rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.1)}[theme=\"dark\"].sc-pennlibs-service-switcher-h .service-switcher__trigger.sc-pennlibs-service-switcher:hover{background:rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.18);border-color:rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.4)}.service-switcher__trigger.sc-pennlibs-service-switcher:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.service-switcher__tooltip.sc-pennlibs-service-switcher{visibility:hidden;opacity:0;transition:opacity 120ms ease;position:absolute;z-index:10;top:calc(100% + var(--pl-space-2xs));left:50%;translate:-50%;width:max-content;max-width:16rem;padding:var(--pl-space-2xs) var(--pl-space-xs);border-radius:var(--pl-border-radius-subtle);background:var(--pl-color-fg-default);color:var(--pl-color-bg-default);font-size:0.875rem;line-height:1.4}@supports (anchor-name: --a){.service-switcher__trigger.sc-pennlibs-service-switcher{anchor-name:--service-switcher-anchor}.service-switcher__tooltip.sc-pennlibs-service-switcher{position-anchor:--service-switcher-anchor;top:calc(anchor(bottom) + var(--pl-space-2xs));left:anchor(center)}}.service-switcher__trigger.sc-pennlibs-service-switcher:hover+.service-switcher__tooltip.sc-pennlibs-service-switcher,.service-switcher__trigger.sc-pennlibs-service-switcher:focus-visible+.service-switcher__tooltip.sc-pennlibs-service-switcher,.service-switcher__tooltip.sc-pennlibs-service-switcher:hover{visibility:visible;opacity:1}.tooltip-dismissed.sc-pennlibs-service-switcher-h .service-switcher__trigger.sc-pennlibs-service-switcher+.service-switcher__tooltip.sc-pennlibs-service-switcher{visibility:hidden;opacity:0}.service-switcher__dialog.sc-pennlibs-service-switcher{--service-switcher-padding:var(--pl-space-xl);position:fixed;inset:0;margin:auto;width:min(90vw, 52rem);height:fit-content;max-height:calc(100dvh - var(--pl-space-2xl));overflow:auto;padding:0;border:1px solid var(--pl-color-fg-default);border-radius:var(--pl-border-radius-subtle);background:var(--pl-color-bg-default);color:var(--pl-color-fg-default)}.service-switcher__dialog.sc-pennlibs-service-switcher:focus{outline:none;box-shadow:var(--pl-focus-box-shadow)}.service-switcher__dialog.sc-pennlibs-service-switcher::backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.service-switcher__dialog-inner.sc-pennlibs-service-switcher{padding:var(--service-switcher-padding)}@media (max-width: 620px){.service-switcher__dialog.sc-pennlibs-service-switcher{--service-switcher-padding:var(--pl-space-l)}}.service-switcher__close.sc-pennlibs-service-switcher{all:unset;position:absolute;top:calc(var(--service-switcher-padding) - var(--pl-space-xs));right:calc(var(--service-switcher-padding) - var(--pl-space-xs));display:inline-flex;padding:var(--pl-space-2xs);border-radius:var(--pl-border-radius-subtle);color:var(--pl-color-fg-default);cursor:pointer}.service-switcher__close.sc-pennlibs-service-switcher:hover{background:var(--pl-color-bg-subtle)}.service-switcher__close.sc-pennlibs-service-switcher:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.service-switcher__dialog-inner.sc-pennlibs-service-switcher h1.sc-pennlibs-service-switcher{padding-right:var(--pl-space-xl)}.cards.sc-pennlibs-service-switcher{display:grid;gap:var(--pl-space-m);grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none}@media (max-width: 620px){.cards.sc-pennlibs-service-switcher{grid-template-columns:1fr}}.card.sc-pennlibs-service-switcher{position:relative;display:flex;flex-direction:column;gap:var(--pl-space-2xs);justify-content:space-between;min-height:6rem;padding:var(--pl-space-m);background-color:var(--pl-color-bg-default);border:1px solid var(--pl-color-fg-default);border-radius:var(--pl-border-radius-subtle);box-shadow:calc(-1 * var(--pl-space-2xs)) var(--pl-space-2xs) 0 var(--pl-color-fg-accent)}.card__heading.sc-pennlibs-service-switcher{margin:0;font-size:1.25rem;font-weight:500}.card__description.sc-pennlibs-service-switcher{margin:0;color:var(--pl-color-fg-subtle)}.card__link.sc-pennlibs-service-switcher{color:var(--pl-color-fg-default);text-decoration:none}.card__link.sc-pennlibs-service-switcher:hover{text-decoration:underline}.card__link.sc-pennlibs-service-switcher::after{content:\"\";position:absolute;inset:0}";
+
+// The Penn Libraries services the switcher links to. The component owns this
+// list — consumers don't author it.
+const SERVICES = [
+    { href: 'https://www.library.upenn.edu/', name: 'Using the library', description: 'Get hours, plan your visit, and use our many services.' },
+    { href: 'https://find.library.upenn.edu', name: 'Find', description: 'Search our catalog to find materials and manage your account.' },
+    { href: 'https://digitalcollections.library.upenn.edu/', name: 'Digital Collections', description: 'Browse digitized originals from our libraries and partners.' },
+    { href: 'https://findingaids.library.upenn.edu/', name: 'Philadelphia Area Archives', description: 'Explore primary sources held by archives across the area.' },
+];
+// The trigger's accessible name and the text shown in its hover/focus tooltip.
+const TRIGGER_LABEL = 'Pick your place to start';
+const ServiceSwitcher = /*@__PURE__*/ proxyCustomElement(class ServiceSwitcher extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * The visual theme, matching the surrounding header. `dark` keeps the icon
+         * light and uses a translucent chip; `light` uses the default solid chip.
+         * @default 'light'
+         */
+        this.theme = 'light';
+        this.isOpen = false;
+        this.tooltipDismissed = false;
+        this.open = () => {
+            var _a, _b;
+            this.isOpen = true;
+            (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+            // Move focus to the modal itself (rather than the first focusable control)
+            // so assistive tech announces the dialog and its heading on open.
+            (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.focus();
+        };
+        this.close = () => {
+            var _a;
+            (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        // Native <dialog> handles Escape and restores focus to the trigger on close;
+        // we only sync our open state and close when the backdrop itself is clicked.
+        this.handleDialogClose = () => {
+            this.isOpen = false;
+        };
+        this.handleDialogClick = (event) => {
+            if (event.target === this.dialogEl) {
+                this.close();
+            }
+        };
+        // The tooltip shows on hover/focus via CSS. Escape dismisses it without moving
+        // focus (WCAG 1.4.13); leaving or blurring the trigger re-arms it.
+        this.dismissTooltip = (event) => {
+            if (event.key === 'Escape') {
+                this.tooltipDismissed = true;
+            }
+        };
+        this.rearmTooltip = () => {
+            this.tooltipDismissed = false;
+        };
+    }
+    renderIcon() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false" }, h("circle", { cx: "5", cy: "5", r: "2", fill: "currentColor" }), h("circle", { cx: "15", cy: "5", r: "2", fill: "currentColor" }), h("circle", { cx: "5", cy: "15", r: "2", fill: "currentColor" }), h("circle", { cx: "15", cy: "15", r: "2", fill: "currentColor" })));
+    }
+    render() {
+        return (h(Host, { key: '052d82ad0bbccd5ef2b303b22579d2865abe92c8', class: { 'tooltip-dismissed': this.tooltipDismissed } }, h("button", { key: '0e0a4e62979a29629a77baad883cfc82ca5c4981', type: "button", class: "service-switcher__trigger", "aria-haspopup": "dialog", "aria-expanded": String(this.isOpen), "aria-controls": "service-switcher-panel", "aria-labelledby": "service-switcher-tooltip", onClick: this.open, onKeyDown: this.dismissTooltip, onMouseLeave: this.rearmTooltip, onBlur: this.rearmTooltip }, this.renderIcon()), h("span", { key: '223c39feaeddc8ea53e798026a45a2ccbc58d4ab', id: "service-switcher-tooltip", role: "tooltip", class: "service-switcher__tooltip" }, TRIGGER_LABEL), h("dialog", { key: '0247e2efa23022ff3e9b50941f072abdc8e70d98', id: "service-switcher-panel", class: "service-switcher__dialog pl-typeset pl-reset", tabindex: "-1", "aria-labelledby": "service-switcher-title", ref: (el) => (this.dialogEl = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick }, h("div", { key: '45500c7931e19a80fbe8279d0b2b1e36cde31bf3', class: "service-switcher__dialog-inner pl-typeset" }, h("h1", { key: '8228917093f0e3e092d9dcae98f00594e8d4ca91', id: "service-switcher-title" }, "Pick your place to start"), h("button", { key: '920055a94d8fd2a0201b8906179d0937cce05123', type: "button", class: "service-switcher__close", "aria-label": "Close", onClick: this.close }, h("svg", { key: 'f797796f2d78ea7b019d15d7f378961aff1971cf', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false" }, h("path", { key: '5634773a6c2de9ecbcca44430d3f0f86d5c1ce36', d: "M17 7L7 17M7 7L17 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: '7fd42daeb400679f90873e2bde8e31949e0668ca', class: "cards" }, SERVICES.map((service) => (h("li", { class: "card" }, h("h3", { class: "card__heading" }, h("a", { class: "card__link", href: service.href }, service.name)), service.description && (h("p", { class: "card__description" }, service.description))))))))));
+    }
+    static get style() { return pennlibsServiceSwitcherCss; }
+}, [258, "pennlibs-service-switcher", {
+        "theme": [513],
+        "isOpen": [32],
+        "tooltipDismissed": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-service-switcher"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-service-switcher":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ServiceSwitcher);
+            }
+            break;
+    } });
+}
+
+const PennlibsServiceSwitcher = ServiceSwitcher;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsServiceSwitcher, defineCustomElement };
+//# sourceMappingURL=pennlibs-service-switcher.js.map
+
+//# sourceMappingURL=pennlibs-service-switcher.js.map

package/dist/components/pennlibs-service-switcher.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-service-switcher.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-service-switcher/pennlibs-service-switcher.css?tag=pennlibs-service-switcher&encapsulation=scoped","src/components/pennlibs-service-switcher/pennlibs-service-switcher.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n}\n\n/* Icon-only trigger. Inherits the header's themed service color so it works on\n   both light and dark headers. */\n.service-switcher__trigger {\n  all: unset;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--pl-space-xs);\n  border-radius: var(--pl-border-radius);\n  cursor: pointer;\n  /* Icon takes the header's themed service color (penn-blue on light, light on\n     dark). The chip keeps the default solid background on the light header. */\n  color: var(--color-fg-service, var(--pl-color-penn-blue));\n  background: var(--pl-color-bg-subtle);\n  border: solid 1px transparent;\n}\n\n.service-switcher__trigger:hover {\n  border-color: var(--pl-color-fg-subtle);\n}\n\n/* Dark header: swap the solid chip for a translucent one derived from the\n   (light) service color, so the penn-blue header shows through. */\n:host([theme=\"dark\"]) .service-switcher__trigger {\n  background: rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.1);\n}\n\n:host([theme=\"dark\"]) .service-switcher__trigger:hover {\n  background: rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.18);\n  border-color: rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.4);\n}\n\n.service-switcher__trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Tooltip showing the trigger's label on hover/focus. Hidden by default;\n   revealed by the rules below. */\n.service-switcher__tooltip {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 120ms ease;\n  position: absolute;\n  z-index: 10;\n  /* Fallback placement: centered under the trigger (the :host wraps it). */\n  top: calc(100% + var(--pl-space-2xs));\n  left: 50%;\n  translate: -50%;\n  width: max-content;\n  max-width: 16rem;\n  padding: var(--pl-space-2xs) var(--pl-space-xs);\n  border-radius: var(--pl-border-radius-subtle);\n  background: var(--pl-color-fg-default);\n  color: var(--pl-color-bg-default);\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* Progressive enhancement: anchor the tooltip to the trigger so it isn't tied\n   to the :host containing block (and won't be clipped by header overflow). */\n@supports (anchor-name: --a) {\n  .service-switcher__trigger {\n    anchor-name: --service-switcher-anchor;\n  }\n\n  .service-switcher__tooltip {\n    position-anchor: --service-switcher-anchor;\n    top: calc(anchor(bottom) + var(--pl-space-2xs));\n    left: anchor(center);\n  }\n}\n\n/* Show on pointer hover, keyboard focus, or when hovering the tooltip itself\n   (so it's hoverable/persistent per WCAG 1.4.13). */\n.service-switcher__trigger:hover + .service-switcher__tooltip,\n.service-switcher__trigger:focus-visible + .service-switcher__tooltip,\n.service-switcher__tooltip:hover {\n  visibility: visible;\n  opacity: 1;\n}\n\n/* Escape-dismissed: force-hide even while hovered/focused. Placed last so it\n   wins the source-order tie against the show rules above. */\n:host(.tooltip-dismissed) .service-switcher__trigger + .service-switcher__tooltip {\n  visibility: hidden;\n  opacity: 0;\n}\n\n/* Centered modal dialog (native <dialog> opened with showModal). */\n.service-switcher__dialog {\n  /* Single source for the modal body inset; the close button aligns to it. */\n  --service-switcher-padding: var(--pl-space-xl);\n  position: fixed;\n  inset: 0;\n  margin: auto;\n  width: min(90vw, 52rem);\n  height: fit-content;\n  max-height: calc(100dvh - var(--pl-space-2xl));\n  overflow: auto;\n  padding: 0;\n  border: 1px solid var(--pl-color-fg-default);\n  border-radius: var(--pl-border-radius-subtle);\n  background: var(--pl-color-bg-default);\n  color: var(--pl-color-fg-default);\n}\n\n/* The dialog is focused on open; show the design system focus ring around the\n   whole modal so it's clear the modal itself has focus. Uses `:focus` (not\n   `:focus-visible`) because the focus is moved programmatically, not by keyboard. */\n.service-switcher__dialog:focus {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.service-switcher__dialog::backdrop {\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.service-switcher__dialog-inner {\n  padding: var(--service-switcher-padding);\n}\n\n@media (max-width: 620px) {\n  .service-switcher__dialog {\n    --service-switcher-padding: var(--pl-space-l);\n  }\n}\n\n/* Bare icon close, pinned to the upper-right of the modal. */\n.service-switcher__close {\n  all: unset;\n  position: absolute;\n  top: calc(var(--service-switcher-padding) - var(--pl-space-xs));\n  right: calc(var(--service-switcher-padding) - var(--pl-space-xs));\n  display: inline-flex;\n  padding: var(--pl-space-2xs);\n  border-radius: var(--pl-border-radius-subtle);\n  color: var(--pl-color-fg-default);\n  cursor: pointer;\n}\n\n.service-switcher__close:hover {\n  background: var(--pl-color-bg-subtle);\n}\n\n/* `all: unset` clears the inherited focus ring, so restore it explicitly. */\n.service-switcher__close:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Keep the heading clear of the absolutely-positioned close button. */\n.service-switcher__dialog-inner h1 {\n  padding-right: var(--pl-space-xl);\n}\n\n/* Cards — mirrors docs/css/card.css (a docs-only stylesheet, not shipped).\n   Two columns on wider screens (so four services read as a 2×2 grid), stacking\n   to one column on narrow screens. */\n.cards {\n  display: grid;\n  gap: var(--pl-space-m);\n  grid-template-columns: 1fr 1fr;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n@media (max-width: 620px) {\n  .cards {\n    grid-template-columns: 1fr;\n  }\n}\n\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pl-space-2xs);\n  justify-content: space-between;\n  min-height: 6rem;\n  padding: var(--pl-space-m);\n  background-color: var(--pl-color-bg-default);\n  border: 1px solid var(--pl-color-fg-default);\n  border-radius: var(--pl-border-radius-subtle);\n  box-shadow: calc(-1 * var(--pl-space-2xs)) var(--pl-space-2xs) 0 var(--pl-color-fg-accent);\n}\n\n.card__heading {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 500;\n}\n\n.card__description {\n  margin: 0;\n  color: var(--pl-color-fg-subtle);\n}\n\n.card__link {\n  color: var(--pl-color-fg-default);\n  text-decoration: none;\n}\n\n.card__link:hover {\n  text-decoration: underline;\n}\n\n.card__link::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n\n","import { Component, Prop, State, Host, h } from '@stencil/core';\n\ninterface ServiceItem {\n  href: string;\n  name: string;\n  description: string;\n}\n\n// The Penn Libraries services the switcher links to. The component owns this\n// list — consumers don't author it.\nconst SERVICES: ServiceItem[] = [\n  { href: 'https://www.library.upenn.edu/', name: 'Using the library', description: 'Get hours, plan your visit, and use our many services.' },\n  { href: 'https://find.library.upenn.edu', name: 'Find', description: 'Search our catalog to find materials and manage your account.' },\n  { href: 'https://digitalcollections.library.upenn.edu/', name: 'Digital Collections', description: 'Browse digitized originals from our libraries and partners.' },\n  { href: 'https://findingaids.library.upenn.edu/', name: 'Philadelphia Area Archives', description: 'Explore primary sources held by archives across the area.' },\n];\n\n// The trigger's accessible name and the text shown in its hover/focus tooltip.\nconst TRIGGER_LABEL = 'Pick your place to start';\n\n/**\n * A \"waffle\" switcher that helps people move between Penn Libraries services\n * (Find, Digital Collections, Philadelphia Area Archives, and the main library\n * site) and discover which one fits their task. The list of services is built\n * into the component — consumers don't author it. Slots into `pennlibs-header`\n * beside the logo via the `service-switcher` slot.\n *\n * @component\n * @example\n * <pennlibs-service-switcher></pennlibs-service-switcher>\n */\n@Component({\n  tag: 'pennlibs-service-switcher',\n  styleUrl: 'pennlibs-service-switcher.css',\n  scoped: true,\n})\nexport class ServiceSwitcher {\n  /**\n   * The visual theme, matching the surrounding header. `dark` keeps the icon\n   * light and uses a translucent chip; `light` uses the default solid chip.\n   * @default 'light'\n   */\n  @Prop({ reflect: true }) theme: 'light' | 'dark' = 'light';\n\n  @State() isOpen: boolean = false;\n  @State() tooltipDismissed: boolean = false;\n\n  private dialogEl?: HTMLDialogElement;\n\n  private open = () => {\n    this.isOpen = true;\n    this.dialogEl?.showModal();\n    // Move focus to the modal itself (rather than the first focusable control)\n    // so assistive tech announces the dialog and its heading on open.\n    this.dialogEl?.focus();\n  };\n\n  private close = () => {\n    this.dialogEl?.close();\n  };\n\n  // Native <dialog> handles Escape and restores focus to the trigger on close;\n  // we only sync our open state and close when the backdrop itself is clicked.\n  private handleDialogClose = () => {\n    this.isOpen = false;\n  };\n\n  private handleDialogClick = (event: MouseEvent) => {\n    if (event.target === this.dialogEl) {\n      this.close();\n    }\n  };\n\n  // The tooltip shows on hover/focus via CSS. Escape dismisses it without moving\n  // focus (WCAG 1.4.13); leaving or blurring the trigger re-arms it.\n  private dismissTooltip = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.tooltipDismissed = true;\n    }\n  };\n\n  private rearmTooltip = () => {\n    this.tooltipDismissed = false;\n  };\n\n  private renderIcon() {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <circle cx=\"5\" cy=\"5\" r=\"2\" fill=\"currentColor\" />\n        <circle cx=\"15\" cy=\"5\" r=\"2\" fill=\"currentColor\" />\n        <circle cx=\"5\" cy=\"15\" r=\"2\" fill=\"currentColor\" />\n        <circle cx=\"15\" cy=\"15\" r=\"2\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={{ 'tooltip-dismissed': this.tooltipDismissed }}>\n        <button\n          type=\"button\"\n          class=\"service-switcher__trigger\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={String(this.isOpen)}\n          aria-controls=\"service-switcher-panel\"\n          aria-labelledby=\"service-switcher-tooltip\"\n          onClick={this.open}\n          onKeyDown={this.dismissTooltip}\n          onMouseLeave={this.rearmTooltip}\n          onBlur={this.rearmTooltip}\n        >\n          {this.renderIcon()}\n        </button>\n        <span id=\"service-switcher-tooltip\" role=\"tooltip\" class=\"service-switcher__tooltip\">\n          {TRIGGER_LABEL}\n        </span>\n\n        <dialog\n          id=\"service-switcher-panel\"\n          class=\"service-switcher__dialog pl-typeset pl-reset\"\n          tabindex=\"-1\"\n          aria-labelledby=\"service-switcher-title\"\n          ref={(el) => (this.dialogEl = el as HTMLDialogElement)}\n          onClose={this.handleDialogClose}\n          onClick={this.handleDialogClick}\n        >\n          <div class=\"service-switcher__dialog-inner pl-typeset\">\n            <h1 id=\"service-switcher-title\">\n              Pick your place to start\n            </h1>\n            <button\n              type=\"button\"\n              class=\"service-switcher__close\"\n              aria-label=\"Close\"\n              onClick={this.close}\n            >\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M17 7L7 17M7 7L17 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n            <ul class=\"cards\">\n              {SERVICES.map((service) => (\n                <li class=\"card\">\n                  <h3 class=\"card__heading\">\n                    <a class=\"card__link\" href={service.href}>\n                      {service.name}\n                    </a>\n                  </h3>\n                  {service.description && (\n                    <p class=\"card__description\">{service.description}</p>\n                  )}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-17T18:34:27",
+  "timestamp": "2026-06-22T18:45:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.1",
@@ -555,6 +555,10 @@
           "name": "slot",
           "text": "name-end - Content to display at the end of the service name (right side)"
         },
+        {
+          "name": "slot",
+          "text": "service-switcher - A pennlibs-service-switcher placed between the logo and the service name"
+        },
         {
           "name": "prop",
           "text": "--pl-viewport-margins-max-width: The maximum width of the header."
@@ -688,6 +692,10 @@
         {
           "name": "name-end",
           "docs": "Content to display at the end of the service name (right side)"
+        },
+        {
+          "name": "service-switcher",
+          "docs": "A pennlibs-service-switcher placed between the logo and the service name"
         }
       ],
       "parts": [],
@@ -961,6 +969,68 @@
           "pennlibs-fallback-img"
         ]
       }
+    },
+    {
+      "filePath": "src/components/pennlibs-service-switcher/pennlibs-service-switcher.tsx",
+      "encapsulation": "scoped",
+      "tag": "pennlibs-service-switcher",
+      "readme": "# pennlibs-service-switcher\n\n\n",
+      "docs": "A \"waffle\" switcher that helps people move between Penn Libraries services\n(Find, Digital Collections, Philadelphia Area Archives, and the main library\nsite) and discover which one fits their task. The list of services is built\ninto the component — consumers don't author it. Slots into `pennlibs-header`\nbeside the logo via the `service-switcher` slot.",
+      "docsTags": [
+        {
+          "name": "component"
+        },
+        {
+          "name": "example",
+          "text": "<pennlibs-service-switcher></pennlibs-service-switcher>"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "theme",
+          "type": "\"dark\" | \"light\"",
+          "complexType": {
+            "original": "'light' | 'dark'",
+            "resolved": "\"dark\" | \"light\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "theme",
+          "reflectToAttr": true,
+          "docs": "The visual theme, matching the surrounding header. `dark` keeps the icon\nlight and uses a translucent chip; `light` uses the default solid chip.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'light'"
+            }
+          ],
+          "default": "'light'",
+          "values": [
+            {
+              "value": "dark",
+              "type": "string"
+            },
+            {
+              "value": "light",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
     }
   ],
   "typeLibrary": {

package/dist/{web/p-BXL8iX4F.js → esm/index-BxutzoSj.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  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}";
+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  Caps\n\n  Small uppercase label type used throughout the site, such as table headers\n  and section labels. The subtle variant dims it with the subtle foreground.\n*/\n\n.pl-caps,\n.pl-caps-subtle {\n  font-size: 0.8rem;\n  font-weight: 600;\n  letter-spacing: 0.075rem;\n  text-transform: uppercase;\n  vertical-align: middle;\n}\n\n.pl-caps-subtle {\n  color: var(--pl-color-fg-subtle);\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/* Baseline focus indicator: apply the focus pattern to every focusable element.\n   `:where()` keeps specificity at 0 so component and utility styles can override. */\n:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\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  & > .pl-details:first-of-type,\n  & > pennlibs-accordion {\n    margin-top: var(--pl-space-m);\n  }\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
@@ -201,6 +201,9 @@ var getAssetPath = (path) => {
   return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
+
+// src/utils/helpers.ts
+var isDef = (v) => v != null && v !== void 0;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -711,6 +714,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
+  let scopeId2;
+  {
+    const cmpMeta = hostRef.$cmpMeta$;
+    if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
+      scopeId2 = hostElm["s-sc"];
+      hostElm.classList.add(scopeId2 + "-h");
+    } else if (hostElm["s-sc"]) {
+      delete hostElm["s-sc"];
+    }
+  }
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
     initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
@@ -814,6 +827,11 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
+  if (scopeId2 && slotNodes.length) {
+    slotNodes.forEach((slot) => {
+      slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
+    });
+  }
   if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
@@ -843,6 +861,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
   let childIdSplt;
   let childVNode;
   let i2;
+  const scopeId2 = hostElm["s-sc"];
   if (node.nodeType === 1 /* ElementNode */) {
     childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
     if (childNodeType) {
@@ -865,6 +884,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
+        if (scopeId2 && childIdSplt[0] === hostId) {
+          node["s-si"] = scopeId2;
+          childVNode.$attrs$.class += " " + scopeId2;
+        }
         const slotName = childVNode.$elm$.getAttribute("s-sn");
         if (typeof slotName === "string") {
           if (childVNode.$tag$ === "slot-fb") {
@@ -879,6 +902,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
+            if (scopeId2) {
+              node.classList.add(scopeId2);
+            }
           }
           childVNode.$elm$["s-sn"] = slotName;
           childVNode.$elm$.removeAttribute("s-sn");
@@ -1300,6 +1326,9 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
+
+// src/runtime/vdom/vdom-render.ts
+var scopeId;
 var hostTagName;
 var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
@@ -1328,6 +1357,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
+    if (isDef(scopeId) && elm["s-si"] !== scopeId) {
+      elm.classList.add(elm["s-si"] = scopeId);
+    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2);
@@ -1513,10 +1545,34 @@ var nullifyVNodeRefs = (vNode) => {
   }
 };
 var insertBefore = (parent, newNode, reference) => {
+  if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
+  }
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
 };
+function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
+  var _a, _b;
+  let scopeId2;
+  if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
+    const scopeName = slotNode["s-sn"];
+    const hostName = slotNode["s-hn"];
+    (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
+    if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
+      let child = (oldParent.__childNodes || oldParent.childNodes)[0];
+      let found = false;
+      while (child) {
+        if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
+          found = true;
+          break;
+        }
+        child = child.nextSibling;
+      }
+      if (!found) oldParent.classList.remove(scopeId2 + "-s");
+    }
+  }
+}
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -1543,6 +1599,9 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
+  {
+    scopeId = hostElm["s-sc"];
+  }
   patch(oldVNode, rootVnode, isInitialLoad);
 };
 
@@ -2014,6 +2073,9 @@ var connectedCallback = (elm) => {
           if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
+          } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta);
+            elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
@@ -2272,6 +2334,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=p-BXL8iX4F.js.map
+//# sourceMappingURL=index-BxutzoSj.js.map
 
-//# sourceMappingURL=p-BXL8iX4F.js.map
+//# sourceMappingURL=index-BxutzoSj.js.map