@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/menuList/MenuListTitle.svelte

@@ -0,0 +1,391 @@
+<script lang="ts">import MenuListItem from "./MenuListItem.svelte";
+let { class: className, ...rest } = $props();
+</script>
+
+<MenuListItem {...rest} selectable={false} class="menu-list-title {className}" />
+
+<style>: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/MenuListTitle.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { MenuListItemProps } from './types.js';
+declare const __propDef: {
+    props: MenuListItemProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuListTitleProps = typeof __propDef.props;
+export type MenuListTitleEvents = typeof __propDef.events;
+export type MenuListTitleSlots = typeof __propDef.slots;
+export default class MenuListTitle extends SvelteComponent<MenuListTitleProps, MenuListTitleEvents, MenuListTitleSlots> {
+}
+export {};

package/dist/ui/menuList/menu-list.scss

@@ -0,0 +1,118 @@
+@import "../../styles/slotui-mixins.scss";
+
+: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);
+
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr)
+    );
+  }
+
+  li,
+  a {
+    &.menu-list-title {
+      font-weight: bold;
+    }
+  }
+
+  .menu-list-item,
+  a.menu-list-item,
+  li.menu-list-item {
+    border: 1px solid red;
+    @include ui-variants;
+    @include ui-width-presets;
+    @include ui-tall-presets;
+    @include ui-gutter-presets;
+    @include data-hover;
+    @include data-selected;
+    //
+
+    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;
+
+    &::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: " ";
+    }
+
+    .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;
+    }
+
+    .menu-list-item-text {
+      flex: 1;
+      &.wrap {
+        text-wrap: ellipsis;
+        white-space: normal;
+        overflow: hidden;
+      }
+    }
+
+    .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(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
+    visibility: visible;
+  }
+  :global(li.menu-list-item .menu-list-item-action) {
+    visibility: hidden;
+  }
+  :global(a.menu-list-item .menu-list-item-action) {
+    visibility: hidden;
+  }
+}

package/dist/ui/menuList/types.d.ts

@@ -0,0 +1,112 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, Data, IconObj } from '../../types/index.js';
+import type { ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+/**
+ * Represents the props for the Menu component.
+ *
+ * @template T - The type of data for the menu items.
+ */
+export type MenuListProps<T = Data> = CommonProps & {
+    menuItemsInstances?: any[];
+    hasIcon?: boolean;
+    onclick?: (event: CustomEvent<T>, itemIndex: number) => void;
+    element?: HTMLElement;
+    menuListItems?: MenuListItemProps[];
+    data?: T[];
+    tall?: ElementProps['tall'];
+    width?: ElementProps['width'];
+    /**  displayed field for the listItem  */
+    presentationField?: [keyof T];
+    /** displayed as a grid */
+    grid?: boolean | number;
+    /** index to select the item */
+    selectedIndex?: number;
+    /**  field used to  select the item */
+    selectorField?: keyof T;
+    /**  selected data */
+    selectedData?: T;
+    /**  show last item on selected */
+    showLastOnSelected?: boolean;
+    /** role  available for li element */
+    role?: 'directory' | 'group' | 'listbox' | 'menu' | 'menubar' | 'tablist' | 'toolbar' | 'tree';
+    /**  actions to be performed on the menu */
+    actions?: {
+        navigate: (e: KeyboardEvent) => void;
+        gotoIndex: (idx: number) => void;
+    };
+    menuListItemProps?: MenuListItemProps<T>;
+    /** @deprecated use menuItemsList */
+    menuList?: MenuListItemProps[];
+    children?: Snippet<[{
+        item: Data;
+        itemIndex: number;
+    }]>;
+    menuListItem?: Snippet<[{
+        item: Data;
+        itemIndex: number;
+    }]>;
+    listItemBottom?: Snippet<[{
+        item: Data;
+        itemIndex: number;
+    }]>;
+};
+export type MenuListItemProps<T = Data> = CommonProps & {
+    /**  displayed field for the listItem  */
+    presentationField?: [keyof T];
+    /** element root HTMLDivElement props */
+    element?: HTMLElement | null;
+    selectorField?: keyof T;
+    /** text displayed in the menu item */
+    text?: string;
+    /** text props, shown on the right side of the menuItem */
+    action?: string;
+    /**  dense prop */
+    tall?: ElementProps['tall'];
+    /**  dense prop */
+    width?: ElementProps['width'];
+    /** icon displayed in the menu item */
+    icon?: string;
+    /**  icon object at start */
+    iconFirst?: IconObj;
+    /** icon object at end */
+    iconLast?: IconObj;
+    /** color of the icon */
+    iconColor?: string;
+    /** href, li will become an a */
+    href?: string;
+    /** size of the icon */
+    iconSize?: IconObj['iconSize'];
+    /** whether to show a divider after the menu item */
+    divider?: boolean;
+    /** whether to show a divider before the menu item */
+    dividerBefore?: MenuListItemProps['divider'];
+    /** data associated with the menu item */
+    data?: T;
+    /** makes the menu item selectable */
+    selectable?: boolean;
+    /** html tag to use, default ul */
+    tag?: string;
+    /** whether the menu item is selected */
+    selected?: boolean;
+    /** wrap */
+    wrap?: boolean;
+    /** @deprecated
+     * function to be called when the menu item is clicked */
+    onMenuItemClick?: (data: T) => void;
+    /** function to be called when the menu item is clicked */
+    onclick?: (event: CustomEvent<T>, itemIndex: number) => void;
+    /** position in the list */
+    itemIndex?: number;
+    /** role  available for li element */
+    role?: 'listitem' | 'option' | 'tab' | 'treeitem' | 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+    menuItemFirst?: Snippet;
+    menuItemLast?: Snippet;
+    children?: Snippet<[{
+        item: T;
+        itemIndex: number;
+        selected: number;
+    }]>;
+    rest?: any;
+};
+export declare const parameters: DemoerStoryProps<MenuListProps<Data>>, componentArgs: MenuListProps<Data>;

package/dist/ui/menuList/types.js

@@ -0,0 +1,25 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+const menuListDemoValues = {
+    tall: {
+        type: 'tall'
+    }
+    /* menuListItems: {
+        type: 'menuListItems',
+        default: [
+            {
+                text: 'Home',
+                icon: 'home'
+            },
+            {
+                text: 'About',
+                icon: 'info'
+            },
+            {
+                text: 'Contact',
+                icon: 'phone'
+            }
+        ],
+        private: true
+    } */
+};
+export const { parameters, componentArgs } = demoerArgs(menuListDemoValues);