lutra 0.0.20 → 0.0.33

package/dist/nav/MenuTypes.d.ts

@@ -1,5 +1,5 @@
 import type { StatusColorOrString } from "../utils/color.js";
-import type { ComponentType, Snippet } from "svelte";
+import type { Component, Snippet } from "svelte";
 export type MenuItem = {
     /** Type of menu item to render. */
     type: 'divider';
@@ -7,18 +7,18 @@ export type MenuItem = {
     /** Type of menu item to render. */
     type: 'header';
     /** Text label of the item to display to the user. */
-    content: string | ComponentType | Snippet;
+    content: string | Snippet;
     /** Color to use for the item. */
     color?: StatusColorOrString;
 } | {
     /** Type of menu item to render. */
     type: 'item';
-    /** Text label of the item to display to the user. */
-    content: string | ComponentType | Snippet;
+    /** Content of the item to display to the user. */
+    content: string | Snippet;
     /** Keyboard shortcut to display next to the item. */
     shortcut?: string;
     /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
-    icon?: string | ComponentType;
+    icon?: string | Component;
     /** Path or URL to use for the menu item. */
     href?: string;
     /** Click event handler. */
@@ -34,7 +34,7 @@ export type TabItem = {
     /** Text label of the item to display to the user. */
     label: string;
     /** Path or URL to use for the item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active items. */
-    href: string;
+    href?: string;
     /** Click event handler. */
     onclick?: (event: MouseEvent, item: TabItem, index: number) => void;
     /** If true, overrides the currently selected item. */
@@ -52,7 +52,7 @@ export type BreadcrumbItem = {
     /** Text label of the item to display to the user. */
     label: string;
     /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
-    icon?: string | ComponentType;
+    icon?: string | Component;
     /** Path or URL to use for the breadcrumb item. */
     href?: string;
 };

package/dist/nav/NavMenu.svelte

@@ -4,11 +4,10 @@ let {
   items
 } = $props();
 function parseHref(href) {
-  if (!href)
-    return {
-      href: void 0,
-      exact: false
-    };
+  if (!href) return {
+    href: void 0,
+    exact: false
+  };
   if (href.endsWith("*")) {
     return {
       href: href.slice(0, -1),
@@ -28,8 +27,7 @@ function parseLinks(items2) {
         ...parseHref(item.href)
       };
     }
-    if (!item.children)
-      return item;
+    if (!item.children) return item;
     return {
       ...item,
       children: parseLinks(item.children)
@@ -47,14 +45,14 @@ const parsedItems = parseLinks(items);
                     {#if i.href}
                         <a href={i.href}>
                             {#if i.icon}
-                                <svelte:component this={i.icon} />
+                                <i.icon />
                             {/if}
                             {i.label}
                         </a>
                     {:else}
                         <span>
                             {#if i.icon}
-                                <svelte:component this={i.icon} />
+                                <i.icon />
                             {/if}
                             {i.label}
                         </span>

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

@@ -1,20 +1,19 @@
-import { SvelteComponent } from "svelte";
 import type { MenuItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: MenuItem[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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[];
-    }>);
+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 NavMenu: $$__sveltets_2_IsomorphicComponent<{
+    /** Menu items to display */
+    items: MenuItem[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NavMenu = InstanceType<typeof NavMenu>;
+export default NavMenu;

package/dist/nav/TabbedContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { page } from "$app/stores";
 import Tabs from "./Tabs.svelte";
-const {
+let {
   items,
   contained,
   rounded

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

@@ -1,24 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { TabbedContentItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: TabbedContentItem[];
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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;
-    }>);
+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 TabbedContent: $$__sveltets_2_IsomorphicComponent<{
+    /** Tab items to display. */
+    items: TabbedContentItem[];
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TabbedContent = InstanceType<typeof TabbedContent>;
+export default TabbedContent;

package/dist/nav/Tabs.svelte

@@ -1,19 +1,57 @@
-<script lang="ts">const {
+<script lang="ts">import { browser } from "$app/environment";
+import { page } from "$app/stores";
+import { onMount } from "svelte";
+let {
   items,
   underline,
   contained,
   rounded
 } = $props();
+const id = $state(`Tabs-${Math.random().toString(36).slice(2)}`);
 function onClickButton(event, item, index) {
 }
+let activeIndex = $derived.by(() => {
+  return items.findIndex((item, index) => {
+    if (!item.href) return false;
+    if (item.href.endsWith("*")) {
+      return $page.url.pathname.startsWith(item.href.slice(0, -1));
+    } else {
+      return $page.url.pathname.endsWith(item.href);
+    }
+  });
+});
+let loaded = $state(false);
+onMount(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  loaded = true;
+});
+let underlineStyle = $derived.by(() => {
+  if (browser && underline && loaded) {
+    let active = items[activeIndex];
+    let activeElement = document.querySelector(`#${id} li[data-index="${activeIndex}"]`);
+    if (activeElement) {
+      return `
+                    opacity: 1;
+                    width: ${activeElement.clientWidth}px;
+                    transform: translateX(${activeElement.offsetLeft}px)
+                `;
+    }
+  }
+  return "height: 0;";
+});
+function removePossibleStar(href) {
+  return href.endsWith("*") ? href.slice(0, -1) : href;
+}
 </script>
 
-<nav class="Tabs" class:contained class:rounded>
+<svelte:window onresize={() => { loaded = false; loaded = true; }} />
+
+<nav class="Tabs" {id} class:contained class:rounded>
     <menu>
         {#each items as item, index}
-            <li data-index={index} aria-current={item.active ? 'page' : undefined}>
+            <li data-index={index} aria-current={item.active || activeIndex === index ? 'page' : undefined}>
                 {#if item.href}
-                    <a draggable="false" href={item.href}>
+                    <a draggable="false" href={removePossibleStar(item.href)}>
                         {item.label}
                     </a>
                 {:else if item.onclick}
@@ -23,7 +61,7 @@ function onClickButton(event, item, index) {
                 {/if}
             </li>
         {/each}
-        <div class="Underline"></div>
+        <div class="Underline" style={underlineStyle}></div>
     </menu>
 </nav>
 
@@ -52,7 +90,7 @@ function onClickButton(event, item, index) {
         align-items: center;
         justify-content: flex-start;
         padding: 0;
-        gap: 1rem;
+        gap: var(--gap, 1rem);
         inline-size: 100%;
         border-block-end: var(--menu-border);
     }
@@ -65,10 +103,11 @@ function onClickButton(event, item, index) {
     a,
     button {
         display: block;
-        padding: 0.75rem 0.5rem;
+        padding: var(--padding, 0.75rem 0.5rem);
         color: var(--menu-text);
         transition: all var(--menu-trans);
         font-weight: 500;
+        font-size: var(--font-size, 0.9em);
         letter-spacing: -0.05ch;
         background: transparent;
         border: none;
@@ -76,6 +115,9 @@ function onClickButton(event, item, index) {
         cursor: pointer;
         text-decoration: none;
     }
+    menu li:first-child > * {
+        padding-inline-start: 0;
+    }
     .Tabs.contained li {
         flex-grow: 1;
         border-inline-end: var(--menu-border);
@@ -95,24 +137,22 @@ function onClickButton(event, item, index) {
     }
     a:hover,
     button:hover {
-        background: var(--menu-bg-hover);
-        color: var(--menu-text-hover);
+        color: color-mix(in hsl shorter hue, var(--menu-text) var(--mix-amount), var(--mix-target));
+        background-color: color-mix(in hsl shorter hue, var(--menu-bg) var(--mix-amount), var(--mix-target));
     }
     li[aria-current="page"] a,
     li[aria-current="page"] button {
         background: var(--menu-bg-active);
         color: var(--menu-text-active);
         opacity: 1;
-        border-block-end: 2px solid var(--menu-text-active);
     }
     .Underline {
-        inline-size: 0px;
-        block-size: 2px;
+        height: 2px;
         background-color: var(--menu-text-active);
         position: absolute;
         bottom: 0;
         left: 0;
-        transition: all 0.3s ease-in-out;
+        transition: all 0.2s ease-out;
         opacity: 0;
     }
 </style>

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

@@ -1,26 +1,25 @@
-import { SvelteComponent } from "svelte";
-import type { TabItem } from "./MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: TabItem[];
-        underline?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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;
-    }>);
+import type { TabItem } from "../nav/index.js";
+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 Tabs: $$__sveltets_2_IsomorphicComponent<{
+    /** 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;
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/nav/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Breadcrumb } from './Breadcrumb.svelte';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as NavMenu } from './NavMenu.svelte';
 export { default as TabbedContent } from './TabbedContent.svelte';
 export { default as Tabs } from './Tabs.svelte';
-export { default as MenuItem } from './MenuItem.svelte';
 export type { BreadcrumbItem, MenuItem as MenuItemType, TabItem, TabbedContentItem } from './MenuTypes.js';

package/dist/nav/index.js

@@ -1,5 +1,6 @@
 export { default as Breadcrumb } from './Breadcrumb.svelte';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as NavMenu } from './NavMenu.svelte';
 export { default as TabbedContent } from './TabbedContent.svelte';
 export { default as Tabs } from './Tabs.svelte';
-export { default as MenuItem } from './MenuItem.svelte';