lutra 0.0.20 → 0.0.33

package/dist/layout/PageContent.svelte

@@ -3,11 +3,12 @@ let {
   children,
   pad = false,
   middle = false,
-  center = false
+  center = false,
+  style
 } = $props();
-let style = $derived.by(() => {
+let padStyle = $derived.by(() => {
   if (typeof pad === "boolean") {
-    return `--padBlockStart: ${pad ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+    return `--padBlockStart: ${pad ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
   } else if (typeof pad === "string") {
     return `--padBlockStart: ${pad}; --padBlockEnd: ${pad}; --padInlineStart: ${pad}; --padInlineEnd: ${pad};`;
   } else if (Array.isArray(pad) && pad.length > 1 && typeof pad[0] === "string") {
@@ -22,11 +23,11 @@ let style = $derived.by(() => {
   } else if (Array.isArray(pad) && pad.length > 1) {
     switch (pad.length) {
       case 2:
-        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[1] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[1] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[1] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[1] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
       case 3:
-        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
       case 4:
-        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[3] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[3] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
     }
   }
   return "";
@@ -37,7 +38,7 @@ let style = $derived.by(() => {
     class="Page"
     class:middle
     class:center
-    style={style}
+    style="{padStyle} {style}"
 >
     <div class="PaddingContainer">
         <div class="PageContent">
@@ -56,6 +57,7 @@ let style = $derived.by(() => {
         position: relative;
     }
     .PageContent {
+        container-type: inline-size;
         max-inline-size: var(--max-inline-size, 1560px);
         flex-grow: 1;
         --isPage: 1;
@@ -77,21 +79,4 @@ let style = $derived.by(() => {
     .Page.center .PaddingContainer {
         justify-content: center;
     }
-
-    @media (max-width: 1280px) {
-        .Page .PaddingContainer {
-            padding-block-start: calc(var(--padBlockStart) / 2);
-            padding-block-end: calc(var(--padBlockEnd) / 2);
-            padding-inline-start: calc(var(--padInlineStart) / 2);
-            padding-inline-end: calc(var(--padInlineEnd) / 2);
-        }
-    }
-    @media (max-width: 640px) {
-        .Page .PaddingContainer {
-            padding-block-start: calc(var(--padBlockStart) / 4);
-            padding-block-end: calc(var(--padBlockEnd) / 4);
-            padding-inline-start: calc(var(--padInlineStart) / 4);
-            padding-inline-end: calc(var(--padInlineEnd) / 4);
-        }
-    }
 </style>

package/dist/layout/PageContent.svelte.d.ts

@@ -1,28 +1,25 @@
-import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-        pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
-        middle?: boolean | undefined;
-        center?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PageContentProps = typeof __propDef.props;
-export type PageContentEvents = typeof __propDef.events;
-export type PageContentSlots = typeof __propDef.slots;
-export default class PageContent extends SvelteComponent<PageContentProps, PageContentEvents, PageContentSlots> {
-    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\"";
-        };
-        pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
-        middle?: boolean | undefined;
-        center?: boolean | undefined;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PageContent: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+    /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+    pad?: boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | string | [string, string] | [string, string, string] | [string, string, string, string];
+    /** Center the content in the block direction. */
+    middle?: boolean;
+    /** Center the content in the inline direction. */
+    center?: boolean;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type PageContent = InstanceType<typeof PageContent>;
+export default PageContent;

package/dist/layout/Theme.svelte

@@ -11,14 +11,16 @@ if (theme === "invert") {
 } else {
   theme = theme || (browser ? localStorage.getItem("theme") || window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
 }
-const existingTheme = getContext("theme");
+const isNotRoot = getContext("theme");
 setContext("theme", theme);
 </script>
 
-<svelte:body style="background-color: var(--bg-app);" />
+<!--
+<svelte:body class="{!isNotRoot ? 'theme-'+theme : ''}" />
+-->
 
 <svelte:head>
-    {#if !existingTheme}
+    {#if !isNotRoot}
         <meta name="theme-color" content="{theme === 'dark' ? '#000' : '#fff'}" />
     {/if}
 </svelte:head>
@@ -38,9 +40,14 @@ setContext("theme", theme);
         --scrollbar-color: var(--d-scrollbar-color);
     }
     .Theme.light {
+        color-scheme: light;
         --mix-target: var(--l-mix-target);
         /* bg */
         --bg-app: var(--l-bg-app);
+        --bg-panel: var(--l-bg-panel);
+        --bg-scrim: var(--l-bg-scrim);
+        --bg-subtler: var(--l-bg-subtler);
+        --bg-hover: var(--l-bg-hover);
         --bg-subtle: var(--l-bg-subtle);
         --bg-overlay: var(--l-bg-overlay);
         --shadow: var(--l-shadow);
@@ -55,6 +62,7 @@ setContext("theme", theme);
         /* text */
         --text: var(--l-text);
         --text-subtle: var(--l-text-subtle);
+        --text-subtler: var(--l-text-subtler);
         --text-highlight: var(--l-text-highlight);
         --text-heading: var(--l-text-heading);
         --text-link: var(--l-text-link);
@@ -63,6 +71,7 @@ setContext("theme", theme);
         --text-subtle-icon: var(--l-text-subtle-icon);
         --text-warn-icon: var(--l-text-warn-icon);
         /* fields */
+        --form-bg: var(--l-form-bg);
         --field-bg: var(--l-field-bg);
         --field-border-color: var(--l-field-border-color);
         --field-border-color-error: var(--l-field-border-color-error);
@@ -118,7 +127,6 @@ setContext("theme", theme);
         --menu-bg-active: var(--l-menu-bg-active);
         --menu-bg-hover: var(--l-menu-bg-hover);
         --menu-border: var(--l-menu-border);
-        --menu-text: var(--l-menu-text);
         --menu-text-subtle: var(--l-menu-text-subtle);
         --menu-text-active: var(--l-menu-text-active);
         /* status */
@@ -131,10 +139,15 @@ setContext("theme", theme);
         --scrollbar-color: var(--l-scrollbar-color);
     }
     .Theme.dark {
+        color-scheme: dark;
         --mix-target: var(--d-mix-target);
         /* bg */
         --bg-app: var(--d-bg-app);
+        --bg-panel: var(--d-bg-panel);
+        --bg-scrim: var(--d-bg-scrim);
+        --bg-subtler: var(--d-bg-subtler);
         --bg-subtle: var(--d-bg-subtle);
+        --bg-hover: var(--d-bg-hover);
         --bg-overlay: var(--d-bg-overlay);
         --shadow: var(--d-shadow);
         /* border */
@@ -148,6 +161,7 @@ setContext("theme", theme);
         /* text */
         --text: var(--d-text);
         --text-subtle: var(--d-text-subtle);
+        --text-subtler: var(--d-text-subtler);
         --text-highlight: var(--d-text-highlight);
         --text-heading: var(--d-text-heading);
         --text-link: var(--d-text-link);
@@ -157,6 +171,7 @@ setContext("theme", theme);
         --text-subtle-icon: var(--d-text-subtle-icon);
         --text-warn-icon: var(--d-text-warn-icon);
         /* fields */
+        --form-bg: var(--d-form-bg);
         --field-bg: var(--d-field-bg);
         --field-border-color: var(--d-field-border-color);
         --field-border-color-error: var(--d-field-border-color-error);

package/dist/layout/Theme.svelte.d.ts

@@ -1,24 +1,19 @@
-import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        theme?: "light" | "dark" | "invert" | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThemeProps = typeof __propDef.props;
-export type ThemeEvents = typeof __propDef.events;
-export type ThemeSlots = typeof __propDef.slots;
-export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        theme?: "light" | "dark" | "invert" | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Theme: $$__sveltets_2_IsomorphicComponent<{
+    theme?: "light" | "dark" | "invert";
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Theme = InstanceType<typeof Theme>;
+export default Theme;

package/dist/layout/UIContent.svelte.d.ts

@@ -1,22 +1,18 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type UiContentProps = typeof __propDef.props;
-export type UiContentEvents = typeof __propDef.events;
-export type UiContentSlots = typeof __propDef.slots;
-export default class UiContent extends SvelteComponent<UiContentProps, UiContentEvents, UiContentSlots> {
-    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\"";
-        };
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const UiContent: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type UiContent = InstanceType<typeof UiContent>;
+export default UiContent;

package/dist/layout/index.d.ts

@@ -1,7 +1,11 @@
 export { default as Layout } from './Layout.svelte';
-export { default as LayoutGrid } from './LayoutGrid.svelte';
 export { default as LayoutFooter } from './LayoutFooter.svelte';
+export { default as LayoutGrid } from './LayoutGrid.svelte';
 export { default as LayoutHeader } from './LayoutHeader.svelte';
+export { default as LayoutSideMenu } from './LayoutSideMenu.svelte';
+export { default as Overlay } from './Overlay.svelte';
+export { default as OverlayContainer } from './OverlayContainer.svelte';
+export { default as OverlayLayer } from './OverlayLayer.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as UIContent } from './UIContent.svelte';
 export { default as Theme } from './Theme.svelte';

package/dist/layout/index.js

@@ -1,7 +1,11 @@
 export { default as Layout } from './Layout.svelte';
-export { default as LayoutGrid } from './LayoutGrid.svelte';
 export { default as LayoutFooter } from './LayoutFooter.svelte';
+export { default as LayoutGrid } from './LayoutGrid.svelte';
 export { default as LayoutHeader } from './LayoutHeader.svelte';
+export { default as LayoutSideMenu } from './LayoutSideMenu.svelte';
+export { default as Overlay } from './Overlay.svelte';
+export { default as OverlayContainer } from './OverlayContainer.svelte';
+export { default as OverlayLayer } from './OverlayLayer.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as UIContent } from './UIContent.svelte';
 export { default as Theme } from './Theme.svelte';

package/dist/layout/overlays.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, Snippet } from "svelte";
+import type { Component, Snippet } from "svelte";
 export type OverlayPosition = "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" | "center" | "anchor";
 export type TransitionOpts = {
     y?: number;
@@ -10,7 +10,7 @@ export type TransitionOpts = {
 export type OverlayItem = {
     id: string;
     z?: number;
-    content: string | Snippet | ComponentType;
+    content: string | Snippet | Component;
     props?: Record<string, any>;
     layer?: string;
     anchor?: HTMLElement;

package/dist/nav/Breadcrumb.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">const {
+<script lang="ts">let {
   items,
   separator = "/",
   contained,

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

@@ -1,33 +1,28 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
+import type { Component, Snippet } from "svelte";
 import type { BreadcrumbItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: BreadcrumbItem[];
-        separator?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        contained?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        center?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BreadcrumbProps = typeof __propDef.props;
-export type BreadcrumbEvents = typeof __propDef.events;
-export type BreadcrumbSlots = typeof __propDef.slots;
-export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        items: BreadcrumbItem[];
-        separator?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        contained?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        center?: boolean | undefined;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
+    /** The items to display in the breadcrumb. */
+    items: BreadcrumbItem[];
+    /** The separator to use between breadcrumb items. */
+    separator?: string | Snippet | Component;
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Make the element full width. */
+    fullWidth?: boolean;
+    /** Center the items in the element. */
+    center?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/nav/Menu.svelte

@@ -1,11 +1,7 @@
-<script lang="ts">import { BROWSER } from "esm-env";
-import MenuItem from "./MenuItem.svelte";
-import { isComponent } from "../utils/isSnippet.js";
+<script lang="ts">import MenuItem from "./MenuItem.svelte";
 import { createId } from "../utils/id.js";
-import { slidefade } from "../utils/transitions.js";
 import UiContent from "../layout/UIContent.svelte";
 import { arrowNavigation, getNextFocusableElement, matchOnType } from "../utils/keyboard.svelte.js";
-import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
 import { findContainingBlock, getPossiblyContainedPosition } from "../utils/dom.js";
 import Overlay from "../layout/Overlay.svelte";
 let {
@@ -33,8 +29,7 @@ function toggle() {
   _open = !_open;
 }
 let scrollable = $derived.by(() => {
-  if (!contentEl)
-    return false;
+  if (!contentEl) return false;
   return contentEl.scrollHeight > contentEl.clientHeight;
 });
 function onclick(e) {
@@ -42,15 +37,13 @@ function onclick(e) {
   _open = !_open;
 }
 function clickoutside(e) {
-  if (!_open)
-    return;
+  if (!_open) return;
   if (contentEl && !contentEl.contains(e.target) && !triggerEl?.contains(e.target)) {
     _open = false;
   }
 }
 function onkeydown(e) {
-  if (!_open)
-    return;
+  if (!_open) return;
   const active = document.activeElement;
   switch (e.key) {
     case "Escape":
@@ -107,9 +100,9 @@ function mouseover(e, item, index) {
             class="Trigger"
             bind:this={triggerEl}
         >
-            {#if typeof trigger === "string" || isComponent(trigger)}
+            {#if typeof trigger === "string"}
                 <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
-                    <StringOrComponentOrSnippet content={trigger} />
+                    {trigger}
                 </button>
             {:else}
                 {@render trigger({ toggle: toggle, isOpen: _open })}

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

@@ -1,33 +1,27 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType, Snippet } from "svelte";
+import type { Snippet } from "svelte";
 import type { MenuItem as Item } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        open?: import("svelte").Bindable<boolean | undefined>;
-        items: Item[];
-        trigger: string | ComponentType | Snippet<[{
-            toggle: () => void;
-            isOpen: boolean;
-        }]>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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\"";
-        });
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Menu: $$__sveltets_2_IsomorphicComponent<{
+    /** Whether the menu is open */
+    open?: boolean;
+    /** The items to display in the menu */
+    items: Item[];
+    /** The trigger for the menu */
+    trigger: string | Snippet<[{
+        toggle: () => void;
+        isOpen: boolean;
+    }]>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "open">;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/nav/MenuItem.svelte

@@ -1,11 +1,12 @@
-<script lang="ts">import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
+<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
 import { isStatusColor } from "../utils/color.js";
 import { isComponent, isSnippet } from "../utils/isSnippet.js";
 let {
   item,
   index,
   onmouseover,
-  keyboardHasFocus
+  keyboardHasFocus,
+  shape = "rounded"
 } = $props();
 let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false);
 let el = $state(null);
@@ -23,6 +24,7 @@ function mouseover(e) {
     class:keyboardHasFocus
     class:divider={item.type === 'divider'}
     class:header={item.type === 'header'}
+    class={shape}
     data-type="{item.type}"
     style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}"
 >
@@ -30,13 +32,13 @@ function mouseover(e) {
         <hr />
     {:else if item.type === 'header'}
         <div class="Header">
-            <StringOrComponentOrSnippet content={item.content} />
+            <StringOrSnippet content={item.content} />
         </div>
     {:else if item.type === 'item'}
         {#if item.href}
             <a href="{item.href}" class="Item" bind:this={el}>
                 <span class="Content">
-                    <StringOrComponentOrSnippet content={item.content} />
+                    <StringOrSnippet content={item.content} />
                 </span>
                 {#if item.shortcut}
                     <span class="Shortcut">{item.shortcut}</span>
@@ -45,7 +47,7 @@ function mouseover(e) {
         {:else if item.onclick}
             <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} />
+                    <StringOrSnippet content={item.content} />
                 </span>
                 {#if item.shortcut}
                     <span class="Shortcut">{item.shortcut}</span>
@@ -57,7 +59,7 @@ function mouseover(e) {
             </div>
         {:else if isComponent(item.content)}
             <div class="Item Custom">
-                <svelte:component this={item.content} />
+                <item.content />
             </div>
         {/if}
     {/if}
@@ -73,7 +75,7 @@ function mouseover(e) {
 
     li .Item,
     li .Header {
-        font-size: 1em;
+        font-size: var(--font-size, 0.9em);
         text-align: left;
         padding-block: 0.5rem;
         padding-inline: 1rem;
@@ -88,13 +90,18 @@ function mouseover(e) {
         --inset-inline: 1rem;
     }
 
+    li.rounded .Item,
+    li.rounded .Header {
+        border-radius: var(--border-radius);
+    }
+
     li .Header {
         font-weight: 600;
     }
 
     li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
     li .Item:not(.Custom):focus-visible {
-        background-color: var(--menu-bg-hover);
+        background-color: var(--bg-hover);
         cursor: pointer;
         outline: none;
     }

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

@@ -1,26 +1,22 @@
-import { SvelteComponent } from "svelte";
 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>;
-    };
-    slots: {};
-};
-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;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const MenuItem: $$__sveltets_2_IsomorphicComponent<{
+    item: Item;
+    index: number;
+    onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+    keyboardHasFocus?: boolean;
+    shape?: "rounded" | "square" | "pill";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MenuItem = InstanceType<typeof MenuItem>;
+export default MenuItem;