@penn-libraries/web 1.4.0-dev.5 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-Bh9Ii5qa.js → index-BEV8Fxnb.js} +3 -3
- package/dist/cjs/index-BEV8Fxnb.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pennlibs-accordion.pennlibs-chat.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.cjs.js.map +1 -0
- package/dist/cjs/{pennlibs-accordion_6.cjs.entry.js → pennlibs-accordion_7.cjs.entry.js} +34 -9
- package/dist/cjs/pennlibs-autocomplete.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-hero.cjs.entry.js +2 -2
- package/dist/cjs/pennlibs-iiif-img.cjs.entry.js +1 -1
- package/dist/cjs/web.cjs.js +2 -2
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.css +28 -10
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +5 -2
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
- package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.css +13 -15
- package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.js +9 -4
- package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.js.map +1 -1
- package/dist/components/pennlibs-header.js +6 -3
- package/dist/components/pennlibs-header.js.map +1 -1
- package/dist/components/pennlibs-hero.js +1 -1
- package/dist/components/pennlibs-service-switcher.js +10 -5
- package/dist/components/pennlibs-service-switcher.js.map +1 -1
- package/dist/docs.json +2 -2
- package/dist/{web/p-BxutzoSj.js → esm/index-bRVVFGb9.js} +3 -3
- package/dist/esm/index-bRVVFGb9.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pennlibs-accordion.pennlibs-chat.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.js.map +1 -0
- package/dist/esm/{pennlibs-accordion_6.entry.js → pennlibs-accordion_7.entry.js} +34 -10
- package/dist/esm/pennlibs-autocomplete.entry.js +1 -1
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-fallback-img.entry.js +1 -1
- package/dist/esm/pennlibs-hero.entry.js +2 -2
- package/dist/esm/pennlibs-iiif-img.entry.js +1 -1
- package/dist/esm/web.js +3 -3
- package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +1 -0
- package/dist/web/index.esm.js +1 -1
- package/dist/web/{p-6ea9889d.entry.js → p-471b1429.entry.js} +34 -10
- package/dist/web/{p-48ff4883.entry.js → p-4c381ac3.entry.js} +1 -1
- package/dist/web/{p-152d30af.entry.js → p-5598f2cc.entry.js} +1 -1
- package/dist/web/{p-bca28ffd.entry.js → p-6b5a4ada.entry.js} +1 -1
- package/dist/web/{p-4af80a22.entry.js → p-b3a586ba.entry.js} +2 -2
- package/dist/{esm/index-BxutzoSj.js → web/p-bRVVFGb9.js} +3 -3
- package/dist/web/p-bRVVFGb9.js.map +1 -0
- package/dist/web/{p-b503cf62.entry.js → p-d6de8bc6.entry.js} +1 -1
- package/dist/web/pennlibs-accordion.pennlibs-chat.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.esm.js.map +1 -0
- package/dist/web/web.css +282 -262
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.js +17 -9
- package/hydrate/index.mjs +17 -9
- package/package.json +1 -1
- package/dist/cjs/index-Bh9Ii5qa.js.map +0 -1
- package/dist/cjs/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.cjs.js.map +0 -1
- package/dist/cjs/pennlibs-chat.cjs.entry.js +0 -23
- package/dist/cjs/pennlibs-chat.entry.cjs.js.map +0 -1
- package/dist/esm/index-BxutzoSj.js.map +0 -1
- package/dist/esm/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.js.map +0 -1
- package/dist/esm/pennlibs-chat.entry.js +0 -21
- package/dist/esm/pennlibs-chat.entry.js.map +0 -1
- package/dist/web/p-BxutzoSj.js.map +0 -1
- package/dist/web/p-bcfaaae4.entry.js +0 -21
- package/dist/web/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.esm.js.map +0 -1
- package/dist/web/pennlibs-chat.entry.esm.js.map +0 -1
|
@@ -51,7 +51,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
54
|
+
return (h("div", { key: '4d2047c44cc7c2a130a8e386831ce2d3bf383123', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '08d0f3d283544a04fa6dc172f9aba6203ed89b41', class: "hero__content" }, h("slot", { key: 'eef5d8d7e20ea6be18adeb91d68119771824f96c', name: "start" }), h("div", { key: '2c7520fe2cad41a536a6fa65307444291557a811', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '446507027c2dda2bcf2e517cfd6879d0874e0fcb', class: "viewport-margins" }, h("h1", { key: 'ab8f54af0a6e98f8a28d246926eb9905e4769f47', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: 'c4fde6dbcdf84a1236a540a540d46df154ac9a4e', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
55
55
|
}
|
|
56
56
|
static get assetsDirs() { return ["assets"]; }
|
|
57
57
|
get hostElement() { return this; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
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:
|
|
3
|
+
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) var(--pl-space-2xs);border-radius:var(--pl-border-radius-subtle);cursor:pointer;color:var(--color-fg-service, var(--pl-color-penn-blue));background:transparent;border:solid 1px transparent}.service-switcher__trigger.sc-pennlibs-service-switcher:hover,.service-switcher__trigger[aria-expanded=\"true\"].sc-pennlibs-service-switcher{background:var(--pl-color-bg-subtle)}[theme=\"dark\"].sc-pennlibs-service-switcher-h .service-switcher__trigger.sc-pennlibs-service-switcher:hover,[theme=\"dark\"].sc-pennlibs-service-switcher-h .service-switcher__trigger[aria-expanded=\"true\"].sc-pennlibs-service-switcher{background:rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.15)}.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}";
|
|
4
4
|
|
|
5
5
|
// The Penn Libraries services the switcher links to. The component owns this
|
|
6
6
|
// list — consumers don't author it.
|
|
@@ -11,7 +11,7 @@ const SERVICES = [
|
|
|
11
11
|
{ href: 'https://findingaids.library.upenn.edu/', name: 'Philadelphia Area Archives', description: 'Explore primary sources held by archives across the area.' },
|
|
12
12
|
];
|
|
13
13
|
// The trigger's accessible name and the text shown in its hover/focus tooltip.
|
|
14
|
-
const TRIGGER_LABEL = '
|
|
14
|
+
const TRIGGER_LABEL = 'Where would you like to go?';
|
|
15
15
|
const ServiceSwitcher = /*@__PURE__*/ proxyCustomElement(class ServiceSwitcher extends HTMLElement {
|
|
16
16
|
constructor(registerHost) {
|
|
17
17
|
super();
|
|
@@ -30,6 +30,9 @@ const ServiceSwitcher = /*@__PURE__*/ proxyCustomElement(class ServiceSwitcher e
|
|
|
30
30
|
var _a, _b;
|
|
31
31
|
this.isOpen = true;
|
|
32
32
|
(_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
33
|
+
// Native <dialog> doesn't lock the page behind it, so stop the document
|
|
34
|
+
// from scrolling while the modal is open. Restored in handleDialogClose.
|
|
35
|
+
document.body.style.overflow = 'hidden';
|
|
33
36
|
// Move focus to the modal itself (rather than the first focusable control)
|
|
34
37
|
// so assistive tech announces the dialog and its heading on open.
|
|
35
38
|
(_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.focus();
|
|
@@ -39,9 +42,11 @@ const ServiceSwitcher = /*@__PURE__*/ proxyCustomElement(class ServiceSwitcher e
|
|
|
39
42
|
(_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.close();
|
|
40
43
|
};
|
|
41
44
|
// Native <dialog> handles Escape and restores focus to the trigger on close;
|
|
42
|
-
// we only sync our open state and close when the
|
|
45
|
+
// we only sync our open state, re-enable page scrolling, and close when the
|
|
46
|
+
// backdrop itself is clicked.
|
|
43
47
|
this.handleDialogClose = () => {
|
|
44
48
|
this.isOpen = false;
|
|
49
|
+
document.body.style.overflow = '';
|
|
45
50
|
};
|
|
46
51
|
this.handleDialogClick = (event) => {
|
|
47
52
|
if (event.target === this.dialogEl) {
|
|
@@ -60,10 +65,10 @@ const ServiceSwitcher = /*@__PURE__*/ proxyCustomElement(class ServiceSwitcher e
|
|
|
60
65
|
};
|
|
61
66
|
}
|
|
62
67
|
renderIcon() {
|
|
63
|
-
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: "
|
|
68
|
+
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: "10", cy: "2.5", r: "1.6", fill: "currentColor" }), h("circle", { cx: "10", cy: "10", r: "1.6", fill: "currentColor" }), h("circle", { cx: "10", cy: "17.5", r: "1.6", fill: "currentColor" })));
|
|
64
69
|
}
|
|
65
70
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: '91777d9473396972fd522cd9461da74943345353', class: { 'tooltip-dismissed': this.tooltipDismissed } }, h("button", { key: '6eae2a5a75dbb20a51f100f5a706cc208b0a68c7', 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: '71b3e538d5bcee5796de6b720a8ac4ce73eb20e6', id: "service-switcher-tooltip", role: "tooltip", class: "service-switcher__tooltip" }, TRIGGER_LABEL), h("dialog", { key: '6650dd267a52b2666a14d0f32efb441b290ffa6f', 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: '4db8cabdd9c54a764e87ae32ad581e17dc2575ac', class: "service-switcher__dialog-inner pl-typeset" }, h("h1", { key: 'b228235738bd82bbc86363e49923ff85d16346e2', id: "service-switcher-title" }, "Where would you like to go?"), h("button", { key: '247ad89b707ff68a7da34fda741d96aa05106cf2', type: "button", class: "service-switcher__close", "aria-label": "Close", onClick: this.close }, h("svg", { key: '4484125618a78b71723574e860aa00422249df5c', 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: '48f1696eacd2a61a34f60396bf8afac7f68af849', d: "M17 7L7 17M7 7L17 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: 'cab54cea65fd9241f11ba8c30ce7481001c5cdd1', 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))))))))));
|
|
67
72
|
}
|
|
68
73
|
static get style() { return pennlibsServiceSwitcherCss; }
|
|
69
74
|
}, [258, "pennlibs-service-switcher", {
|
|
@@ -1 +1 @@
|
|
|
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}
|
|
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) var(--pl-space-2xs);\n border-radius: var(--pl-border-radius-subtle);\n cursor: pointer;\n /* Icon takes the header's themed service color (penn-blue on light, light on\n dark). At rest the trigger is just the stacked dots, reading like a quiet\n divider; the chip background appears on hover, focus, and while open. */\n color: var(--color-fg-service, var(--pl-color-penn-blue));\n background: transparent;\n border: solid 1px transparent;\n}\n\n.service-switcher__trigger:hover,\n.service-switcher__trigger[aria-expanded=\"true\"] {\n background: var(--pl-color-bg-subtle);\n}\n\n/* Dark header: the chip is a translucent wash of the (light) service color so\n the penn-blue header shows through. */\n:host([theme=\"dark\"]) .service-switcher__trigger:hover,\n:host([theme=\"dark\"]) .service-switcher__trigger[aria-expanded=\"true\"] {\n background: rgb(from var(--color-fg-service, var(--pl-color-fg-on-emphasis)) r g b / 0.15);\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 = 'Where would you like to go?';\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 // Native <dialog> doesn't lock the page behind it, so stop the document\n // from scrolling while the modal is open. Restored in handleDialogClose.\n document.body.style.overflow = 'hidden';\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, re-enable page scrolling, and close when the\n // backdrop itself is clicked.\n private handleDialogClose = () => {\n this.isOpen = false;\n document.body.style.overflow = '';\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=\"10\" cy=\"2.5\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"10\" cy=\"10\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"10\" cy=\"17.5\" r=\"1.6\" 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 Where would you like to go?\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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-
|
|
2
|
+
"timestamp": "2026-07-09T19:33:32",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.38.1",
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
"references": {
|
|
132
132
|
"ActivatedEvent": {
|
|
133
133
|
"location": "local",
|
|
134
|
-
"path": "/builds/
|
|
134
|
+
"path": "/builds/TRs371zAB/0/dld/design/design-system/penn-libraries-web/src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx",
|
|
135
135
|
"id": "src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx::ActivatedEvent"
|
|
136
136
|
}
|
|
137
137
|
}
|
|
@@ -2,7 +2,7 @@ const NAMESPACE = 'web';
|
|
|
2
2
|
const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, updatable: true};
|
|
3
3
|
|
|
4
4
|
const globalScripts = () => {};
|
|
5
|
-
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}";
|
|
5
|
+
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 /* break-word, not anywhere: both break a genuinely-too-long token (URL, long\n id) to stop it blowing out the layout, but `anywhere` also folds those break\n points into min-content sizing, which collapses table/flex/grid items and\n breaks ordinary words (e.g. a \"Select\" column header). break-word leaves\n normal words intact. */\n overflow-wrap: break-word;\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 /* Default checkbox size */\n & input[type=\"checkbox\"] {\n width: var(--pl-space-m);\n height: var(--pl-space-m);\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 /* A .pl-caps eyebrow sits tight above its heading; the separating space goes\n above the eyebrow, not between it and the heading. */\n & .pl-caps:has(+ :is(h1, h2, h3, h4, h5, h6)) {\n margin-block-start: var(--pl-space-xl);\n }\n\n & .pl-caps + :is(h1, h2, h3, h4, h5, h6) {\n margin-block-start: 0;\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 /* The accent bar is a background gradient, so it always paints behind the\n heading text without a positioned pseudo-element or any z-index work. Its\n color is set per level below; size and placement are shared here. The\n padding-bottom reserves room for the bar beneath the text. */\n background-repeat: no-repeat;\n background-size: 2.25rem 4px;\n background-position: left bottom;\n padding-bottom: var(--pl-space-3xs);\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 reduced by the bar's padding-bottom (xs) to keep the prior rhythm */\n margin-bottom: calc(var(--pl-space-l) - var(--pl-space-xs));\n margin-top: 0;\n background-image: linear-gradient(var(--pl-color-penn-red), var(--pl-color-penn-red));\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: calc(var(--pl-space-m) - var(--pl-space-xs));\n background-image: linear-gradient(#d6d6dc, #d6d6dc);\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 /* No accent bar at h3 level. This also strips the bar from an h2 demoted\n with .pl-h3 (the bar selector matches the h2 tag). */\n background-image: none;\n padding-bottom: 0;\n }\n\n & :is(h4, .pl-h4) {\n font-size: var(--pl-font-size-m);\n margin-bottom: var(--pl-space-s);\n background-image: none;\n padding-bottom: 0;\n }\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\n/* a.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\na.pl-button:hover {\n text-decoration-thickness: var(--pl-link-hover-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}\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 DEPRECATED: the `.pl-font-size-*` utility classes are deprecated and slated\n for removal in the next major version. They are kept here so existing markup\n keeps working. Prefer `.pl-typeset` for typographic regions, or use the\n `--pl-font-size-*` tokens directly (those tokens are NOT deprecated and remain\n the type scale behind our headings).\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}";
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -2334,6 +2334,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
|
|
|
2334
2334
|
var setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
2335
2335
|
|
|
2336
2336
|
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 };
|
|
2337
|
-
//# sourceMappingURL=
|
|
2337
|
+
//# sourceMappingURL=index-bRVVFGb9.js.map
|
|
2338
2338
|
|
|
2339
|
-
//# sourceMappingURL=
|
|
2339
|
+
//# sourceMappingURL=index-bRVVFGb9.js.map
|