@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/cards/NeoCard.svelte

@@ -7,6 +7,7 @@
   import NeoCloseButton from '../buttons/NeoCloseButton.svelte';
   import NeoDivider from '../divider/NeoDivider.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import {
     coerce,
@@ -192,6 +193,7 @@
   style:--neo-card-box-shadow={boxShadow}
   style:--neo-card-glass-blur={filter}
   style:--neo-card-spacing={spacing}
+  style:--neo-card-border-radius={computeBorderRadius(rounded)}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -288,6 +290,16 @@
   box-shadow: var(--neo-card-box-shadow, var(--neo-box-shadow-flat));
   transition: margin 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease-out;
 }
+.neo-card .neo-card-close {
+  display: flex;
+  flex: 0 0 auto;
+  align-self: flex-start;
+  justify-content: flex-end;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.3s ease-out 0.15s;
+  --neo-btn-margin: 0.25rem;
+}
 .neo-card-content {
   flex: 1 1 auto;
   overflow: auto;
@@ -364,16 +376,6 @@
   display: flex;
   align-items: center;
 }
-.neo-card .neo-card-close {
-  display: flex;
-  flex: 0 0 auto;
-  align-self: flex-start;
-  justify-content: flex-end;
-  margin-left: auto;
-  opacity: 0;
-  transition: opacity 0.3s ease-out 0.15s;
-  --neo-btn-margin: 0.25rem;
-}
 .neo-card:focus-within .neo-card-close, .neo-card:focus .neo-card-close, .neo-card:hover .neo-card-close {
   opacity: 1;
   transition: opacity 0.3s ease;
@@ -460,31 +462,31 @@
   border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0;
 }
 .neo-card.neo-rounded {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-card.neo-rounded .neo-card-media {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-md));
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
 .neo-card.neo-rounded .neo-card-media.neo-cover:not(.neo-inset) {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-card.neo-rounded .neo-card-media.neo-cover:not(.neo-inset):not(:only-child) {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl)) var(--neo-card-border-radius, var(--neo-border-radius-xxl)) 0 0;
 }
 .neo-card.neo-rounded .neo-card-segment:not(.neo-card-media, :only-child):first-child {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl)) var(--neo-card-border-radius, var(--neo-border-radius-xxl)) 0 0;
 }
 .neo-card.neo-rounded .neo-card-segment:not(.neo-card-media, :only-child):last-child {
-  border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg));
+  border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius-xxl)) var(--neo-card-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-card.neo-rounded.neo-horizontal .neo-card-segment:not(.neo-card-media, :only-child):first-child {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-card.neo-rounded.neo-horizontal .neo-card-segment:not(.neo-card-media, :only-child):last-child {
-  border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0;
+  border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius-xxl)) var(--neo-card-border-radius, var(--neo-border-radius-xxl)) 0;
 }
 .neo-card.neo-rounded.neo-horizontal .neo-card-media.neo-cover:not(.neo-inset, :only-child) {
-  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-xxl)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-card.neo-skeleton {
   box-shadow: var(--neo-box-shadow-flat);
@@ -496,7 +498,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/cards/neo-card.model.d.ts

@@ -1,8 +1,9 @@
-import type { NeoDividerProps } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { NeoButtonProps } from '../buttons/neo-button.model.js';
 import type { NeoIconButtonProps } from '../buttons/neo-icon-button.model.js';
+import type { NeoDividerProps } from '../divider/neo-divider.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, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, ShadowElevation, ShadowElevationString, ShadowHoverElevation, ShadowHoverElevationsString } from '../utils/shadow.utils.js';
@@ -62,7 +63,7 @@ export interface NeoCardContext {
     /**
      * If true, the card will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * If true, the card will be displayed with a glass effect.
      */

package/dist/collapse/NeoAccordion.svelte

@@ -2,6 +2,7 @@
   import type { NeoAccordionProps } from './neo-accordion.model.js';
 
   import NeoCollapseGroup from './NeoCollapseGroup.svelte';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import { coerce, computeGlassFilter, computeHoverShadowElevation, computeShadowElevation, isShadowFlat, parseBlur } from '../utils/shadow.utils.js';
   import { toSize } from '../utils/style.utils.js';
@@ -84,6 +85,7 @@
   style:--neo-accordion-box-shadow={boxShadow}
   style:--neo-accordion-glass-blur={filter}
   style:--neo-accordion-color={getColorVariable(color)}
+  style:--neo-accordion-border-radius={computeBorderRadius(rounded)}
   {...rest}
 >
   {#if group}
@@ -122,7 +124,7 @@
   box-shadow: var(--neo-accordion-box-shadow-hover, var(--neo-accordion-box-shadow));
 }
 .neo-accordion.neo-rounded {
-  border-radius: var(--neo-accordion-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-accordion-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-accordion.neo-flat-hover:hover:not(.neo-borderless), .neo-accordion.neo-flat-hover:focus-within:not(.neo-borderless), .neo-accordion.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-within) {
   border-color: var(--neo-accordion-border-color, var(--neo-border-color));

package/dist/collapse/NeoCollapse.svelte

@@ -59,12 +59,12 @@
 
   const context = $derived<NeoCollapseContext>({ id, open, trigger, triggerId, horizontal, disabled, readonly, standalone, divider });
 
-  const toggle = (state = !open) => {
+  export function toggle(state = !open) {
     if (disabled || readonly) return;
     open = state;
     if (standalone) return;
     group?.update(id);
-  };
+  }
 
   $effect(() => {
     if (!ref) return;

package/dist/collapse/NeoCollapse.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { NeoCollapseProps } from './neo-collapse.model.js';
-declare const NeoCollapse: import("svelte").Component<NeoCollapseProps, {}, "ref" | "open" | "triggerRef">;
+declare const NeoCollapse: import("svelte").Component<NeoCollapseProps, {
+    toggle: (state?: boolean) => void;
+}, "ref" | "open" | "triggerRef">;
 type NeoCollapse = ReturnType<typeof NeoCollapse>;
 export default NeoCollapse;

package/dist/collapse/neo-accordion.model.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { NeoCollapseGroupProps } from './neo-collapse-group.model.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { Color } from '../utils/colors.utils.js';
 import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, ShadowElevation, ShadowElevationString, ShadowHoverElevation, ShadowHoverElevationsString } from '../utils/shadow.utils.js';
@@ -60,7 +61,7 @@ export type NeoAccordionProps<Tag extends keyof HTMLElementTagNameMap = 'div'> =
     /**
      * If true, the accordion will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * If true, negative elevation (< 0) will be displayed as pressed instead of inset.
      */

package/dist/containers/NeoTransitionContainer.svelte

@@ -15,8 +15,12 @@
     overflow,
     overflowX,
     overflowY,
+
+    // Size
+    ratio,
     width,
     height,
+    reverse,
 
     // Transition
     in: inAction,
@@ -36,11 +40,13 @@
 <svelte:element
   this={tag}
   class:neo-transition-container={true}
+  class:neo-reverse={reverse}
   style:overflow
   style:overflow-x={overflowX}
   style:overflow-y={overflowY}
   style:width
   style:height
+  style:aspect-ratio={ratio}
   out:outFn={outProps}
   in:inFn={inProps}
   {...rest}
@@ -62,4 +68,8 @@
 }
 .neo-transition-container :global(> *) {
   grid-area: transition;
+}
+.neo-transition-container.neo-reverse {
+  justify-content: flex-end;
+  text-align: end;
 }</style>

package/dist/containers/neo-transition-container.model.d.ts

@@ -27,6 +27,10 @@ export type NeoTransitionContainerProps<Tag extends keyof HTMLElementTagNameMap
      * Vertical overflow style (overflow-x).
      */
     overflowY?: CSSStyleDeclaration['overflowY'];
+    /**
+     * Optional aspect ratio for the container.
+     */
+    ratio?: CSSStyleDeclaration['aspectRatio'];
     /**
      * Width of the container.
      */
@@ -35,4 +39,9 @@ export type NeoTransitionContainerProps<Tag extends keyof HTMLElementTagNameMap
      * Height of the container.
      */
     height?: CSSStyleDeclaration['height'];
+    /**
+     * Reverse the direction of the container.
+     * Flow from right to left by default.
+     */
+    reverse?: boolean;
 } & HTMLTransitionProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;

package/dist/cursor/NeoCursor.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoCursorProps } from './neo-cursor.model.js';
-declare const NeoCursor: import("svelte").Component<NeoCursorProps, {}, "ref" | "cursor" | "pointer" | "contact" | "position" | "snapping" | "touching" | "snapTarget">;
+declare const NeoCursor: import("svelte").Component<NeoCursorProps, {}, "ref" | "cursor" | "position" | "pointer" | "contact" | "snapping" | "touching" | "snapTarget">;
 type NeoCursor = ReturnType<typeof NeoCursor>;
 export default NeoCursor;

package/dist/divider/NeoDivider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { NeoDividerProps } from './neo-divider.model.js';
 
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { coerce, computeShadowElevation } from '../utils/shadow.utils.js';
 
   const {
@@ -56,6 +57,7 @@
   style:--neo-divider-margin={margin}
   style:--neo-divider-minimum={minimum}
   style:--neo-divider-box-shadow={boxShadow}
+  style:--neo-divider-border-radius={computeBorderRadius(rounded)}
   {...rest}
 >
   &nbsp;
@@ -75,7 +77,7 @@
   user-select: none;
 }
 .neo-divider.neo-rounded {
-  border-radius: var(--neo-divider-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-divider-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-divider.neo-vertical {
   width: max(var(--neo-divider-minimum), var(--neo-divider-width, 1px) - var(--neo-divider-margin-inline, var(--neo-divider-margin, 0px)) * 2);
@@ -95,7 +97,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/divider/neo-divider.model.d.ts

@@ -1,3 +1,4 @@
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 import type { ShadowElevation, ShadowElevationString } from '../utils/shadow.utils.js';
 export type NeoDividerElevation = ShadowElevation | ShadowElevationString;
@@ -39,5 +40,5 @@ export type NeoDividerProps = {
     /**
      * If true, the divider will have a rounded borders.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
 } & HTMLNeoBaseElement;

package/dist/floating/common/NeoConfirm.svelte

@@ -158,7 +158,7 @@
 .neo-confirm-content:has(> .neo-confirm-content-close) {
   margin-top: 0.75rem;
 }
-.neo-confirm-content-close {
+.neo-confirm-content-close :global(> .neo-confirm-close .neo-confirm-control-close-button) {
   float: right;
   margin-top: -0.75rem;
 }
@@ -169,11 +169,11 @@
 }
 .neo-confirm-header .neo-confirm-title {
   flex: 1 1 auto;
-  margin-top: var(--neo-gap-xxxs);
+  margin-top: var(--neo-gap-3xs);
   margin-bottom: 1rem;
 }
 .neo-confirm-close {
-  --neo-btn-padding-empty: var(--neo-gap-xxxs);
+  --neo-btn-padding-empty: var(--neo-gap-3xs);
   --neo-btn-margin: 0;
   align-self: flex-start;
   opacity: 0.8;
@@ -187,10 +187,10 @@
   gap: var(--neo-gap-sm);
   justify-content: flex-end;
   margin-top: var(--neo-gap-sm);
-  margin-bottom: var(--neo-gap-tiny);
+  margin-bottom: var(--neo-gap-4xs);
   opacity: 0.8;
   transition: opacity 0.3s ease;
-  padding-inline: var(--neo-gap-xxxs);
+  padding-inline: var(--neo-gap-3xs);
   --neo-btn-margin: 0;
 }
 .neo-confirm:focus-within .neo-confirm-control,

package/dist/floating/common/NeoConfirm.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoConfirmProps } from './neo-confirm.model.js';
-declare const NeoConfirm: import("svelte").Component<NeoConfirmProps, {}, "disabled" | "loading">;
+declare const NeoConfirm: import("svelte").Component<NeoConfirmProps, {}, "loading" | "disabled">;
 type NeoConfirm = ReturnType<typeof NeoConfirm>;
 export default NeoConfirm;

package/dist/floating/common/NeoFloatingStepper.svelte

@@ -127,7 +127,7 @@
   --neo-stepper-mark-bg-color: var(--neo-background-color-backdrop-filled);
 }
 .neo-floating-stepper-close {
-  --neo-btn-padding-empty: var(--neo-gap-xxxs);
+  --neo-btn-padding-empty: var(--neo-gap-3xs);
   --neo-btn-margin: 0;
   opacity: 0.8;
   transition: opacity 0.3s ease;

package/dist/floating/common/NeoFloatingStepper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoFloatingStepperProps } from './neo-floating-stepper.model.js';
-declare const NeoFloatingStepper: import("svelte").Component<NeoFloatingStepperProps, {}, "ref" | "active" | "loading">;
+declare const NeoFloatingStepper: import("svelte").Component<NeoFloatingStepperProps, {}, "loading" | "ref" | "active">;
 type NeoFloatingStepper = ReturnType<typeof NeoFloatingStepper>;
 export default NeoFloatingStepper;

package/dist/floating/common/NeoHandle.svelte

@@ -124,6 +124,7 @@
   cursor: grab;
   transition: opacity 0.3s ease-in;
   appearance: none;
+  touch-action: none;
 }
 .neo-handle:active {
   cursor: grabbing;
@@ -137,8 +138,8 @@
 .neo-handle-group {
   position: relative;
   display: flex;
+  flex: 1 1 auto;
   width: 100%;
-  height: 100%;
   padding: var(--neo-handle-group-margin-top, var(--neo-handle-group-computed-padding-top, 0)) var(--neo-handle-group-margin-right, var(--neo-handle-group-computed-padding-right, 0)) var(--neo-handle-group-margin-bottom, var(--neo-handle-group-computed-padding-bottom, 0)) var(--neo-handle-group-margin-left, var(--neo-handle-group-computed-padding-left, 0));
 }
 .neo-handle :global(> .neo-divider) {

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

@@ -3,6 +3,7 @@ import type { MouseEventHandler } from 'svelte/elements';
 import type { NeoArrowButtonProps } from '../../buttons/neo-arrow-button.model.js';
 import type { NeoButtonProps } from '../../buttons/neo-button.model.js';
 import type { NeoIconButtonProps } from '../../buttons/neo-icon-button.model.js';
+import type { BorderRadiusInput } from '../../utils/border.utils.js';
 import type { HTMLNeoBaseElement, HTMLTagProps } from '../../utils/html-element.utils.js';
 export type NeoConfirmProps = {
     /**
@@ -41,7 +42,7 @@ export type NeoConfirmProps = {
     /**
      * Whether to style the buttons as rounded.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Event Handlers that fires on close.
      */

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

@@ -7,7 +7,7 @@ export type NeoFloatingStepperProps = {
     /**
      * Element(s) to render inside the header once open.
      */
-    header?: Snippet<[NeoStepperContext]>;
+    header?: string | Snippet<[NeoStepperContext]>;
     /**
      * Whether the stepper show a close button shown.
      *

package/dist/floating/common/neo-placement.model.d.ts

@@ -1,7 +1,59 @@
 import type { UseFloatingOptions } from '@skeletonlabs/floating-ui-svelte';
-export type NeoPlacement = UseFloatingOptions['placement'];
+export type NeoPlacement = NonNullable<UseFloatingOptions['placement']>;
 export type NeoTooltipPlacement = NeoPlacement | 'auto';
 export type NeoDialogPlacement = NeoPlacement | 'center';
-export declare const NeoPlacements: Record<string, NeoPlacement>;
-export declare const NeoTooltipPlacements: Record<string, NeoTooltipPlacement>;
-export declare const NeoDialogPlacements: Record<string, NeoDialogPlacement>;
+export declare const NeoPlacements: {
+    readonly Top: "top";
+    readonly TopStart: "top-start";
+    readonly TopEnd: "top-end";
+    readonly Bottom: "bottom";
+    readonly BottomStart: "bottom-start";
+    readonly BottomEnd: "bottom-end";
+    readonly Left: "left";
+    readonly LeftStart: "left-start";
+    readonly LeftEnd: "left-end";
+    readonly Right: "right";
+    readonly RightStart: "right-start";
+    readonly RightEnd: "right-end";
+};
+export declare const NeoTooltipPlacements: {
+    readonly Auto: "auto";
+    readonly Top: "top";
+    readonly TopStart: "top-start";
+    readonly TopEnd: "top-end";
+    readonly Bottom: "bottom";
+    readonly BottomStart: "bottom-start";
+    readonly BottomEnd: "bottom-end";
+    readonly Left: "left";
+    readonly LeftStart: "left-start";
+    readonly LeftEnd: "left-end";
+    readonly Right: "right";
+    readonly RightStart: "right-start";
+    readonly RightEnd: "right-end";
+};
+export declare const NeoDialogPlacements: {
+    readonly Center: "center";
+    readonly Top: "top";
+    readonly TopStart: "top-start";
+    readonly TopEnd: "top-end";
+    readonly Bottom: "bottom";
+    readonly BottomStart: "bottom-start";
+    readonly BottomEnd: "bottom-end";
+    readonly Left: "left";
+    readonly LeftStart: "left-start";
+    readonly LeftEnd: "left-end";
+    readonly Right: "right";
+    readonly RightStart: "right-start";
+    readonly RightEnd: "right-end";
+};
+export declare const NeoNotificationPlacements: {
+    readonly Top: "top";
+    readonly TopStart: "top-start";
+    readonly TopEnd: "top-end";
+    readonly Bottom: "bottom";
+    readonly BottomStart: "bottom-start";
+    readonly BottomEnd: "bottom-end";
+};
+export type NeoNotificationPlacement = (typeof NeoNotificationPlacements)[keyof typeof NeoNotificationPlacements];
+export declare function reversePlacement(placement?: NeoTooltipPlacement): NeoTooltipPlacement | undefined;
+export declare function invertPlacement(placement?: NeoTooltipPlacement): NeoTooltipPlacement | undefined;

package/dist/floating/common/neo-placement.model.js

@@ -20,3 +20,25 @@ export const NeoDialogPlacements = {
     ...NeoPlacements,
     Center: 'center',
 };
+export const NeoNotificationPlacements = {
+    Top: 'top',
+    TopStart: 'top-start',
+    TopEnd: 'top-end',
+    Bottom: 'bottom',
+    BottomStart: 'bottom-start',
+    BottomEnd: 'bottom-end',
+};
+export function reversePlacement(placement) {
+    if (placement?.startsWith('right'))
+        return placement?.replace('right', 'left');
+    if (placement?.startsWith('left'))
+        return placement?.replace('left', 'right');
+    return placement;
+}
+export function invertPlacement(placement) {
+    if (placement?.startsWith('top'))
+        return placement?.replace('top', 'bottom');
+    if (placement?.startsWith('bottom'))
+        return placement?.replace('bottom', 'top');
+    return placement;
+}

package/dist/floating/dialog/NeoDialog.svelte

@@ -24,6 +24,7 @@
   import { getNeoPortalContext } from '../portal/neo-portal-context.svelte.js';
   import NeoPortal from '../portal/NeoPortal.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../../utils/action.utils.js';
+  import { computeBorderRadius } from '../../utils/border.utils.js';
   import { getColorVariable } from '../../utils/colors.utils.js';
   import { coerce, computeGlassFilter, computeShadowElevation, PositiveMinMaxElevation } from '../../utils/shadow.utils.js';
   import { toSize } from '../../utils/style.utils.js';
@@ -430,6 +431,7 @@
       style:--neo-dialog-padding={padding}
       style:--neo-dialog-elevation={elevation}
       style:--neo-dialog-safe-margin="{movable.margin ?? 0}px"
+      style:--neo-dialog-border-radius={computeBorderRadius(rounded)}
       {...dialogHandler}
     >
       <NeoHandle
@@ -449,7 +451,6 @@
 </NeoPortal>
 
 <style>.neo-dialog {
-  z-index: var(--neo-dialog-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-dialog-elevation, 1)));
   color: var(--neo-dialog-color, inherit);
   background-color: var(--neo-dialog-bg-color, var(--neo-glass-background-color));
   border: var(--neo-border-width, 1px) solid var(--neo-dialog-border-color, var(--neo-glass-background-color));
@@ -459,16 +460,7 @@
   box-shadow: var(--neo-dialog-box-shadow, var(--neo-glass-box-shadow-raised-1));
   backdrop-filter: var(--neo-dialog-content-filter, var(--neo-blur-3));
   transition: box-shadow 0.3s ease-out, backdrop-filter 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
-  display: flex;
-  box-sizing: border-box;
-  width: fit-content;
-  max-width: 100%;
-  height: fit-content;
-  max-height: 100%;
-  margin: var(--neo-dialog-margin, 0);
-  padding: var(--neo-dialog-padding, var(--neo-gap-xs) var(--neo-gap));
-  overflow: auto;
-  outline: none;
+  z-index: var(--neo-dialog-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-dialog-elevation, 1)));
 }
 .neo-dialog.neo-tinted {
   background-color: var(--neo-dialog-bg-color, var(--neo-glass-background-color-tinted));
@@ -484,13 +476,26 @@
   border-color: transparent;
 }
 .neo-dialog.neo-rounded {
-  border-radius: var(--neo-dialog-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-dialog-border-radius, var(--neo-dialog-border-radius-rounded, var(--neo-border-radius-xxl)));
+}
+.neo-dialog {
+  display: flex;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  height: fit-content;
+  max-height: 100%;
+  margin: var(--neo-dialog-margin, 0);
+  padding: var(--neo-dialog-padding, var(--neo-gap-xs) var(--neo-gap));
+  overflow: auto;
+  outline: none;
 }
 .neo-dialog.neo-movable {
   will-change: translate;
 }
 .neo-dialog.neo-movable.neo-handle {
   cursor: grab;
+  touch-action: none;
 }
 .neo-dialog.neo-movable.neo-handle:active, .neo-dialog.neo-movable.neo-handle[data-moving=true] {
   cursor: grabbing;
@@ -550,6 +555,7 @@
 }
 .neo-dialog[data-modal=true] {
   position: fixed;
+  margin: var(--neo-dialog-margin, var(--neo-gap));
 }
 .neo-dialog[data-modal=true][data-placement=center] {
   inset: 0;
@@ -558,22 +564,18 @@
 .neo-dialog[data-modal=true][data-placement^=top], .neo-dialog[data-modal=true][data-placement=right-start], .neo-dialog[data-modal=true][data-placement=left-start] {
   top: 0;
   bottom: auto;
-  margin-top: var(--neo-dialog-safe-margin, var(--neo-gap));
 }
 .neo-dialog[data-modal=true][data-placement^=bottom], .neo-dialog[data-modal=true][data-placement=right-end], .neo-dialog[data-modal=true][data-placement=left-end] {
   top: auto;
   bottom: 0;
-  margin-bottom: var(--neo-dialog-safe-margin, var(--neo-gap));
 }
 .neo-dialog[data-modal=true][data-placement^=left], .neo-dialog[data-modal=true][data-placement=bottom-start], .neo-dialog[data-modal=true][data-placement=top-start] {
   right: auto;
   left: 0;
-  margin-left: var(--neo-dialog-safe-margin, var(--neo-gap));
 }
 .neo-dialog[data-modal=true][data-placement^=right], .neo-dialog[data-modal=true][data-placement=bottom-end], .neo-dialog[data-modal=true][data-placement=top-end] {
   right: 0;
   left: auto;
-  margin-right: var(--neo-dialog-safe-margin, var(--neo-gap));
 }
 .neo-dialog[data-modal=true][data-placement=right], .neo-dialog[data-modal=true][data-placement=left] {
   top: 0;
@@ -584,8 +586,8 @@
 .neo-dialog[data-modal=true][data-placement=top], .neo-dialog[data-modal=true][data-placement=bottom] {
   right: 0;
   left: 0;
-  margin-right: var(--neo-dialog-margin-bottom, auto);
-  margin-left: var(--neo-dialog-margin-top, auto);
+  margin-right: var(--neo-dialog-margin-right, auto);
+  margin-left: var(--neo-dialog-margin-left, auto);
 }
 .neo-dialog[data-modal=true].neo-slide {
   opacity: var(--neo-slide-opacity-start, 0);
@@ -707,13 +709,13 @@
   }
 }
 
-:global(html:has(.neo-dialog.neo-body-scroll-disabled[data-open="true"])),
-:global(body:has(.neo-dialog.neo-body-scroll-disabled[data-open="true"])) {
+:global(html:has(.neo-dialog.neo-body-scroll-disabled[data-open='true'])),
+:global(body:has(.neo-dialog.neo-body-scroll-disabled[data-open='true'])) {
   overflow: hidden !important;
   overscroll-behavior: contain;
 }
 
-:global(body.neo-scroll-lock:has(.neo-dialog.neo-body-scroll-disabled[data-open="true"])) {
+:global(body.neo-scroll-lock:has(.neo-dialog.neo-body-scroll-disabled[data-open='true'])) {
   position: fixed;
   top: var(--neo-dialog-scroll-offset-y, 0);
   left: var(--neo-dialog-scroll-offset-x, 0);

package/dist/floating/dialog/NeoDialog.svelte.d.ts

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

package/dist/floating/dialog/NeoDialogConfirm.svelte.d.ts

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

package/dist/floating/dialog/NeoDialogStepper.svelte.d.ts

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