@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -0,0 +1,41 @@
+<script>import QuickLinks from './QuickLinks.svelte';
+import CompanyLinks from './CompanyLinks.svelte';
+import LegalLinks from './LegalLinks.svelte';
+import Referrals from './Referrals/index.svelte';
+import data from './data.json';
+/**
+ * Custom referrals to other Reuters Graphics projects
+ */
+export let referrals = [];
+</script>
+
+<footer
+  style="{`
+    --nav-background: var(--theme-colour-background, #fff);
+    --nav-primary: var(--theme-colour-text-primary, #404040);
+    --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+  `}"
+>
+  <div>
+    <Referrals referrals="{referrals}" />
+    <QuickLinks links="{data[0]}" />
+    <CompanyLinks links="{data[0]}" />
+    <LegalLinks links="{data[0]}" />
+  </div>
+</footer>
+
+<!-- svelte-ignore css-unused-selector -->
+<style>footer {
+  margin-top: 4rem;
+  background-color: var(--nav-background, #fff);
+}
+footer div {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+footer :global(a) {
+  text-decoration: none;
+}
+footer :global(a:hover) {
+  text-decoration: underline;
+}</style>

package/dist/components/SiteFooter/data.json

@@ -0,0 +1,210 @@
+[
+    {
+        "company_description": "Reuters, the news and media division of Thomson Reuters, is the world’s largest multimedia news provider, reaching billions of people worldwide every day. Reuters provides business, financial, national and international news to professionals via desktop terminals, the world's media organizations, industry events and directly to consumers.",
+        "disclaimer_link": "https://www.reuters.com/info-pages/disclaimer/",
+        "copyright_link": "https://www.thomsonreuters.com/en/policies/copyright.html",
+        "copyright_year": "2022",
+        "latest_links": [
+            {
+                "text": "Home",
+                "url": "/",
+                "self": true
+            }
+        ],
+        "browse_links": [
+            {
+                "text": "World",
+                "url": "/world/",
+                "self": true
+            },
+            {
+                "text": "Business",
+                "url": "/business/",
+                "self": true
+            },
+            {
+                "text": "Legal",
+                "url": "/legal/",
+                "self": true
+            },
+            {
+                "text": "Markets",
+                "url": "/markets/",
+                "self": true
+            },
+            {
+                "text": "Breakingviews",
+                "url": "/breakingviews/",
+                "self": true
+            },
+            {
+                "text": "Technology",
+                "url": "/technology/",
+                "self": true
+            },
+            {
+                "text": "Investigations",
+                "url": "/investigates/"
+            },
+            {
+                "text": "Lifestyle",
+                "url": "/lifestyle/",
+                "self": true
+            }
+        ],
+        "media_links": [
+            {
+                "text": "Videos",
+                "url": "https://www.reuters.com/video/",
+                "symbol": "videos"
+            },
+            {
+                "text": "Pictures",
+                "url": "https://www.reuters.com/news/pictures",
+                "symbol": "pictures"
+            },
+            {
+                "text": "Graphics",
+                "url": "https://graphics.reuters.com/",
+                "symbol": "graphics"
+            }
+        ],
+        "about_links": [
+            {
+                "text": "About Reuters",
+                "url": "https://www.reutersagency.com/en/about/about-us/"
+            },
+            {
+                "text": "Careers",
+                "url": "https://www.thomsonreuters.com/en/careers.html"
+            },
+            {
+                "text": "Reuters News Agency",
+                "url": "https://www.reutersagency.com/en/?utm_source=website&utm_medium=reuters&utm_campaign=site-referral&utm_content=us&utm_term=0"
+            },
+            {
+                "text": "Brand Attribution Guidelines",
+                "url": "https://www.reutersagency.com/en/about/about-us/brand-attribution-guidelines/"
+            },
+            {
+                "text": "Reuters Leadership",
+                "url": "https://www.reutersagency.com/en/about/leadership-team/"
+            },
+            {
+                "text": "Reuters Fact Check",
+                "url": "https://www.reuters.com/fact-check/"
+            },
+            {
+                "text": "Reuters Diversity Report",
+                "url": "https://www.reuters.com/DiversityReportApril2022"
+            }
+        ],
+        "stay_informed_links": [
+            {
+                "text": "Download the App",
+                "url": "https://www.reuters.com/tools/mobile/us"
+            },
+            {
+                "text": "Newsletters",
+                "url": "https://newslink.reuters.com/join/subscribe"
+            }
+        ],
+        "social_links": [
+            {
+                "type": "twitter",
+                "url": "https://www.twitter.com/Reuters"
+            },
+            {
+                "type": "facebook",
+                "url": "https://www.facebook.com/Reuters"
+            },
+            {
+                "type": "instagram",
+                "url": "https://www.instagram.com/Reuters"
+            },
+            {
+                "type": "youtube",
+                "url": "https://www.youtube.com/user/ReutersVideo"
+            },
+            {
+                "type": "linkedin",
+                "url": "https://www.linkedin.com/company/10256858/"
+            }
+        ],
+        "tr_products": [
+            {
+                "name": "Westlaw",
+                "description": "Build the strongest argument relying on authoritative content, attorney-editor expertise, and industry defining technology.",
+                "url": "https://legal.thomsonreuters.com/en/products/westlaw"
+            },
+            {
+                "name": "Onesource",
+                "description": "The most comprehensive solution to manage all your complex and ever-expanding tax and compliance needs.",
+                "url": "https://tax.thomsonreuters.com/en/onesource"
+            },
+            {
+                "name": "Checkpoint",
+                "description": "The industry leader for online information for tax, accounting and finance professionals.",
+                "url": "https://tax.thomsonreuters.com/en/checkpoint"
+            }
+        ],
+        "refinitiv_products": [
+            {
+                "name": "Refinitiv Workspace",
+                "description": " Access unmatched financial data, news and content in a highly-customised workflow experience on desktop, web and mobile.",
+                "url": " https://www.refinitiv.com/en/products/refinitiv-workspace"
+            },
+            {
+                "name": "Refinitiv Data Catalogue",
+                "description": " Browse an unrivalled portfolio of real-time and historical market data and insights from worldwide sources and experts.",
+                "url": " https://www.refinitiv.com/en/financial-data"
+            },
+            {
+                "name": "Refinitiv World-Check",
+                "description": "Screen for heightened risk individual and entities globally to help uncover hidden risks in business relationships and human networks.",
+                "url": "https://www.refinitiv.com/en/products/world-check-kyc-screening"
+            }
+        ],
+        "ad_links": [
+            {
+                "text": "Advertise With Us",
+                "url": "https://www.reutersagency.com/en/services/advertising-solutions/"
+            },
+            {
+                "text": "Advertising Guidelines",
+                "url": "/info-pages/advertising-guidelines/"
+            }
+        ],
+        "misc_links": [
+            {
+                "text": "Cookies",
+                "url": "https://www.thomsonreuters.com/en/privacy-statement.html#cookies"
+            },
+            {
+                "text": "Terms of Use",
+                "url": "/info-pages/terms-of-use/"
+            },
+            {
+                "text": "Privacy",
+                "url": "https://www.thomsonreuters.com/en/privacy-statement.html"
+            },
+            {
+                "text": "Digital Accessibility",
+                "url": "https://www.thomsonreuters.com/en/policies/digital-accessibility-policy.html"
+            },
+            {
+                "text": "Corrections",
+                "url": "/info-pages/contact-us/"
+            },
+            {
+                "text": "Site Feedback",
+                "url": "https://trdigital.iad1.qualtrics.com/jfe/form/SV_8kte8gArGyCGVhz"
+            },
+            {
+                "text": "Do Not Sell My Personal Information",
+                "url": "javascript:window.OneTrust.ToggleInfoDisplay();",
+                "self": "true"
+            }
+        ]
+    }
+]

package/dist/components/SiteFooter/svgs/Facebook.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  style="width: {width}px;"
+  ><path
+    d="M14.5 0h-13C.675 0 0 .675 0 1.5v13c0 .825.675 1.5 1.5 1.5H8V9H6V7h2V6c0-1.653 1.347-3 3-3h2v2h-2c-.55 0-1 .45-1 1v1h3l-.5 2H10v7h4.5c.825 0 1.5-.675 1.5-1.5v-13c0-.825-.675-1.5-1.5-1.5Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/Graphics.svelte

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+>
+  <title>Gallery</title>
+  <path
+    d="M13.3331429,0.38114286 L2.66628571,0.38114286 C1.37085714,0.38114286 0.38057143,1.37142857 0.38057143,2.66685714 L0.38057143,13.3337143 C0.38057143,14.6291429 1.37085714,15.6194286 2.66628571,15.6194286 L13.3331429,15.6194286 C14.6285714,15.6194286 15.6188571,14.6291429 15.6188571,13.3337143 L15.6188571,2.66685714 C15.6188571,1.37142857 14.6285714,0.38114286 13.3331429,0.38114286 Z M1.90457143,2.66685714 C1.90457143,2.20971429 2.20914286,1.90514286 2.66628571,1.90514286 L13.3331429,1.90514286 C13.7902857,1.90514286 14.0948571,2.20971429 14.0948571,2.66685714 L14.0948571,8.4571429 L11.5805714,5.94285714 C11.276,5.63828571 10.8188571,5.63828571 10.5137143,5.94285714 L2.43771429,14.0188571 C2.13314286,13.9428571 1.90457143,13.6377143 1.90457143,13.3331429 L1.90457143,2.66628571 L1.90457143,2.66685714 Z M13.3331429,14.0954286 L4.49485714,14.0954286 L11.0474286,7.5428571 L14.0948571,10.5902857 L14.0948571,13.3331429 C14.0948571,13.7902857 13.7902857,14.0948571 13.3331429,14.0948571 L13.3331429,14.0954286 Z"
+  ></path><path
+    d="M5.33314286,7.2382857 C6.4,7.2382857 7.2377143,6.4 7.2377143,5.33371429 C7.2377143,4.26742857 6.3994286,3.42914286 5.33314286,3.42914286 C4.26685714,3.42914286 3.42857143,4.26742857 3.42857143,5.33371429 C3.42857143,6.4 4.26685714,7.2382857 5.33314286,7.2382857 Z M5.33314286,4.95257143 C5.56171429,4.95257143 5.71428571,5.10514286 5.71428571,5.33371429 C5.71428571,5.56228571 5.56171429,5.71485714 5.33314286,5.71485714 C5.10457143,5.71485714 4.952,5.56228571 4.952,5.33371429 C4.952,5.10514286 5.10457143,4.95257143 5.33314286,4.95257143 Z"
+  ></path>
+</svg>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/Instagram.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  style="width: {width}px;"
+  ><path
+    d="M8 1.44c2.137 0 2.39.01 3.231.048.781.034 1.203.165 1.485.274.372.145.64.32.918.598.281.281.453.546.6.919.11.281.24.706.275 1.484.037.844.047 1.097.047 3.232 0 2.134-.01 2.39-.047 3.231-.034.781-.165 1.203-.275 1.484a2.47 2.47 0 0 1-.597.919 2.51 2.51 0 0 1-.918.6c-.282.11-.707.24-1.485.275-.844.037-1.097.047-3.232.047-2.134 0-2.39-.01-3.231-.047-.781-.034-1.203-.165-1.484-.275a2.476 2.476 0 0 1-.92-.597 2.51 2.51 0 0 1-.6-.918c-.109-.282-.24-.707-.274-1.485-.038-.844-.048-1.097-.048-3.231 0-2.135.01-2.391.047-3.232.035-.781.166-1.203.276-1.485.143-.372.319-.64.597-.919.281-.281.546-.453.918-.6.282-.109.707-.24 1.485-.274C5.608 1.45 5.862 1.44 8 1.44ZM8 0C5.828 0 5.556.01 4.703.047c-.85.038-1.435.175-1.94.372a3.898 3.898 0 0 0-1.419.925c-.447.444-.719.89-.925 1.415C.222 3.27.085 3.85.047 4.7.01 5.556 0 5.828 0 8c0 2.172.01 2.444.047 3.297.038.85.175 1.434.372 1.94.206.528.478.976.925 1.419.444.444.89.719 1.415.922.51.197 1.091.335 1.941.372.853.038 1.125.047 3.297.047s2.444-.01 3.297-.047c.85-.037 1.434-.175 1.94-.372a3.903 3.903 0 0 0 1.416-.922c.444-.444.719-.89.922-1.415.197-.51.335-1.091.372-1.941.037-.853.047-1.125.047-3.297s-.01-2.444-.047-3.297c-.038-.85-.175-1.435-.372-1.94a3.753 3.753 0 0 0-.915-1.423A3.91 3.91 0 0 0 13.24.422c-.51-.197-1.09-.335-1.94-.372C10.444.008 10.171 0 8 0H8Z"
+  ></path><path
+    d="M8 3.89a4.11 4.11 0 0 0 0 8.22 4.11 4.11 0 0 0 0-8.22Zm0 6.776a2.666 2.666 0 1 1 0-5.332 2.666 2.666 0 0 1 0 5.332Zm5.231-6.938a.96.96 0 1 1-1.919 0 .96.96 0 0 1 1.919 0Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/LinkedIn.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 21 21"
+  style="width: {width}px;"
+  ><path
+    d="M19.031 0c1.034 0 1.888.807 1.964 1.822L21 1.97V19.03a1.975 1.975 0 0 1-1.822 1.964L19.03 21H1.97a1.975 1.975 0 0 1-1.964-1.822L0 19.03V1.97C0 .935.807.08 1.822.005L1.97 0H19.03ZM6.3 7.875H3.15v10.063H6.3V7.874Zm7.875-.175c-1.575 0-2.538.788-2.975 1.575v-1.4H8.225v10.063h3.15V12.95c0-1.313.175-2.537 1.838-2.537 1.575 0 1.575 1.487 1.575 2.624v4.9h3.15v-5.425c0-2.712-.613-4.812-3.763-4.812ZM4.637 2.8c-1.05 0-1.837.875-1.837 1.838 0 1.05.875 1.837 1.838 1.837 1.05 0 1.837-.787 1.837-1.837 0-1.05-.875-1.838-1.837-1.838Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/Pictures.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 21 18"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+  ><title>Pictures</title><path
+    d="M13.1256562,0 C13.3881562,0 13.6506562,0.17954776 13.825875,0.3597705 L15.3135937,2.69996625 L18.375,2.69996625 C19.8627187,2.69996625 21,3.8697266 21,5.3999325 L21,15.3000337 C21,16.8302396 19.8627187,18 18.375,18 L2.625,18 C1.13728125,18 0,16.8302396 0,15.3000337 L0,5.3999325 C0,3.8697266 1.13728125,2.69996625 2.625,2.69996625 L5.6877187,2.69996625 L7.1754375,0.3597705 C7.3506562,0.18022275 7.6131562,0 7.8756562,0 L13.1256562,0 Z M12.6013125,1.79952751 L8.3140312,1.79952751 L6.8263125,4.1397233 C6.6510937,4.319271 6.3885937,4.4994938 6.1260937,4.4994938 L2.6263125,4.4994938 C2.1013125,4.4994938 1.75153125,4.8592643 1.75153125,5.3992575 L1.75153125,15.2993588 C1.75153125,15.839352 2.1013125,16.1991225 2.6263125,16.1991225 L18.3763125,16.1991225 C18.9013125,16.1991225 19.2510937,15.839352 19.2510937,15.2993588 L19.2510937,5.3992575 C19.2510937,4.8592643 18.9013125,4.4994938 18.3763125,4.4994938 L14.8765312,4.4994938 C14.6140312,4.4994938 14.3515312,4.319946 14.0890312,4.1397233 L12.6013125,1.79952751 Z M10.5013125,5.3999325 C12.95175,5.3999325 14.8765312,7.3796828 14.8765312,9.9001012 C14.8765312,12.4205197 12.95175,14.40027 10.5013125,14.40027 C8.050875,14.40027 6.1260937,12.4205197 6.1260937,9.9001012 C6.1260937,7.3796828 8.0515312,5.3999325 10.5013125,5.3999325 Z M10.5013125,7.19946 C9.0135937,7.19946 7.8763125,8.3692204 7.8763125,9.8994263 C7.8763125,11.4296321 9.0135937,12.5993925 10.5013125,12.5993925 C11.9890312,12.5993925 13.1263125,11.4296321 13.1263125,9.8994263 C13.1263125,8.3692204 11.9890312,7.19946 10.5013125,7.19946 Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/Twitter.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 13"
+  style="width: {width}px;"
+  ><path
+    d="M16 1.537a6.469 6.469 0 0 1-1.884.516A3.3 3.3 0 0 0 15.559.237a6.603 6.603 0 0 1-2.084.797A3.282 3.282 0 0 0 11.078 0a3.28 3.28 0 0 0-3.196 4.028A9.315 9.315 0 0 1 1.118.598a3.28 3.28 0 0 0-.444 1.65c0 1.137.578 2.143 1.46 2.73A3.281 3.281 0 0 1 .646 4.57v.04A3.282 3.282 0 0 0 3.28 7.83a3.286 3.286 0 0 1-1.483.055 3.294 3.294 0 0 0 3.065 2.282A6.583 6.583 0 0 1 0 11.526 9.281 9.281 0 0 0 5.034 13c6.036 0 9.338-5.003 9.338-9.34 0-.144-.003-.285-.01-.425A6.607 6.607 0 0 0 16 1.538Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/Videos.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 11"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+  ><title>Videos</title><path
+    d="M15.6665,1.5665 C15.4665,1.433 15.2,1.5 15,1.633 L11.3335,4.233 L11.3335,2.1665 C11.3335,1.033 10.467,0.1665 9.3335,0.1665 L2,0.1665 C0.8665,0.1665 0,1.033 0,2.1665 L0,8.833 C0,9.9665 0.8665,10.833 2,10.833 L9.3335,10.833 C10.467,10.833 11.3335,9.9665 11.3335,8.833 L11.3335,6.7665 L14.9335,9.3665 C15.067,9.433 15.2,9.5 15.3335,9.5 C15.467,9.5 15.5335,9.5 15.667,9.4335 C15.867,9.3 16.0005,9.1 16.0005,8.8335 L16.0005,2.167 C16.0005,1.9005 15.867,1.7005 15.667,1.567 L15.6665,1.5665 Z M10,8.8335 C10,9.2335 9.7335,9.5 9.3335,9.5 L2,9.5 C1.6,9.5 1.3335,9.2335 1.3335,8.8335 L1.3335,2.167 C1.3335,1.767 1.6,1.5005 2,1.5005 L9.3335,1.5005 C9.7335,1.5005 10,1.767 10,2.167 L10,8.8335 Z M14.6665,7.5665 L11.8,5.5 L14.6665,3.4335 L14.6665,7.567 L14.6665,7.5665 Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteFooter/svgs/YouTube.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 21 17"
+  xmlns="http://www.w3.org/2000/svg"
+  style="width: {width}px;"
+  ><path
+    d="M18.375 0H2.625A2.617 2.617 0 0 0 0 2.609V14.39A2.617 2.617 0 0 0 2.625 17h15.75A2.617 2.617 0 0 0 21 14.391V2.61A2.617 2.617 0 0 0 18.375 0Zm-10.5 13.044V4.348l7 4.348-7 4.348Z"
+  ></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -0,0 +1,199 @@
+<script>
+  import { ReutersLogo } from '../../../index.js';
+  import CloseIcon from '../svgs/Close.svelte';
+  import { normalizeUrl } from '../NavBar/utils/index.js';
+
+  export let data = [];
+  export let isMobileMenuOpen = false;
+  export let releaseMobileMenu = () => {};
+</script>
+
+{#if isMobileMenuOpen}
+  <div
+    class="overlay"
+    aria-modal="true"
+    style="{`
+      --nav-background: var(--theme-colour-background, #fff);
+      --nav-primary: var(--theme-colour-text-primary, #404040);
+      --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+      --nav-accent: var(--theme-colour-brand-logo, #fa6400);
+      --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
+    `}"
+  >
+    <header class="header">
+      <div class="logo">
+        <ReutersLogo
+          logoColour="var(--nav-accent)"
+          textColour="var(--nav-primary)"
+        />
+      </div>
+      <button class="button close-button" on:click="{releaseMobileMenu}">
+        <div class="button-container">
+          <CloseIcon />
+        </div>
+      </button>
+    </header>
+    {#each data.sections as section}
+      <section class="section">
+        <a class="section-link" href="{normalizeUrl(section.url)}"
+          >{section.name}</a
+        >
+        {#if section.children}
+          <ul class="subsections">
+            {#each section.children as sub}
+              <li>
+                <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+                  {sub.name}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </section>
+    {/each}
+  </div>
+{/if}
+
+<style>@charset "UTF-8";
+/*
+Several components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
+These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors.
+To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
+*/
+.overlay {
+  position: fixed;
+  z-index: 1060;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 60px;
+  box-sizing: border-box;
+  background: var(--nav-background);
+  color: var(--nav-primary);
+  overflow: auto;
+}
+
+.header {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  box-sizing: border-box;
+  background: var(--nav-background);
+}
+
+.logo {
+  font-size: 0;
+  width: 127px;
+}
+
+.close-button {
+  width: 40px;
+  height: 40px;
+  margin-left: auto;
+  display: inline-block;
+  vertical-align: top;
+  outline: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+}
+.close-button .button-container {
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 2px solid var(--nav-background);
+}
+.close-button:hover .button-container {
+  box-shadow: var(--nav-shadow);
+}
+.close-button:focus-visible .button-container {
+  border: 2px solid var(--nav-accent);
+}
+
+.header {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+}
+@media (max-width: 1023px) {
+  .header {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .header {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.section {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #d0d0d0;
+  width: 100%;
+  max-width: 100%;
+}
+@media (max-width: 1023px) {
+  .section {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .section {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+.section .subsections {
+  margin: 20px 0 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 16px;
+  grid-column-gap: 2.2222222222vw;
+}
+@media (max-width: 1023px) {
+  .section .subsections {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .section .subsections {
+    grid-column-gap: 32px;
+  }
+}
+.section .section-link {
+  font-size: 14px;
+}
+.section .section-link,
+.section .subsection-link {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  line-height: 1.2;
+  color: var(--nav-primary);
+}
+.section .section-link:hover,
+.section .subsection-link:hover {
+  text-decoration: underline;
+}</style>

package/dist/components/SiteHeader/NavBar/DownArrow.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let rotate = false;
+</script>
+
+<svg
+  class="arrow"
+  class:rotated="{rotate}"
+  focusable="false"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 11 7"
+>
+  <path
+    d="M10.413.587a.71.71 0 0 0-1.027 0L5.5 4.474 1.613.587a.71.71 0 0 0-1.027 0 .709.709 0 0 0 0 1.027l4.4 4.4c.147.147.367.22.513.22a.79.79 0 0 0 .513-.22l4.4-4.4a.71.71 0 0 0 0-1.027h.001Z"
+  ></path>
+</svg>
+
+<style>svg {
+  margin-left: 4px;
+  width: 10px;
+  fill: var(--nav-primary, #404040);
+  transition: transform 0.15s ease;
+}
+svg.rotated {
+  transform: rotate(180deg);
+}</style>