lutra 0.0.33 → 0.1.4

package/dist/layout/Theme.svelte

@@ -1,243 +0,0 @@
-<script lang="ts">import { browser } from "$app/environment";
-import { getContext, setContext } from "svelte";
-let {
-  theme,
-  children
-} = $props();
-const root = getContext("theme") === void 0;
-if (theme === "invert") {
-  const previousTheme = getContext("theme") || "light";
-  theme = previousTheme === "light" ? "dark" : "light";
-} else {
-  theme = theme || (browser ? localStorage.getItem("theme") || window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
-}
-const isNotRoot = getContext("theme");
-setContext("theme", theme);
-</script>
-
-<!--
-<svelte:body class="{!isNotRoot ? 'theme-'+theme : ''}" />
--->
-
-<svelte:head>
-    {#if !isNotRoot}
-        <meta name="theme-color" content="{theme === 'dark' ? '#000' : '#fff'}" />
-    {/if}
-</svelte:head>
-
-<span class="Theme {theme ? theme : ''}" class:root>
-    {@render children()}
-</span>
-
-<style>
-    .Theme {
-        display: contents;
-    }
-    .Theme.light :global(:root) {
-        --scrollbar-color: var(--l-scrollbar-color);
-    }
-    .Theme.dark :global(:root) {
-        --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);
-        /* border */
-        --border-color: var(--l-border-color);
-        --border-subtle-color: var(--l-border-subtle-color);
-        --focus-color: var(--l-focus-color);
-        --focus-color-error: var(--l-focus-color-error);
-        --border: var(--l-border);
-        --border-subtle: var(--l-border-subtle);
-        --focus-outline: var(--l-focus-outline);
-        /* 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);
-        --text-warn: var(--l-text-warn);
-        --text-icon: var(--l-text-icon);
-        --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);
-        --field-border: var(--l-field-border);
-        --field-text: var(--l-field-text);
-        --field-placeholder: var(--l-field-placeholder);
-        --field-label: var(--l-field-label);
-        /* toggle */
-        --toggle-on: var(--l-toggle-on);
-        --toggle-off: var(--l-toggle-off);
-        /* buttons */
-        --button-bg: var(--l-button-bg);
-        --button-text: var(--l-button-text);
-        --button-border-color: var(--l-button-border-color);
-        --button-border: var(--l-button-border);
-        /* buttons: secondary */
-        --button-secondary-bg: var(--l-button-secondary-bg);
-        --button-secondary-text: var(--l-button-secondary-text);
-        --button-secondary-border-color: var(--l-button-secondary-border-color);
-        --button-secondary-border: var(--l-button-secondary-border);
-        /* buttons: disabled */
-        --button-disabled-bg: var(--l-button-disabled-bg);
-        --button-disabled-text: var(--l-button-disabled-text);
-        --button-disabled-border-color: var(--l-button-disabled-border-color);
-        --button-disabled-border: var(--l-button-disabled-border);
-        /* buttons: outlined */
-        --button-outlined-text: var(--l-button-outlined-text);
-        --button-outlined-border-color: var(--l-button-outlined-border-color);
-        --button-outlined-border: var(--l-button-outlined-border);
-        /* buttons: warn */
-        --button-warn-bg: var(--l-button-warn-bg);
-        --button-warn-text: var(--l-button-warn-text);
-        --button-warn-border-color: var(--l-button-warn-border-color);
-        --button-warn-border: var(--l-button-warn-border);
-        /* warn */
-        --warn-bg: var(--l-warn-bg);
-        --warn-border: var(--l-warn-border);
-        --warn-text: var(--l-warn-text);
-        /* success */
-        --success-bg: var(--l-success-bg);
-        --success-border: var(--l-success-border);
-        --success-text: var(--l-success-text);
-        /* error */
-        --error-bg: var(--l-error-bg);
-        --error-border: var(--l-error-border);
-        --error-text: var(--l-error-text);
-        /* info */
-        --info-bg: var(--l-info-bg);
-        --info-border: var(--l-info-border);
-        --info-text: var(--l-info-text);
-        /* menu */
-        --menu-bg: var(--l-menu-bg);
-        --menu-bg-active: var(--l-menu-bg-active);
-        --menu-bg-hover: var(--l-menu-bg-hover);
-        --menu-border: var(--l-menu-border);
-        --menu-text-subtle: var(--l-menu-text-subtle);
-        --menu-text-active: var(--l-menu-text-active);
-        /* status */
-        --status-default: var(--l-status-default);
-        --status-ok: var(--l-status-ok);
-        --status-alert: var(--l-status-alert);
-        --status-warn: var(--l-status-warn);
-        --status-info: var(--l-status-info);
-        --status-task: var(--l-status-task);
-        --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 */
-        --border-color: var(--d-border-color);
-        --border-subtle-color: var(--d-border-subtle-color);
-        --focus-color: var(--d-focus-color);
-        --focus-color-error: var(--d-focus-color-error);
-        --border: var(--d-border);
-        --border-subtle: var(--d-border-subtle);
-        --focus-outline: var(--d-focus-outline);
-        /* 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);
-        --text-link-hover: var(--d-text-link-hover);
-        --text-warn: var(--d-text-warn);
-        --text-icon: var(--d-text-icon);
-        --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);
-        --field-border: var(--d-field-border);
-        --field-text: var(--d-field-text);
-        --field-placeholder: var(--d-field-placeholder);
-        --field-label: var(--d-field-label);
-        /* toggle */
-        --toggle-on: var(--d-toggle-on);
-        --toggle-on-hover: var(--d-toggle-on-hover);
-        --toggle-off: var(--d-toggle-off);
-        --toggle-off-hover: var(--d-toggle-off-hover);
-        /* buttons */
-        --button-bg: var(--d-button-bg);
-        --button-text: var(--d-button-text);
-        --button-border-color: var(--d-button-border-color);
-        --button-border: var(--d-button-border);
-        /* buttons: secondary */
-        --button-secondary-bg: var(--d-button-secondary-bg);
-        --button-secondary-text: var(--d-button-secondary-text);
-        --button-secondary-border-color: var(--d-button-secondary-border-color);
-        --button-secondary-border: var(--d-button-secondary-border);
-        /* buttons: disabled */
-        --button-disabled-bg: var(--d-button-disabled-bg);
-        --button-disabled-text: var(--d-button-disabled-text);
-        --button-disabled-border-color: var(--d-button-disabled-border-color);
-        --button-disabled-border: var(--d-button-disabled-border);
-        /* buttons: outlined */
-        --button-outlined-text: var(--d-button-outlined-text);
-        --button-outlined-border-color: var(--d-button-outlined-border-color);
-        --button-outlined-border: var(--d-button-outlined-border);
-        /* buttons: warn */
-        --button-warn-bg: var(--d-button-warn-bg);
-        --button-warn-text: var(--d-button-warn-text);
-        --button-warn-border-color: var(--d-button-warn-border-color);
-        --button-warn-border: var(--d-button-warn-border);
-        /* warn */
-        --warn-bg: var(--d-warn-bg);
-        --warn-border: var(--d-warn-border);
-        --warn-text: var(--d-warn-text);
-        /* success */
-        --success-bg: var(--d-success-bg);
-        --success-border: var(--d-success-border);
-        --success-text: var(--d-success-text);
-        /* error */
-        --error-bg: var(--d-error-bg);
-        --error-border: var(--d-error-border);
-        --error-text: var(--d-error-text);
-        /* info */
-        --info-bg: var(--d-info-bg);
-        --info-border: var(--d-info-border);
-        --info-text: var(--d-info-text);
-        /* menu */
-        --menu-bg: var(--d-menu-bg);
-        --menu-bg-active: var(--d-menu-bg-active);
-        --menu-border: var(--d-menu-border);
-        --menu-text: var(--d-menu-text);
-        --menu-text-subtle: var(--d-menu-text-subtle);
-        --menu-text-active: var(--d-menu-text-active);
-        /* status */
-        --status-default: var(--d-status-default);
-        --status-ok: var(--d-status-ok);
-        --status-alert: var(--d-status-alert);
-        --status-warn: var(--d-status-warn);
-        --status-info: var(--d-status-info);
-        --status-task: var(--d-status-task);
-        --scrollbar-color: var(--d-scrollbar-color);
-    }
-</style>

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

@@ -1,19 +0,0 @@
-import { type Snippet } 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;
-}
-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

@@ -1,15 +0,0 @@
-<script lang="ts">let {
-  children
-} = $props();
-</script>
-
-<div class="UIContent">
-    {@render children()}
-</div>
-
-<style>
-    .UIContent {
-        display: contents;
-        --isPage: 0;
-    }
-</style>

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

@@ -1,18 +0,0 @@
-import type { Snippet } 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;
-}
-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,11 +0,0 @@
-export { default as Layout } from './Layout.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,11 +0,0 @@
-export { default as Layout } from './Layout.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/nav/Breadcrumb.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">let {
-  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,28 +0,0 @@
-import type { Component, Snippet } from "svelte";
-import type { BreadcrumbItem } from "./MenuTypes.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;
-}
-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,170 +0,0 @@
-<script lang="ts">import MenuItem from "./MenuItem.svelte";
-import { createId } from "../utils/id.js";
-import UiContent from "../layout/UIContent.svelte";
-import { arrowNavigation, getNextFocusableElement, matchOnType } from "../utils/keyboard.svelte.js";
-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"}
-                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
-                    {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,27 +0,0 @@
-import type { Snippet } from "svelte";
-import type { MenuItem as Item } from "./MenuTypes.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;
-}
-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.d.ts

@@ -1,22 +0,0 @@
-import type { MenuItem as Item } from "./MenuTypes.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;
-}
-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;