@hyvor/design 0.0.51 → 0.0.53

package/dist/components/Base/Base.svelte

@@ -2,12 +2,16 @@
 import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
 import ToastProvider from "../Toast/ToastProvider.svelte";
+export let dark = false;
 </script>
 
 <div id="base">
     <slot />
 </div>
 
-<DarkProvider />
+{#if dark}
+    <DarkProvider />
+{/if}
+
 <ToastProvider />
 <ConfirmModalProvider />

package/dist/components/Base/Base.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 import '../../index.js';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        dark?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -14,7 +14,7 @@ function handleClose() {
 }
 </script>
 
-<span>
+<span class="color-picker">
     <button
         style:width="{size}px"
         style:height="{size}px"
@@ -23,7 +23,8 @@ function handleClose() {
     ></button>
 
     {#if show}
-        <div 
+        <div
+            class="color-picker-wrap"
             use:clickOutside={{
                 callback: () => handleClose(),
             }}
@@ -39,30 +40,19 @@ function handleClose() {
     {/if}
 </span>
 
-<!-- <span>
-   
-
-    <input 
-        type="color" 
-        bind:value={color}
-        bind:this={inputEl}
-
-        on:change
-        on:input
-    />
-</span> -->
-
 <style>
     span {
         position: relative;
     }
     button {
         border-radius: 50%;
+        border: 1px solid var(--border);
     }
     div {
         position: absolute;
         left: 0;
         top: 100%;
         width: 0;
+        z-index: 1000;
     }
 </style>

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -1,6 +1,8 @@
-<script>import { onMount, setContext } from "svelte";
-onMount(() => {
-  setContext("i18n", "not set");
-});
+<script>import { setContext } from "svelte";
+import { InternationalizationService } from "./i18n.js";
+export let languages;
+const i18n = new InternationalizationService(languages);
+setContext("i18n", i18n);
 </script>
 
+<slot />

package/dist/components/Internationalization/InternationalizationProvider.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponent } from "svelte";
+import { type Language } from "./i18n.js";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        languages: Language[];
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type InternationalizationProviderProps = typeof __propDef.props;
 export type InternationalizationProviderEvents = typeof __propDef.events;

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -1,43 +1,63 @@
-<script>import IconButton from "./../IconButton/IconButton.svelte";
-import Box from "../Box/Box.svelte";
-import { IconCaretUp } from "@hyvor/icons";
-import { page } from "$app/stores";
-const i18n = $page.data.i18n;
+<script>import { getContext } from "svelte";
+import Dropdown from "../Dropdown/Dropdown.svelte";
+import Button from "../Button/Button.svelte";
+import {} from "./i18n.js";
+import ActionList from "../ActionList/ActionList.svelte";
+import ActionListItem from "../ActionList/ActionListItem.svelte";
+import Text from "../Text/Text.svelte";
+import { IconCaretDown } from "@hyvor/icons";
+import IconButton from "../IconButton/IconButton.svelte";
+export let position = "bottom";
+export let align = "start";
+export let caret = IconCaretDown;
+export let icon = false;
+export let size = "medium";
+const i18n = getContext("i18n");
+const currentLanguage = i18n ? i18n.localeLanguage : void 0;
+let show = false;
+function handleClick(language) {
+  i18n.setLocale(language.code);
+  show = false;
+}
 </script>
 
 
-{#if i18n}
-    <div class="language-toggle">
-        <span class="current">
-            <span class="flag">🇫🇷</span>
-            <span class="name">Français (France)</span>
-            <span class="icon"><IconCaretUp size={14} /></span>
+{#if i18n && $currentLanguage}
+
+    <Dropdown bind:show={show} {position} {align}>
+        <span slot="trigger">
+            {#if icon}
+                <IconButton color="input" {size}>
+                    {$currentLanguage.flag}
+                </IconButton>
+            {:else}
+                <Button color="input" {size}>
+                    <span slot="start">{$currentLanguage.flag}</span>
+                    {$currentLanguage.name}
+                    <svelte:component slot="end" this={caret} size={12} />
+                </Button>
+            {/if}
         </span>
-    </div>
+        <ActionList slot="content">
+            {#each i18n.languages as language (language.code)}
+                <ActionListItem on:click={() => handleClick(language)}>
+                    <span class="flag" slot="start">{language.flag}</span>
+                    <span class="name">
+                        {language.name}
+                    </span>
+                    <Text small light>
+                        {language.region}
+                    </Text>
+                </ActionListItem>
+            {/each}
+        </ActionList>
+    </Dropdown>
+    
 {/if}
 
 <style>
-    .current {
-        padding: 4px 15px;
-        font-size: 15px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: var(--box-shadow);
-        border-radius: var(--box-radius);
-        background-color: var(--box-background);
-        transition: .2s box-shadow;
-    }
-    .current:hover {
-        box-shadow: var(--box-shadow-dark);
-    }
     .flag {
         margin-right: 6px;
         font-size: 20px;
     }
-    .icon {
-        margin-left: 8px;
-        display: inline-flex;
-        align-items: center;
-    }
 </style>

package/dist/components/Internationalization/LanguageToggle.svelte.d.ts

@@ -1,6 +1,14 @@
 import { SvelteComponent } from "svelte";
+import { type ComponentProps, type ComponentType } from "svelte";
+import Dropdown from "../Dropdown/Dropdown.svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        position?: ComponentProps<Dropdown>['position'];
+        align?: ComponentProps<Dropdown>['align'];
+        caret?: ComponentType | undefined;
+        icon?: boolean | undefined;
+        size?: "small" | "medium" | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Internationalization/T.svelte

@@ -1,5 +1,97 @@
-<script>import { page } from "$app/stores";
-console.log("T", $page.data);
+<script>import { getContext, onMount, tick, afterUpdate } from "svelte";
+import { getStringByKey, InternationalizationService } from "./i18n.js";
+import { IntlMessageFormat } from "intl-messageformat";
+import { browser } from "$app/environment";
+export let key;
+export let params = {};
+let hasComponentParams = false;
+function getParamsForBackend() {
+  let retParams = {};
+  for (let [key2, value] of Object.entries(params)) {
+    let newValue;
+    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
+      newValue = (chunks) => {
+        const children = typeof chunks === "string" ? chunks : chunks.join("");
+        return children;
+      };
+      hasComponentParams = true;
+    } else {
+      newValue = value;
+    }
+    retParams[key2] = newValue;
+  }
+  return retParams;
+}
+const componentBindings = /* @__PURE__ */ new Map();
+function getParamsForFrontend() {
+  let retParams = {};
+  for (let [key2, value] of Object.entries(params)) {
+    let newValue;
+    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
+      const { component, props } = value;
+      newValue = (chunks) => {
+        const children = typeof chunks === "string" ? chunks : chunks.join("");
+        const id = key2 + "-" + Math.random().toString(36).substring(7) + "-" + Date.now().toString();
+        componentBindings.set(id, {
+          component,
+          props: {
+            ...props,
+            children
+          }
+        });
+        return '<span id="' + id + '">' + children + "</span>";
+      };
+    } else {
+      newValue = value;
+    }
+    retParams[key2] = newValue;
+  }
+  return retParams;
+}
+const i18n = getContext("i18n");
+const locale = i18n.locale;
+const strings = i18n.strings;
+let message = getMessage(getParamsForBackend());
+function getMessage(processedParams) {
+  const string = getStringByKey($strings, key);
+  if (string) {
+    const formatter = new IntlMessageFormat(string, $locale);
+    return formatter.format(processedParams);
+  }
+  return "";
+}
+function bindComponents() {
+  for (let [id, binding] of componentBindings) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.innerHTML = "";
+      new binding.component({
+        target: el,
+        hydrate: true,
+        props: binding.props
+      });
+    }
+  }
+}
+async function renderFrontend() {
+  message = getMessage(getParamsForFrontend());
+  await tick();
+  if (hasComponentParams)
+    bindComponents();
+}
+let mounted = false;
+$: {
+  $locale, $strings, params;
+  if (browser && mounted) {
+    renderFrontend();
+  }
+}
+onMount(async () => {
+  mounted = true;
+  if (hasComponentParams) {
+    renderFrontend();
+  }
+});
 </script>
 
-{ $page.data.lang.home.title }
+{@html message}

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,6 +1,14 @@
 import { SvelteComponent } from "svelte";
+import { type ComponentType } from "svelte";
+import { type PrimitiveType } from 'intl-messageformat';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        key: string;
+        params?: Record<string, {
+            component: ComponentType;
+            props?: Record<string, any> | undefined;
+        } | PrimitiveType> | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Internationalization/i18n.d.ts

@@ -1,18 +1,33 @@
-type LoaderType = () => Promise<any>;
-interface Language {
-    code: string;
+/// <reference types="svelte" />
+import { type Readable, type Writable } from "svelte/store";
+export type i18nLoaderType = () => Promise<any>;
+interface LanguageBase {
     name: string;
-    loader: LoaderType;
-    default: boolean;
+    flag: string;
+    region: string;
+    code: string;
+    default?: boolean;
+}
+interface LanguageWithStrings extends LanguageBase {
+    strings: Record<string, any>;
+}
+interface LanguageWithLoader extends LanguageBase {
+    loader: i18nLoaderType;
 }
-export declare class i18n {
-    private current;
-    private languages;
-    constructor(current: string);
-    register(code: string, name: string, loader: LoaderType, isDefault?: boolean): void;
+export type Language = LanguageWithStrings | LanguageWithLoader;
+export declare class InternationalizationService {
+    languages: LanguageWithLoader[];
+    locale: Writable<string>;
+    localeLanguage: Readable<LanguageWithLoader>;
+    strings: Writable<{}>;
+    stringsCache: Map<string, Record<string, any>>;
+    defaultStrings: Record<string, any>;
+    constructor(languages: Language[]);
+    setStrings(code: string): void;
+    setLocale(code: string): void;
+    register(language: Language): void;
     found(code: string): boolean;
-    languageByCode(code: string): Language | undefined;
-    getCurrent(): Language | undefined;
-    load(code: string): Promise<any>;
+    languageByCode(code: string): LanguageWithLoader | undefined;
 }
+export declare function getStringByKey(messages: Record<string, any>, key: string): string | undefined;
 export {};

package/dist/components/Internationalization/i18n.js

@@ -1,15 +1,54 @@
-export class i18n {
-    current;
+import { deepmerge } from "deepmerge-ts";
+import { writable, derived } from "svelte/store";
+export class InternationalizationService {
     languages = [];
-    constructor(current) {
-        this.current = current;
+    locale;
+    localeLanguage;
+    strings = writable({});
+    stringsCache = new Map();
+    defaultStrings;
+    constructor(languages) {
+        const defaultLanguage = languages.find(l => l.default);
+        if (!defaultLanguage) {
+            throw new Error('Default language not found');
+        }
+        const defaultStrings = defaultLanguage.strings || null;
+        if (!defaultStrings) {
+            throw new Error('Default strings not found for the default language');
+        }
+        this.locale = writable(defaultLanguage.code);
+        this.localeLanguage = derived(this.locale, $locale => this.languageByCode($locale));
+        this.defaultStrings = defaultStrings;
+        this.strings.set(this.defaultStrings);
+        this.stringsCache.set(defaultLanguage.code, this.defaultStrings);
+        for (const language of languages) {
+            this.register(language);
+        }
     }
-    register(code, name, loader, isDefault = false) {
+    setStrings(code) {
+        const defaultStrings = this.defaultStrings;
+        const strings = this.stringsCache.get(code) || {};
+        const merged = deepmerge(defaultStrings, strings);
+        this.strings.set(merged);
+    }
+    setLocale(code) {
+        this.locale.set(code);
+        if (this.stringsCache.has(code)) {
+            this.setStrings(code);
+        }
+        else {
+            this.languageByCode(code)?.loader().then(({ default: strings }) => {
+                this.stringsCache.set(code, strings);
+                this.setStrings(code);
+            });
+        }
+    }
+    register(language) {
         this.languages.push({
-            code,
-            name,
-            loader,
-            default: isDefault
+            ...language,
+            loader: language.hasOwnProperty('strings') ?
+                () => Promise.resolve(language.strings) :
+                language.loader,
         });
     }
     found(code) {
@@ -18,10 +57,17 @@ export class i18n {
     languageByCode(code) {
         return this.languages.find(l => l.code === code);
     }
-    getCurrent() {
-        return this.languageByCode(this.current);
-    }
-    async load(code) {
-        return (await this.languageByCode(code)?.loader()).default;
+}
+export function getStringByKey(messages, key) {
+    const keys = key.split('.');
+    let value = messages;
+    for (const key of keys) {
+        if (value && typeof value === 'object' && key in value) {
+            value = value[key];
+        }
+        else {
+            return undefined; // Key not found or value is not an object
+        }
     }
+    return value;
 }

package/dist/components/index.d.ts

@@ -41,3 +41,7 @@ export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 export { clickOutside } from './directives/clickOutside.js';
+export { default as InternationalizationProvider } from './Internationalization/InternationalizationProvider.svelte';
+export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
+export { default as T } from './Internationalization/T.svelte';
+export { type Language as InternationalizationLanguage, InternationalizationService } from './Internationalization/i18n.js';

package/dist/components/index.js

@@ -42,3 +42,8 @@ export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 // directives
 export { clickOutside } from './directives/clickOutside.js';
+// i18n
+export { default as InternationalizationProvider } from './Internationalization/InternationalizationProvider.svelte';
+export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
+export { default as T } from './Internationalization/T.svelte';
+export { InternationalizationService } from './Internationalization/i18n.js';

package/dist/marketing/Docs/Content/Content.svelte

@@ -52,7 +52,7 @@ content :global(p), content :global(li) {
   line-height: var(--line-height-content);
 }
 
-content :global(h1) {
+content :global(h1:first-child) {
   margin-top: 0;
   font-size: 36px;
   font-weight: 600;
@@ -61,8 +61,7 @@ content :global(h1) {
   position: relative;
   display: table;
 }
-
-content :global(h1::after) {
+content :global(h1:first-child):after {
   position: absolute;
   content: "";
   bottom: -13px;
@@ -114,12 +113,32 @@ content :global(a.heading-anchor-link) {
   align-items: center;
 }
 
+content :global(h1),
 content :global(h2),
 content :global(h3),
 content :global(h4),
 content :global(h5),
 content :global(h6) {
   position: relative;
+  margin: 20px 0;
+}
+content :global(h1) {
+  font-size: 2em;
+}
+content :global(h2) {
+  font-size: 1.5em;
+}
+content :global(h3) {
+  font-size: 1.3em;
+}
+content :global(h4) {
+  font-size: 1.2em;
+}
+content :global(h5) {
+  font-size: 1.1em;
+}
+content :global(h6) {
+  font-size: 1em;
 }
 
 content :global(.heading-anchor:hover + .heading-anchor-link) {
@@ -132,4 +151,14 @@ content :global(h5 a:not(.heading-anchor-link)),
 content :global(h6 a:not(.heading-anchor-link)) {
   text-decoration: none;
   color: inherit;
+}
+
+@media (max-width: 992px) {
+  .content-wrap {
+    padding-top: 0;
+    order: 2;
+  }
+  content {
+    padding: 20px 25px;
+  }
 }</style>

package/dist/marketing/Docs/Docs.svelte

@@ -1,13 +1,11 @@
 <script>
-	import Toc from "./Toc.svelte";
-
+	import Sidebar from "./Sidebar/Sidebar.svelte";
 </script>
 <div class="docs">
 
     <slot name="nav" />
     <slot name="content" />
-    <Toc />
-
+    <Sidebar />
 </div>
 
 <style>
@@ -22,4 +20,12 @@
         /* min-height: calc(100vh - var(--header-height)); */
     }
 
+
+    @media (max-width: 992px) {
+        .docs {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+
 </style>

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -1,30 +1,131 @@
-<script>import Box from "../../../components/Box/Box.svelte";
+<script>import { afterNavigate, onNavigate } from "$app/navigation";
+import { page } from "$app/stores";
+import { IconList } from "@hyvor/icons";
+import { onMount } from "svelte";
+import { clickOutside } from "../../../components/index.js";
+let navEl;
+let active = null;
+function setActive() {
+  const activeEl = navEl?.querySelector("a.active");
+  if (!activeEl || !(activeEl instanceof HTMLElement)) {
+    active = null;
+    return;
+  }
+  const category = activeEl.closest(".nav-category")?.querySelector(".name")?.innerText || null;
+  active = {
+    name: activeEl.innerText,
+    category
+  };
+}
+onMount(() => {
+  setActive();
+});
+afterNavigate(() => {
+  setActive();
+  hideNavOnMobile();
+});
+let mobileNavShown = false;
+function handleMobileClick(e) {
+  e.stopPropagation();
+  if (navEl.style.display !== "block") {
+    navEl.style.display = "block";
+    mobileNavShown = true;
+  } else {
+    navEl.style.display = "none";
+    mobileNavShown = false;
+  }
+}
+function handleNavOutsideClick() {
+  if (mobileNavShown) {
+    navEl.style.display = "none";
+    mobileNavShown = false;
+  }
+}
+function hideNavOnMobile() {
+  if (window.innerWidth < 992) {
+    navEl.style.display = "none";
+  }
+}
 </script>
 
 <div class="docs-nav">
 
-    <Box as="nav" class="nav-inner">
-        <slot />
-    </Box>
+    {#if active}
+        <button class="mobile hds-box" on:click={handleMobileClick}>
+            <div class="left">
+                {#if active.category}
+                    <span class="category">{active.category}</span> &raquo;
+                {/if}
+                <span class="name">{active.name}</span>
+            </div>
+            <IconList size={18} />
+        </button>
+    {/if}
 
+    <nav 
+        class="hds-box nav-inner" 
+        bind:this={navEl}
+        use:clickOutside={{
+            callback: handleNavOutsideClick
+        }}
+    >
+        <slot />
+    </nav>
 </div>
 
-<style>
+<style>.docs-nav {
+  width: 220px;
+  top: var(--header-height, 0);
+  padding: 25px 0;
+  position: sticky;
+  flex-shrink: 0;
+  align-self: flex-start;
+  max-height: calc(100vh - var(--header-height));
+}
 
-    .docs-nav {
-        width: 220px;
-        top: var(--header-height, 0);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-        max-height: calc(100vh - var(--header-height));
-    }
+nav {
+  padding: 15px 0;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--header-height) - 50px);
+}
 
-    .docs-nav :global(.nav-inner) {
-        padding: 15px 0;
-        overflow-y: auto;
-        max-height: calc(100vh - var(--header-height) - 50px);
-    }
+.mobile {
+  display: none;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.mobile:hover {
+  background-color: var(--hover);
+}
+.mobile .left {
+  flex: 1;
+}
 
-</style>
+@media (max-width: 992px) {
+  .mobile {
+    display: flex;
+    width: 100%;
+    text-align: left;
+  }
+  .nav-inner {
+    display: none;
+  }
+  .docs-nav {
+    width: 100%;
+    position: relative;
+    top: 0;
+    padding: 0 15px;
+    margin: 20px 0;
+    max-height: initial;
+    order: 1;
+  }
+  nav {
+    padding: 0;
+    max-height: initial;
+    position: absolute;
+    width: calc(100% - 30px);
+    margin-top: 10px;
+    max-height: 500px;
+    z-index: 100;
+  }
+}</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte

@@ -0,0 +1,32 @@
+<script>
+  import Toc from "../Toc.svelte";
+
+</script>
+<div class="sidebar">
+    <Toc />
+</div>
+
+
+<style>
+
+    .sidebar {
+        width: 220px;
+        top: var(--header-height, 0);
+        padding: 25px 0;
+        position: sticky;
+        flex-shrink: 0;
+        align-self: flex-start;
+    }
+
+    @media (max-width: 992px) {
+        .sidebar {
+            order: 1;
+            position: relative;
+            top: initial;
+            padding: 0 15px;
+            margin-bottom: 20px;
+            width: 100%;
+        }
+    }
+
+</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/marketing/Docs/Toc.svelte

@@ -1,23 +1,149 @@
-<script>import Box from "../../components/Box/Box.svelte";
+<script>import { afterNavigate } from "$app/navigation";
+import { onMount } from "svelte";
+import tocbot from "tocbot";
+import Loader from "../../components/Loader/Loader.svelte";
+import { IconCaretDown, IconCaretRight } from "@hyvor/icons";
+import Button from "../../components/Button/Button.svelte";
+let tocElement;
+onMount(() => {
+  tocbot.init({
+    // @ts-ignore
+    tocElement,
+    contentSelector: ".docs .content-wrap",
+    headingSelector: "h2, h3, h4, h5, h6",
+    orderedList: false,
+    hasInnerContainers: true,
+    headingsOffset: 75,
+    scrollSmooth: true,
+    scrollSmoothOffset: -75
+  });
+});
+afterNavigate(() => {
+  tocbot.refresh();
+});
+let mobileShown = false;
+function handleMobileClick(e) {
+  e.stopPropagation();
+  if (!mobileShown) {
+    tocElement.style.display = "block";
+    mobileShown = true;
+  } else {
+    tocElement.style.display = "none";
+    mobileShown = false;
+  }
+}
 </script>
 
-<div class="toc-wrap">
+<div class="wrap hds-box">
 
-    <Box style="padding: 15px 20px">
-        Table of Contents
-    </Box>
+    <div class="mobile">
+        <Button color="input" on:click={handleMobileClick}>
+            Table of Contents 
+            <svelte:fragment slot="end">
+                {#if mobileShown}
+                    <IconCaretDown size={14} />
+                {:else}
+                    <IconCaretRight size={14} />
+                {/if}
+            </svelte:fragment>
+        </Button>
+    </div>
+
+    <div class="toc-wrap" bind:this={tocElement}>
+        <Loader block padding={30} size="small" />
+    </div>
 
 </div>
 
-<style>
+<style>.wrap {
+  padding: 25px;
+}
+
+.toc-wrap {
+  align-self: flex-start;
+  overflow-y: auto;
+}
+.toc-wrap :global(&.toc) {
+  overflow-y: auto;
+}
+.toc-wrap :global(> .toc-list) {
+  overflow: hidden;
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  margin: 0;
+  padding-left: 15px;
+}
+.toc-wrap :global(> .toc-list) :global(li) {
+  list-style: none;
+}
+.toc-wrap :global(.js-toc) {
+  overflow-y: hidden;
+}
+.toc-wrap :global(.toc-list) {
+  margin: 0;
+  padding-left: 15px;
+}
+.toc-wrap :global(.toc-list) :global(li) {
+  list-style: none;
+}
+.toc-wrap :global(a.toc-link) {
+  color: currentColor;
+  height: 100%;
+  display: inline-block;
+  padding: 3px 0;
+}
+.toc-wrap :global(a.toc-link):hover {
+  text-decoration: underline;
+}
+.toc-wrap :global(.is-collapsible) {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+.toc-wrap :global(.is-collapsed) {
+  max-height: 0;
+}
+.toc-wrap :global(.is-position-fixed) {
+  position: fixed !important;
+  top: 0;
+}
+.toc-wrap :global(.is-active-link) {
+  font-weight: 700;
+}
+.toc-wrap :global(.toc-link::before) {
+  background-color: #EEE;
+  content: " ";
+  display: inline-block;
+  height: inherit;
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  width: 2px;
+}
+.toc-wrap :global(.is-active-link::before) {
+  background-color: var(--accent);
+}
 
-    .toc-wrap {
-        width: 220px;
-        top: var(--header-height);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-    }
+.mobile {
+  display: none;
+}
 
-</style>
+@media (max-width: 992px) {
+  .wrap {
+    padding: 10px 15px;
+  }
+  .mobile {
+    display: block;
+  }
+  .toc-wrap {
+    display: none;
+    margin-top: 15px;
+  }
+  :global(.is-active-link) {
+    font-weight: normal !important;
+  }
+  :global(.is-active-link::before) {
+    background-color: #eee !important;
+  }
+}</style>

package/dist/marketing/Header/Header.svelte

@@ -195,4 +195,12 @@ header :global(nav) {
 
 .mobile-content :global(.button) {
   display: flex;
+}
+
+/* 
+	Scroll padding top is used to prevent the content from being hidden behind the header
+	https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+*/
+:global(html) {
+  scroll-padding-top: calc(var(--header-height) + 20px);
 }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.51",
+	"version": "0.0.53",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -46,8 +46,13 @@
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
 		"@hyvor/icons": "^0.0.3",
+		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
-		"svelte-awesome-color-picker": "^3.0.4"
+		"i": "^0.3.7",
+		"intl-messageformat": "^10.5.11",
+		"npm": "^10.4.0",
+		"svelte-awesome-color-picker": "^3.0.4",
+		"tocbot": "^4.25.0"
 	},
 	"type": "module",
 	"publishConfig": {