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

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.
Files changed (69) hide show
  1. package/dist/cjs/{index-BKWYkqL-.js → index-Bh9Ii5qa.js} +65 -3
  2. package/dist/cjs/index-Bh9Ii5qa.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.cjs.js.map +1 -0
  6. package/dist/cjs/{pennlibs-accordion_5.cjs.entry.js → pennlibs-accordion_6.cjs.entry.js} +70 -4
  7. package/dist/cjs/pennlibs-autocomplete.cjs.entry.js +1 -1
  8. package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
  9. package/dist/cjs/pennlibs-chat.cjs.entry.js +1 -1
  10. package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +1 -1
  11. package/dist/cjs/pennlibs-hero.cjs.entry.js +2 -2
  12. package/dist/cjs/pennlibs-iiif-img.cjs.entry.js +1 -1
  13. package/dist/cjs/web.cjs.js +2 -2
  14. package/dist/collection/collection-manifest.json +2 -1
  15. package/dist/collection/components/pennlibs-header/pennlibs-header.css +27 -18
  16. package/dist/collection/components/pennlibs-header/pennlibs-header.js +2 -1
  17. package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
  18. package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
  19. package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.css +224 -0
  20. package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.js +118 -0
  21. package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.js.map +1 -0
  22. package/dist/components/index.d.ts +2 -0
  23. package/dist/components/index.js +1 -0
  24. package/dist/components/index.js.map +1 -1
  25. package/dist/components/pennlibs-header.js +2 -2
  26. package/dist/components/pennlibs-header.js.map +1 -1
  27. package/dist/components/pennlibs-hero.js +1 -1
  28. package/dist/components/pennlibs-service-switcher.d.ts +11 -0
  29. package/dist/components/pennlibs-service-switcher.js +94 -0
  30. package/dist/components/pennlibs-service-switcher.js.map +1 -0
  31. package/dist/docs.json +71 -1
  32. package/dist/{web/p-Cw9fYoti.js → esm/index-BxutzoSj.js} +65 -3
  33. package/dist/esm/index-BxutzoSj.js.map +1 -0
  34. package/dist/esm/index.js +1 -1
  35. package/dist/esm/loader.js +3 -3
  36. package/dist/esm/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.js.map +1 -0
  37. package/dist/{web/p-ca1412b5.entry.js → esm/pennlibs-accordion_6.entry.js} +70 -5
  38. package/dist/esm/pennlibs-autocomplete.entry.js +1 -1
  39. package/dist/esm/pennlibs-banner.entry.js +1 -1
  40. package/dist/esm/pennlibs-chat.entry.js +1 -1
  41. package/dist/esm/pennlibs-fallback-img.entry.js +1 -1
  42. package/dist/esm/pennlibs-hero.entry.js +2 -2
  43. package/dist/esm/pennlibs-iiif-img.entry.js +1 -1
  44. package/dist/esm/web.js +3 -3
  45. package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +1 -0
  46. package/dist/types/components/pennlibs-service-switcher/pennlibs-service-switcher.d.ts +30 -0
  47. package/dist/types/components.d.ts +59 -0
  48. package/dist/web/index.esm.js +1 -1
  49. package/dist/web/{p-0eb9e4fa.entry.js → p-152d30af.entry.js} +1 -1
  50. package/dist/web/{p-85b7d695.entry.js → p-48ff4883.entry.js} +1 -1
  51. package/dist/web/{p-af10bd16.entry.js → p-4af80a22.entry.js} +2 -2
  52. package/dist/{esm/pennlibs-accordion_5.entry.js → web/p-6ea9889d.entry.js} +70 -5
  53. package/dist/{esm/index-Cw9fYoti.js → web/p-BxutzoSj.js} +65 -3
  54. package/dist/web/p-BxutzoSj.js.map +1 -0
  55. package/dist/web/{p-1c284e42.entry.js → p-b503cf62.entry.js} +1 -1
  56. package/dist/web/{p-4f2ff6ec.entry.js → p-bca28ffd.entry.js} +1 -1
  57. package/dist/web/{p-8d7c5424.entry.js → p-bcfaaae4.entry.js} +1 -1
  58. package/dist/web/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.esm.js.map +1 -0
  59. package/dist/web/web.css +7 -0
  60. package/dist/web/web.esm.js +3 -3
  61. package/hydrate/index.js +122 -3
  62. package/hydrate/index.mjs +122 -3
  63. package/package.json +1 -1
  64. package/dist/cjs/index-BKWYkqL-.js.map +0 -1
  65. package/dist/cjs/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
  66. package/dist/esm/index-Cw9fYoti.js.map +0 -1
  67. package/dist/esm/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
  68. package/dist/web/p-Cw9fYoti.js.map +0 -1
  69. package/dist/web/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +0 -1
package/dist/cjs/{index-BKWYkqL-.js → index-Bh9Ii5qa.js} RENAMED
@@ -4,7 +4,7 @@ const NAMESPACE = 'web';
4
4
  const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, updatable: true};
5
5
 
6
6
  const globalScripts = () => {};
7
- 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.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}";
7
+ 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}";
8
8
 
9
9
  /*
10
10
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -203,6 +203,9 @@ var getAssetPath = (path) => {
203
203
  return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
204
204
  };
205
205
  var setAssetPath = (path) => plt.$resourcesUrl$ = path;
206
+
207
+ // src/utils/helpers.ts
208
+ var isDef = (v) => v != null && v !== void 0;
206
209
  var isComplexType = (o) => {
207
210
  o = typeof o;
208
211
  return o === "object" || o === "function";
@@ -713,6 +716,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
713
716
  const shadowRootNodes = shadowRoot ? [] : null;
714
717
  const vnode = newVNode(tagName, null);
715
718
  vnode.$elm$ = hostElm;
719
+ let scopeId2;
720
+ {
721
+ const cmpMeta = hostRef.$cmpMeta$;
722
+ if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
723
+ scopeId2 = hostElm["s-sc"];
724
+ hostElm.classList.add(scopeId2 + "-h");
725
+ } else if (hostElm["s-sc"]) {
726
+ delete hostElm["s-sc"];
727
+ }
728
+ }
716
729
  if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
717
730
  initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
718
731
  }
@@ -816,6 +829,11 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
816
829
  }
817
830
  }
818
831
  }
832
+ if (scopeId2 && slotNodes.length) {
833
+ slotNodes.forEach((slot) => {
834
+ slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
835
+ });
836
+ }
819
837
  if (shadowRoot) {
820
838
  let rnIdex = 0;
821
839
  const rnLen = shadowRootNodes.length;
@@ -845,6 +863,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
845
863
  let childIdSplt;
846
864
  let childVNode;
847
865
  let i2;
866
+ const scopeId2 = hostElm["s-sc"];
848
867
  if (node.nodeType === 1 /* ElementNode */) {
849
868
  childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
850
869
  if (childNodeType) {
@@ -867,6 +886,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
867
886
  if (!parentVNode.$children$) {
868
887
  parentVNode.$children$ = [];
869
888
  }
889
+ if (scopeId2 && childIdSplt[0] === hostId) {
890
+ node["s-si"] = scopeId2;
891
+ childVNode.$attrs$.class += " " + scopeId2;
892
+ }
870
893
  const slotName = childVNode.$elm$.getAttribute("s-sn");
871
894
  if (typeof slotName === "string") {
872
895
  if (childVNode.$tag$ === "slot-fb") {
@@ -881,6 +904,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
881
904
  shadowRootNodes,
882
905
  slottedNodes
883
906
  );
907
+ if (scopeId2) {
908
+ node.classList.add(scopeId2);
909
+ }
884
910
  }
885
911
  childVNode.$elm$["s-sn"] = slotName;
886
912
  childVNode.$elm$.removeAttribute("s-sn");
@@ -1302,6 +1328,9 @@ function sortedAttrNames(attrNames) {
1302
1328
  attrNames
1303
1329
  );
1304
1330
  }
1331
+
1332
+ // src/runtime/vdom/vdom-render.ts
1333
+ var scopeId;
1305
1334
  var hostTagName;
1306
1335
  var isSvgMode = false;
1307
1336
  var createElm = (oldParentVNode, newParentVNode, childIndex) => {
@@ -1330,6 +1359,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
1330
1359
  {
1331
1360
  updateElement(null, newVNode2, isSvgMode);
1332
1361
  }
1362
+ if (isDef(scopeId) && elm["s-si"] !== scopeId) {
1363
+ elm.classList.add(elm["s-si"] = scopeId);
1364
+ }
1333
1365
  if (newVNode2.$children$) {
1334
1366
  for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
1335
1367
  childNode = createElm(oldParentVNode, newVNode2, i2);
@@ -1515,10 +1547,34 @@ var nullifyVNodeRefs = (vNode) => {
1515
1547
  }
1516
1548
  };
1517
1549
  var insertBefore = (parent, newNode, reference) => {
1550
+ if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
1551
+ addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
1552
+ }
1518
1553
  {
1519
1554
  return parent == null ? void 0 : parent.insertBefore(newNode, reference);
1520
1555
  }
1521
1556
  };
1557
+ function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
1558
+ var _a, _b;
1559
+ let scopeId2;
1560
+ if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
1561
+ const scopeName = slotNode["s-sn"];
1562
+ const hostName = slotNode["s-hn"];
1563
+ (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
1564
+ if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
1565
+ let child = (oldParent.__childNodes || oldParent.childNodes)[0];
1566
+ let found = false;
1567
+ while (child) {
1568
+ if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
1569
+ found = true;
1570
+ break;
1571
+ }
1572
+ child = child.nextSibling;
1573
+ }
1574
+ if (!found) oldParent.classList.remove(scopeId2 + "-s");
1575
+ }
1576
+ }
1577
+ }
1522
1578
  var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1523
1579
  const hostElm = hostRef.$hostElement$;
1524
1580
  const cmpMeta = hostRef.$cmpMeta$;
@@ -1545,6 +1601,9 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1545
1601
  rootVnode.$flags$ |= 4 /* isHost */;
1546
1602
  hostRef.$vnode$ = rootVnode;
1547
1603
  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
1604
+ {
1605
+ scopeId = hostElm["s-sc"];
1606
+ }
1548
1607
  patch(oldVNode, rootVnode, isInitialLoad);
1549
1608
  };
1550
1609
 
@@ -2016,6 +2075,9 @@ var connectedCallback = (elm) => {
2016
2075
  if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
2017
2076
  const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
2018
2077
  elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
2078
+ } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
2079
+ const scopeId2 = getScopeId(cmpMeta);
2080
+ elm["s-sc"] = scopeId2;
2019
2081
  }
2020
2082
  initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
2021
2083
  }
@@ -2284,6 +2346,6 @@ exports.promiseResolve = promiseResolve;
2284
2346
  exports.registerInstance = registerInstance;
2285
2347
  exports.setAssetPath = setAssetPath;
2286
2348
  exports.setNonce = setNonce;
2287
- //# sourceMappingURL=index-BKWYkqL-.js.map
2349
+ //# sourceMappingURL=index-Bh9Ii5qa.js.map
2288
2350
 
2289
- //# sourceMappingURL=index-BKWYkqL-.js.map
2351
+ //# sourceMappingURL=index-Bh9Ii5qa.js.map