@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/floating/dialog/neo-dialog-confirm.model.d.ts

@@ -1,15 +1,15 @@
 import type { MouseEventHandler } from 'svelte/elements';
 import type { NeoConfirmProps } from '../common/neo-confirm.model.js';
 import type { NeoDialogProps } from './neo-dialog.model.js';
-export type NeoDialogConfirmProps = {
+export type NeoDialogConfirmProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = {
     /**
      * Element(s) to render inside the trigger.
      */
-    children?: NeoDialogProps['children'] | string;
+    children?: NeoDialogProps<Tag>['children'] | string;
     /**
      * Element(s) to render inside the header once open.
      */
-    header?: NeoDialogProps['children'] | string;
+    header?: NeoDialogProps<Tag>['children'] | string;
     /**
      * Event Handlers that fires on close.
      */
@@ -30,5 +30,5 @@ export type NeoDialogConfirmProps = {
     /**
      * Optional props to pass to the dialog.
      */
-    dialogProps?: Omit<NeoDialogProps, 'ref' | 'open' | 'children' | 'header' | 'modal' | 'returnValue'>;
-} & Pick<NeoDialogProps, 'ref' | 'open' | 'modal' | 'moved' | 'returnValue' | 'closedby' | 'unmountOnClose' | 'placement' | 'movable' | 'outside' | 'elevation' | 'blur' | 'slide' | 'color' | 'filled' | 'tinted' | 'backdrop' | 'borderless' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'backdropProps'> & Omit<NeoConfirmProps, 'children' | 'header'>;
+    dialogProps?: Omit<NeoDialogProps<Tag>, 'ref' | 'open' | 'children' | 'header' | 'modal' | 'returnValue'>;
+} & Pick<NeoDialogProps<Tag>, 'ref' | 'open' | 'modal' | 'moved' | 'returnValue' | 'closedby' | 'unmountOnClose' | 'placement' | 'movable' | 'outside' | 'elevation' | 'blur' | 'slide' | 'color' | 'filled' | 'tinted' | 'backdrop' | 'borderless' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'backdropProps'> & Omit<NeoConfirmProps, 'children' | 'header'>;

package/dist/floating/dialog/neo-dialog-stepper.model.d.ts

@@ -3,7 +3,7 @@ import type { NeoFloatingStepperProps } from '../common/neo-floating-stepper.mod
 import type { NeoDialogContext, NeoDialogProps } from './neo-dialog.model.js';
 import type { NeoTooltipProps } from '../tooltips/neo-tooltip.model.js';
 import type { NeoStepperContext } from '../../stepper/neo-stepper.model.js';
-export type NeoDialogStepperProps = {
+export type NeoDialogStepperProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = {
     /**
      * Element(s) to render inside the stepper.
      */
@@ -19,7 +19,7 @@ export type NeoDialogStepperProps = {
     /**
      * The dialog element reference.
      */
-    dialogRef?: NeoDialogProps['ref'];
+    dialogRef?: NeoDialogProps<Tag>['ref'];
     /**
      * Event Handlers that fires on close.
      */
@@ -40,5 +40,5 @@ export type NeoDialogStepperProps = {
     /**
      * Optional props to pass to the dialog.
      */
-    dialogProps?: Omit<NeoDialogProps, 'ref' | 'open' | 'children' | 'header' | 'modal' | 'returnValue'>;
-} & Pick<NeoDialogProps, 'ref' | 'open' | 'modal' | 'moved' | 'returnValue' | 'closedby' | 'unmountOnClose' | 'placement' | 'movable' | 'outside' | 'elevation' | 'blur' | 'slide' | 'color' | 'filled' | 'tinted' | 'backdrop' | 'borderless' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'backdropProps'> & Omit<NeoFloatingStepperProps, 'placement'>;
+    dialogProps?: Omit<NeoDialogProps<Tag>, 'ref' | 'open' | 'children' | 'header' | 'modal' | 'returnValue'>;
+} & Pick<NeoDialogProps<Tag>, 'ref' | 'open' | 'modal' | 'moved' | 'returnValue' | 'closedby' | 'unmountOnClose' | 'placement' | 'movable' | 'outside' | 'elevation' | 'blur' | 'slide' | 'color' | 'filled' | 'tinted' | 'backdrop' | 'borderless' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'backdropProps'> & Omit<NeoFloatingStepperProps, 'placement'>;

package/dist/floating/dialog/neo-dialog.model.d.ts

@@ -5,6 +5,7 @@ import type { NeoDialogPlacement } from '../common/neo-placement.model.js';
 import type { NeoMovable, NeoMovableOutside, NeoMovableResetOptions, NeoMoved } from './use-movable.svelte.js';
 import type { NeoPortalProps } from '../portal/neo-portal.model.js';
 import type { HTMLActionProps } from '../../utils/action.utils.js';
+import type { BorderRadiusInput } from '../../utils/border.utils.js';
 import type { Color } from '../../utils/colors.utils.js';
 import type { HTMLFlexProps, HTMLNeoBaseElement } from '../../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, PositiveShadowElevation, PositiveShadowElevationString } from '../../utils/shadow.utils.js';
@@ -156,7 +157,7 @@ export type NeoDialogProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLE
     /**
      * If true, the dialog will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Tints the dialog with the current color.
      */

package/dist/floating/dialog/use-movable.svelte.js

@@ -24,6 +24,7 @@ export const defaultMovable = {
     snap: defaultSnap,
     handle: defaultHandle,
 };
+const translateRegex = /translate[^;]+/g;
 export function useMovable(options) {
     const offset = $derived(options.offset);
     const element = $derived(options.element);
@@ -61,7 +62,7 @@ export function useMovable(options) {
             transition = element.style.transition;
         const computed = getComputedStyle(element).transition;
         if (computed.includes('translate'))
-            element.style.transition = computed.replace(/translate[^;]+/g, `translate ${duration}ms ${easing}`);
+            element.style.transition = computed.replace(translateRegex, `translate ${duration}ms ${easing}`);
         else
             element.style.transition = `${computed}, translate ${duration}ms ${easing}`;
         return { easing, duration };

package/dist/floating/drawer/NeoDrawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { NeoDialogProps } from '../dialog/neo-dialog.model.js';
   import type { NeoMovable, NeoMovableLimits, NeoMovableSnap } from '../dialog/use-movable.svelte.js';
+  import type { NeoDrawerProps } from './neo-drawer.model.js';
 
   import { getUUID } from '@dvcol/common-utils/common/string';
 
@@ -11,7 +11,6 @@
     id = `neo-drawer-${getUUID()}`,
     ref = $bindable(),
     open = $bindable(false),
-    modal = $bindable(true),
     moved = $bindable({ x: 0, y: 0 }),
     returnValue = $bindable(),
 
@@ -21,13 +20,13 @@
     movable: _movable,
 
     // Sizing
-    full = modal,
+    full = true,
 
     // Style
     elevation = 1,
 
     ...rest
-  }: NeoDialogProps = $props();
+  }: NeoDrawerProps = $props();
 
   const getLimits = (limits: NeoMovableLimits = {}): NeoMovableLimits => {
     if (!placement) return limits;
@@ -73,25 +72,26 @@
 </script>
 
 <div class:neo-drawer={true}>
-  <NeoDialog bind:ref bind:open bind:modal bind:moved bind:returnValue bind:placement bind:outside {id} {movable} {full} {elevation} {...rest} />
+  <NeoDialog modal bind:ref bind:open bind:moved bind:returnValue bind:placement bind:outside {id} {movable} {full} {elevation} {...rest} />
 </div>
 
 <style>.neo-drawer {
   display: contents;
+  --neo-dialog-margin: none;
 }
-.neo-drawer :global(> .neo-dialog[data-placement^="top"]) {
+.neo-drawer :global(> .neo-dialog[data-placement^='top']) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.neo-drawer :global(> .neo-dialog[data-placement^="bottom"]) {
+.neo-drawer :global(> .neo-dialog[data-placement^='bottom']) {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.neo-drawer :global(> .neo-dialog[data-placement^="left"]) {
+.neo-drawer :global(> .neo-dialog[data-placement^='left']) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.neo-drawer :global(> .neo-dialog[data-placement^="right"]) {
+.neo-drawer :global(> .neo-dialog[data-placement^='right']) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/dist/floating/drawer/NeoDrawer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NeoDialogProps } from '../dialog/neo-dialog.model.js';
-declare const NeoDrawer: import("svelte").Component<NeoDialogProps, {}, "ref" | "placement" | "open" | "outside" | "modal" | "moved" | "returnValue">;
+import type { NeoDrawerProps } from './neo-drawer.model.js';
+declare const NeoDrawer: import("svelte").Component<NeoDrawerProps, {}, "ref" | "placement" | "open" | "returnValue" | "outside" | "moved">;
 type NeoDrawer = ReturnType<typeof NeoDrawer>;
 export default NeoDrawer;

package/dist/floating/drawer/NeoDrawerConfirm.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { MouseEventHandler } from 'svelte/elements';
 
-  import type { NeoDialogConfirmProps } from '../dialog/neo-dialog-confirm.model.js';
   import type { NeoDialogContext } from '../dialog/neo-dialog.model.js';
+  import type { NeoDrawerConfirmProps } from './neo-drawer.model.js';
 
   import { NeoDialogPlacements } from '../common/neo-placement.model.js';
   import NeoConfirm from '../common/NeoConfirm.svelte';
@@ -17,7 +17,6 @@
     // Dialog Props
     ref = $bindable(),
     open = $bindable(false),
-    modal = $bindable(true),
     moved = $bindable({ x: 0, y: 0 }),
     returnValue = $bindable(),
     closedby,
@@ -74,7 +73,7 @@
     dialogProps,
     backdropProps,
     ...rest
-  }: NeoDialogConfirmProps = $props();
+  }: NeoDrawerConfirmProps = $props();
 
   const close = () => {
     if (!ref) return Logger.error('NeoDialogConfirm: ref is not defined');
@@ -111,7 +110,6 @@
 <NeoDrawer
   bind:ref
   bind:open
-  bind:modal
   bind:moved
   bind:outside
   bind:placement

package/dist/floating/drawer/NeoDrawerConfirm.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NeoDialogConfirmProps } from '../dialog/neo-dialog-confirm.model.js';
-declare const NeoDrawerConfirm: import("svelte").Component<NeoDialogConfirmProps, {}, "ref" | "disabled" | "loading" | "placement" | "open" | "outside" | "modal" | "moved" | "returnValue">;
+import type { NeoDrawerConfirmProps } from './neo-drawer.model.js';
+declare const NeoDrawerConfirm: import("svelte").Component<NeoDrawerConfirmProps, {}, "loading" | "ref" | "disabled" | "placement" | "open" | "returnValue" | "outside" | "moved">;
 type NeoDrawerConfirm = ReturnType<typeof NeoDrawerConfirm>;
 export default NeoDrawerConfirm;

package/dist/floating/drawer/NeoDrawerStepper.svelte

@@ -2,8 +2,8 @@
   import type { MouseEventHandler } from 'svelte/elements';
 
   import type { NeoFloatingStepperProps } from '../common/neo-floating-stepper.model.js';
-  import type { NeoDialogStepperProps } from '../dialog/neo-dialog-stepper.model.js';
   import type { NeoDialogContext } from '../dialog/neo-dialog.model.js';
+  import type { NeoDrawerStepperProps } from './neo-drawer.model.js';
   import type { NeoStepperBeforeEvent, NeoStepperContext } from '../../stepper/neo-stepper.model.js';
 
   import { NeoDialogPlacements } from '../common/neo-placement.model.js';
@@ -18,7 +18,6 @@
     // Dialog Props
     dialogRef = $bindable(),
     open = $bindable(false),
-    modal = $bindable(true),
     moved = $bindable({ x: 0, y: 0 }),
     returnValue = $bindable(),
     closedby,
@@ -81,7 +80,7 @@
     dialogProps,
     backdropProps,
     ...rest
-  }: NeoDialogStepperProps = $props();
+  }: NeoDrawerStepperProps = $props();
 
   const marks = $derived<boolean>(_marks ?? steps?.some(s => s?.markProps) ?? !!rest?.markProps);
 
@@ -149,7 +148,6 @@
 <NeoDrawer
   bind:ref={dialogRef}
   bind:open
-  bind:modal
   bind:moved
   bind:outside
   bind:placement

package/dist/floating/drawer/NeoDrawerStepper.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NeoDialogStepperProps } from '../dialog/neo-dialog-stepper.model.js';
-declare const NeoDrawerStepper: import("svelte").Component<NeoDialogStepperProps, {}, "ref" | "active" | "loading" | "placement" | "open" | "outside" | "modal" | "moved" | "returnValue" | "dialogRef">;
+import type { NeoDrawerStepperProps } from './neo-drawer.model.js';
+declare const NeoDrawerStepper: import("svelte").Component<NeoDrawerStepperProps, {}, "loading" | "ref" | "active" | "placement" | "open" | "returnValue" | "outside" | "moved" | "dialogRef">;
 type NeoDrawerStepper = ReturnType<typeof NeoDrawerStepper>;
 export default NeoDrawerStepper;

package/dist/floating/drawer/neo-drawer.model.d.ts

@@ -0,0 +1,6 @@
+import type { NeoDialogProps } from '../dialog/neo-dialog.model.js';
+import type { NeoDialogConfirmProps } from '../dialog/neo-dialog-confirm.model.js';
+import type { NeoDialogStepperProps } from '../dialog/neo-dialog-stepper.model.js';
+export type NeoDrawerProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = Omit<NeoDialogProps<Tag>, 'modal'>;
+export type NeoDrawerConfirmProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = Omit<NeoDialogConfirmProps<Tag>, 'modal'>;
+export type NeoDrawerStepperProps<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = Omit<NeoDialogStepperProps<Tag>, 'modal'>;

package/dist/floating/drawer/neo-drawer.model.js

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

package/dist/floating/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './menu/index.js';
+export * from './notification/index.js';
 export * from './portal/index.js';
 export * from './tooltips/index.js';

package/dist/floating/index.js

@@ -1,5 +1,6 @@
 export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './menu/index.js';
+export * from './notification/index.js';
 export * from './portal/index.js';
 export * from './tooltips/index.js';

package/dist/floating/menu/NeoMenu.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+  import type { NeoTooltipContext } from '../../index.js';
+
   import type { NeoMenuProps } from './neo-menu.model.js';
 
   import { getFocusableElement } from '@dvcol/common-utils/common/element';
+  import { tick } from 'svelte';
 
   import { setMenuContext } from './neo-menu-context.svelte.js';
   import NeoMenuList from './NeoMenuList.svelte';
@@ -16,6 +19,7 @@
     // Tooltip Props
     ref = $bindable(),
     open = $bindable(false),
+    position = $bindable(),
     triggerRef = $bindable(),
 
     target,
@@ -23,13 +27,16 @@
     padding = '0',
     openOnHover = true,
     openOnFocus = false,
-    openOnClick = false,
+    openOnClick = true,
+    unmountOnClose = false,
     role = 'menu',
 
     // Styles
     shadow = true,
     scrollbar,
     rounded,
+    reverse,
+    flip,
 
     // Events
     onMenu,
@@ -60,38 +67,67 @@
     open = tooltipOpen || context.children;
   });
 
-  const host = $derived.by(() => {
-    if (triggerRef) return triggerRef;
-    if (!target) return;
-    if (typeof target === 'function') return target();
-    return target;
-  });
+  const toggleListener = async (e: KeyboardEvent) => {
+    // if tab && open, focus next element
+    if (e.key === 'Tab' && open) {
+      if (e.shiftKey !== position?.includes('top')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      return getFocusableElement(ref)?.focus();
+    }
+
+    if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(e.key)) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    const was = open;
+    if (position?.includes('bottom')) triggerRef?.toggle?.(e.key === 'ArrowDown');
+    if (position?.includes('top')) triggerRef?.toggle?.(e.key === 'ArrowUp');
+    if (position?.includes('right')) triggerRef?.toggle?.(e.key === 'ArrowRight');
+    if (position?.includes('left')) triggerRef?.toggle?.(e.key === 'ArrowLeft');
+    await tick();
+    if (was && open && ref) getFocusableElement(ref)?.focus();
+  };
 
-  const onkeydown = (e: KeyboardEvent) => {
-    if (!['ArrowUp', 'ArrowDown'].includes(e.key)) return;
+  const closeListener = async (e: KeyboardEvent) => {
+    if (!triggerRef) return;
+    if (position?.includes('bottom') && e.key !== 'ArrowUp') return;
+    if (position?.includes('top') && e.key !== 'ArrowDown') return;
+    if (position?.includes('right') && e.key !== 'ArrowLeft') return;
+    if (position?.includes('left') && e.key !== 'ArrowRight') return;
+    const selector = baseProps?.selector || '.neo-menu-item';
+    if (!(e.target instanceof HTMLElement)) return;
+    if (e.target?.closest(selector)?.previousElementSibling) return;
+    if (!e.target?.closest(selector)?.parentElement?.classList.contains('neo-menu-list')) return;
     e.preventDefault();
     e.stopPropagation();
-    open = e.key === 'ArrowDown';
-    if (open && ref) getFocusableElement(ref)?.focus();
+    triggerRef?.toggle?.(false);
+    getFocusableElement(triggerRef)?.focus();
   };
 
   $effect(() => {
-    host?.addEventListener('keydown', onkeydown);
-    return () => host?.removeEventListener('keydown', onkeydown);
+    triggerRef?.addEventListener('keydown', toggleListener);
+    ref?.addEventListener('keydown', closeListener);
+    return () => {
+      triggerRef?.removeEventListener('keydown', toggleListener);
+      ref?.removeEventListener('keydown', closeListener);
+    };
   });
 </script>
 
-{#snippet tooltip()}
+{#snippet tooltip({ placement }: NeoTooltipContext)}
   <NeoMenuList
     {items}
     {shadow}
     {scrollbar}
-    {rounded}
+    {reverse}
+    flip={flip ?? placement.includes('top')}
     {baseProps}
     {itemProps}
     {dividerProps}
     {keepOpenOnSelect}
-    tooltipProps={{ role, portal, padding, openOnHover, openOnFocus, openOnClick, ...rest }}
+    rounded={rounded === true ? 'xl' : rounded}
+    tooltipProps={{ role, portal, padding, openOnHover, openOnFocus, openOnClick, unmountOnClose, ...rest }}
     {...menuProps}
     {onMenu}
     {onSelect}
@@ -101,6 +137,7 @@
 <NeoTooltip
   bind:ref
   bind:triggerRef
+  bind:position
   bind:open={() => open,
     (_open) => {
       tooltipOpen = _open;
@@ -112,7 +149,8 @@
   {openOnHover}
   {openOnFocus}
   {openOnClick}
-  {rounded}
+  {unmountOnClose}
+  rounded={rounded === true ? 'xl' : rounded}
   {...rest}
   {tooltip}
 />

package/dist/floating/menu/NeoMenu.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoMenuProps } from './neo-menu.model.js';
-declare const NeoMenu: import("svelte").Component<NeoMenuProps, {}, "ref" | "open" | "triggerRef">;
+declare const NeoMenu: import("svelte").Component<NeoMenuProps, {}, "ref" | "open" | "position" | "triggerRef">;
 type NeoMenu = ReturnType<typeof NeoMenu>;
 export default NeoMenu;

package/dist/floating/menu/NeoMenuList.svelte

@@ -2,11 +2,10 @@
   import type { NeoMenuItem } from './neo-menu-list-item.model.js';
   import type { NeoMenuListProps } from './neo-menu-list.model.js';
 
-  import { getUUID } from '@dvcol/common-utils/common/string';
+  import { isSafari } from '@dvcol/common-utils/common/browser';
+  import { tick } from 'svelte';
 
-  import NeoDivider from '../../divider/NeoDivider.svelte';
   import NeoMenuListItem from './NeoMenuListItem.svelte';
-  import { showDivider } from '../../list/neo-list.model.js';
 
   let {
     ref = $bindable(),
@@ -23,6 +22,9 @@
     shadow,
     scrollbar,
     rounded,
+    reverse,
+    divider,
+    flip,
 
     // Events
     onMenu,
@@ -36,54 +38,46 @@
     ...rest
   }: NeoMenuListProps = $props();
 
-// TODO: Section
-</script>
+  const scrollReverse = async () => {
+    await tick();
+    if (!ref) return;
+    ref.scrollTo({ top: ref.scrollHeight, behavior: 'instant' });
+  };
 
-{#snippet line(item: NeoMenuItem, index = 0, length = 0)}
-  <NeoMenuListItem
-    {keepOpenOnSelect}
-    {rounded}
-    {...itemProps}
-    {parent}
-    {item}
-    {index}
-    {length}
-    {level}
-    {tooltipProps}
-    {baseProps}
-    menuProps={{ tag, shadow, scrollbar, rounded, dividerProps, tooltipProps, baseProps, ...rest, ...item.menuProps }}
-    onMenu={(i, e) => {
-      item.menuProps?.onMenu?.(i, e);
-      onMenu?.(i, e);
-    }}
-    onSelect={(i, e) => {
-      item.menuProps?.onSelect?.(i, e);
-      onSelect?.(i, e);
-    }}
-  />
-{/snippet}
+  $effect(() => {
+    if (!flip || !ref) return;
+    scrollReverse();
+  });
+</script>
 
-{#snippet list(array: NeoMenuItem[])}
+{#snippet list(array: NeoMenuItem[], sectionIndex = undefined)}
   {#each array as item, index (item.id ?? index)}
-    {@const labelId = item.label ? `neo-menu-section-label-${getUUID()}` : undefined}
-    {#if index && showDivider(item.divider, 'top')}
-      <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-menu-item-divider', item.dividerProps?.class]} />
-    {/if}
-    {#if item.section}
-      <span id={labelId} class="neo-menu-list-section-label" class:neo-sticky={item.sticky}>
-        {item.label}
-      </span>
-      <svelte:element this={tag} role="menu">
-        {#if item.items}
-          {@render list(item.items)}
-        {/if}
-      </svelte:element>
-    {:else}
-      {@render line(item, index, array.length)}
-    {/if}
-    {#if index < array.length - 1 && showDivider(item.divider, 'bottom') && !showDivider(array[index + 1]?.divider, 'bottom')}
-      <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-menu-item-divider', item.dividerProps?.class]} />
-    {/if}
+    <NeoMenuListItem
+      {keepOpenOnSelect}
+      {rounded}
+      {reverse}
+      menuTag={tag}
+      {...itemProps}
+      {item}
+      {parent}
+      {array}
+      {index}
+      {sectionIndex}
+      {level}
+      {divider}
+      flip={flip && !isSafari()}
+      {tooltipProps}
+      {baseProps}
+      menuProps={{ tag, shadow, scrollbar, rounded, reverse, flip, divider, dividerProps, tooltipProps, baseProps, ...rest, ...item.menuProps }}
+      onMenu={(i, e) => {
+        item.menuProps?.onMenu?.(i, e);
+        onMenu?.(i, e);
+      }}
+      onSelect={(i, e) => {
+        item.menuProps?.onSelect?.(i, e);
+        onSelect?.(i, e);
+      }}
+    />
   {/each}
 {/snippet}
 
@@ -95,6 +89,7 @@
   class:neo-scroll={scrollbar}
   class:neo-shadow={shadow}
   class:neo-rounded={rounded}
+  class:neo-flip={flip}
   {...rest}
 >
   {@render list(items)}
@@ -103,41 +98,33 @@
 <style>.neo-menu-list {
   display: flex;
   flex-direction: column;
-  padding: var(--neo-menu-padding, var(--neo-gap-tiny, 0.25rem)) 0;
+  padding: var(--neo-menu-padding, var(--neo-gap-4xs, 0.25rem)) 0;
   overflow: auto;
 }
-.neo-menu-list :global(.neo-menu-item-divider) {
-  margin: var(--neo-menu-padding, var(--neo-gap-tiny, 0.25rem)) 0;
+.neo-menu-list :global(.neo-menu-item-divider[data-elevation='0']) {
+  margin: var(--neo-menu-margin, var(--neo-gap-3xs, 0.3125rem)) 0;
 }
-.neo-menu-list-section-label {
-  display: inline-flex;
-  padding: 0.25rem 0.6125rem;
-  transition: color 0.3s ease;
-  margin-block-end: 0.125rem;
-}
-.neo-menu-list-section-label.neo-sticky {
-  position: sticky;
-  top: -0.5rem;
-  z-index: var(--neo-z-index-in-front, 1);
-  background: var(--neo-list-section-bg-color, linear-gradient(to top, transparent 5%, oklch(from var(--neo-background-color) l c h/50%) 20%, var(--neo-background-color)));
+.neo-menu-list :global(.neo-menu-item-divider:not([data-elevation='0'])) {
+  --neo-divider-margin: var(--neo-menu-margin, var(--neo-gap-3xs, 0.3125rem));
 }
 .neo-menu-list.neo-scroll, .neo-menu-list.neo-rounded {
-  padding-block: var(--neo-menu-scroll-padding, 0.625rem);
+  padding-block: var(--neo-menu-scroll-padding, 0.5rem);
+  gap: var(--neo-menu-scroll-gap, 0.125rem);
 }
 .neo-menu-list.neo-scroll:not(.neo-scroll) :global(> .neo-menu-item), .neo-menu-list.neo-rounded:not(.neo-scroll) :global(> .neo-menu-item) {
   padding: 0 var(--neo-menu-padding, var(--neo-gap-xxs, 0.5rem));
 }
-.neo-menu-list.neo-scroll .neo-menu-list-section-label, .neo-menu-list.neo-rounded .neo-menu-list-section-label {
+.neo-menu-list.neo-scroll :global(.neo-menu-item-section-label), .neo-menu-list.neo-rounded :global(.neo-menu-item-section-label) {
   top: -0.75rem;
 }
+.neo-menu-list.neo-scroll.neo-shadow {
+  mask-image: linear-gradient(to var(--neo-scroll-direction, top), black, black, transparent 0, black var(--neo-scroll-shadow-size, 1rem), black calc(100% - var(--neo-scroll-shadow-size, 1rem)), transparent);
+}
 .neo-menu-list.neo-scroll {
   scrollbar-gutter: stable both-edges;
   overflow: var(--neo-scrollbar-overflow, auto);
   transition: --neo-thumb-color 0.45s ease 0.1s;
 }
-.neo-menu-list.neo-scroll.neo-shadow {
-  mask-image: linear-gradient(to var(--neo-scroll-direction, top), black, black, transparent 0, black var(--neo-scroll-shadow-size, 1rem), black calc(100% - var(--neo-scroll-shadow-size, 1rem)), transparent);
-}
 .neo-menu-list.neo-scroll:focus-within, .neo-menu-list.neo-scroll:focus, .neo-menu-list.neo-scroll:hover {
   --neo-thumb-color: var(--neo-scrollbar-color);
   transition: --neo-thumb-color 0.45s ease 0s;
@@ -193,4 +180,10 @@
   .neo-menu-list.neo-scroll {
     padding-inline: calc(var(--neo-scrollbar-width, 0.375rem) * 2);
   }
+}
+@supports not ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)) {
+  .neo-menu-list.neo-flip {
+    flex-direction: column-reverse;
+    justify-content: end;
+  }
 }</style>