@onsvisual/svelte-components 0.0.1

package/dist/components/layout/Header/ONSLogo.svelte

@@ -0,0 +1,150 @@
+<script>
+  import { getContext } from "svelte";
+
+  const theme = getContext("theme");
+
+  $: primary = $theme === "dark" ? "white" : "#003c57";
+  const secondary = "#a8bd3a";
+
+  export let compact = false;
+  export let className = "ons-svg-logo";
+  export let width = "auto";
+  export let height = "auto";
+</script>
+
+{#if !compact}
+  <svg
+    class="{className}"
+    xmlns="http://www.w3.org/2000/svg"
+    width="{width}"
+    height="{height}"
+    viewBox="33 2 552 60"
+    aria-labelledby="ons-logo-en-alt"
+  >
+    <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+    <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="{secondary}">
+      <path
+        d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"
+      ></path>
+    </g>
+    <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="{primary}">
+      <path
+        d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3"
+      ></path>
+    </g>
+    <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="{primary}">
+      <path
+        d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14"
+      ></path>
+      <path
+        d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z"
+      ></path>
+      <path
+        d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z"
+      ></path>
+      <path
+        d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z"
+      ></path>
+      <path
+        d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73"
+      ></path>
+      <path
+        d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32"
+      ></path>
+      <path
+        d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z"
+      ></path>
+      <path
+        d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81"
+      ></path>
+      <path
+        d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z"
+      ></path>
+      <path
+        d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z"
+      ></path>
+      <path
+        d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z"
+      ></path>
+      <path
+        d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52"
+      ></path>
+      <path
+        d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z"
+      ></path>
+      <path
+        d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82"
+      ></path>
+      <path
+        d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z"
+      ></path>
+      <path
+        d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z"
+      ></path>
+      <polygon
+        points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13"
+      ></polygon>
+      <path
+        d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10"
+      ></path>
+      <path
+        d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52"
+      ></path>
+      <path
+        d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z"
+      ></path>
+      <path
+        d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52"
+      ></path>
+      <path
+        d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z"
+      ></path>
+      <path
+        d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9"
+      ></path>
+      <path
+        d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52"
+      ></path>
+      <path
+        d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z"
+      ></path>
+      <path
+        d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84"
+      ></path>
+      <path
+        d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9"
+      ></path>
+    </g>
+  </svg>
+{:else}
+  <svg
+    class="{className}"
+    xmlns="http://www.w3.org/2000/svg"
+    width="{width}"
+    height="{height}"
+    viewBox="0 5 595 116"
+    aria-labelledby="ons-logo-stacked-en-alt"
+  >
+    <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
+    <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="{secondary}">
+      <path
+        d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"
+      ></path>
+    </g>
+    <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="{primary}">
+      <path
+        d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8"
+      ></path>
+    </g>
+    <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="{primary}">
+      <path
+        d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7"
+      ></path>
+    </g>
+  </svg>
+{/if}
+
+<style>
+  svg {
+    overflow: visible;
+  }</style>

package/dist/components/layout/Theme/Theme.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { setContext, getContext } from "svelte";
+  import { writable } from "svelte/store";
+  import themes from "./themes.js";
+
+  /**
+   * Sets the body background to match this theme (only use this at the top level)
+   * @type {boolean}
+   */
+  export let global = false;
+
+  let themeParent = global ? null : getContext("theme");
+
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = null;
+  /**
+   * Define additional props to override the base theme
+   * @type {object}
+   */
+  export let overrides = null;
+  /**
+   * Overrides the base theme background (accepts any valid CSS background value)
+   * @type {string}
+   */
+  export let background = overrides?.background || themes[theme]?.background || null;
+
+  const _theme = writable(theme || $themeParent);
+  $: _theme.set(theme || $themeParent);
+
+  setContext("theme", _theme);
+
+  function makeStyle(theme, overrides, background) {
+    if (theme && theme !== $themeParent) {
+      const _theme = themes[theme] || themes.light;
+      if (overrides) Object.keys(overrides).forEach((key) => (_theme[key] = overrides[key]));
+      if (background) _theme.background = background;
+      return Object.keys(_theme)
+        .map((key) => `--${key}: ${_theme[key]};`)
+        .join("");
+    } else if (background) {
+      return `--background:${background}`;
+    }
+    return null;
+  }
+
+  $: style = makeStyle($_theme, overrides, background);
+</script>
+
+<svelte:head>
+  {#if global && background}
+    {@html "<st" + `yle>body{background:${background}}</st` + "yle>"}
+  {/if}
+</svelte:head>
+
+{#if style}
+  <div class="theme-wrapper" style="{style}">
+    <slot />
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .theme-wrapper {
+    color: var(--text, #222);
+    background: var(--background, none);
+    --ons-color-text: var(--text, --ons-color-text);
+    --ons-color-text-light: var(--muted, --ons-color-text-light);
+    --ons-color-borders: var(--muted, --ons-color-borders);
+  }
+  .theme-wrapper :global(a) {
+    color: var(--link, --ons-color-text-link);
+  }
+  .theme-wrapper :global(a:hover) {
+    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
+            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
+  }
+  .theme-wrapper :global(a:hover) {
+    color: var(--link-hover, --ons-color-text-link-hover);
+  }
+  .theme-wrapper :global(.form-label-bold) {
+    color: var(--text, #222);
+  }
+  .theme-wrapper :global(.form-control) {
+    background: none;
+    border-color: var(--text, #222);
+    color: var(--text, #222);
+  }</style>

package/dist/components/layout/Theme/themes.js

@@ -0,0 +1,24 @@
+export default {
+  light: {
+    text: "#222",
+    muted: "#777",
+    hinted: "#e2e2e3",
+    pale: "#f0f0f0",
+    background: "#fff",
+  },
+  dark: {
+    text: "#fff",
+    muted: "#bbb",
+    hinted: "#444",
+    pale: "#333",
+    background: "#222",
+    link: "#f5f5f6",
+    "link-hover": "#f5f5f6",
+  },
+  lightblue: {
+    text: "#206095",
+    muted: "#707070",
+    pale: "#f0f0f0",
+    background: "rgb(233, 239, 244)",
+  },
+};

package/dist/components/layout/Twisty/Twisty.svelte

@@ -0,0 +1,48 @@
+<script>
+  /**
+   * A title for the element
+   * @type {string}
+   */
+  export let title = "Title";
+  /**
+   * Option for element to be open/expanded by default
+   * @type {boolean}
+   */
+  export let open = false;
+</script>
+
+<details class="ons-collapsible ons-js-collapsible" open="{open}">
+  <summary
+    class="ons-collapsible__heading ons-js-collapsible-heading"
+    data-ga-action="{open ? 'Close panel' : 'Open panel'}"
+  >
+    <h3 class="ons-collapsible__title">{title}</h3>
+    <span class="ons-collapsible__icon">
+      <svg
+        class="ons-svg-icon"
+        viewBox="0 0 8 13"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+      >
+        <path
+          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+          transform="translate(-5.02 -1.59)"></path>
+      </svg>
+    </span>
+  </summary>
+  <div class="ons-collapsible__content ons-js-collapsible-content">
+    <slot />
+  </div>
+</details>
+
+<style>
+  .ons-collapsible__heading {
+    color: var(--link, --ons-color-text-link);
+  }
+  .ons-collapsible__heading:hover {
+    color: var(--link-hover, --ons-color-text-link-hover);
+  }
+  .ons-svg-icon {
+    color: var(--link, --ons-color-text-link);
+    fill: var(--link, --ons-color-text-link);
+  }</style>

package/dist/components/ui/Button/Button.svelte

@@ -0,0 +1,87 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Icon from "./Icon.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Type of button
+   * @type {"button"|"sumbit"|"reset"}
+   */
+  export let type = "button";
+  /**
+   * Style variant of button
+   * @type {"primary"|"secondary"|"ghost"}
+   */
+  export let variant = "primary";
+  /**
+   * Href of button (renders button as a link)
+   * @type {string}
+   */
+  export let href = "";
+  /**
+   * Make button smaller
+   * @type {boolean}
+   */
+  export let small = false;
+  /**
+   * Icon on button, eg. "arrow", "search"
+   * @type {string}
+   */
+  export let icon = "";
+  /**
+   * Position of icon
+   * @type {"before"|"after"}
+   */
+  export let iconPosition = "before";
+  /**
+   * Show button as disabled
+   * @type {boolean}
+   */
+  export let disabled = false;
+</script>
+
+{#if href}
+  <a
+    href="{!disabled ? href : null}"
+    role="button"
+    class="ons-btn ons-btn--link ons-js-submit-btn"
+    class:ons-btn--small="{small}"
+    class:ons-btn--secondary="{variant === 'secondary'}"
+    class:ons-btn--ghost="{variant === 'ghost'}"
+    class:ons-btn--disabled="{disabled}"
+    disabled="{disabled}"
+    on:click="{(e) => dispatch('click', e)}"
+  >
+    <span class="ons-btn__inner">
+      {#if icon && iconPosition === "before"}
+        <Icon type="{icon}" marginRight />
+      {/if}
+      <span class="ons-btn__text"><slot /></span>
+      {#if icon && iconPosition === "after"}
+        <Icon type="{icon}" marginLeft />
+      {/if}
+    </span>
+  </a>
+{:else}
+  <button
+    type="{type}"
+    class="ons-btn"
+    class:ons-btn--small="{small}"
+    class:ons-btn--secondary="{variant === 'secondary'}"
+    class:ons-btn--ghost="{variant === 'ghost'}"
+    class:ons-btn--disabled="{disabled}"
+    disabled="{disabled}"
+    on:click="{(e) => dispatch('click', e)}"
+  >
+    <span class="ons-btn__inner">
+      {#if icon && iconPosition === "before"}
+        <Icon type="{icon}" marginRight />
+      {/if}
+      <span class="ons-btn__text"><slot /></span>
+      {#if icon && iconPosition === "after"}
+        <Icon type="{icon}" marginLeft />
+      {/if}
+    </span>
+  </button>
+{/if}

package/dist/components/ui/Button/Icon.svelte

@@ -0,0 +1,50 @@
+<script>
+  export let type = "arrow";
+  export let marginLeft = false;
+  export let marginRight = false;
+
+  const paths = {
+    arrow: {
+      d: "m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z",
+      viewBox: "0 0 17 13",
+    },
+    externalLink: {
+      d: "M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z",
+      viewBox: "2 2 12 12",
+    },
+    signout: {
+      d: "M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z",
+      viewBox: "0 0 12 12",
+    },
+    print: {
+      d: "M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z",
+      viewBox: "0 0 20 16",
+    },
+    download: {
+      d: "M5.6 9a.48.48 0 0 0 .7 0l3-3.2a.48.48 0 0 0 0-.7C9.3 5 9.2 5 9 5H7.5V.5A.47.47 0 0 0 7 0H5a.47.47 0 0 0-.5.5V5H3a.47.47 0 0 0-.5.5.37.37 0 0 0 .1.3Z M11.5 9H11a.47.47 0 0 0-.5.5v1h-9v-1A.47.47 0 0 0 1 9H.5a.47.47 0 0 0-.5.5v2a.47.47 0 0 0 .5.5h11a.47.47 0 0 0 .5-.5v-2a.47.47 0 0 0-.5-.5Z",
+      viewBox: "0 0 12 12",
+    },
+    tick: {
+      d: "M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z",
+      viewBox: "1.5 3 13 10",
+    },
+    search: {
+      d: "M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z",
+      viewBox: "0 0 12 12",
+    },
+  };
+</script>
+
+{#if paths[type]}
+  <svg
+    class="ons-svg-icon"
+    class:ons-u-ml-xs="{marginLeft}"
+    class:ons-u-mr-xs="{marginRight}"
+    viewBox="{paths[type].viewBox}"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable="false"
+    fill="currentColor"
+  >
+    <path d="{paths[type].d}"></path>
+  </svg>
+{/if}

package/dist/components/ui/Dropdown/Dropdown.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Unique id for the &lt;select&gt; element
+   * @type {string}
+   */
+  export let id = "";
+  /**
+   * A label to describe the &lt;select&gt; element (expected for accessibility)
+   * @type {string}
+   */
+  export let label = "";
+  /**
+   * Visually hide the label
+   * @type {boolean}
+   */
+  export let hideLabel = false;
+  /**
+   * An optional placeholder text
+   * @type {string}
+   */
+  export let placeholder = "Select an option";
+  /**
+   * A prop to bind to for the selected value
+   * @type {object}
+   */
+  export let value = null;
+  /**
+   * An array of options, formatted {id, label}
+   * @type {array}
+   */
+  export let options = [];
+</script>
+
+<div class="ons-field">
+  {#if label}
+    <label class="ons-label" for="{id}" class:ons-u-vh="{hideLabel}">{label}</label>
+  {/if}
+  <select
+    id="{id}"
+    name="{id}"
+    class="ons-input ons-input--select"
+    bind:value="{value}"
+    on:change="{(e) => dispatch('change', e)}"
+  >
+    {#if placeholder}
+      <option value="{null}" selected disabled>{placeholder}</option>
+    {/if}
+    {#each options as option}
+      <option value="{option}">{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .ons-input--select {
+    border-color: currentColor;
+    background-color: transparent;
+  }</style>

package/dist/components/ui/Em/Em.svelte

@@ -0,0 +1,44 @@
+<script>
+  import parse from "parse-color";
+
+  /**
+   * Any valid CSS colour
+   * @type {string}
+   */
+  export let color = "lightgrey";
+  /**
+   * Don't break text across lines
+   * @type {boolean}
+   */
+  export let nowrap = true;
+
+  function textColor(color) {
+    const rgb = parse(color).rgb;
+    if (rgb) {
+      const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+      return brightness > 125 ? "black" : "white";
+    }
+    return "black";
+  }
+
+  $: text = textColor(color);
+</script>
+
+<mark
+  class="em"
+  class:nowrap="{nowrap}"
+  style:background-color="{color}"
+  style:color="{text}"
+  role="presentation"
+>
+  <slot />
+</mark>
+
+<style>
+  .em {
+    padding: 1px 4px 1px 4px;
+    font-weight: bold;
+  }
+  .nowrap {
+    white-space: nowrap;
+  }</style>