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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/cjs/{index-BKWYkqL-.js → index-BEV8Fxnb.js} +65 -3
  2. package/dist/cjs/index-BEV8Fxnb.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-chat.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_7.cjs.entry.js} +95 -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-fallback-img.cjs.entry.js +1 -1
  10. package/dist/cjs/pennlibs-hero.cjs.entry.js +2 -2
  11. package/dist/cjs/pennlibs-iiif-img.cjs.entry.js +1 -1
  12. package/dist/cjs/web.cjs.js +2 -2
  13. package/dist/collection/collection-manifest.json +2 -1
  14. package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +1 -1
  15. package/dist/collection/components/pennlibs-header/pennlibs-header.css +47 -20
  16. package/dist/collection/components/pennlibs-header/pennlibs-header.js +6 -2
  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 +222 -0
  20. package/dist/collection/components/pennlibs-service-switcher/pennlibs-service-switcher.js +123 -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 +6 -3
  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 +99 -0
  30. package/dist/components/pennlibs-service-switcher.js.map +1 -0
  31. package/dist/docs.json +72 -2
  32. package/dist/{web/p-Cw9fYoti.js → esm/index-bRVVFGb9.js} +65 -3
  33. package/dist/esm/index-bRVVFGb9.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-chat.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_7.entry.js} +94 -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-fallback-img.entry.js +1 -1
  41. package/dist/esm/pennlibs-hero.entry.js +2 -2
  42. package/dist/esm/pennlibs-iiif-img.entry.js +1 -1
  43. package/dist/esm/web.js +3 -3
  44. package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +2 -0
  45. package/dist/types/components/pennlibs-service-switcher/pennlibs-service-switcher.d.ts +30 -0
  46. package/dist/types/components.d.ts +59 -0
  47. package/dist/web/index.esm.js +1 -1
  48. package/dist/{esm/pennlibs-accordion_5.entry.js → web/p-471b1429.entry.js} +94 -5
  49. package/dist/web/{p-85b7d695.entry.js → p-4c381ac3.entry.js} +1 -1
  50. package/dist/web/{p-0eb9e4fa.entry.js → p-5598f2cc.entry.js} +1 -1
  51. package/dist/web/{p-4f2ff6ec.entry.js → p-6b5a4ada.entry.js} +1 -1
  52. package/dist/web/{p-af10bd16.entry.js → p-b3a586ba.entry.js} +2 -2
  53. package/dist/{esm/index-Cw9fYoti.js → web/p-bRVVFGb9.js} +65 -3
  54. package/dist/{esm/index-Cw9fYoti.js.map → web/p-bRVVFGb9.js.map} +1 -1
  55. package/dist/web/{p-1c284e42.entry.js → p-d6de8bc6.entry.js} +1 -1
  56. package/dist/web/pennlibs-accordion.pennlibs-chat.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-service-switcher.entry.esm.js.map +1 -0
  57. package/dist/web/web.css +289 -262
  58. package/dist/web/web.esm.js +3 -3
  59. package/hydrate/index.js +131 -4
  60. package/hydrate/index.mjs +131 -4
  61. package/package.json +1 -1
  62. package/dist/cjs/index-BKWYkqL-.js.map +0 -1
  63. package/dist/cjs/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
  64. package/dist/cjs/pennlibs-chat.cjs.entry.js +0 -23
  65. package/dist/cjs/pennlibs-chat.entry.cjs.js.map +0 -1
  66. package/dist/esm/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
  67. package/dist/esm/pennlibs-chat.entry.js +0 -21
  68. package/dist/esm/pennlibs-chat.entry.js.map +0 -1
  69. package/dist/web/p-8d7c5424.entry.js +0 -21
  70. package/dist/web/p-Cw9fYoti.js.map +0 -1
  71. package/dist/web/pennlibs-accordion.pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +0 -1
  72. package/dist/web/pennlibs-chat.entry.esm.js.map +0 -1
package/dist/cjs/{index-BKWYkqL-.js → index-BEV8Fxnb.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 /* break-word, not anywhere: both break a genuinely-too-long token (URL, long\n id) to stop it blowing out the layout, but `anywhere` also folds those break\n points into min-content sizing, which collapses table/flex/grid items and\n breaks ordinary words (e.g. a \"Select\" column header). break-word leaves\n normal words intact. */\n overflow-wrap: break-word;\n\n /* Use a more-intuitive box-sizing model */\n & :is(*, *::before, *::after) {\n box-sizing: border-box;\n margin: 0;\n }\n\n /* Improve media defaults */\n & :is(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n }\n\n /* Inherit fonts for form controls */\n & :is(input, button, textarea, select) {\n font: var(--pl-font-family);\n }\n\n /* Default checkbox size */\n & input[type=\"checkbox\"] {\n width: var(--pl-space-m);\n height: var(--pl-space-m);\n }\n\n /* Improve line wrapping */\n & p {\n text-wrap: pretty;\n }\n & :is(h1, h2, h3, h4, h5, h6) {\n text-wrap: balance;\n }\n\n /* Link styles */\n & a {\n color: var(--pl-color-fg-accent);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n font-weight: 500;\n\n &:hover {\n text-decoration-thickness: 3px;\n }\n }\n}\n\n/*\n Typeset\n*/\n\n:where(.pl-typeset) {\n font-family: var(--pl-font-family);\n /* Establish a container so descendant headings can use `cqi` units\n to scale fluidly with the typeset wrapper's width. */\n container-type: inline-size;\n\n & :is(p, .pl-p) {\n font-family: var(--pl-font-family);\n }\n\n & :is(h1, .pl-h1, h2, .pl-h2) {\n font-family: var(--pl-font-serif);\n font-weight: 400;\n }\n\n & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n font-weight: 600;\n }\n\n & *+:is(h2,h3,h4,h5,h6) {\n margin-block-start: var(--pl-space-xl);\n }\n\n /* A .pl-caps eyebrow sits tight above its heading; the separating space goes\n above the eyebrow, not between it and the heading. */\n & .pl-caps:has(+ :is(h1, h2, h3, h4, h5, h6)) {\n margin-block-start: var(--pl-space-xl);\n }\n\n & .pl-caps + :is(h1, h2, h3, h4, h5, h6) {\n margin-block-start: 0;\n }\n\n & :is(h1, .pl-h1, h2, .pl-h2) {\n line-height: 1;\n font-family: var(--pl-font-serif);\n color: var(--pl-color-penn-blue);\n /* The accent bar is a background gradient, so it always paints behind the\n heading text without a positioned pseudo-element or any z-index work. Its\n color is set per level below; size and placement are shared here. The\n padding-bottom reserves room for the bar beneath the text. */\n background-repeat: no-repeat;\n background-size: 2.25rem 4px;\n background-position: left bottom;\n padding-bottom: var(--pl-space-3xs);\n }\n\n & :is(h1, .pl-h1) {\n /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n fluid clamp below. */\n font-size: var(--pl-font-size-5xl);\n font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n /* margin reduced by the bar's padding-bottom (xs) to keep the prior rhythm */\n margin-bottom: calc(var(--pl-space-l) - var(--pl-space-xs));\n margin-top: 0;\n background-image: linear-gradient(var(--pl-color-penn-red), var(--pl-color-penn-red));\n }\n\n & :is(h2, .pl-h2) {\n font-size: var(--pl-font-size-4xl);\n font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n margin-bottom: calc(var(--pl-space-m) - var(--pl-space-xs));\n background-image: linear-gradient(#d6d6dc, #d6d6dc);\n }\n\n & :is(h3, .pl-h3) {\n font-size: var(--pl-font-size-xl);\n font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n font-family: var(--pl-font-sans-serif);\n color: var(--pl-color-fg-default);\n margin-bottom: var(--pl-space-m);\n /* No accent bar at h3 level. This also strips the bar from an h2 demoted\n with .pl-h3 (the bar selector matches the h2 tag). */\n background-image: none;\n padding-bottom: 0;\n }\n\n & :is(h4, .pl-h4) {\n font-size: var(--pl-font-size-m);\n margin-bottom: var(--pl-space-s);\n background-image: none;\n padding-bottom: 0;\n }\n}\n\n/*\n Caps\n\n Small uppercase label type used throughout the site, such as table headers\n and section labels. The subtle variant dims it with the subtle foreground.\n*/\n\n.pl-caps,\n.pl-caps--subtle {\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.075rem;\n text-transform: uppercase;\n vertical-align: middle;\n}\n\n.pl-caps--subtle {\n color: var(--pl-color-fg-subtle);\n}\n\n/*\n Line length\n*/\n\n.pl-line-length {\n max-width: 60ch;\n}\n\n/*\n Border radius\n*/\n\n.pl-border-radius-subtle {\n border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n border-radius: var(--pl-border-radius);\n}\n\n/*\n Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n display: grid;\n grid-row-gap: 0.25rem;\n \n & dt {\n font-weight: 600;\n margin-top: 0.5rem;\n }\n}\n\n@media (min-width: 720px) {\n .pl-dl:not(.pl-dl--inline) {\n grid-template-columns: 12rem 1fr;\n\n & dt {\n grid-column: 1 / 2;\n margin-top: 0;\n padding-right: 1rem;\n }\n\n & dd {\n grid-column: 2 / 3;\n margin-bottom: 0;\n }\n }\n}\n\n@media (min-width: 720px) {\n .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n padding-top: 0.75rem;\n margin-top: 0.5rem;\n border-top: solid 1px var(--pl-color-bg-subtle-brand);\n }\n}\n\n.pl-dl--inline {\n display: block;\n\n & dt,\n & dd {\n display: inline;\n padding-right: 0.5rem;\n margin-bottom: 0;\n }\n\n & dt {\n font-weight: 600;\n }\n\n & dt:not(:first-of-type)::before {\n content: \"\";\n display: block;\n margin-bottom: 0.25rem;\n }\n\n & dd::after {\n content: \" ·\";\n padding-left: var(--pl-space-xs);\n }\n\n & dd:has(+ dt)::after {\n all: unset;\n }\n\n & > *:last-child::after {\n all: unset;\n }\n\n & a {\n color: var(--pl-color-fg-default);\n text-decoration-style: dotted;\n font-weight: 400;\n\n &:hover {\n text-decoration-style: solid;\n text-decoration-thickness: 2px;\n }\n }\n}\n\n/* Baseline focus indicator: apply the focus pattern to every focusable element.\n `:where()` keeps specificity at 0 so component and utility styles can override. */\n:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {\n outline: none;\n box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button {\n border: none;\n outline: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: var(--pl-space-2xs);\n padding: var(--pl-space-xs) var(--pl-space-m);\n font-size: 1rem;\n line-height: 1.5;\n font-family: var(--pl-font-family);\n border-radius: var(--pl-border-radius);\n\n background: var(--pl-color-bg-subtle);\n color: var(--pl-color-fg-default);\n}\n\n/* a.pl-button {\n text-decoration: none;\n} */\n\n.pl-button:hover {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\na.pl-button:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\n.pl-button:focus {\n box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n background: var(--pl-color-bg-accent-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n background: var(--pl-color-bg-success-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n background: var(--pl-color-bg-attention-emphasis);\n color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n padding: var(--pl-space-m) var(--pl-space-l);\n margin-bottom: var(--pl-space-l);\n border: 1px solid var(--pl-color-fg-subtle);\n border-left-width: 0.25rem;\n border-radius: var(--pl-border-radius-subtle);\n border-left-color: var(--pl-color-fg-accent);\n}\n\n/*\n Details\n\n Styles a native <details>/<summary> as a disclosure: a subtle card whose\n border and divider appear when open, with the default marker replaced by a\n chevron that rotates on open. Pure CSS, no JavaScript required. Add\n `.pl-details` to the <details>, `.pl-details__summary` to the <summary>, and\n `.pl-details__content` to the panel that follows it.\n\n Ported from the finding-aids prototype (`.faa-guide__details`).\n*/\n\n.pl-details {\n border-radius: var(--pl-border-radius);\n background: var(--pl-color-bg-subtle);\n border: solid 1px transparent;\n}\n\n.pl-details[open] {\n border-color: var(--pl-color-fg-subtle);\n}\n\n.pl-details[open] > .pl-details__summary {\n border-bottom: solid 1px var(--pl-color-fg-subtle);\n}\n\n/* Headings used as the summary label shouldn't add their own bottom margin. */\n.pl-details__summary :is(h1, h2, h3, h4, h5, h6) {\n margin-bottom: 0;\n}\n\n.pl-details__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--pl-space-s);\n cursor: pointer;\n list-style: none;\n padding: var(--pl-space-xs) var(--pl-space-m);\n}\n\n.pl-details__summary:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.pl-details__summary:focus-visible {\n outline: none;\n box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Remove the default disclosure triangle (Safari/Chrome use this marker). */\n.pl-details__summary::-webkit-details-marker {\n display: none;\n}\n\n/* Custom chevron that rotates 180° when the panel is open. */\n.pl-details__summary::after {\n content: '';\n width: 1.25rem;\n height: 1.25rem;\n flex-shrink: 0;\n background: currentColor;\n -webkit-mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n transition: transform 0.2s ease;\n}\n\n.pl-details[open] > .pl-details__summary::after {\n transform: rotate(180deg);\n}\n\n/* The content revealed when the disclosure is open. */\n.pl-details__content {\n padding: var(--pl-space-m);\n background: var(--pl-color-bg-default);\n border-radius: 0 0 var(--pl-border-radius) var(--pl-border-radius);\n\n & > .pl-details:first-of-type,\n & > pennlibs-accordion {\n margin-top: var(--pl-space-m);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .pl-details__summary::after {\n transition: none;\n }\n}\n\n/* \n Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n Font size\n\n DEPRECATED: the `.pl-font-size-*` utility classes are deprecated and slated\n for removal in the next major version. They are kept here so existing markup\n keeps working. Prefer `.pl-typeset` for typographic regions, or use the\n `--pl-font-size-*` tokens directly (those tokens are NOT deprecated and remain\n the type scale behind our headings).\n*/\n\n.pl-font-size-xs {\n font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n font-size: var(--pl-font-size-5xl);\n}";
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-BEV8Fxnb.js.map
2288
2350
 
2289
- //# sourceMappingURL=index-BKWYkqL-.js.map
2351
+ //# sourceMappingURL=index-BEV8Fxnb.js.map