lutra 0.0.18 → 0.0.20

package/dist/nav/Menu.svelte.d.ts

@@ -3,11 +3,8 @@ import type { ComponentType, Snippet } from "svelte";
 import type { MenuItem as Item } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** Whether the menu is open */
-        open?: boolean | undefined;
-        /** The items to display in the menu */
+        open?: import("svelte").Bindable<boolean | undefined>;
         items: Item[];
-        /** The trigger for the menu */
         trigger: string | ComponentType | Snippet<[{
             toggle: () => void;
             isOpen: boolean;
@@ -22,5 +19,15 @@ export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
 export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        open?: import("svelte").Bindable<boolean | undefined>;
+        items: Item[];
+        trigger: string | ComponentType | ((this: void, args_0: {
+            toggle: () => void;
+            isOpen: boolean;
+        }) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        });
+    }>);
 }
 export {};

package/dist/nav/MenuItem.svelte

@@ -2,12 +2,30 @@
 import { isStatusColor } from "../utils/color.js";
 import { isComponent, isSnippet } from "../utils/isSnippet.js";
 let {
-  item
+  item,
+  index,
+  onmouseover,
+  keyboardHasFocus
 } = $props();
 let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false);
+let el = $state(null);
+function mouseover(e) {
+  if (onmouseover && item.type === "item") {
+    el?.focus();
+  }
+}
 </script>
 
-<li class:divider={item.type === 'divider'} class:header={item.type === 'header'} data-type="{item.type}" style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}">
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<li
+    onmouseover={mouseover}
+    data-index={index}
+    class:keyboardHasFocus
+    class:divider={item.type === 'divider'}
+    class:header={item.type === 'header'}
+    data-type="{item.type}"
+    style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}"
+>
     {#if item.type === 'divider'}
         <hr />
     {:else if item.type === 'header'}
@@ -16,7 +34,7 @@ let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false
         </div>
     {:else if item.type === 'item'}
         {#if item.href}
-            <a href="{item.href}" class="Item">
+            <a href="{item.href}" class="Item" bind:this={el}>
                 <span class="Content">
                     <StringOrComponentOrSnippet content={item.content} />
                 </span>
@@ -25,7 +43,7 @@ let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false
                 {/if}
             </a>
         {:else if item.onclick}
-            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item">
+            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item" bind:this={el}>
                 <span class="Content">
                     <StringOrComponentOrSnippet content={item.content} />
                 </span>
@@ -74,7 +92,7 @@ let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false
         font-weight: 600;
     }
 
-    li .Item:not(.Custom):hover,
+    li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
     li .Item:not(.Custom):focus-visible {
         background-color: var(--menu-bg-hover);
         cursor: pointer;
@@ -103,11 +121,11 @@ let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false
     }
 
     li:first-child[data-type="item"] {
-        margin-block-start: 0.5rem;
+        margin-block-start: var(--menu-item-margin, 0.5rem);
     }
 
     li:first-child[data-type="header"]:has(+ li[data-type="item"]) {
-        margin-block-end: 0.5rem;
+        margin-block-end: 0.125rem;
     }
 
     li:nth-last-child(2)[data-type="item"]:has(+ li[data-type="header"]:last-child) {

package/dist/nav/MenuItem.svelte.d.ts

@@ -3,6 +3,9 @@ import type { MenuItem as Item } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
         item: Item;
+        index: number;
+        onmouseover?: ((e: MouseEvent, item: Item, index: number) => void) | undefined;
+        keyboardHasFocus?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,5 +16,11 @@ export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
 export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        item: Item;
+        index: number;
+        onmouseover?: ((e: MouseEvent, item: Item, index: number) => void) | undefined;
+        keyboardHasFocus?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/nav/NavMenu.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 import type { MenuItem } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** Menu items to display */
         items: MenuItem[];
     };
     events: {
@@ -14,5 +13,8 @@ export type NavMenuProps = typeof __propDef.props;
 export type NavMenuEvents = typeof __propDef.events;
 export type NavMenuSlots = typeof __propDef.slots;
 export default class NavMenu extends SvelteComponent<NavMenuProps, NavMenuEvents, NavMenuSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        items: MenuItem[];
+    }>);
 }
 export {};

package/dist/nav/TabbedContent.svelte.d.ts

@@ -2,11 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { TabbedContentItem } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** Tab items to display. */
         items: TabbedContentItem[];
-        /** Contain the element in a box. */
         contained?: boolean | undefined;
-        /** Round the corners of the element if contained. */
         rounded?: boolean | undefined;
     };
     events: {
@@ -18,5 +15,10 @@ export type TabbedContentProps = typeof __propDef.props;
 export type TabbedContentEvents = typeof __propDef.events;
 export type TabbedContentSlots = typeof __propDef.slots;
 export default class TabbedContent extends SvelteComponent<TabbedContentProps, TabbedContentEvents, TabbedContentSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        items: TabbedContentItem[];
+        contained?: boolean | undefined;
+        rounded?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/nav/Tabs.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import type { TabItem } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** Tab items to display. */
         items: TabItem[];
-        /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
         underline?: boolean | undefined;
-        /** Contain the element in a box. */
         contained?: boolean | undefined;
-        /** Round the corners of the element if contained. */
         rounded?: boolean | undefined;
     };
     events: {
@@ -20,5 +16,11 @@ export type TabsProps = typeof __propDef.props;
 export type TabsEvents = typeof __propDef.events;
 export type TabsSlots = typeof __propDef.slots;
 export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        items: TabItem[];
+        underline?: boolean | undefined;
+        contained?: boolean | undefined;
+        rounded?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/style.css

@@ -43,7 +43,7 @@
     --l-bg-app: hsl(215, 3%, 99.5%);
     --l-bg-subtle: hsl(240, 7%, 97%);
     --l-bg-overlay: rgba(255,255,255,0.85);
-    --l-shadow: rgba(0, 0, 0, 0.1);
+    --l-shadow: rgba(0, 0, 0, 0.15);
     /* border */
     --l-border-color: hsl(215, 6%, 80%);
     --l-border-subtle-color: hsl(215, 5%, 87%);
@@ -54,7 +54,7 @@
     --l-focus-outline: var(--focus-size) solid var(--l-focus-color);
     /* text */
     --l-text: hsl(240, 2%, 20%);
-    --l-text-subtle: hsl(240, 2%, 50%);
+    --l-text-subtle: hsl(240, 2%, 40%);
     --l-text-highlight: hsl(206, 99%, 47%);
     --l-text-heading: hsl(240, 3%, 12%);
     --l-text-link: hsl(215, 70%, 55%);
@@ -128,6 +128,8 @@
     --l-status-warn: #ffc107;
     --l-status-info: #038ac8;
     --l-status-task: #007bff;
+    /* scrollbar */
+    --l-scrollbar-color: hsl(215, 8%, 70%) hsl(215, 20%, 98%);
 
     /**
      * Dark theme
@@ -224,21 +226,22 @@
     --d-status-warn: #ffeb3b;
     --d-status-info: #0362c8;
     --d-status-task: #1e88e5;
+    --d-scrollbar-color: hsl(215, 10%, 55%) hsla(215, 10%, 35%, 0.5);
 }
 
-@media(max-width: 1280px) {
+@media(min-width: 1280px) {
     :root {
         --grid-size: 16px;
     }
 }
 
-@media(max-width: 1024px) {
+@media(max-width: 1280px) {
     :root {
         --grid-size: 14px;
     }
 }
 
-@media(max-width: 480px) {
+@media(max-width: 640px) {
     :root {
         --grid-size: 13px;
     }
@@ -246,14 +249,14 @@
 
 body {
     font-family: var(--font-family);
-    font-size: var(--grid-size);
+    font-size: 100%;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scrollbar-width: thin;
     font-kerning: auto;
     min-width: 280px;
-    scrollbar-gutter: stable both-edges;
+    overscroll-behavior: none;
 }
 
 body * {
@@ -262,12 +265,23 @@ body * {
     padding: 0;
 }
 
+html:has(.Layout .Theme.dark) {
+    --scrollbar-color: var(--d-scrollbar-color);
+}
+
+html:has(.Layout .Theme.light) {
+    --scrollbar-color: var(--l-scrollbar-color);
+}
+
 html, body, .app {
     padding: 0;
     margin: 0;
     inline-size: 100%;
     min-block-size: 100%;
     block-size: 100%;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color);
+    scrollbar-gutter: stable;
 }
 
 html {
@@ -279,6 +293,7 @@ html, body {
 }
 
 input, textarea, select, button {
+    touch-action: manipulation;
     font-family: var(--font-family);
 }
 
@@ -290,6 +305,26 @@ input, textarea, select, button {
     transform: translateZ(0);
 }
 
+.scrollbar {
+    width: 8px;
+    height: 100%;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.scrollbar .grabber {
+    width: calc(100% - 2px);
+    height: 100px;
+    background: var(--text);
+    cursor: grab;
+    border-radius: 9999px;
+    position: absolute;
+    left: 1px;
+}
+
 /**
  * Typography
  */
@@ -506,7 +541,8 @@ button {
     padding: 0;
 }
 
-.button {
+.button,
+::file-selector-button {
     font-size: var(--font-size, 1em);
     line-height: 1.5;
     font-weight: 500;
@@ -582,43 +618,45 @@ button:active,
 
 @scope (.PageContent) to (.UIContent) {
         
-    .button { margin-block-start: 0.5rem; }
-    .button.lg { margin-block-start: 0.75rem; }
-    .button.xl { margin-block-start: 1rem; }
-    .button:has(+.button) { margin-inline-end: 0.5rem; }
-    .button.lg:has(+.button) { margin-inline-end: 1rem; }
-    .button.xl:has(+.button) { margin-inline-end: 1.5rem; }
-
-    p { margin-block: 0.75rem; }
-    h1 { margin-block: 3rem 1.5rem; }
-    h2 { margin-block: 3rem 1.5rem; }
+    .button { margin-block-start: calc(0.5rem * var(--margin-scale, 1)); }
+    .button.lg { margin-block-start: calc(0.75rem * var(--margin-scale, 1)); }
+    .button.xl { margin-block-start: calc(1rem * var(--margin-scale, 1)); }
+    .button:has(+.button) { margin-inline-end: calc(0.5rem * var(--margin-scale, 1)); }
+    .button.lg:has(+.button) { margin-inline-end: calc(1rem * var(--margin-scale, 1)); }
+    .button.xl:has(+.button) { margin-inline-end: calc(1.5rem * var(--margin-scale, 1)); }
+
+    p { margin-block: calc(0.75rem * var(--margin-scale, 1)); }
+    h1 { margin-block: calc(3rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1)); }
+    h2 { margin-block: calc(3rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1)); }
     h1+h2 {
         margin-block-start: 0;
     }
     h1:has(+h2) {
-        margin-block-end: 0.75rem;
+        margin-block-end: calc(0.75rem * var(--margin-scale, 1));
+    }
+    h3 {
+        margin-block: calc(2rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1));
     }
-    h3 { margin-block: 2rem 1.5rem; }
     h3:has(+p, +ul, +ol) {
-        margin-block-end: 0.75rem;
+        margin-block-end: calc(0.75rem * var(--margin-scale, 1));
     }
     h4,
     h5 {
-        margin-block: 1.5rem 0.5rem;
+        margin-block: calc(1.5rem * var(--margin-scale, 1)) calc(0.5rem * var(--margin-scale, 1));
     }
     p {
         hyphens: auto;
     }
 
     ul, ol {
-        margin-block: 1.5rem;
+        margin-block: calc(1.5rem * var(--margin-scale, 1));
     }
     ul {
         list-style-type: "–  ";
         list-style-position: outside;
     }
     li {
-        margin-block: 0.5em;
+        margin-block: calc(0.5em * var(--margin-scale, 1));
     }
     @media(max-width: 960px) {
         ul, ol {
@@ -628,39 +666,39 @@ button:active,
             margin-inline-start: 0;
         }
         ul li:before {
-            margin-inline-start: 0.5rem;
+            margin-inline-start: calc(0.5rem * var(--margin-scale, 1));
         }
     }
     li p {
-        margin-block: 0.5rem;
+        margin-block: calc(0.5rem * var(--margin-scale, 1));
     }
     li:not(:last-child) p:last-child {
-        margin-block-end: 0.85em;
+        margin-block-end: calc(0.85em * var(--margin-scale, 1));
     }
     ul:has(+p), ol:has(+p) {
-        margin-block-end: 1em;
+        margin-block-end: calc(1em * var(--margin-scale, 1));
     }
 
     p+ul, p+ol {
-        margin-block-start: 1em;
+        margin-block-start: calc(1em * var(--margin-scale, 1));
     }
 
     h3+p,
     h3+ul,
     h3+ol {
-        margin-block-start: 1em;
+        margin-block-start: calc(1em * var(--margin-scale, 1));
     }
 
     h4+p,
     h4+ul,
     h4+ol {
-        margin-block-start: 0.75em;
+        margin-block-start: calc(0.75em * var(--margin-scale, 1));
     }
 
     h5+p,
     h5+ul,
     h5+ol {
-        margin-block-start: 0.5em;
+        margin-block-start: calc(0.5em * var(--margin-scale, 1));
     }
 
     /** Links */
@@ -671,7 +709,7 @@ button:active,
 
     /** Dividers */
     hr {
-        margin-block: 2em;
+        margin-block: calc(2em * var(--margin-scale, 1));
         border-top: var(--border-subtle);
     }
 
@@ -720,7 +758,7 @@ button:active,
 
     /** Tables */
     table {
-        margin-block: 1.5em;
+        margin-block: calc(1.5em * var(--margin-scale, 1));
         border-collapse: collapse;
         font-size: var(--font-size, 1em);
     }
@@ -789,12 +827,12 @@ button:active,
     /** Forms */
     fieldset label,
     fieldset input {
-        margin-block-end: 0.5rem;
+        margin-block-end: calc(0.5rem * var(--margin-scale, 1));
     }
 
     /** Blockquote */
     blockquote {
-        margin-block: 1.5rem;
+        margin-block: calc(1.5rem * var(--margin-scale, 1));
         padding: 1.5rem 1.5rem;
         inline-size: calc(100% + 2rem);
         margin-inline: -1rem;

package/dist/typo/Clamp.svelte.d.ts

@@ -3,11 +3,8 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         children: Snippet;
-        /** Clamp in the logical inline direction */
         inline?: string | undefined;
-        /** Clamp in the logical block direction */
         block?: string | undefined;
-        /** Clip the text */
         clip?: boolean | undefined;
     };
     events: {
@@ -19,5 +16,13 @@ export type ClampProps = typeof __propDef.props;
 export type ClampEvents = typeof __propDef.events;
 export type ClampSlots = typeof __propDef.slots;
 export default class Clamp extends SvelteComponent<ClampProps, ClampEvents, ClampSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        inline?: string | undefined;
+        block?: string | undefined;
+        clip?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/typo/H.svelte.d.ts

@@ -3,15 +3,10 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         children: Snippet;
-        /** Language of the element */
         lang?: string | undefined;
-        /** The level of the heading. */
         level?: 5 | 3 | 2 | 1 | 4 | 6 | undefined;
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
     };
     events: {
@@ -23,5 +18,15 @@ export type HProps = typeof __propDef.props;
 export type HEvents = typeof __propDef.events;
 export type HSlots = typeof __propDef.slots;
 export default class H extends SvelteComponent<HProps, HEvents, HSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        lang?: string | undefined;
+        level?: 5 | 3 | 2 | 1 | 4 | 6 | undefined;
+        center?: boolean | undefined;
+        subtle?: boolean | undefined;
+        hr?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/typo/H1.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H1Props = typeof __propDef.props;
 export type H1Events = typeof __propDef.events;
 export type H1Slots = typeof __propDef.slots;
 export default class H1 extends SvelteComponent<H1Props, H1Events, H1Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/typo/H2.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H2Props = typeof __propDef.props;
 export type H2Events = typeof __propDef.events;
 export type H2Slots = typeof __propDef.slots;
 export default class H2 extends SvelteComponent<H2Props, H2Events, H2Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/typo/H3.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H3Props = typeof __propDef.props;
 export type H3Events = typeof __propDef.events;
 export type H3Slots = typeof __propDef.slots;
 export default class H3 extends SvelteComponent<H3Props, H3Events, H3Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/typo/H4.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H4Props = typeof __propDef.props;
 export type H4Events = typeof __propDef.events;
 export type H4Slots = typeof __propDef.slots;
 export default class H4 extends SvelteComponent<H4Props, H4Events, H4Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/typo/H5.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H5Props = typeof __propDef.props;
 export type H5Events = typeof __propDef.events;
 export type H5Slots = typeof __propDef.slots;
 export default class H5 extends SvelteComponent<H5Props, H5Events, H5Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};