@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/menuList/MenuList.svelte

@@ -0,0 +1,514 @@
+<script lang="ts" generics="T= Data">import { navigation } from "../../utils/uses/navigation.js";
+import { setContext } from "svelte";
+import MenuListItem from "./MenuListItem.svelte";
+import { tallPreset, widthPreset } from "../../types/index.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import Looper from "../../utils/looper/Looper.svelte";
+export const actions = {
+  navigate(e) {
+    element?.dispatchEvent(new CustomEvent("menu:navigate", { detail: e }));
+  },
+  gotoIndex: (idx) => {
+    if (element && idx > -1) {
+      element.dispatchEvent(new CustomEvent("menu:gotoIndex", { detail: { index: idx } }));
+      selectedIndex = idx;
+      if (menuStore) menuStore.selectedIndex = idx;
+      const target = element.querySelector("[aria-selected=true]");
+      if (target) {
+        scrollToElement(target);
+      }
+    }
+  }
+};
+let {
+  class: className = "",
+  tall = tallPreset.small,
+  width = widthPreset.full,
+  style,
+  selectorField,
+  role = "menu",
+  grid,
+  showLastOnSelected = true,
+  presentationField,
+  onclick,
+  data = $bindable(),
+  selectedData = $bindable(),
+  selectedIndex = $bindable(),
+  element = $bindable(),
+  menuListItems = $bindable(),
+  menuListItemProps = $bindable(),
+  children,
+  menuListItem,
+  listItemBottom,
+  ...rest
+} = $props();
+menuListItemProps = {
+  tall,
+  width,
+  selectorField,
+  presentationField,
+  ...menuListItemProps
+};
+let defaultStoreValues = {
+  menuListItems,
+  menuItemsInstances: [],
+  tall,
+  width,
+  data,
+  selectorField,
+  selectedIndex,
+  actions,
+  presentationField,
+  ...menuListItemProps
+};
+let menuStore = $state(defaultStoreValues);
+setContext("menuStateContext", menuStore);
+$effect(() => {
+  menuStore.selectedIndex = selectedIndex;
+});
+$effect(() => {
+  menuStore.tall = tall;
+});
+$effect(() => {
+  if (element) {
+    element.addEventListener("menu:item:clicked", onMenuItemClick);
+    element.addEventListener("click", () => {
+      element?.focus();
+    });
+    element.addEventListener("menu:onnavigate", (event) => {
+      if (event?.detail?.selectedIndex) selectedIndex = event.detail.selectedIndex;
+    });
+  }
+});
+function onMenuItemClick(e) {
+  if (onclick) onclick(e.detail, 2);
+}
+function scrollToElement(target) {
+  if (target) {
+    const tD = target.getBoundingClientRect();
+    const sD = element?.getBoundingClientRect();
+    if (sD) {
+      if (tD.top - 10 <= sD.top || tD.bottom >= sD.bottom) {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }
+}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<ul
+	bind:this={element}
+	class="menu-list {className} {grid ? 'grid' : ''}"
+	class:showLastOnSelected
+	tabindex="0"
+	style={`${style};var(--menu-list-grid-items-count):${grid ? grid : '0'}`}
+	{role}
+	use:navigation={{ className: 'menu-list-item', selectedIndex: -1 }}
+	{...rest}
+>
+	{#if menuListItems}
+		{#each menuListItems ?? [] as menuItem, itemIndex}
+			<Slotted child={children} slotArgs={{ item: menuItem, itemIndex, menuItem }}>
+				<MenuListItem {...menuListItemProps} {...menuItem} {itemIndex} />
+			</Slotted>
+		{/each}
+	{:else if data}
+		{#each data as dta, itemIndex}
+			<Slotted child={children} slotArgs={{ item: dta, itemIndex, menuItem: dta }}>
+				<MenuListItem {...menuListItemProps} data={dta} {itemIndex}>
+					{@render menuListItem?.({ item: dta, itemIndex })}
+				</MenuListItem>
+			</Slotted>
+		{/each}
+	{:else}
+		<Slotted child={children} />
+	{/if}
+	{@render listItemBottom?.({ item: {}, itemIndex: -1 })}
+</ul>
+
+<style global>:root {
+  --menu-list-padding: var(--sld-pad-tiny);
+  --menu-list-item-padding: 0;
+  --menu-list-item-radius: var(--sld-radius-small);
+  --menu-list-item-selected-background: var(--sld-selected-background-color);
+  --menu-list-item-action-display: flex;
+  --menu-list-item-action-justify-content: center;
+  --menu-list-grid-items-count: 0;
+}
+
+:global(.menu-list) {
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  padding: var(--menu-list-padding);
+}
+
+:global(.menu-list).grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
+}
+
+:global(.menu-list) li.menu-list-title,
+:global(.menu-list) a.menu-list-title {
+  font-weight: bold;
+}
+
+:global(.menu-list) .menu-list-item,
+:global(.menu-list) a.menu-list-item,
+:global(.menu-list) li.menu-list-item {
+  border: 1px solid red;
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  --preset-gutter: var(--sld-gutter-default);
+  text-decoration: none;
+  overflow: hidden;
+  padding-left: calc(var(--preset-tall) / 4);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--menu-list-item-radius);
+  align-self: flex-start;
+}
+
+:global(.menu-list) .menu-list-item[variant*=square], :global(.menu-list) .menu-list-item[square=true], :global(.menu-list) .menu-list-item.square,
+:global(.menu-list) a.menu-list-item[variant*=square],
+:global(.menu-list) a.menu-list-item[square=true],
+:global(.menu-list) a.menu-list-item.square,
+:global(.menu-list) li.menu-list-item[variant*=square],
+:global(.menu-list) li.menu-list-item[square=true],
+:global(.menu-list) li.menu-list-item.square {
+  aspect-ratio: 1/1 !important;
+  height: auto;
+}
+
+:global(.menu-list) .menu-list-item[variant*=rounded], :global(.menu-list) .menu-list-item[rounded=true], :global(.menu-list) .menu-list-item.rounded,
+:global(.menu-list) a.menu-list-item[variant*=rounded],
+:global(.menu-list) a.menu-list-item[rounded=true],
+:global(.menu-list) a.menu-list-item.rounded,
+:global(.menu-list) li.menu-list-item[variant*=rounded],
+:global(.menu-list) li.menu-list-item[rounded=true],
+:global(.menu-list) li.menu-list-item.rounded {
+  border-radius: 50%;
+}
+
+:global(.menu-list) .menu-list-item,
+:global(.menu-list) a.menu-list-item,
+:global(.menu-list) li.menu-list-item {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  min-width: var(--preset-width-small);
+}
+
+:global(.menu-list) .menu-list-item[width=tiny], :global(.menu-list) .menu-list-item.width-tiny,
+:global(.menu-list) a.menu-list-item[width=tiny],
+:global(.menu-list) a.menu-list-item.width-tiny,
+:global(.menu-list) li.menu-list-item[width=tiny],
+:global(.menu-list) li.menu-list-item.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=mini], :global(.menu-list) .menu-list-item.width-mini,
+:global(.menu-list) a.menu-list-item[width=mini],
+:global(.menu-list) a.menu-list-item.width-mini,
+:global(.menu-list) li.menu-list-item[width=mini],
+:global(.menu-list) li.menu-list-item.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=small], :global(.menu-list) .menu-list-item.width-small,
+:global(.menu-list) a.menu-list-item[width=small],
+:global(.menu-list) a.menu-list-item.width-small,
+:global(.menu-list) li.menu-list-item[width=small],
+:global(.menu-list) li.menu-list-item.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=med], :global(.menu-list) .menu-list-item.width-med,
+:global(.menu-list) a.menu-list-item[width=med],
+:global(.menu-list) a.menu-list-item.width-med,
+:global(.menu-list) li.menu-list-item[width=med],
+:global(.menu-list) li.menu-list-item.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=kind], :global(.menu-list) .menu-list-item.width-kind,
+:global(.menu-list) a.menu-list-item[width=kind],
+:global(.menu-list) a.menu-list-item.width-kind,
+:global(.menu-list) li.menu-list-item[width=kind],
+:global(.menu-list) li.menu-list-item.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=full], :global(.menu-list) .menu-list-item.width-full,
+:global(.menu-list) a.menu-list-item[width=full],
+:global(.menu-list) a.menu-list-item.width-full,
+:global(.menu-list) li.menu-list-item[width=full],
+:global(.menu-list) li.menu-list-item.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=auto], :global(.menu-list) .menu-list-item.width-auto,
+:global(.menu-list) a.menu-list-item[width=auto],
+:global(.menu-list) a.menu-list-item.width-auto,
+:global(.menu-list) li.menu-list-item[width=auto],
+:global(.menu-list) li.menu-list-item.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+
+:global(.menu-list) .menu-list-item[width=default], :global(.menu-list) .menu-list-item.width-default,
+:global(.menu-list) a.menu-list-item[width=default],
+:global(.menu-list) a.menu-list-item.width-default,
+:global(.menu-list) li.menu-list-item[width=default],
+:global(.menu-list) li.menu-list-item.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+
+:global(.menu-list) .menu-list-item,
+:global(.menu-list) a.menu-list-item,
+:global(.menu-list) li.menu-list-item {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+:global(.menu-list) .menu-list-item[tall=tiny], :global(.menu-list) .menu-list-item.tall-tiny,
+:global(.menu-list) a.menu-list-item[tall=tiny],
+:global(.menu-list) a.menu-list-item.tall-tiny,
+:global(.menu-list) li.menu-list-item[tall=tiny],
+:global(.menu-list) li.menu-list-item.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=mini], :global(.menu-list) .menu-list-item.tall-mini,
+:global(.menu-list) a.menu-list-item[tall=mini],
+:global(.menu-list) a.menu-list-item.tall-mini,
+:global(.menu-list) li.menu-list-item[tall=mini],
+:global(.menu-list) li.menu-list-item.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=small], :global(.menu-list) .menu-list-item.tall-small,
+:global(.menu-list) a.menu-list-item[tall=small],
+:global(.menu-list) a.menu-list-item.tall-small,
+:global(.menu-list) li.menu-list-item[tall=small],
+:global(.menu-list) li.menu-list-item.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=med], :global(.menu-list) .menu-list-item.tall-med,
+:global(.menu-list) a.menu-list-item[tall=med],
+:global(.menu-list) a.menu-list-item.tall-med,
+:global(.menu-list) li.menu-list-item[tall=med],
+:global(.menu-list) li.menu-list-item.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=kind], :global(.menu-list) .menu-list-item.tall-kind,
+:global(.menu-list) a.menu-list-item[tall=kind],
+:global(.menu-list) a.menu-list-item.tall-kind,
+:global(.menu-list) li.menu-list-item[tall=kind],
+:global(.menu-list) li.menu-list-item.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=auto], :global(.menu-list) .menu-list-item.tall-auto,
+:global(.menu-list) a.menu-list-item[tall=auto],
+:global(.menu-list) a.menu-list-item.tall-auto,
+:global(.menu-list) li.menu-list-item[tall=auto],
+:global(.menu-list) li.menu-list-item.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+:global(.menu-list) .menu-list-item[tall=default], :global(.menu-list) .menu-list-item.tall-default,
+:global(.menu-list) a.menu-list-item[tall=default],
+:global(.menu-list) a.menu-list-item.tall-default,
+:global(.menu-list) li.menu-list-item[tall=default],
+:global(.menu-list) li.menu-list-item.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="tiny"]), :global(.menu-list) .menu-list-item :global(.gutter-tiny),
+:global(.menu-list) a.menu-list-item :global([gutter="tiny"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-tiny),
+:global(.menu-list) li.menu-list-item :global([gutter="tiny"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-tiny) {
+  padding: var(--sld-gutter-tiny);
+  gap: var(--sld-gutter-tiny);
+  --preset-gutter: var(--sld-gutter-tiny);
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="mini"]), :global(.menu-list) .menu-list-item :global(.gutter-mini),
+:global(.menu-list) a.menu-list-item :global([gutter="mini"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-mini),
+:global(.menu-list) li.menu-list-item :global([gutter="mini"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-mini) {
+  padding: var(--sld-gutter-mini);
+  gap: var(--sld-gutter-mini);
+  --preset-gutter: var(--sld-gutter-mini);
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="small"]), :global(.menu-list) .menu-list-item :global(.gutter-small),
+:global(.menu-list) a.menu-list-item :global([gutter="small"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-small),
+:global(.menu-list) li.menu-list-item :global([gutter="small"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-small) {
+  padding: var(--sld-gutter-small);
+  gap: var(--sld-gutter-small);
+  --preset-gutter: var(--sld-gutter-small);
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="med"]), :global(.menu-list) .menu-list-item :global(.gutter-med),
+:global(.menu-list) a.menu-list-item :global([gutter="med"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-med),
+:global(.menu-list) li.menu-list-item :global([gutter="med"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-med) {
+  padding: var(--sld-gutter-med);
+  gap: var(--sld-gutter-med);
+  --preset-gutter: var(--sld-gutter-med);
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="kind"]), :global(.menu-list) .menu-list-item :global(.gutter-kind),
+:global(.menu-list) a.menu-list-item :global([gutter="kind"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-kind),
+:global(.menu-list) li.menu-list-item :global([gutter="kind"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-kind) {
+  padding: var(--sld-gutter-kind);
+  gap: var(--sld-gutter-kind);
+  --preset-gutter: var(--sld-gutter-kind);
+}
+
+:global(.menu-list) .menu-list-item :global([gutter="default"]), :global(.menu-list) .menu-list-item :global(.gutter-default),
+:global(.menu-list) a.menu-list-item :global([gutter="default"]),
+:global(.menu-list) a.menu-list-item :global(.gutter-default),
+:global(.menu-list) li.menu-list-item :global([gutter="default"]),
+:global(.menu-list) li.menu-list-item :global(.gutter-default) {
+  padding: var(--sld-gutter-default);
+  gap: var(--sld-gutter-default);
+  --preset-gutter: var(--sld-gutter-default);
+}
+
+:global(.menu-list) .menu-list-item:hover,
+:global(.menu-list) a.menu-list-item:hover,
+:global(.menu-list) li.menu-list-item:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+
+:global(.menu-list) .menu-list-item.selected, :global(.menu-list) .menu-list-item[aria-selected=true], :global(.menu-list) .menu-list-item[data-selected=true],
+:global(.menu-list) a.menu-list-item.selected,
+:global(.menu-list) a.menu-list-item[aria-selected=true],
+:global(.menu-list) a.menu-list-item[data-selected=true],
+:global(.menu-list) li.menu-list-item.selected,
+:global(.menu-list) li.menu-list-item[aria-selected=true],
+:global(.menu-list) li.menu-list-item[data-selected=true] {
+  border-color: none;
+  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+  box-shadow: var(--sld-selected-shadow);
+}
+
+:global(.menu-list) .menu-list-item.selected .listItemChip,
+:global(.menu-list) .menu-list-item.selected .menuItemChip, :global(.menu-list) .menu-list-item[aria-selected=true] .listItemChip,
+:global(.menu-list) .menu-list-item[aria-selected=true] .menuItemChip, :global(.menu-list) .menu-list-item[data-selected=true] .listItemChip,
+:global(.menu-list) .menu-list-item[data-selected=true] .menuItemChip,
+:global(.menu-list) a.menu-list-item.selected .listItemChip,
+:global(.menu-list) a.menu-list-item.selected .menuItemChip,
+:global(.menu-list) a.menu-list-item[aria-selected=true] .listItemChip,
+:global(.menu-list) a.menu-list-item[aria-selected=true] .menuItemChip,
+:global(.menu-list) a.menu-list-item[data-selected=true] .listItemChip,
+:global(.menu-list) a.menu-list-item[data-selected=true] .menuItemChip,
+:global(.menu-list) li.menu-list-item.selected .listItemChip,
+:global(.menu-list) li.menu-list-item.selected .menuItemChip,
+:global(.menu-list) li.menu-list-item[aria-selected=true] .listItemChip,
+:global(.menu-list) li.menu-list-item[aria-selected=true] .menuItemChip,
+:global(.menu-list) li.menu-list-item[data-selected=true] .listItemChip,
+:global(.menu-list) li.menu-list-item[data-selected=true] .menuItemChip {
+  position: absolute;
+  min-height: 16px;
+  height: 50%;
+  width: 3px;
+  background-color: var(--sld-color-primary);
+  border-radius: var(--sld-radius-med);
+  left: 0;
+  border: 1px solid var(--sld-color-primary-alpha-mid);
+}
+
+:global(.menu-list) .menu-list-item::before,
+:global(.menu-list) a.menu-list-item::before,
+:global(.menu-list) li.menu-list-item::before {
+  position: absolute;
+  min-height: 16px;
+  height: 45%;
+  width: 2px;
+  overflow: hidden;
+  max-width: 3px;
+  background-color: transparent;
+  border-radius: var(--sld-radius-med);
+  left: 0px;
+  border: 1px solid transparent;
+  content: " ";
+}
+
+:global(.menu-list) .menu-list-item .menu-list-item-icon,
+:global(.menu-list) a.menu-list-item .menu-list-item-icon,
+:global(.menu-list) li.menu-list-item .menu-list-item-icon {
+  width: 16px;
+  max-width: 16px;
+  text-align: center;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding: 0 0.2rem;
+}
+
+:global(.menu-list) .menu-list-item .menu-list-item-text,
+:global(.menu-list) a.menu-list-item .menu-list-item-text,
+:global(.menu-list) li.menu-list-item .menu-list-item-text {
+  flex: 1;
+}
+
+:global(.menu-list) .menu-list-item .menu-list-item-text.wrap,
+:global(.menu-list) a.menu-list-item .menu-list-item-text.wrap,
+:global(.menu-list) li.menu-list-item .menu-list-item-text.wrap {
+  text-wrap: ellipsis;
+  white-space: normal;
+  overflow: hidden;
+}
+
+:global(.menu-list) .menu-list-item .menu-list-item-action,
+:global(.menu-list) a.menu-list-item .menu-list-item-action,
+:global(.menu-list) li.menu-list-item .menu-list-item-action {
+  display: var(--menu-list-item-action-display);
+  justify-content: var(--menu-list-item-action-justify-content);
+}
+
+:global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[data-selected="true"] .menu-list-item-action) {
+  visibility: visible;
+}
+
+:global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
+  visibility: visible;
+}
+
+:global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
+  visibility: hidden;
+}
+
+:global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
+  visibility: hidden;
+}</style>

package/dist/ui/menuList/MenuList.svelte.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponent } from "svelte";
+import { type Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): import("../../types/index.js").CommonProps & {
+        menuItemsInstances?: any[];
+        hasIcon?: boolean;
+        onclick?: ((event: CustomEvent<Data>, itemIndex: number) => void) | undefined;
+        element?: HTMLElement;
+        menuListItems?: import("./types.js").MenuListItemProps[];
+        data?: Data[] | undefined;
+        tall?: import("../../types/index.js").ElementProps["tall"];
+        width?: import("../../types/index.js").ElementProps["width"];
+        presentationField?: [string] | undefined;
+        grid?: boolean | number;
+        selectedIndex?: number;
+        selectorField?: string | undefined;
+        selectedData?: Data | undefined;
+        showLastOnSelected?: boolean;
+        role?: "directory" | "group" | "listbox" | "menu" | "menubar" | "tablist" | "toolbar" | "tree";
+        actions?: {
+            navigate: (e: KeyboardEvent) => void;
+            gotoIndex: (idx: number) => void;
+        };
+        menuListItemProps?: import("./types.js").MenuListItemProps<Data> | undefined;
+        menuList?: import("./types.js").MenuListItemProps[];
+        children?: import("svelte").Snippet<[{
+            item: Data;
+            itemIndex: number;
+        }]>;
+        menuListItem?: import("svelte").Snippet<[{
+            item: Data;
+            itemIndex: number;
+        }]>;
+        listItemBottom?: import("svelte").Snippet<[{
+            item: Data;
+            itemIndex: number;
+        }]>;
+    } & {
+        actions?: {
+            navigate(e: KeyboardEvent): void;
+            gotoIndex: (idx: number) => void;
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type MenuListProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type MenuListEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type MenuListSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class MenuList<T = Data> extends SvelteComponent<MenuListProps_<T>, MenuListEvents<T>, MenuListSlots<T>> {
+    get actions(): {
+        navigate: (e: KeyboardEvent) => void;
+        gotoIndex: (idx: number) => void;
+    } & {
+        navigate(e: KeyboardEvent): void;
+        gotoIndex: (idx: number) => void;
+    };
+}
+export {};