@penn-libraries/web 1.4.0-dev.0 → 1.4.0-dev.2
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-DBhvAaKX.js → index-nu4ClYFS.js} +19 -4
- package/dist/cjs/index-nu4ClYFS.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pennlibs-autocomplete.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-chat.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -0
- package/dist/cjs/{pennlibs-feedback_3.cjs.entry.js → pennlibs-expand-text_4.cjs.entry.js} +80 -7
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +2 -2
- 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/collection-manifest.json +1 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.css +88 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.js +168 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.js.map +1 -0
- package/dist/collection/components/pennlibs-fallback-img/pennlibs-fallback-img.js +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +1 -1
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +3 -3
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/pennlibs-expand-text.d.ts +11 -0
- package/dist/components/pennlibs-expand-text.js +105 -0
- package/dist/components/pennlibs-expand-text.js.map +1 -0
- package/dist/components/pennlibs-fallback-img2.js +1 -1
- package/dist/components/pennlibs-feedback.js +1 -1
- package/dist/components/pennlibs-footer.js +3 -3
- package/dist/components/pennlibs-header.js +1 -1
- package/dist/components/pennlibs-hero.js +1 -1
- package/dist/docs.json +130 -1
- package/dist/{web/p-B2uNboIg.js → esm/index-DJQvPLp9.js} +19 -5
- package/dist/esm/index-DJQvPLp9.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pennlibs-autocomplete.entry.js +1 -1
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-chat.entry.js +1 -1
- package/dist/esm/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +1 -0
- package/dist/esm/{pennlibs-feedback_3.entry.js → pennlibs-expand-text_4.entry.js} +80 -8
- package/dist/esm/pennlibs-fallback-img.entry.js +2 -2
- 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-expand-text/pennlibs-expand-text.d.ts +35 -0
- package/dist/types/components.d.ts +69 -0
- package/dist/web/index.esm.js +1 -1
- package/dist/web/{p-aab8ed2e.entry.js → p-3198c994.entry.js} +1 -1
- package/dist/web/{p-2466b63f.entry.js → p-33f42a73.entry.js} +2 -2
- package/dist/{esm/index-B2uNboIg.js → web/p-DJQvPLp9.js} +19 -5
- package/dist/web/p-DJQvPLp9.js.map +1 -0
- package/dist/web/{p-45f82cb0.entry.js → p-a917779a.entry.js} +2 -2
- package/dist/web/{p-6a15d2f0.entry.js → p-aac371c4.entry.js} +1 -1
- package/dist/web/{p-5ff9bc88.entry.js → p-c0ad70c7.entry.js} +1 -1
- package/dist/web/{p-3a18e805.entry.js → p-c5190071.entry.js} +1 -1
- package/dist/web/{p-743f4899.entry.js → p-e0cb5433.entry.js} +80 -8
- package/dist/web/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -0
- package/dist/web/web.css +1 -5
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.js +117 -8
- package/hydrate/index.mjs +117 -8
- package/package.json +1 -1
- package/dist/cjs/index-DBhvAaKX.js.map +0 -1
- package/dist/cjs/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
- package/dist/esm/index-B2uNboIg.js.map +0 -1
- package/dist/esm/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
- package/dist/web/p-B2uNboIg.js.map +0 -1
- package/dist/web/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +0 -1
|
@@ -1,4 +1,76 @@
|
|
|
1
|
-
import { r as registerInstance,
|
|
1
|
+
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getAssetPath } from './index-DJQvPLp9.js';
|
|
2
|
+
|
|
3
|
+
const pennlibsExpandTextCss = ":host{display:inline-block;position:relative;max-width:100%;vertical-align:bottom}.expand-text{display:block}.expand-text--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pl-expand-text-lines, 3);line-clamp:var(--pl-expand-text-lines, 3);overflow:hidden}.expand-text--expanded{display:inline}.expand-text__fade{position:absolute;right:0;bottom:0;padding-left:2em;background:linear-gradient(\n to right,\n transparent,\n var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em\n );pointer-events:none}.expand-text__toggle{display:inline-block;vertical-align:baseline;pointer-events:auto;padding:var(--pl-space-3xs) var(--pl-space-s);border:none;background:var(--pl-color-bg-subtle);color:var(--pl-color-fg-default);font-family:var(--pl-font-family);border-radius:var(--pl-border-radius-subtle);font-size:var(--pl-font-size-xs);font-weight:500;line-height:1.5;letter-spacing:0.075rem;text-transform:uppercase;cursor:pointer}.expand-text__toggle:hover{text-decoration:underline;text-decoration-thickness:var(--pl-link-text-decoration-thickness);text-underline-offset:var(--pl-link-text-underline-offset)}.expand-text__toggle:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.expand-text__fade--inline{position:static;padding-left:0;background:none;margin-inline-start:var(--pl-space-2xs, 0.25rem)}";
|
|
4
|
+
|
|
5
|
+
const ExpandText = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
/**
|
|
9
|
+
* Maximum number of lines to show before truncating.
|
|
10
|
+
* @prop lines
|
|
11
|
+
*/
|
|
12
|
+
this.lines = 3;
|
|
13
|
+
/**
|
|
14
|
+
* Label for the toggle when content is collapsed.
|
|
15
|
+
* @prop expand-label
|
|
16
|
+
*/
|
|
17
|
+
this.expandLabel = 'More';
|
|
18
|
+
/**
|
|
19
|
+
* Label for the toggle when content is expanded.
|
|
20
|
+
* @prop collapse-label
|
|
21
|
+
*/
|
|
22
|
+
this.collapseLabel = 'Less';
|
|
23
|
+
this.expanded = false;
|
|
24
|
+
this.hasOverflow = false;
|
|
25
|
+
this.measured = false;
|
|
26
|
+
this.checkOverflow = () => {
|
|
27
|
+
if (!this.contentEl || this.expanded)
|
|
28
|
+
return;
|
|
29
|
+
const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);
|
|
30
|
+
if (Number.isFinite(lineHeight) && this.lines > 0) {
|
|
31
|
+
// Require at least two full extra lines of hidden content before the
|
|
32
|
+
// toggle is worth showing. A near-flush overflow (a few extra words)
|
|
33
|
+
// makes the toggle look like it reveals nothing meaningful.
|
|
34
|
+
this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;
|
|
38
|
+
}
|
|
39
|
+
this.measured = true;
|
|
40
|
+
};
|
|
41
|
+
this.toggle = () => {
|
|
42
|
+
this.expanded = !this.expanded;
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
componentDidLoad() {
|
|
46
|
+
var _a;
|
|
47
|
+
if (!this.contentEl)
|
|
48
|
+
return;
|
|
49
|
+
// Observe the host (always inline-block) rather than the content span,
|
|
50
|
+
// which becomes inline when unclamped and stops firing resize events.
|
|
51
|
+
this.resizeObserver = new ResizeObserver(() => this.checkOverflow());
|
|
52
|
+
this.resizeObserver.observe(this.el);
|
|
53
|
+
this.checkOverflow();
|
|
54
|
+
(_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(() => this.checkOverflow());
|
|
55
|
+
}
|
|
56
|
+
disconnectedCallback() {
|
|
57
|
+
var _a;
|
|
58
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
59
|
+
}
|
|
60
|
+
render() {
|
|
61
|
+
const isClamped = !this.expanded && (!this.measured || this.hasOverflow);
|
|
62
|
+
return (h(Host, { key: '9c1a5be21f67022923982179319c9b0920a3ee00', style: { '--pl-expand-text-lines': String(this.lines) } }, h("span", { key: '54b5721c9df1a81b08e3823b93029f72a8e66852', class: {
|
|
63
|
+
'expand-text': true,
|
|
64
|
+
'expand-text--clamped': isClamped,
|
|
65
|
+
'expand-text--expanded': this.expanded,
|
|
66
|
+
}, ref: (el) => (this.contentEl = el) }, h("slot", { key: 'f4df852b0d1513741e07825551428807f8cb27c3' })), this.hasOverflow && (h("span", { key: '79104493f870c13070468612a7269072c9607779', class: {
|
|
67
|
+
'expand-text__fade': true,
|
|
68
|
+
'expand-text__fade--inline': this.expanded,
|
|
69
|
+
} }, h("button", { key: 'f723f0265093c78b45b4f3cb6d2fce2549361cdd', type: "button", class: "expand-text__toggle", "aria-expanded": String(this.expanded), onClick: this.toggle }, this.expanded ? this.collapseLabel : this.expandLabel)))));
|
|
70
|
+
}
|
|
71
|
+
get el() { return getElement(this); }
|
|
72
|
+
};
|
|
73
|
+
ExpandText.style = pennlibsExpandTextCss;
|
|
2
74
|
|
|
3
75
|
const pennlibsFeedbackCss = ".feedback__container{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}button.selected{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question+.feedback__share-feedback,p{animation:none}.feedback__content>p{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%}}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
76
|
|
|
@@ -79,7 +151,7 @@ const PennlibsFeedback = class {
|
|
|
79
151
|
}, 600);
|
|
80
152
|
}
|
|
81
153
|
render() {
|
|
82
|
-
return (h("div", { key: '
|
|
154
|
+
return (h("div", { key: '718c9b67ab9bfec7c946489ca3fa3e607a143889', class: "feedback__container" }, h("div", { key: 'f1d7fb08215224e80ec85ab381a20d017480bc4c', class: "viewport-margins" }, h("div", { key: 'a80b211eb18b1144704eb9dcb7e605328acde70c', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'e441824f32084a83a0e22c0f282ca73f8295464e', class: "feedback__share-feedback" }, h("p", { key: '7df4f4d3b6f6a2b893be59fbe7517aa8f63eb690' }, "To help us improve, ", h("a", { key: '6defbfffc7839fb2038716844998eeb897ed71b0', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
|
|
83
155
|
}
|
|
84
156
|
};
|
|
85
157
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
@@ -117,12 +189,12 @@ const Footer = class {
|
|
|
117
189
|
}
|
|
118
190
|
render() {
|
|
119
191
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
120
|
-
return (h("footer", { key: '
|
|
192
|
+
return (h("footer", { key: '15d1f4477bd137e281fcbf6c1e3b70bf55a8a2e0', class: "website-footer-wrapper" }, h("div", { key: '04954e3b1095b6d510e1bae4e5a453f6ff5cb0ce', class: "website-footer", style: {
|
|
121
193
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
122
194
|
backgroundSize: 'cover',
|
|
123
|
-
} }, h("div", { key: '
|
|
195
|
+
} }, h("div", { key: 'ba8ce4e14e0e9364863fac7a2839397e2e0b941a', class: "viewport-margins" }, h("div", { key: '63f34d4f96b284e724135ed8987cc2d3d2e3fbd1', class: "website-footer__content" }, h("div", { key: 'a1edf943618100610c6624d35193fc9f0f5968b3', class: "website-footer__links-container" }, h("section", { key: 'c7f7f781d1c6b239d520a8dc725381aec6281b8a' }, h("h2", { key: 'dc87452564eb1c1c1e75105ec8195917f7eb97a2', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '8510d8d758daee5d1c08bdbebf2fd741f6bc3b29', class: "website-footer__links" }, h("li", { key: '5975b1488a02111e692fd80e86db0f72baa4d9d3' }, h("a", { key: '2715c1c9c7a0f2ad1d677906eb5a34ab4c04007c', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '4d380fd2e056d972944a3866ebc52e25689cd44c' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3d52db897689c923b85c67159f8c53ca346e98c2' }, h("a", { key: '1010c1d279e1cb11c7a853f0997b5d8aabd33bdc', href: "tel:(215) 898-7566" }, "(215) 898-7566")), h("li", { key: 'f1d61d6e01c5e2a1fced55e145f101ccc37fdf29' }, h("a", { key: 'f1dc654a1af81a5847aef7c9fc21e025eb8dfced', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '1c96e99267b30a59b65f4e3d726ef948be202d2d' }, h("a", { key: '02c308d0c96d6148ca093e5e0882d5d22aa9c1db', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '639a1f5a03b1f646b8a519fa4749980512524f33' }, h("h2", { key: 'e8047c4763458e63d20c4dddd6a35dd6f144c016', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'd496f8fbea5a6c8a9d705c90588b6f750f4a8609', class: "website-footer__links" }, h("li", { key: '57d3280c71d8dcf57db397641c9418910cd4cb84' }, h("a", { key: 'c3203a8e36919031b5a14958765ad05c5e590e50', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '0025893e79dc5fde2a86c8305ff57bd7a4bd5962' }, h("a", { key: '4f20f07275a082c43e3dfdbf23b42487d0cc94da', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '7d6e64d3f6d921e7967b9eea4f307cba5a3c326d' }, h("a", { key: 'b145fc5809b8f2a8225351bd69296da5f803756d', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '471174a0eede78d94704c00d28284cfafc0553e9' }, h("a", { key: '031b7d1aad9f6c27a2898c57cab0b2909d5acc78', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
124
196
|
this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
|
|
125
|
-
]))), h("div", { key: '
|
|
197
|
+
]))), h("div", { key: '5ac97b0c44a303ceeb84c88a5da2c7a5417afa55', class: "website-footer__footer" }, h("div", { key: '281481bf6d25945607e1431f634a9f6649b72300', class: "viewport-margins" }, h("ul", { key: '8e4626896cd9dd360eebe55df9f8eb98d485045e', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '021025b20149e8f53e17cf4df1f76a2d9045a52c' }, h("a", { key: '95bd80578f001c06f273800ee9b26c2069c8822c', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: 'be940d241e15c85f07ec8f229e4683ccbaf077e4' }, h("a", { key: '1e8db44efbe98e135495240a42e6e74a3829c665', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '14a7fb2dfdc4fe417fc66ae05b0e30db13739913' }, h("a", { key: '1e572fd1b6c7c48225a65ef58c1f4cdb2f67afd6', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '1aeecdc1384586c45ea1500e2a908a0bde97668e' }, h("a", { key: '9e94479dd864300421900e0e9fe4fbb3251d7524', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'a9d5ce618f8ed4ff4e8360dc11568b067f66101c' }, h("a", { key: '384f77c47f7d28b99fe9fbbf707948a180d973f1', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: 'a203f0efeea4cfd5275cdee380c12bb9d7e04a38' }, h("a", { key: 'a51d4b482d562aca31ff9b97703950562604ad48', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: '43f89da940afef08331d12e2991fa24220afce99', class: "viewport-margins" }, h("p", { key: '25863d379ecb9e7f46186858974a71e150188015', class: "built-with" }, "Built with the ", h("a", { key: '427150399d8b81e090315c01446452f2142bab63', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
126
198
|
}
|
|
127
199
|
static get assetsDirs() { return ["assets"]; }
|
|
128
200
|
get hostElement() { return getElement(this); }
|
|
@@ -180,12 +252,12 @@ const Header = class {
|
|
|
180
252
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
181
253
|
}
|
|
182
254
|
render() {
|
|
183
|
-
return (h("header", { key: '
|
|
255
|
+
return (h("header", { key: '5b9d608f76d32ea50d377d251c2c2153a53b1875', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'b15e4a006b6a29f671df20e8bb65d2e9e71c25f3', class: "website-header__inner-container" }, h("div", { key: '5c3e13c63b317a44dee3b07c2dbcbdc4e33fb40a', class: "website-header__logo-name-container" }, h("a", { key: 'aa2d4a9b55fe73eac1b433da51db7e70c2a9100d', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: 'bff559907d2e26bb2e9f055645a68d7b35558ef5', href: "/", class: "website-header__service-link" }, h("span", { key: '30376d9a13d24c78dd10f11c74acc017bb7ef9ee', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '6bb01b158d0205a4d534b186379c0e00cb1cb076', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: 'bff814b020b3a7c4eee900c19a871e47bebbfac7', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'f1949adb87868902885d65a65504f4ee4eb9c799', class: "website-header__navigation" }, h("button", { key: '7cd866c7dfb52caa705a74c8af5bba443c55257e', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '84270b993db01e2c46ce8a94be6c61a95c59f40a', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: 'ff3234593474b8f5a63836a6f519d85a5fe73ba2', name: "end" }))));
|
|
184
256
|
}
|
|
185
257
|
static get assetsDirs() { return ["assets"]; }
|
|
186
258
|
get hostElement() { return getElement(this); }
|
|
187
259
|
};
|
|
188
260
|
Header.style = pennlibsHeaderCss;
|
|
189
261
|
|
|
190
|
-
export { PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
|
|
191
|
-
//# sourceMappingURL=pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
|
|
262
|
+
export { ExpandText as pennlibs_expand_text, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
|
|
263
|
+
//# sourceMappingURL=pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, d as getAssetPath, h } from './index-
|
|
1
|
+
import { r as registerInstance, d as getAssetPath, h } from './index-DJQvPLp9.js';
|
|
2
2
|
|
|
3
3
|
const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
|
|
4
4
|
|
|
@@ -8,7 +8,7 @@ const NoImage = class {
|
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
10
|
const shieldImg = getAssetPath('./assets/simplified-shield.webp');
|
|
11
|
-
return (h("img", { key: '
|
|
11
|
+
return (h("img", { key: 'fcb8177bb7decae1ffc943b5bc6ddeeabc148cd2', src: shieldImg, alt: "", class: "no-image__img" }));
|
|
12
12
|
}
|
|
13
13
|
static get assetsDirs() { return ["assets"]; }
|
|
14
14
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, a as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, a as getElement } from './index-DJQvPLp9.js';
|
|
2
2
|
|
|
3
3
|
const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex;container-type:inline-size}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-size:clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__sub-heading{font-size:1em}}";
|
|
4
4
|
|
|
@@ -47,7 +47,7 @@ const Hero = class {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
|
-
return (h("div", { key: '
|
|
50
|
+
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 })))))));
|
|
51
51
|
}
|
|
52
52
|
static get assetsDirs() { return ["assets"]; }
|
|
53
53
|
get hostElement() { return getElement(this); }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, a as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, a as getElement } from './index-DJQvPLp9.js';
|
|
2
2
|
|
|
3
3
|
const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
|
|
4
4
|
|
package/dist/esm/web.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DJQvPLp9.js';
|
|
2
|
+
export { s as setNonce } from './index-DJQvPLp9.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -16,6 +16,6 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-
|
|
19
|
+
return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-expand-text_4",[[257,"pennlibs-expand-text",{"lines":[2],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"expanded":[32],"hasOverflow":[32],"measured":[32]}],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
|
|
20
20
|
});
|
|
21
21
|
//# sourceMappingURL=web.js.map
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
3
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
4
|
+
* run long in narrow containers.
|
|
5
|
+
*
|
|
6
|
+
* @slot - The content to truncate. Accepts any flow content.
|
|
7
|
+
*/
|
|
8
|
+
export declare class ExpandText {
|
|
9
|
+
el: HTMLElement;
|
|
10
|
+
/**
|
|
11
|
+
* Maximum number of lines to show before truncating.
|
|
12
|
+
* @prop lines
|
|
13
|
+
*/
|
|
14
|
+
lines: number;
|
|
15
|
+
/**
|
|
16
|
+
* Label for the toggle when content is collapsed.
|
|
17
|
+
* @prop expand-label
|
|
18
|
+
*/
|
|
19
|
+
expandLabel: string;
|
|
20
|
+
/**
|
|
21
|
+
* Label for the toggle when content is expanded.
|
|
22
|
+
* @prop collapse-label
|
|
23
|
+
*/
|
|
24
|
+
collapseLabel: string;
|
|
25
|
+
expanded: boolean;
|
|
26
|
+
hasOverflow: boolean;
|
|
27
|
+
measured: boolean;
|
|
28
|
+
private contentEl?;
|
|
29
|
+
private resizeObserver?;
|
|
30
|
+
componentDidLoad(): void;
|
|
31
|
+
disconnectedCallback(): void;
|
|
32
|
+
private checkOverflow;
|
|
33
|
+
private toggle;
|
|
34
|
+
render(): any;
|
|
35
|
+
}
|
|
@@ -22,6 +22,31 @@ export namespace Components {
|
|
|
22
22
|
}
|
|
23
23
|
interface PennlibsChat {
|
|
24
24
|
}
|
|
25
|
+
/**
|
|
26
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
27
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
28
|
+
* run long in narrow containers.
|
|
29
|
+
*/
|
|
30
|
+
interface PennlibsExpandText {
|
|
31
|
+
/**
|
|
32
|
+
* Label for the toggle when content is expanded.
|
|
33
|
+
* @prop collapse-label
|
|
34
|
+
* @default 'Less'
|
|
35
|
+
*/
|
|
36
|
+
"collapseLabel": string;
|
|
37
|
+
/**
|
|
38
|
+
* Label for the toggle when content is collapsed.
|
|
39
|
+
* @prop expand-label
|
|
40
|
+
* @default 'More'
|
|
41
|
+
*/
|
|
42
|
+
"expandLabel": string;
|
|
43
|
+
/**
|
|
44
|
+
* Maximum number of lines to show before truncating.
|
|
45
|
+
* @prop lines
|
|
46
|
+
* @default 3
|
|
47
|
+
*/
|
|
48
|
+
"lines": number;
|
|
49
|
+
}
|
|
25
50
|
interface PennlibsFallbackImg {
|
|
26
51
|
}
|
|
27
52
|
/**
|
|
@@ -193,6 +218,17 @@ declare global {
|
|
|
193
218
|
prototype: HTMLPennlibsChatElement;
|
|
194
219
|
new (): HTMLPennlibsChatElement;
|
|
195
220
|
};
|
|
221
|
+
/**
|
|
222
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
223
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
224
|
+
* run long in narrow containers.
|
|
225
|
+
*/
|
|
226
|
+
interface HTMLPennlibsExpandTextElement extends Components.PennlibsExpandText, HTMLStencilElement {
|
|
227
|
+
}
|
|
228
|
+
var HTMLPennlibsExpandTextElement: {
|
|
229
|
+
prototype: HTMLPennlibsExpandTextElement;
|
|
230
|
+
new (): HTMLPennlibsExpandTextElement;
|
|
231
|
+
};
|
|
196
232
|
interface HTMLPennlibsFallbackImgElement extends Components.PennlibsFallbackImg, HTMLStencilElement {
|
|
197
233
|
}
|
|
198
234
|
var HTMLPennlibsFallbackImgElement: {
|
|
@@ -306,6 +342,7 @@ declare global {
|
|
|
306
342
|
"pennlibs-autocomplete": HTMLPennlibsAutocompleteElement;
|
|
307
343
|
"pennlibs-banner": HTMLPennlibsBannerElement;
|
|
308
344
|
"pennlibs-chat": HTMLPennlibsChatElement;
|
|
345
|
+
"pennlibs-expand-text": HTMLPennlibsExpandTextElement;
|
|
309
346
|
"pennlibs-fallback-img": HTMLPennlibsFallbackImgElement;
|
|
310
347
|
"pennlibs-feedback": HTMLPennlibsFeedbackElement;
|
|
311
348
|
"pennlibs-footer": HTMLPennlibsFooterElement;
|
|
@@ -334,6 +371,31 @@ declare namespace LocalJSX {
|
|
|
334
371
|
}
|
|
335
372
|
interface PennlibsChat {
|
|
336
373
|
}
|
|
374
|
+
/**
|
|
375
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
376
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
377
|
+
* run long in narrow containers.
|
|
378
|
+
*/
|
|
379
|
+
interface PennlibsExpandText {
|
|
380
|
+
/**
|
|
381
|
+
* Label for the toggle when content is expanded.
|
|
382
|
+
* @prop collapse-label
|
|
383
|
+
* @default 'Less'
|
|
384
|
+
*/
|
|
385
|
+
"collapseLabel"?: string;
|
|
386
|
+
/**
|
|
387
|
+
* Label for the toggle when content is collapsed.
|
|
388
|
+
* @prop expand-label
|
|
389
|
+
* @default 'More'
|
|
390
|
+
*/
|
|
391
|
+
"expandLabel"?: string;
|
|
392
|
+
/**
|
|
393
|
+
* Maximum number of lines to show before truncating.
|
|
394
|
+
* @prop lines
|
|
395
|
+
* @default 3
|
|
396
|
+
*/
|
|
397
|
+
"lines"?: number;
|
|
398
|
+
}
|
|
337
399
|
interface PennlibsFallbackImg {
|
|
338
400
|
}
|
|
339
401
|
/**
|
|
@@ -477,6 +539,7 @@ declare namespace LocalJSX {
|
|
|
477
539
|
"pennlibs-autocomplete": PennlibsAutocomplete;
|
|
478
540
|
"pennlibs-banner": PennlibsBanner;
|
|
479
541
|
"pennlibs-chat": PennlibsChat;
|
|
542
|
+
"pennlibs-expand-text": PennlibsExpandText;
|
|
480
543
|
"pennlibs-fallback-img": PennlibsFallbackImg;
|
|
481
544
|
"pennlibs-feedback": PennlibsFeedback;
|
|
482
545
|
"pennlibs-footer": PennlibsFooter;
|
|
@@ -495,6 +558,12 @@ declare module "@stencil/core" {
|
|
|
495
558
|
"pennlibs-autocomplete": LocalJSX.PennlibsAutocomplete & JSXBase.HTMLAttributes<HTMLPennlibsAutocompleteElement>;
|
|
496
559
|
"pennlibs-banner": LocalJSX.PennlibsBanner & JSXBase.HTMLAttributes<HTMLPennlibsBannerElement>;
|
|
497
560
|
"pennlibs-chat": LocalJSX.PennlibsChat & JSXBase.HTMLAttributes<HTMLPennlibsChatElement>;
|
|
561
|
+
/**
|
|
562
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
563
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
564
|
+
* run long in narrow containers.
|
|
565
|
+
*/
|
|
566
|
+
"pennlibs-expand-text": LocalJSX.PennlibsExpandText & JSXBase.HTMLAttributes<HTMLPennlibsExpandTextElement>;
|
|
498
567
|
"pennlibs-fallback-img": LocalJSX.PennlibsFallbackImg & JSXBase.HTMLAttributes<HTMLPennlibsFallbackImgElement>;
|
|
499
568
|
/**
|
|
500
569
|
* A feedback component that asks visitors "Did you find what you need?" and
|
package/dist/web/index.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { e as setAssetPath } from './p-
|
|
1
|
+
export { e as setAssetPath } from './p-DJQvPLp9.js';
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, d as getAssetPath, h } from './p-
|
|
1
|
+
import { r as registerInstance, d as getAssetPath, h } from './p-DJQvPLp9.js';
|
|
2
2
|
|
|
3
3
|
const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, d as getAssetPath, h } from './p-
|
|
1
|
+
import { r as registerInstance, d as getAssetPath, h } from './p-DJQvPLp9.js';
|
|
2
2
|
|
|
3
3
|
const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
|
|
4
4
|
|
|
@@ -8,7 +8,7 @@ const NoImage = class {
|
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
10
|
const shieldImg = getAssetPath('./assets/simplified-shield.webp');
|
|
11
|
-
return (h("img", { key: '
|
|
11
|
+
return (h("img", { key: 'fcb8177bb7decae1ffc943b5bc6ddeeabc148cd2', src: shieldImg, alt: "", class: "no-image__img" }));
|
|
12
12
|
}
|
|
13
13
|
static get assetsDirs() { return ["assets"]; }
|
|
14
14
|
};
|
|
@@ -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\n /* Use a more-intuitive box-sizing model */\n & :is(*, *::before, *::after) {\n box-sizing: border-box;\n margin: 0;\n }\n\n /* Improve media defaults */\n & :is(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n }\n\n /* Inherit fonts for form controls */\n & :is(input, button, textarea, select) {\n font: var(--pl-font-family);\n }\n\n /* Avoid text overflows */\n & :is(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n }\n\n /* Improve line wrapping */\n & p {\n text-wrap: pretty;\n }\n & :is(h1, h2, h3, h4, h5, h6) {\n text-wrap: balance;\n }\n\n /* Link styles */\n & a {\n color: var(--pl-color-fg-accent);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n font-weight: 500;\n\n &:hover {\n text-decoration-thickness: 3px;\n }\n }\n}\n\n/*\n Typeset\n*/\n\n:where(.pl-typeset) {\n font-family: var(--pl-font-family);\n /* Establish a container so descendant headings can use `cqi` units\n to scale fluidly with the typeset wrapper's width. */\n container-type: inline-size;\n\n & :is(p, .pl-p) {\n font-family: var(--pl-font-family);\n }\n\n & :is(h1, .pl-h1, h2, .pl-h2) {\n font-family: var(--pl-font-serif);\n font-weight: 400;\n }\n\n & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n font-weight: 600;\n }\n\n & *+:is(h2,h3,h4,h5,h6) {\n margin-block-start: var(--pl-space-xl);\n }\n\n & :is(h1, .pl-h1, h2, .pl-h2) {\n line-height: 1;\n font-family: var(--pl-font-serif);\n color: var(--pl-color-penn-blue);\n position: relative;\n\n &::after {\n bottom: -0.25rem;\n content: \"\";\n display: block;\n height: 4px;\n opacity: 1;\n position: absolute;\n }\n }\n\n & :is(h1, .pl-h1) {\n /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n fluid clamp below. */\n font-size: var(--pl-font-size-5xl);\n font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n margin-bottom: var(--pl-space-l);\n margin-top: 0;\n\n &::after {\n background: var(--pl-color-penn-red);\n width: 2.25rem;\n }\n }\n\n & :is(h2, .pl-h2) {\n font-size: var(--pl-font-size-4xl);\n font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n margin-bottom: var(--pl-space-m);\n\n &::after {\n background: #d6d6dc;\n width: 2.25rem;\n }\n }\n\n & :is(h3, .pl-h3) {\n font-size: var(--pl-font-size-xl);\n font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n font-family: var(--pl-font-sans-serif);\n color: var(--pl-color-fg-default);\n margin-bottom: var(--pl-space-m);\n\n &:after {\n content: none;\n }\n }\n\n & :is(h4, .pl-h4) {\n font-size: var(--pl-font-size-m);\n margin-bottom: var(--pl-space-s);\n\n &:after {\n content: none;\n }\n }\n}\n\n/* \n Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n Font size\n*/\n\n.pl-font-size-xs {\n font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n font-size: var(--pl-font-size-5xl);\n}\n\n/*\n Line length\n*/\n\n.pl-line-length {\n max-width: 60ch;\n}\n\n/*\n Border radius\n*/\n\n.pl-border-radius-subtle {\n border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n border-radius: var(--pl-border-radius);\n}\n\n/*\n Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n display: grid;\n grid-row-gap: 0.25rem;\n \n & dt {\n font-weight: 600;\n margin-top: 0.5rem;\n }\n}\n\n@media (min-width: 720px) {\n .pl-dl:not(.pl-dl--inline) {\n grid-template-columns: 12rem 1fr;\n\n & dt {\n grid-column: 1 / 2;\n margin-top: 0;\n padding-right: 1rem;\n }\n\n & dd {\n grid-column: 2 / 3;\n margin-bottom: 0;\n }\n }\n}\n\n@media (min-width: 720px) {\n .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n padding-top: 0.75rem;\n margin-top: 0.5rem;\n border-top: solid 1px var(--pl-color-bg-subtle-brand);\n }\n}\n\n.pl-dl--inline {\n display: block;\n\n & dt,\n & dd {\n display: inline;\n padding-right: 0.5rem;\n margin-bottom: 0;\n }\n\n & dt {\n font-weight: 600;\n }\n\n & dt:not(:first-of-type)::before {\n content: \"\";\n display: block;\n margin-bottom: 0.25rem;\n }\n\n & dd::after {\n content: \" ·\";\n padding-left: var(--pl-space-xs);\n }\n\n & dd:has(+ dt)::after {\n all: unset;\n }\n\n & > *:last-child::after {\n all: unset;\n }\n\n & a {\n color: var(--pl-color-fg-default);\n text-decoration-style: dotted;\n font-weight: 400;\n\n &:hover {\n text-decoration-style: solid;\n text-decoration-thickness: 2px;\n }\n }\n}\n\n.pl-button {\n border: none;\n outline: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: var(--pl-space-2xs);\n padding: var(--pl-space-xs) var(--pl-space-m);\n font-size: 1rem;\n line-height: 1.5;\n font-family: var(--pl-font-family);\n border-radius: var(--pl-border-radius);\n\n background: var(--pl-color-bg-subtle);\n color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n text-decoration: none;\n}\n\n.pl-button:hover {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n background: var(--pl-color-bg-accent-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n background: var(--pl-color-bg-success-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n background: var(--pl-color-bg-attention-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n padding: var(--pl-space-m) var(--pl-space-l);\n margin-bottom: var(--pl-space-l);\n border: 1px solid var(--pl-color-fg-subtle);\n border-left-width: 0.25rem;\n border-radius: var(--pl-border-radius-subtle);\n border-left-color: var(--pl-color-fg-accent);\n}";
|
|
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 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}";
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -1112,6 +1112,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
|
|
|
1112
1112
|
return propValue === "false" ? false : propValue === "" || !!propValue;
|
|
1113
1113
|
}
|
|
1114
1114
|
}
|
|
1115
|
+
if (propType & 2 /* Number */) {
|
|
1116
|
+
return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
|
|
1117
|
+
}
|
|
1115
1118
|
if (propType & 1 /* String */) {
|
|
1116
1119
|
return String(propValue);
|
|
1117
1120
|
}
|
|
@@ -1186,7 +1189,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
|
|
|
1186
1189
|
}
|
|
1187
1190
|
}
|
|
1188
1191
|
}
|
|
1189
|
-
} else if (memberName === "key") ; else if (
|
|
1192
|
+
} else if (memberName === "key") ; else if (memberName === "ref") {
|
|
1193
|
+
if (newValue) {
|
|
1194
|
+
newValue(elm);
|
|
1195
|
+
}
|
|
1196
|
+
} else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
|
|
1190
1197
|
if (memberName[2] === "-") {
|
|
1191
1198
|
memberName = memberName.slice(3);
|
|
1192
1199
|
} else if (isMemberInElement(win, ln)) {
|
|
@@ -1361,6 +1368,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
|
|
|
1361
1368
|
const vnode = vnodes[index];
|
|
1362
1369
|
if (vnode) {
|
|
1363
1370
|
const elm = vnode.$elm$;
|
|
1371
|
+
nullifyVNodeRefs(vnode);
|
|
1364
1372
|
if (elm) {
|
|
1365
1373
|
elm.remove();
|
|
1366
1374
|
}
|
|
@@ -1498,6 +1506,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
|
|
|
1498
1506
|
elm.data = text;
|
|
1499
1507
|
}
|
|
1500
1508
|
};
|
|
1509
|
+
var nullifyVNodeRefs = (vNode) => {
|
|
1510
|
+
{
|
|
1511
|
+
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
1512
|
+
vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
|
|
1513
|
+
}
|
|
1514
|
+
};
|
|
1501
1515
|
var insertBefore = (parent, newNode, reference) => {
|
|
1502
1516
|
{
|
|
1503
1517
|
return parent == null ? void 0 : parent.insertBefore(newNode, reference);
|
|
@@ -2257,7 +2271,7 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
|
|
|
2257
2271
|
// src/runtime/nonce.ts
|
|
2258
2272
|
var setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
2259
2273
|
|
|
2260
|
-
export { getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
|
2261
|
-
//# sourceMappingURL=
|
|
2274
|
+
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 };
|
|
2275
|
+
//# sourceMappingURL=p-DJQvPLp9.js.map
|
|
2262
2276
|
|
|
2263
|
-
//# sourceMappingURL=
|
|
2277
|
+
//# sourceMappingURL=p-DJQvPLp9.js.map
|