lutra 0.0.20 → 0.1.0

package/dist/nav/Breadcrumb.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">const {
-  items,
-  separator = "/",
-  contained,
-  fullWidth,
-  center
-} = $props();
-</script>
-
-<nav class:center class:contained class:fullWidth aria-label="Breadcrumb">
-    <ol>
-        {#each items as item, index}
-            <li aria-current={index === items.length - 1 ? "page" : undefined}>
-                {#if item.href && index < items.length - 1}
-                    <a href={item.href}>{item.label}</a>
-                {:else}
-                    <span>{item.label}</span>
-                {/if}
-            </li>
-            {#if index !== items.length - 1}
-                <li aria-hidden="true" class="separator">
-                    {#if typeof separator === "string"}
-                        <span>{separator}</span>
-                    {/if}
-                </li>
-            {/if}
-        {/each}
-    </ol>
-</nav>
-
-<style>
-    nav {
-        padding: 0;
-        block-size: auto;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        font-size: var(--font-size, 1em);
-    }
-
-    nav ol {
-        display: flex;
-        align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        gap: 0.5rem;
-        border-radius: var(--border-radius);
-    }
-
-    nav ol li {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        padding: 0;
-    }
-
-    .separator span {
-        font-size: 1rem;
-        line-height: 1rem;
-        color: var(--text-subtle);
-    }
-
-    nav.contained ol {
-        padding: 0 1rem;
-        border: var(--border);
-    }
-
-    nav.contained ol li a {
-        padding: var(--padding, 0.5rem 0);
-    }
-
-    nav.center {
-        justify-content: center;
-    }
-
-    nav.fullWidth ol {
-        block-size: 100%;
-    }
-
-</style>

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

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } 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;
-    }>);
-}
-export {};

package/dist/nav/Menu.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">import { BROWSER } from "esm-env";
-import MenuItem from "./MenuItem.svelte";
-import { isComponent } from "../utils/isSnippet.js";
-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 {
-  open = $bindable(false),
-  items,
-  trigger
-} = $props();
-let _open = $state(open);
-let triggerEl = $state(null);
-let contentEl = $state(null);
-let menuEl = $state(null);
-let currentIndex = $state(-1);
-let keyboardHasFocus = $state(false);
-const id = createId();
-$effect(() => {
-  if (_open) {
-    window.addEventListener("click", clickoutside);
-    window.addEventListener("keydown", onkeydown);
-  } else {
-    window.removeEventListener("click", clickoutside);
-    window.removeEventListener("keydown", onkeydown);
-  }
-});
-function toggle() {
-  _open = !_open;
-}
-let scrollable = $derived.by(() => {
-  if (!contentEl)
-    return false;
-  return contentEl.scrollHeight > contentEl.clientHeight;
-});
-function onclick(e) {
-  e.preventDefault();
-  _open = !_open;
-}
-function clickoutside(e) {
-  if (!_open)
-    return;
-  if (contentEl && !contentEl.contains(e.target) && !triggerEl?.contains(e.target)) {
-    _open = false;
-  }
-}
-function onkeydown(e) {
-  if (!_open)
-    return;
-  const active = document.activeElement;
-  switch (e.key) {
-    case "Escape":
-      e.preventDefault();
-      _open = false;
-      break;
-    case "Tab":
-      e.preventDefault();
-      e.stopPropagation();
-      _open = false;
-      setTimeout(() => {
-        const nextEl = getNextFocusableElement(menuEl, triggerEl, e.shiftKey ? "previous" : "next");
-        console.log("nextEl", nextEl);
-        if (nextEl) {
-          nextEl.focus();
-          if (nextEl.tagName === "BUTTON" || nextEl.tagName === "A" && nextEl.parentElement?.classList.contains("Trigger")) {
-            nextEl.click();
-          }
-        }
-      }, 0);
-      break;
-    case "ArrowDown":
-      e.preventDefault();
-      arrowNavigation(contentEl, "down");
-      matchOnType(contentEl, e);
-      keyboardHasFocus = true;
-      break;
-    case "ArrowUp":
-      e.preventDefault();
-      arrowNavigation(contentEl, "up");
-      matchOnType(contentEl, e);
-      keyboardHasFocus = true;
-      break;
-    case "Enter":
-    case "Space":
-      e.preventDefault();
-      active.click();
-      break;
-    default:
-      matchOnType(contentEl, e);
-  }
-}
-function mouseover(e, item, index) {
-  if (item.type === "item") {
-    currentIndex = index;
-  }
-}
-</script>
-
-
-<UiContent>
-    <div class="Menu" bind:this={menuEl}>
-        <div
-            class="Trigger"
-            bind:this={triggerEl}
-        >
-            {#if typeof trigger === "string" || isComponent(trigger)}
-                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
-                    <StringOrComponentOrSnippet content={trigger} />
-                </button>
-            {:else}
-                {@render trigger({ toggle: toggle, isOpen: _open })}
-            {/if}
-        </div>
-        {#if _open && triggerEl}
-            <Overlay position="anchor" id="o-{id}" anchor={triggerEl} layer="menu">
-                <div {id}
-                    class="MenuContent"
-                    class:scrollable={scrollable}
-                    role="menu"
-                    bind:this={contentEl}
-                >
-                    <ul>
-                        {#each items as item, index}
-                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} item={item} {index} />
-                        {/each}
-                    </ul>
-                </div>
-            </Overlay>
-        {/if}
-    </div>
-</UiContent>
-
-<style>
-    .Menu {
-        position: relative;
-    }
-
-    .Trigger {
-        position: relative;
-        display: inline-flex;
-    }
-
-    .MenuContent {
-        max-height: calc(50vh - 2rem);
-        margin: 0;
-        z-index: 1000;
-        margin: 0;
-        border: var(--menu-border);
-        border-radius: var(--border-radius);
-        box-shadow: 0 0.5rem 1rem var(--shadow);
-        background-color: var(--menu-bg);
-        width: var(--width, 25ch);
-        overflow-x: clip;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: var(--scrollbar-color);
-    }
-    
-    .MenuContent.scrollable {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .MenuContent:has(li:last-of-type[data-type="item"]) {
-        padding-block-end: 0.5rem;
-    }
-
-    ul {
-        margin: 0;
-        list-style: none;
-        padding: 0;
-    }
-</style>

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

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType, 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\"";
-        });
-    }>);
-}
-export {};

package/dist/nav/MenuItem.svelte

@@ -1,140 +0,0 @@
-<script lang="ts">import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
-import { isStatusColor } from "../utils/color.js";
-import { isComponent, isSnippet } from "../utils/isSnippet.js";
-let {
-  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>
-
-<!-- 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'}
-        <div class="Header">
-            <StringOrComponentOrSnippet 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} />
-                </span>
-                {#if item.shortcut}
-                    <span class="Shortcut">{item.shortcut}</span>
-                {/if}
-            </a>
-        {: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} />
-                </span>
-                {#if item.shortcut}
-                    <span class="Shortcut">{item.shortcut}</span>
-                {/if}
-            </button>
-        {:else if isSnippet(item.content)}
-            <div class="Item Custom">
-                {@render item.content()}
-            </div>
-        {:else if isComponent(item.content)}
-            <div class="Item Custom">
-                <svelte:component this={item.content} />
-            </div>
-        {/if}
-    {/if}
-</li>
-
-<style>
-    li {
-        margin: 0;
-        list-style: none;
-        padding: 0;
-        user-select: none;
-    }
-
-    li .Item,
-    li .Header {
-        font-size: 1em;
-        text-align: left;
-        padding-block: 0.5rem;
-        padding-inline: 1rem;
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        color: inherit;
-        text-decoration: none;
-        color: var(--color);
-        --inset-block: 0.5rem;
-        --inset-inline: 1rem;
-    }
-
-    li .Header {
-        font-weight: 600;
-    }
-
-    li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
-    li .Item:not(.Custom):focus-visible {
-        background-color: var(--menu-bg-hover);
-        cursor: pointer;
-        outline: none;
-    }
-
-    li .Item span.Shortcut {
-        font-size: max(0.75em, 9px);
-        text-align: right;
-        color: var(--text-subtle);
-    }
-
-    li .Item:not(.Custom):active {
-        scale: 1;
-    }
-
-    li.divider {
-        padding-block: 0.5rem;
-    }
-
-    hr {
-        display: block;
-        border: none;
-        margin: 0;
-        border-top: 1px solid var(--border-color);
-    }
-
-    li:first-child[data-type="item"] {
-        margin-block-start: var(--menu-item-margin, 0.5rem);
-    }
-
-    li:first-child[data-type="header"]:has(+ li[data-type="item"]) {
-        margin-block-end: 0.125rem;
-    }
-
-    li:nth-last-child(2)[data-type="item"]:has(+ li[data-type="header"]:last-child) {
-        margin-block-end: 0.5rem;
-    }
-
-    @media (pointer: none) {
-        li .Item span.Shortcut {
-            display: none;
-        }        
-    }
-</style>

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

@@ -1,26 +0,0 @@
-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;
-    }>);
-}
-export {};

package/dist/nav/MenuTypes.d.ts

@@ -1,58 +0,0 @@
-import type { StatusColorOrString } from "../utils/color.js";
-import type { ComponentType, Snippet } from "svelte";
-export type MenuItem = {
-    /** Type of menu item to render. */
-    type: 'divider';
-} | {
-    /** Type of menu item to render. */
-    type: 'header';
-    /** Text label of the item to display to the user. */
-    content: string | ComponentType | 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;
-    /** 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;
-    /** Path or URL to use for the menu item. */
-    href?: string;
-    /** Click event handler. */
-    onclick?: (event: MouseEvent, item: MenuItem) => void;
-    /** If true, disables the item. */
-    disabled?: boolean;
-    /** Color to use for the item. */
-    color?: StatusColorOrString;
-    /** Menu item children. Pass an array of menu items to create a nested menu. */
-    children?: MenuItem[];
-};
-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;
-    /** Click event handler. */
-    onclick?: (event: MouseEvent, item: TabItem, index: number) => void;
-    /** If true, overrides the currently selected item. */
-    active?: boolean;
-};
-export type TabbedContentItem = {
-    /** Text label of the item to display to the user. */
-    label: string;
-    /** URL hash to use for the item. */
-    hash?: string;
-    /** Content to display when the item is selected. */
-    content: Snippet;
-};
-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;
-    /** Path or URL to use for the breadcrumb item. */
-    href?: string;
-};

package/dist/nav/MenuTypes.js

@@ -1 +0,0 @@
-export {};