@onsvisual/svelte-components 0.0.4 → 0.0.5

package/dist/@types/datavis/Table/Table.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{
+    compact?: boolean;
+    title?: string;
+    responsive?: boolean;
+    rowHover?: boolean;
+    data?: any[];
+    columns?: any[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        compact?: boolean;
+        title?: string;
+        responsive?: boolean;
+        rowHover?: boolean;
+        data?: any[];
+        columns?: any[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/index.d.ts

@@ -1,12 +1,27 @@
-export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Container } from "./wrappers/Container/Container.svelte";
+export { default as Embed } from "./wrappers/Embed/Embed.svelte";
+export { default as Main } from "./wrappers/Main/Main.svelte";
+export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as Filler } from "./layout/Filler/Filler.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
+export { default as Grid } from "./layout/Grid/Grid.svelte";
 export { default as Header } from "./layout/Header/Header.svelte";
+export { default as Hero } from "./layout/Hero/Hero.svelte";
+export { default as List } from "./layout/List/List.svelte";
+export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
+export { default as NavSections } from "./layout/NavSections/NavSections.svelte";
+export { default as Scoller } from "./layout/Scoller/Scoller.svelte";
+export { default as ScollerSection } from "./layout/Scoller/ScollerSection.svelte";
+export { default as Section } from "./layout/Section/Section.svelte";
+export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";
-export { default as Em } from "./decorators/Em/Em.svelte";
 export { default as Input } from "./inputs/Input/Input.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
+export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
+export { default as Divider } from "./decorators/Divider/Divider.svelte";
+export { default as Em } from "./decorators/Em/Em.svelte";
+export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/@types/inputs/Dropdown/Dropdown.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
-    label?: string;
     id?: string;
+    label?: string;
     hideLabel?: boolean;
     placeholder?: string;
     value?: any;
@@ -20,8 +20,8 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string;
         id?: string;
+        label?: string;
         hideLabel?: boolean;
         placeholder?: string;
         value?: object;

package/dist/@types/inputs/Input/Input.svelte.d.ts

@@ -3,8 +3,9 @@
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
     width?: number;
-    label?: string;
     id?: string;
+    label?: string;
+    numeric?: boolean;
     hideLabel?: boolean;
     value?: string;
     description?: string;
@@ -13,7 +14,6 @@ export default class Input extends SvelteComponentTyped<{
     suffix?: string;
     unitLabel?: string;
     pattern?: string;
-    numeric?: boolean;
     error?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -28,8 +28,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         width?: number;
-        label?: string;
         id?: string;
+        label?: string;
+        numeric?: boolean;
         hideLabel?: boolean;
         value?: string;
         description?: string;
@@ -38,7 +39,6 @@ declare const __propDef: {
         suffix?: string;
         unitLabel?: string;
         pattern?: string;
-        numeric?: boolean;
         error?: boolean;
     };
     events: {

package/dist/@types/inputs/Select/Select.svelte.d.ts

@@ -3,13 +3,13 @@
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
     width?: number;
-    label?: string;
     id?: string;
+    label?: string;
+    mode?: "default" | "search";
     hideLabel?: boolean;
     placeholder?: string;
     value?: any;
     options?: any[];
-    mode?: "default" | "search";
     multiple?: boolean;
     maxSelected?: number;
     clearable?: boolean;
@@ -36,13 +36,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         width?: number;
-        label?: string;
         id?: string;
+        label?: string;
+        mode?: "default" | "search";
         hideLabel?: boolean;
         placeholder?: string;
         value?: object;
         options?: any[];
-        mode?: "default" | "search";
         multiple?: boolean;
         maxSelected?: number;
         clearable?: boolean;

package/dist/@types/inputs/Textarea/Textarea.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
     width?: number;
-    label?: string;
     id?: string;
+    label?: string;
     hideLabel?: boolean;
     value?: string;
     description?: string;
@@ -21,8 +21,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         width?: number;
-        label?: string;
         id?: string;
+        label?: string;
         hideLabel?: boolean;
         value?: string;
         description?: string;

package/dist/@types/layout/Accordion/AccordionItem.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  AccordionItemEvents */
 /** @typedef {typeof __propDef.slots}  AccordionItemSlots */
 export default class AccordionItem extends SvelteComponentTyped<{
+    id?: string;
     title?: string;
     open?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type AccordionItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         title?: string;
         open?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/Hero/Hero.svelte.d.ts

@@ -7,8 +7,8 @@ export default class Hero extends SvelteComponentTyped<{
     width?: "narrow" | "medium" | "wide" | "full";
     height?: "full" | "auto" | "tall";
     themeOverrides?: any;
-    title?: string;
     id?: string;
+    title?: string;
     lede?: string;
     date?: string;
 }, {
@@ -28,8 +28,8 @@ declare const __propDef: {
         width?: "narrow" | "medium" | "wide" | "full";
         height?: "auto" | "tall" | "full";
         themeOverrides?: object;
-        title?: string;
         id?: string;
+        title?: string;
         lede?: string;
         date?: string;
     };

package/dist/@types/layout/List/List.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ListProps */
+/** @typedef {typeof __propDef.events}  ListEvents */
+/** @typedef {typeof __propDef.slots}  ListSlots */
+export default class List extends SvelteComponentTyped<{
+    mode?: "number" | "bullet" | "dash" | "bare";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "bullet" | "dash" | "number" | "bare";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/NavSections/NavSection.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  NavSectionProps */
+/** @typedef {typeof __propDef.events}  NavSectionEvents */
+/** @typedef {typeof __propDef.slots}  NavSectionSlots */
+export default class NavSection extends SvelteComponentTyped<{
+    id?: string;
+    title?: string;
+    hideTitle?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type NavSectionProps = typeof __propDef.props;
+export type NavSectionEvents = typeof __propDef.events;
+export type NavSectionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        title?: string;
+        hideTitle?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/NavSections/NavSections.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  NavSectionsProps */
+/** @typedef {typeof __propDef.events}  NavSectionsEvents */
+/** @typedef {typeof __propDef.slots}  NavSectionsSlots */
+export default class NavSections extends SvelteComponentTyped<{
+    tocId?: string;
+    contentsLabel?: string;
+    noContents?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'before-nav': {};
+    'after-nav': {};
+    before: {};
+    default: {};
+    after: {};
+    footer: {};
+}> {
+}
+export type NavSectionsProps = typeof __propDef.props;
+export type NavSectionsEvents = typeof __propDef.events;
+export type NavSectionsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tocId?: string;
+        contentsLabel?: string;
+        noContents?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'before-nav': {};
+        'after-nav': {};
+        before: {};
+        default: {};
+        after: {};
+        footer: {};
+    };
+};
+export {};

package/dist/@types/layout/NavSections/SectionBacklink.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SectionBacklinkProps */
+/** @typedef {typeof __propDef.events}  SectionBacklinkEvents */
+/** @typedef {typeof __propDef.slots}  SectionBacklinkSlots */
+export default class SectionBacklink extends SvelteComponentTyped<{
+    tocId?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SectionBacklinkProps = typeof __propDef.props;
+export type SectionBacklinkEvents = typeof __propDef.events;
+export type SectionBacklinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tocId?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/layout/Scroller/ScrollerSection.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
-    title?: string;
     id?: string;
+    title?: string;
     hideTitle?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -19,8 +19,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
-        title?: string;
         id?: string;
+        title?: string;
         hideTitle?: boolean;
     };
     events: {

package/dist/@types/layout/Section/Section.svelte.d.ts

@@ -7,8 +7,8 @@ export default class Section extends SvelteComponentTyped<{
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
-    title?: string;
     id?: string;
+    title?: string;
     hideTitle?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -27,8 +27,8 @@ declare const __propDef: {
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;
-        title?: string;
         id?: string;
+        title?: string;
         hideTitle?: boolean;
     };
     events: {

package/dist/@types/layout/TitleBlock/TitleBlock.svelte.d.ts

@@ -2,10 +2,20 @@
 /** @typedef {typeof __propDef.events}  TitleBlockEvents */
 /** @typedef {typeof __propDef.slots}  TitleBlockSlots */
 export default class TitleBlock extends SvelteComponentTyped<{
-    [x: string]: never;
+    theme?: "light" | "dark" | "lightblue";
+    background?: string;
+    themeOverrides?: any;
+    title?: string;
+    meta?: any[];
+    natStatBadge?: boolean;
+    censusLogo?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    before: {};
+    brand: {};
+    after: {};
+}> {
 }
 export type TitleBlockProps = typeof __propDef.props;
 export type TitleBlockEvents = typeof __propDef.events;
@@ -13,11 +23,21 @@ export type TitleBlockSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        theme?: "light" | "dark" | "lightblue";
+        background?: string;
+        themeOverrides?: object;
+        title?: string;
+        meta?: any[];
+        natStatBadge?: boolean;
+        censusLogo?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        before: {};
+        brand: {};
+        after: {};
+    };
 };
 export {};

package/dist/datavis/Table/Table.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { commas, ascending, descending } from "$lib/js/utils.js";
+
+  /**
+   * An optional title for the table
+   * @type {string}
+   */
+  export let title = "";
+  /**
+   * Make the chart smaller/more compact
+   * @type {boolean}
+   */
+  export let compact = false;
+  /**
+   * Make the chart responsive (changes layout on narrow screens)
+   * @type {boolean}
+   */
+  export let responsive = false;
+  /**
+   * Highlight rows on hover
+   * @type {boolean}
+   */
+  export let rowHover = false;
+  /**
+   * Rows of data
+   * @type {array}
+   */
+  export let data = [];
+  /**
+   * Optional metadata for formatting columns. Array of {key, label, sortable?, numeric?} objects
+   * @type {array}
+   */
+  export let columns =
+    Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
+  let _data = [...data];
+  let sort = columns.map((c) => "none");
+
+  const format = (val, numeric) => (numeric ? commas(val) : val);
+  $: sortable = columns.map((d) => d.sortable).includes(true);
+</script>
+
+<table
+  class="ons-table"
+  class:ons-table--sortable="{sortable}"
+  class:ons-table--compact="{compact}"
+  class:ons-table--responsive="{responsive}"
+  class:ons-table--row-hover="{rowHover}"
+  data-aria-sort="{sortable ? 'Sort by' : null}"
+  data-aria-asc="{sortable ? 'ascending' : null}"
+  data-aria-desc="{sortable ? 'descending' : null}"
+>
+  {#if title}<caption class="ons-table__caption">{title}</caption>{/if}
+  <thead class="ons-table__head">
+    <tr class="ons-table__row">
+      {#each columns as col, i}
+        {#if col.sortable}
+          <th
+            scope="col"
+            class="ons-table__header"
+            class:ons-table__header--numeric="{col.numeric}"
+            aria-sort="{sort[i]}"
+          >
+            <button
+              aria-label="Sort by {col.label}"
+              type="button"
+              data-index="{i}"
+              class="ons-table__sort-button"
+              on:click="{() => {
+                sort = sort.map((c, j) =>
+                  j === i && c === 'ascending' ? 'descending' : j === i ? 'ascending' : 'none'
+                );
+                _data = _data.sort((a, b) =>
+                  sort[i] === 'ascending'
+                    ? ascending(a[col.key], b[col.key])
+                    : descending(a[col.key], b[col.key])
+                );
+              }}"
+            >
+              {col.label}<svg
+                class="ons-svg-icon"
+                viewBox="0 0 12 19"
+                xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                fill="currentColor"
+              >
+                <path
+                  class="ons-topTriangle"
+                  d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"></path>
+                <path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+                ></path>
+              </svg>
+            </button>
+          </th>
+        {:else}
+          <th
+            scope="col"
+            class="ons-table__header"
+            class:ons-table__header--numeric="{col.numeric}"
+          >
+            <span class="ons-table__header-text">{col.label}</span>
+          </th>
+        {/if}
+      {/each}
+    </tr>
+  </thead>
+  <tbody class="ons-table__body">
+    {#each _data as row}
+      <tr class="ons-table__row">
+        {#each columns as col}
+          <td
+            class="ons-table__cell"
+            class:ons-table__cell--numeric="{col.numeric}"
+            data-th="{col.label}">{format(row[col.key], col.numeric)}</td
+          >
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  .ons-table__sort-button {
+    color: var(--link, --ons-color-text-link) !important;
+  }
+  .ons-table__sort-button:hover {
+    color: var(--link-hover, --ons-color-text-link-hover) !important;
+    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
+            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
+  }</style>

package/dist/index.js

@@ -1,17 +1,36 @@
 // Wrappers
-export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Container } from "./wrappers/Container/Container.svelte";
+export { default as Embed } from "./wrappers/Embed/Embed.svelte";
+export { default as Main } from "./wrappers/Main/Main.svelte";
+export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 
 // Layout
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as Filler } from "./layout/Filler/Filler.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
+export { default as Grid } from "./layout/Grid/Grid.svelte";
 export { default as Header } from "./layout/Header/Header.svelte";
+export { default as Hero } from "./layout/Hero/Hero.svelte";
+export { default as List } from "./layout/List/List.svelte";
+export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
+export { default as NavSections } from "./layout/NavSections/NavSections.svelte";
+export { default as Scoller } from "./layout/Scoller/Scoller.svelte";
+export { default as ScollerSection } from "./layout/Scoller/ScollerSection.svelte";
+export { default as Section } from "./layout/Section/Section.svelte";
+export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";
-export { default as Em } from "./decorators/Em/Em.svelte";
 export { default as Input } from "./inputs/Input/Input.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
+
+// Decorators
+export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
+export { default as Divider } from "./decorators/Divider/Divider.svelte";
+export { default as Em } from "./decorators/Em/Em.svelte";
+
+// Data visualisation
+export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/layout/List/List.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { onMount } from "svelte";
+
+  /**
+   * Type of list
+   * @type {"bullet"|"dash"|"number"|"bare"}
+   */
+  export let mode = "bullet"; // dash | bullet | number | bare
+
+  let el;
+
+  onMount(() => {
+    [...el.children].forEach((c) => {
+      if (c.nodeName === "LI") c.className = "ons-list__item";
+    });
+  });
+</script>
+
+{#if mode === "number"}
+  <ol class="ons-list" bind:this="{el}">
+    <slot />
+  </ol>
+{:else}
+  <ul
+    class="ons-list"
+    class:ons-list--dashed="{mode === 'dash'}"
+    class:ons-list--bare="{mode === 'bare'}"
+    bind:this="{el}"
+  >
+    <slot />
+  </ul>
+{/if}

package/dist/layout/NavSections/NavSection.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { onMount, onDestroy, getContext } from "svelte";
+  import { slugify } from "$lib/js/utils.js";
+  import SectionBacklink from "./SectionBacklink.svelte";
+
+  /**
+   * Sets the title of the section
+   * @type {string}
+   */
+  export let title = "Section title";
+  /**
+   * Sets the unique ID of the section (if not set, this will be slugified from the title)
+   * @type {string}
+   */
+  export let id = slugify(title);
+  /**
+   * Allows the h2 title tag for the section to be visually hidden
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+
+  const sections = getContext("sections");
+  const observer = getContext("observer");
+  const tocId = getContext("tocId");
+
+  let section;
+
+  onMount(() => {
+    if (sections && observer) {
+      $sections = [...$sections, { title, id }];
+      $observer.observe(section);
+    }
+  });
+
+  onDestroy(() => {
+    if (sections && observer) {
+      $sections = $sections.filter((s) => s.id !== id);
+      $observer.unobserve(section);
+    }
+  });
+</script>
+
+<section id="{id}" aria-label="{title}" bind:this="{section}">
+  {#if title && !hideTitle}
+    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no">{title}</h2>
+  {/if}
+  <slot />
+  {#if tocId}
+    <SectionBacklink tocId="{tocId}" />
+  {/if}
+</section>

package/dist/layout/NavSections/NavSections.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { onMount, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /**
+   * A label for the page contents nav
+   * @type {string}
+   */
+  export let contentsLabel = "Page contents";
+  /**
+   * ID for contents nav section (for back links)
+   * @type {string}
+   */
+  export let tocId = "toc";
+  /**
+   * Don't include table of contents (allows for custom uses of nav panel)
+   * @type {boolean}
+   */
+  export let noContents = false;
+
+  let active;
+
+  setContext("tocId", tocId);
+
+  const sections = writable([]);
+  setContext("sections", sections);
+
+  const observer = writable();
+  setContext("observer", observer);
+
+  onMount(() => {
+    if (!noContents) {
+      $observer = new IntersectionObserver(
+        (entries, observer) => {
+          for (let i = 0; i < entries.length; i++) {
+            if (entries[i].isIntersecting) {
+              active = entries[i].target.id;
+              break;
+            }
+          }
+        },
+        {
+          root: null,
+          rootMargin: `0% 0% -70% 0%`,
+          threshold: 0,
+        }
+      );
+    }
+  });
+</script>
+
+<div class="ons-page__container ons-container">
+  <div class="ons-grid ons-js-toc-container ons-u-ml-no">
+    <slot name="header" />
+    <div class="ons-grid__col ons-col-4@m ons-u-pl-no ons-grid__col--sticky@m" id="{tocId}">
+      <aside class="ons-toc-container" role="complementary">
+        <nav class="ons-toc" aria-label="Pages in this guide">
+          <slot name="before-nav" />
+          {#if !noContents}
+            {#if contentsLabel}
+              <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">
+                {contentsLabel}
+              </h2>
+            {/if}
+            <ol class="ons-list ons-u-mb-m ons-list--dashed">
+              {#each $sections as section}
+                <li class="ons-list__item">
+                  <a
+                    href="#{section.id}"
+                    class="ons-list__link"
+                    class:ons-toc__link-active="{section.id === active}"
+                  >
+                    {section.title}
+                  </a>
+                </li>
+              {/each}
+            </ol>
+          {/if}
+          <slot name="after-nav" />
+        </nav>
+      </aside>
+    </div>
+    <div class="ons-grid__col ons-col-8@m ons-u-pl-no">
+      <slot name="before" />
+      {#if $observer}
+        <slot />
+      {/if}
+      <slot name="after" />
+    </div>
+    <slot name="footer" />
+  </div>
+</div>

package/dist/layout/NavSections/SectionBacklink.svelte

@@ -0,0 +1,31 @@
+<script>
+  /**
+   * ID for contents nav section (for back links)
+   * @type {string}
+   */
+  export let tocId = "toc";
+</script>
+
+<div class="ons-u-mt-l ons-u-d-no@m">
+  <div class="ons-back-to">
+    <a href="#{tocId}" class="ons-back-to__link">
+      <span class="ons-back-to__icon"
+        ><svg
+          class="ons-svg-icon ons-u-mr-xs"
+          width="16"
+          height="17"
+          viewBox="0 0 16 17"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          aria-hidden="true"
+          role="presentation"
+        >
+          <path
+            d="M0 8.07275L1.41 9.48275L7 3.90275V16.0728H9V3.90275L14.58 9.49275L16 8.07275L8 0.0727539L0 8.07275Z"
+            fill="currentColor"></path>
+        </svg>
+      </span>Back to contents</a
+    >
+  </div>
+</div>

package/dist/layout/TitleBlock/TitleBlock.svelte

@@ -0,0 +1,97 @@
+<script>
+  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Meta from "./Meta.svelte";
+
+  /**
+   * Sets the title/headline
+   * @type {string}
+   */
+  export let title = "Page title";
+  /**
+   * Include "national statistic" badge
+   * @type {boolean}
+   */
+  export let natStatBadge = false;
+  /**
+   * Include Census logo
+   * @type {boolean}
+   */
+  export let censusLogo = false;
+  /**
+   * Array of {key, value} objects containing page metadata
+   * @type {array}
+   */
+  export let meta = [];
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = null;
+  /**
+   * Define additional props to override the base theme
+   * @type {object}
+   */
+  export let themeOverrides = null;
+  /**
+   * Overrides the background CSS for the section
+   * @type {string}
+   */
+  export let background = null;
+</script>
+
+<Container theme="{theme}" themeOverrides="{themeOverrides}" background="{background}">
+  <section class="ons-u-mb-xl">
+    <slot name="before" />
+    <div class="ons-grid">
+      <div class="ons-grid__col ons-col-10@m">
+        <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
+          {title}
+        </h1>
+      </div>
+      {#if natStatBadge}
+        <div class="ons-grid__col ons-col-2@m">
+          <div
+            class="ons-grid--flex ons-grid--between@m ons-u-mt-s@m ons-u-mb-m@xxs ons-u-flex-jc-fe@m"
+          >
+            <a
+              href="https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/"
+              class="national-statistics__link ons-u-fs-xxxl"
+            >
+              <img
+                src="//cdn.ons.gov.uk/assets/images/ons-logo/kitemark/uksa-kitemark.svg"
+                alt="UK Statistics Authority Kitemark"
+                class="national-statistics__logo"
+              />
+            </a>
+          </div>
+        </div>
+      {/if}
+    </div>
+    <slot name="brand" />
+    {#if censusLogo}
+      <div class="ons-grid ons-u-mb-m">
+        <div class="ons-grid__col">
+          <img
+            src="https://cdn.ons.gov.uk/assets/images/census-logo/logo-census-2021-purple-landscape.svg"
+            title="Census 2021"
+            alt="Census 2021"
+            class="header__svg-logo margin-right--1"
+            focusable="false"
+            width="167"
+            height="32"
+          />
+        </div>
+      </div>
+    {/if}
+    <Meta meta="{meta}" />
+    <slot name="after" />
+  </section>
+</Container>
+
+<style>
+  /* :global(.ons-page__container) {
+		overflow: auto;
+	} */
+  .ons-grid__col {
+    vertical-align: bottom;
+  }</style>

package/dist/wrappers/Embed/Embed.svelte

@@ -13,9 +13,11 @@
   });
 </script>
 
-<slot />
+<div class="embed-container" style:display="content">
+  <slot />
+</div>
 
 <style>
-  :global(.ons-container) {
+  .embed-container :global(.ons-container) {
     padding: 0 !important;
   }</style>

package/dist/wrappers/Theme/Theme.svelte

@@ -56,7 +56,7 @@
 </svelte:head>
 
 {#if style}
-  <div class="theme-wrapper" style="{style}">
+  <div class="theme-wrapper" style="{style}" style:display="content">
     <slot />
   </div>
 {:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -116,7 +116,9 @@
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
     "./css/main.css": "./dist/css/main.css",
+    "./datavis/Table/Table.svelte": "./dist/datavis/Table/Table.svelte",
     "./decorators/Blockquote/Blockquote.svelte": "./dist/decorators/Blockquote/Blockquote.svelte",
+    "./decorators/Divider/Divider.svelte": "./dist/decorators/Divider/Divider.svelte",
     "./decorators/Em/Em.svelte": "./dist/decorators/Em/Em.svelte",
     "./globals.d.ts": "./dist/globals.d.ts",
     "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
@@ -130,7 +132,6 @@
     "./js/withParams": "./dist/js/withParams.js",
     "./layout/Accordion/Accordion.svelte": "./dist/layout/Accordion/Accordion.svelte",
     "./layout/Accordion/AccordionItem.svelte": "./dist/layout/Accordion/AccordionItem.svelte",
-    "./layout/Divider/Divider.svelte": "./dist/layout/Divider/Divider.svelte",
     "./layout/Filler/Filler.svelte": "./dist/layout/Filler/Filler.svelte",
     "./layout/Footer/Footer.svelte": "./dist/layout/Footer/Footer.svelte",
     "./layout/Footer/ONSLogo.svelte": "./dist/layout/Footer/ONSLogo.svelte",
@@ -138,6 +139,10 @@
     "./layout/Header/Header.svelte": "./dist/layout/Header/Header.svelte",
     "./layout/Header/ONSLogo.svelte": "./dist/layout/Header/ONSLogo.svelte",
     "./layout/Hero/Hero.svelte": "./dist/layout/Hero/Hero.svelte",
+    "./layout/List/List.svelte": "./dist/layout/List/List.svelte",
+    "./layout/NavSections/NavSection.svelte": "./dist/layout/NavSections/NavSection.svelte",
+    "./layout/NavSections/NavSections.svelte": "./dist/layout/NavSections/NavSections.svelte",
+    "./layout/NavSections/SectionBacklink.svelte": "./dist/layout/NavSections/SectionBacklink.svelte",
     "./layout/Scroller/Scroller.svelte": "./dist/layout/Scroller/Scroller.svelte",
     "./layout/Scroller/ScrollerSection.svelte": "./dist/layout/Scroller/ScrollerSection.svelte",
     "./layout/Section/Section.svelte": "./dist/layout/Section/Section.svelte",