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

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -0,0 +1,235 @@
+<script>import { ReutersLogo } from '../../index.js';
+import NavBar from './NavBar/index.svelte';
+import data from './data.json';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import MenuIcon from './svgs/Menu.svelte';
+import MobileMenu from './MobileMenu/index.svelte';
+setContext('nav-active-section', writable(null));
+const { sections } = data[0];
+let isMobileMenuOpen = false;
+</script>
+
+<header
+  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%));
+  `}"
+>
+  <div class="nav-container show-nav">
+    <div class="scroll-container">
+      <div class="inner">
+        <div class="main-bar">
+          <div class="logo-container">
+            <div class="logo">
+              <a href="https://www.reuters.com">
+                <ReutersLogo
+                  logoColour="var(--nav-accent)"
+                  textColour="var(--nav-primary)"
+                />
+              </a>
+            </div>
+          </div>
+          <NavBar sections="{sections}" />
+          <!-- Space takes the place of the MyViewMenu, NavSearchBar & Account components... -->
+          <div class="spacer-container">
+            <div class="spacer"></div>
+          </div>
+
+          <div class="mobile-button-group">
+            <div class="mobile-menu">
+              <button
+                class="menu-button"
+                aria-label="Menu"
+                aria-haspopup="true"
+                aria-expanded="{isMobileMenuOpen}"
+                on:click="{() => {
+                  isMobileMenuOpen = !isMobileMenuOpen;
+                }}"
+              >
+                <div class="button-container">
+                  <MenuIcon />
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<MobileMenu
+  isMobileMenuOpen="{isMobileMenuOpen}"
+  releaseMobileMenu="{() => {
+    isMobileMenuOpen = false;
+  }}"
+  data="{data[0]}"
+/>
+
+<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.
+*/
+.nav-container {
+  background-color: var(--nav-background, #fff);
+  position: relative;
+  height: 64px;
+  z-index: 1020;
+  --page-height: 0px;
+}
+@media (max-width: 1023px) {
+  .nav-container {
+    height: 56px;
+  }
+}
+.nav-container a {
+  text-decoration: none;
+}
+
+.scroll-container {
+  height: calc(var(--page-height) - 50vh);
+  pointer-events: none;
+}
+.scroll-container .inner {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background: var(--nav-background, #fff);
+  pointer-events: auto;
+  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+}
+
+.main-bar {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  height: 64px;
+  justify-content: space-between;
+  max-width: 1440px;
+}
+@media (max-width: 1023px) {
+  .main-bar {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .main-bar {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+@media (max-width: 745px) {
+  .main-bar {
+    height: 56px;
+  }
+}
+
+.logo-container {
+  align-self: center;
+}
+.logo-container .logo {
+  display: block;
+  font-size: 0;
+}
+@media (max-width: 1023px) {
+  .logo-container .logo {
+    width: 127px;
+    min-width: 127px;
+  }
+}
+@media (min-width: 1024px) {
+  .logo-container .logo {
+    width: 154px;
+    min-width: 154px;
+  }
+}
+@media (min-width: 1300px) {
+  .logo-container .logo {
+    width: 184px;
+    min-width: 184px;
+  }
+}
+
+.spacer-container {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+@media (max-width: 745px) {
+  .spacer-container {
+    display: none;
+  }
+}
+.spacer-container .spacer {
+  width: 193.47px;
+  height: 64px;
+}
+@media (max-width: 1225px) {
+  .spacer-container .spacer {
+    width: 88px;
+  }
+}
+
+.mobile-button-group {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+@media (min-width: 746px) {
+  .mobile-button-group {
+    display: none;
+  }
+}
+
+.mobile-menu {
+  margin-left: 8px;
+}
+@media (min-width: 746px) {
+  .mobile-menu {
+    display: none;
+  }
+}
+.mobile-menu .menu-button {
+  width: 40px;
+  height: 40px;
+  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;
+}
+.mobile-menu .menu-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);
+}
+.mobile-menu .menu-button:hover .button-container {
+  box-shadow: var(--nav-shadow);
+}
+.mobile-menu .menu-button:focus-visible .button-container {
+  border: 2px solid var(--nav-accent);
+}</style>

package/dist/components/SiteHeader/data.json

@@ -0,0 +1 @@
+[{"sections":[{"id":"/world/","url":"/world/","name":"World","type":"section","children":[{"id":"/world/africa/","url":"/world/africa/","name":"Africa"},{"id":"/world/americas/","url":"/world/americas/","name":"Americas"},{"id":"/world/asia-pacific/","url":"/world/asia-pacific/","name":"Asia Pacific"},{"id":"/world/china/","url":"/world/china/","name":"China"},{"id":"/world/europe/","url":"/world/europe/","name":"Europe"},{"id":"/world/india/","url":"/world/india/","name":"India"},{"id":"/world/middle-east/","url":"/world/middle-east/","name":"Middle East"},{"id":"/world/uk/","url":"/world/uk/","name":"United Kingdom"},{"id":"/world/us/","url":"/world/us/","name":"United States"},{"id":"/world/the-great-reboot/","url":"/world/the-great-reboot/","name":"The Great Reboot"},{"id":"/world/reuters-next/","url":"/world/reuters-next/","name":"Reuters Next"}]},{"id":"/business/","url":"/business/","name":"Business","type":"section","children":[{"id":"/business/aerospace-defense/","url":"/business/aerospace-defense/","name":"Aerospace & Defense"},{"id":"/business/autos-transportation/","url":"/business/autos-transportation/","name":"Autos & Transportation"},{"id":"/business/energy/","url":"/business/energy/","name":"Energy"},{"id":"/business/environment/","url":"/business/environment/","name":"Environment"},{"id":"/business/finance/","url":"/business/finance/","name":"Finance"},{"id":"/business/healthcare-pharmaceuticals/","url":"/business/healthcare-pharmaceuticals/","name":"Healthcare & Pharmaceuticals"},{"id":"/business/media-telecom/","url":"/business/media-telecom/","name":"Media & Telecom"},{"id":"/business/retail-consumer/","url":"/business/retail-consumer/","name":"Retail & Consumer"},{"id":"/business/sustainable-business/","url":"/business/sustainable-business/","name":"Sustainable Business"},{"id":"/business/charged/","url":"/business/charged/","name":"Charged"},{"id":"/business/future-of-health/","url":"/business/future-of-health/","name":"Future of Health"},{"id":"/business/future-of-money/","url":"/business/future-of-money/","name":"Future of Money"},{"id":"/business/take-five/","url":"/business/take-five/","name":"Take Five"},{"id":"/business/reuters-impact/","url":"/business/reuters-impact/","name":"Reuters Impact"},{"id":"/business/davos/","url":"/business/davos/","name":"Davos"}]},{"id":"/legal/","url":"/legal/","name":"Legal","type":"section","children":[{"id":"/legal/government/","url":"/legal/government/","name":"Government"},{"id":"/legal/legalindustry/","url":"/legal/legalindustry/","name":"Legal Industry"},{"id":"/legal/litigation/","url":"/legal/litigation/","name":"Litigation"},{"id":"/legal/transactional/","url":"/legal/transactional/","name":"Transactional"}]},{"id":"/markets/","url":"/markets/","name":"Markets","type":"section","children":[{"id":"/markets/asia/","url":"/markets/asia/","name":"Asian Markets"},{"id":"/markets/carbon/","url":"/markets/carbon/","name":"Carbon Markets"},{"id":"/markets/commodities/","url":"/markets/commodities/","name":"Commodities"},{"id":"/markets/currencies/","url":"/markets/currencies/","name":"Currencies"},{"id":"/markets/deals/","url":"/markets/deals/","name":"Deals"},{"id":"/markets/emerging/","url":"/markets/emerging/","name":"Emerging Markets"},{"id":"/markets/europe/","url":"/markets/europe/","name":"European Markets"},{"id":"/markets/funds/","url":"/markets/funds/","name":"Funds"},{"id":"/markets/global-market-data/","url":"/markets/global-market-data/","name":"Global Market Data"},{"id":"/markets/rates-bonds/","url":"/markets/rates-bonds/","name":"Rates & Bonds"},{"id":"/markets/stocks/","url":"/markets/stocks/","name":"Stocks"},{"id":"/markets/us/","url":"/markets/us/","name":"U.S. Markets"},{"id":"/markets/wealth/","url":"/markets/wealth/","name":"Wealth"},{"id":"/markets/macromatters/","url":"/markets/macromatters/","name":"Macro Matters"}]},{"id":"/breakingviews/","url":"/breakingviews/","name":"Breakingviews","type":"section"},{"id":"/technology/","url":"/technology/","name":"Technology","type":"section","children":[{"id":"/technology/disrupted/","url":"/technology/disrupted/","name":"Disrupted"},{"id":"/technology/reuters-momentum/","url":"/technology/reuters-momentum/","name":"Reuters Momentum"}]},{"id":"/investigates/","url":"https://www.reuters.com/investigates/","name":"Investigations","type":"link"},{"id":"/lifestyle/sports/","url":"/lifestyle/sports/","name":"Sports","type":"section","children":[{"id":"/lifestyle/sports/athletics/","url":"/lifestyle/sports/athletics/","name":"Athletics"},{"id":"/lifestyle/sports/cricket/","url":"/lifestyle/sports/cricket/","name":"Cricket"},{"id":"/lifestyle/sports/cycling/","url":"/lifestyle/sports/cycling/","name":"Cycling"},{"id":"/lifestyle/sports/golf/","url":"/lifestyle/sports/golf/","name":"Golf"},{"id":"/lifestyle/sports/motor-sports/","url":"/lifestyle/sports/motor-sports/","name":"Motor Sports"},{"id":"/lifestyle/sports/soccer/","url":"/lifestyle/sports/soccer/","name":"Soccer"},{"id":"/lifestyle/sports/tennis/","url":"/lifestyle/sports/tennis/","name":"Tennis"}]},{"id":"/lifestyle/","url":"/lifestyle/","name":"Lifestyle","type":"section","children":[{"id":"/lifestyle/oddly-enough/","url":"/lifestyle/oddly-enough/","name":"Oddly Enough"},{"id":"/lifestyle/science/","url":"/lifestyle/science/","name":"Science"}]},{"id":"/graphics/","url":"https://graphics.reuters.com/","name":"Graphics","type":"link"},{"id":"/pictures/","url":"/pictures/","name":"Pictures","type":"section"},{"id":"/video/","url":"/video/","name":"Video","type":"section"}],"home_url":"/","search_url":"/site-search/","sign_in_url":"/signin/","sign_up_url":"/signup/","subscribe_url":"","my_account_url":"/myaccount/","my_view_url":"/myview/all","following_url":"/myview/following-feed","saved_url":"/myview/saved"}]

package/dist/components/SiteHeader/scss/_breakpoints.scss

@@ -0,0 +1,59 @@
+// From FSC:
+// Our design layouts are based on 2 artboard sizes:
+// 375px for small screens and 1440px for desktop.
+
+// However, these are snapshots to inform the core layouts.
+// Some aspects of the design system adapt to breakpoints between these sizes.
+
+// Our design layouts therefore show the snapshots for mobile on the 375px artboard and wide on the 1440px artboard.
+
+// Note that if we refer only to desktop it means all layouts above 1023px, similarly mobile in general is below 1024px.
+
+// Note that the desktop breakpoint kicks-in at 1024px, which also accommodates iPad/tablet in landscape.
+// This is the last size before the layout adapts to the mobile view.
+
+$maxWidth: 1440px;
+
+@mixin for-small-mobile {
+  @media (max-width: 518px) { @content; }
+}
+
+@mixin for-mobile {
+  @media (max-width: 745px) { @content; }
+}
+
+@mixin for-tablet {
+  @media (min-width: 746px) and (max-width: 1023px) { @content; }
+}
+
+@mixin for-tablet-up {
+  @media (min-width: 746px) { @content; }
+}
+
+@mixin for-tablet-down {
+  @media (max-width: 1023px) { @content; }
+}
+
+@mixin for-tight-desktop {
+  @media (min-width: 1024px) and (max-width: 1060px) { @content; }
+}
+
+@mixin for-desktop {
+  @media (min-width: 1024px) { @content; }
+}
+
+@mixin for-wide-desktop {
+  @media (min-width: 1300px) { @content; }
+}
+
+@mixin for-extra-wide-desktop {
+  @media (min-width: 1440px) { @content; }
+}
+
+@mixin above-max {
+  @media (min-width: $maxWidth) { @content; }
+}
+
+@mixin max-width {
+  max-width: $maxWidth;
+}

package/dist/components/SiteHeader/scss/_colors.scss

@@ -0,0 +1,25 @@
+// Sheet of project colors
+$tr-orange: #fa6400;
+$tr-dark-orange: #dc4300;
+$tr-light-orange: #ffa100;
+$tr-dark-grey: #404040;
+$tr-medium-grey: #666666;
+$tr-light-grey: #afafaf;
+$tr-muted-grey: #d0d0d0;
+$tr-hover-background-grey: #f8f8f8;
+$tr-light-muted-grey: #f4f4f4;
+$tr-ultra-light-grey: #fafafa;
+$tr-dark-blue: #005da2;
+$tr-light-blue: #0099c4;
+$tr-muted-blue: #4386B9;
+$tr-lighter-blue: #7FACCE;
+$tr-superlight-blue: #e5eef5;
+$tr-dark-purple: #621f95;
+$tr-light-purple: #6e3ab7;
+$tr-dark-red: #a00000;
+$tr-light-red: #dc0a0a;
+$tr-dark-green: #387c2b;
+$tr-light-green: #77a22d;
+$black: #000;
+$white: #fff;
+$ad-placeholder: #ffb1b1;

package/dist/components/SiteHeader/scss/_eases.scss

@@ -0,0 +1,9 @@
+$principleDefaultEase: cubic-bezier(0.25, 0.1, 0.25, 1);
+$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
+$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$navContainerEase: cubic-bezier(0.25, 0.1, 0.25, 1);
+$rtvDefaultEase: cubic-bezier(0.165, 0.84, 0.44, 1);

package/dist/components/SiteHeader/scss/_grids.scss

@@ -0,0 +1,126 @@
+@use 'sass:math';
+
+@import '_breakpoints.scss';
+
+@mixin spacing-single($properties, $delta: 1) {
+  @each $property in $properties {
+    #{$property}: (math.div(32, 1440) * 100vw * $delta);
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      #{$property}: (math.div(16, 375) * 100vw * $delta);
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      #{$property}: (32px * $delta);
+    }
+  }
+}
+
+@mixin spacing-single-half($properties, $delta: 1) {
+  @each $property in $properties {
+    #{$property}: (calc(16 / 1440) * 100vw * $delta);
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      #{$property}: (math.div(8, 375) * 100vw * $delta);
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      #{$property}: (16px * $delta);
+    }
+  }
+}
+
+@mixin spacing-single-34($properties, $delta: 1) {
+    @each $property in $properties {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
+
+    @include for-tablet-down {
+      @each $property in $properties {
+        #{$property}: (math.div(12, 375) * 100vw * $delta);
+      }
+    }
+
+    @include above-max {
+      @each $property in $properties {
+        #{$property}: (24px * $delta);
+      }
+    }
+  }
+
+@mixin spacing-150($properties, $delta: 1) {
+  @each $property in $properties {
+    #{$property}: (math.div(48, 1440) * 100vw * $delta);
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      #{$property}: (math.div(24, 375) * 100vw * $delta);
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      #{$property}: (48px * $delta);
+    }
+  }
+}
+
+@mixin spacing-75($properties, $delta: 1) {
+  @each $property in $properties {
+    #{$property}: (math.div(24, 1440) * 100vw * $delta);
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      #{$property}: (24px * $delta);
+    }
+  }
+}
+
+@mixin spacing-50($properties, $delta: 1) {
+  @each $property in $properties {
+    #{$property}: (math.div(16, 1440) * 100vw * $delta);
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      #{$property}: (16px * $delta);
+    }
+  }
+}
+
+@mixin responsive-columns($columns, $size: 1fr) {
+  @content;
+
+  display: grid;
+  grid-template-columns: repeat($columns, $size);
+
+  // Desktop grid (all screens greater than or equal to 1024px)
+  @include spacing-single(grid-column-gap);
+
+  // Mobile grid (all screens up to and including 1023px)
+  @include for-tablet-down {
+    grid-template-columns: repeat(4, $size);
+  }
+}
+
+@mixin at-4-columns {
+  @include for-tablet-down {
+    @content;
+  }
+}
+
+@mixin above-4-columns {
+  @include for-desktop {
+    @content;
+  }
+}

package/dist/components/SiteHeader/scss/_z-indexes.scss

@@ -0,0 +1,15 @@
+/*
+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.
+*/
+
+$zindex-dropdown:                   1000;
+$zindex-sticky:                     1020;
+$zindex-fixed:                      1030;
+$zindex-modal-backdrop:             1040;
+$zindex-offcanvas:                  1050;
+$zindex-modal:                      1060;
+$zindex-popover:                    1070;
+$zindex-tooltip:                    1080;
+$zindex-close-button:               1090;

package/dist/components/SiteHeader/svgs/Close.svelte

@@ -0,0 +1,14 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  width="15"
+  height="15"
+  xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M.322.313a1.056 1.056 0 0 1 1.5 0l5.679 5.53L13.18.313a1.056 1.056 0 0 1 1.5 0 .993.993 0 0 1-.001 1.461l-5.88 5.725 5.88 5.727c.397.388.426.956.085 1.369l-.086.092a1.056 1.056 0 0 1-1.5 0l-5.679-5.53-5.679 5.53a1.056 1.056 0 0 1-1.5 0 .993.993 0 0 1 .001-1.461L6.2 7.5.322 1.774C-.076 1.386-.105.818.236.405L.322.313Z"
+    fill-rule="evenodd"></path></svg
+>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/SiteHeader/svgs/Menu.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let width = 20;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 12"
+  aria-hidden="true"
+  focusable="false"
+  style="width: {width}px;"
+>
+  <path
+    d="M14.8571429,9.524 C15.3142857,9.524 15.6188571,9.8285714 15.6188571,10.2857143 C15.6188571,10.7428571 15.3142857,11.0474286 14.8571429,11.0474286 L1.14285714,11.0474286 C0.68571429,11.0474286 0.38114286,10.7428571 0.38114286,10.2857143 C0.38114286,9.8285714 0.68571429,9.524 1.14285714,9.524 L14.8571429,9.524 Z M14.8571429,4.9525714 C15.3142857,4.9525714 15.6188571,5.2571429 15.6188571,5.7142857 C15.6188571,6.1714286 15.3142857,6.476 14.8571429,6.476 L1.14285714,6.476 C0.68571429,6.476 0.38114286,6.1714286 0.38114286,5.7142857 C0.38114286,5.2571429 0.68571429,4.9525714 1.14285714,4.9525714 L14.8571429,4.9525714 Z M14.8571429,0.38114286 C15.3142857,0.38114286 15.6188571,0.68571429 15.6188571,1.14285714 C15.6188571,1.6 15.3142857,1.90457143 14.8571429,1.90457143 L1.14285714,1.90457143 C0.68571429,1.90457143 0.38114286,1.6 0.38114286,1.14285714 C0.38114286,0.68571429 0.68571429,0.38114286 1.14285714,0.38114286 L14.8571429,0.38114286 Z"
+  ></path>
+</svg>
+
+<style>svg {
+  fill: var(--nav-primary, #404040);
+}</style>

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,91 @@
+<script>/** Primary colour of the spinner. */
+export let colour = '#666';
+/**
+ * Outer width of the spinner
+ */
+export let width = 40;
+/**
+ * Width of the spinner ring
+ */
+export let ringWidth = 6;
+/**
+ * How fast the spinner spins in seconds
+ */
+export let speed = 0.8;
+/**
+ * Vertical padding for the spinner's container
+ */
+export let containerPadding = 10;
+</script>
+
+<div
+  style:width="100%"
+  style:height={`${(width + (containerPadding * 2))}px`}
+  class="component-container"
+>
+  <div
+    style="
+      --spinner-colour: {colour};
+      --spinner-ring-width: {ringWidth}px;
+      --spinner-ring-offset: -{ringWidth}px;
+      --spinner-speed: {speed}s;
+      width: {width}px;
+      height: {width}px;
+      margin: 0 auto;
+    "
+  >
+    <div class="spinner-container">
+      <div class="spinner"></div>
+    </div>
+  </div>
+</div>
+
+<style>@-webkit-keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.component-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner-container {
+  position: relative;
+  height: 0;
+  padding-bottom: 100%;
+  color: var(--spinner-colour, #666);
+}
+
+.spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: var(--spinner-ring-width, 6px) solid transparent;
+  border-top-color: currentColor;
+  -webkit-animation: spinner var(--spinner-speed, 0.8s) linear infinite;
+          animation: spinner var(--spinner-speed, 0.8s) linear infinite;
+  box-sizing: border-box;
+}
+.spinner::before {
+  content: "";
+  position: absolute;
+  display: block;
+  left: var(--spinner-ring-offset, -6px);
+  top: var(--spinner-ring-offset, -6px);
+  width: 100%;
+  height: 100%;
+  border: var(--spinner-ring-width, 6px) solid currentColor;
+  box-sizing: content-box;
+  border-radius: 50%;
+  opacity: 0.25;
+}</style>

package/dist/components/Theme/@types/component.js

@@ -0,0 +1,3 @@
+;
+;
+export {};

package/dist/components/Theme/Theme.svelte

@@ -0,0 +1,37 @@
+<script context="module">import light from './themes/light.js';
+import dark from './themes/dark.js';
+/**
+ * Pre-made themes you can import.
+ * @type {{ light, dark }}
+ */
+export const themes = { light, dark };
+</script>
+
+<script>/** Custom theme object. Can be a partial theme with just
+ * what you want to change.
+ */
+export let theme = {};
+/**
+ * Base theme is one of `light` or `dark` and will be merged
+ * with your custom theme to fill in any values you don't
+ * explicitly set.
+ */
+export let base = 'light';
+import cssVariables from '../../actions/cssVariables';
+import flatten from './utils/flatten';
+import mergeThemes from './utils/merge';
+/** @type {Theme} */
+$: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
+</script>
+
+<div
+  class="theme"
+  style="display: contents;"
+  use:cssVariables="{flatten({ theme: mergedTheme })}"
+>
+  <!-- Clients can override the theme above by attaching custom properties to this element. -->
+  <div class="theme-client-override" style="display: contents;">
+    <!-- Themed content -->
+    <slot />
+  </div>
+</div>