@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/providers/neo-theme-provider.model.js

@@ -14,6 +14,12 @@ export const NeoSource = {
     BottomRight: 'bottom-right',
     BottomLeft: 'bottom-left',
 };
+export const NeoTransition = {
+    None: 'none',
+    Spin: 'neo-spin',
+    Wave: 'neo-wave',
+    Circle: 'neo-circle',
+};
 export const NeoThemeRoot = 'neo-theme-root';
 export const NeoThemeStorageKey = {
     Reset: 'neo-reset',
@@ -21,6 +27,7 @@ export const NeoThemeStorageKey = {
     Source: 'neo-source',
     Remember: 'neo-remember',
     Transition: 'neo-transition',
+    InFlight: 'neo-in-flight',
 };
 export const getSavedTheme = () => localStorage?.getItem(NeoThemeStorageKey.Theme);
 export const getPreferTheme = () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? NeoTheme.Dark : NeoTheme.Light);
@@ -37,3 +44,5 @@ export const getSavedReset = () => localStorage?.getItem(NeoThemeStorageKey.Rese
 export const getReset = () => getBoolean(getSavedReset(), true);
 export const getSavedRemember = () => localStorage?.getItem(NeoThemeStorageKey.Remember);
 export const getRemember = () => getBoolean(getSavedRemember(), true);
+export const getSavedTransition = () => localStorage?.getItem(NeoThemeStorageKey.Transition);
+export const getTransition = () => getSavedTransition() || NeoTransition.None;

package/dist/providers/neo-theme-selector.model.d.ts

@@ -1,54 +1,9 @@
-import type { Snippet } from 'svelte';
-import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
 import type { NeoButtonProps } from '../buttons/neo-button.model.js';
-import type { INeoThemeProviderContext } from './neo-theme-provider.model.js';
-export type NeoThemeSelectorProps = {
-    /**
-     * Any children to display in the theme selector.
-     */
-    children?: Snippet<[INeoThemeProviderContext]>;
-    /**
-     * Whether to show the reset style button or not.
-     */
-    reset?: boolean;
-    /**
-     * Whether to show the dark/light theme button or not.
-     */
-    theme?: boolean;
+export interface NeoThemeSelectorProps extends NeoButtonProps {
     /**
      * The label to show in the theme selector.
      *
      * @default Theme
      */
-    themeLabel?: string;
-    /**
-     * Whether to show the light source button or not.
-     */
-    source?: boolean;
-    /**
-     * The label to show in the source selector.
-     *
-     * @default Source
-     */
-    sourceLabel?: string;
-    /**
-     * Whether to show the remember button or not.
-     */
-    remember?: boolean;
-    /**
-     * The props to pass to the reset button.
-     */
-    resetProps?: NeoButtonProps;
-    /**
-     * The props to pass to the theme button.
-     */
-    themeProps?: NeoButtonProps;
-    /**
-     * The props to pass to the source button.
-     */
-    sourceProps?: NeoButtonProps;
-    /**
-     * The props to pass to the remember button.
-     */
-    rememberProps?: NeoButtonProps;
-} & Omit<NeoButtonGroupProps, 'children'>;
+    label?: string;
+}

package/dist/providers/neo-theme-selector.model.js

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

package/dist/providers/neo-theme-selectors.model.d.ts

@@ -0,0 +1,84 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
+import type { NeoRememberSelectorProps } from './neo-remember-selector.model.js';
+import type { NeoResetSelectorProps } from './neo-reset-selector.model.js';
+import type { NeoSourceSelectorProps } from './neo-source-selector.model.js';
+import type { INeoThemeProviderContext } from './neo-theme-provider.model.js';
+import type { NeoThemeSelectorProps } from './neo-theme-selector.model.js';
+import type { NeoTransitionSelectorProps } from './neo-transition-selector.model.js';
+export type NeoThemeSelectorsProps = {
+    /**
+     * Any children to display in the theme selector.
+     */
+    children?: Snippet<[INeoThemeProviderContext]>;
+    /**
+     * Whether to show the dark/light theme button or not.
+     */
+    theme?: boolean;
+    /**
+     * The label to show in the theme selector.
+     *
+     * @default Theme
+     */
+    themeLabel?: NeoThemeSelectorProps['label'];
+    /**
+     * Whether to show the light source button or not.
+     */
+    source?: boolean;
+    /**
+     * The label to show in the source selector.
+     *
+     * @default Source
+     */
+    sourceLabel?: NeoSourceSelectorProps['label'];
+    /**
+     * Whether to show the reset style button or not.
+     */
+    reset?: boolean;
+    /**
+     * The label to show in the reset selector.
+     *
+     * @default Reset
+     */
+    resetLabel?: NeoResetSelectorProps['label'];
+    /**
+     * Whether to show the remember button or not.
+     */
+    remember?: boolean;
+    /**
+     * The label to show in the remember selector.
+     *
+     * @default Remember
+     */
+    rememberLabel?: NeoRememberSelectorProps['label'];
+    /**
+     * Which transition to use when changing the theme.
+     */
+    themeTransition?: boolean;
+    /**
+     * The label to show in the transition selector.
+     *
+     * @default Transition: <transition>
+     */
+    themeTransitionLabel?: NeoTransitionSelectorProps['label'];
+    /**
+     * The props to pass to the reset button.
+     */
+    resetProps?: NeoResetSelectorProps;
+    /**
+     * The props to pass to the theme button.
+     */
+    themeProps?: NeoThemeSelectorProps;
+    /**
+     * The props to pass to the source button.
+     */
+    sourceProps?: NeoSourceSelectorProps;
+    /**
+     * The props to pass to the remember button.
+     */
+    rememberProps?: NeoRememberSelectorProps;
+    /**
+     * The props to pass to the transition button.
+     */
+    themeTransitionProps?: NeoTransitionSelectorProps;
+} & Omit<NeoButtonGroupProps, 'children'>;

package/dist/providers/neo-theme-selectors.model.js

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

package/dist/providers/neo-transition-selector.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+export interface NeoTransitionSelectorProps extends NeoButtonProps {
+    /**
+     * The label to show in the Transition selector.
+     *
+     * @default Transition: <transition>
+     */
+    label?: string;
+}

package/dist/providers/neo-transition-selector.model.js

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

package/dist/skeletons/NeoSkeletonContainer.svelte

@@ -23,8 +23,10 @@
 
     // Styles
     flex,
+    ratio,
     width,
     height,
+    reverse,
 
     // Content
     context = $bindable({}),
@@ -65,7 +67,7 @@
 {#if disabled}
   {@render content?.()}
 {:else if content}
-  <NeoTransitionContainer {width} {height} {...containerProps}>
+  <NeoTransitionContainer {width} {height} {reverse} {ratio} {...containerProps}>
     {#if loading}
       <svelte:element
         this={tag}

package/dist/skeletons/NeoSkeletonMedia.svelte

@@ -3,11 +3,14 @@
 
   import { fade } from 'svelte/transition';
 
-  import IconAccount from '../icons/IconAccount.svelte';
-  import IconImage from '../icons/IconImage.svelte';
-  import IconVideo from '../icons/IconVideo.svelte';
+  import NeoIconAccount from '../icons/NeoIconAccount.svelte';
+  import NeoIconAudio from '../icons/NeoIconAudio.svelte';
+  import NeoIconImage from '../icons/NeoIconImage.svelte';
+  import NeoIconVideo from '../icons/NeoIconVideo.svelte';
+  import { NeoSkeletonMediaType } from './neo-skeleton-media.model.js';
   import NeoSkeletonContainer from './NeoSkeletonContainer.svelte';
   import { toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { toSize } from '../utils/style.utils.js';
   import { quickDelayProps, quickDurationProps } from '../utils/transition.utils.js';
 
@@ -19,21 +22,21 @@
     // State
     ref = $bindable(),
     loading = true,
-    type = 'empty',
-    size = type === 'avatar' ? '70%' : '20%',
-    flex,
-    align,
+    type = NeoSkeletonMediaType.Empty,
+    size = type === NeoSkeletonMediaType.Avatar ? '70%' : '20%',
     glass,
     disabled,
 
     // Styles
     rounded,
     circle,
-    ratio = type === 'video' ? '16 / 9' : '4 / 3',
+    ratio = type === NeoSkeletonMediaType.Video ? '16 / 9' : '4 / 3',
 
     // Size
     width: _width,
     height: _height,
+    align,
+    flex,
 
     // Transition
     in: inAction = { use: fade, props: quickDelayProps },
@@ -47,12 +50,14 @@
 
   const MediaType = $derived.by(() => {
     switch (type) {
-      case 'image':
-        return IconImage;
-      case 'video':
-        return IconVideo;
-      case 'avatar':
-        return IconAccount;
+      case NeoSkeletonMediaType.Image:
+        return NeoIconImage;
+      case NeoSkeletonMediaType.Video:
+        return NeoIconVideo;
+      case NeoSkeletonMediaType.Audio:
+        return NeoIconAudio;
+      case NeoSkeletonMediaType.Avatar:
+        return NeoIconAccount;
       default:
         return undefined;
     }
@@ -75,6 +80,7 @@
   out={outAction}
   width={width?.absolute}
   height={height?.absolute}
+  {ratio}
   {content}
   containerProps={transitionProps}
   {...containerProps}
@@ -93,6 +99,7 @@
     style:aspect-ratio={ratio}
     style:align-self={align}
     style:flex
+    style:--neo-skeleton-border-radius={computeBorderRadius(rounded)}
     in:inFn={inProps}
     out:outFn={outProps}
     {...rest}
@@ -113,7 +120,8 @@
   flex: 1 1 auto;
   flex-direction: column;
   gap: var(--neo-skeleton-gap, var(--neo-gap-xl));
-  width: 100%;
+  width: var(--neo-skeleton-content-width, 100%);
+  height: var(--neo-skeleton-content-height);
   border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius));
   --neo-skeleton-start: 1;
   --neo-skeleton-end: calc(1 + var(--neo-skeleton-step, -0.3));
@@ -122,7 +130,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;
 }
@@ -145,7 +153,7 @@
   --neo-skeleton-color: var(--neo-glass-skeleton-color);
 }
 .neo-skeleton-media.neo-rounded {
-  border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-skeleton-media.neo-circle {
   border-radius: 50%;
@@ -157,7 +165,7 @@
   left: calc(50% - var(--neo-skeleton-media-icon-size) / 2);
   width: var(--neo-skeleton-media-icon-size);
   height: var(--neo-skeleton-media-icon-size);
-  color: oklch(from var(--neo-skeleton-color) calc(l + 0.1) c h);
+  color: var(--neo-text-color-inverse);
   visibility: visible;
   opacity: 0.75;
 }

package/dist/skeletons/NeoSkeletonText.svelte

@@ -19,6 +19,7 @@
     align,
     glass,
     flex,
+    reverse,
 
     // Size
     width: _width,
@@ -81,6 +82,7 @@
   width={width?.absolute}
   height={height?.absolute}
   {content}
+  {reverse}
   containerProps={transitionProps}
   {...containerProps}
 >
@@ -129,7 +131,7 @@
   width: 100%;
   height: var(--neo-skeleton-text-font-size, var(--neo-font-size, 1rem));
   margin: var(--neo-skeleton-text-margin, calc((var(--neo-skeleton-text-line-height, var(--neo-line-height, 1.5rem)) - var(--neo-skeleton-text-font-size, var(--neo-font-size, 1rem))) / 2) 0);
-  border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-skeleton-border-radius, var(--neo-border-radius-xxl));
   --neo-skeleton-start: 1;
   --neo-skeleton-end: calc(1 + var(--neo-skeleton-step, -0.3));
   color: var(--neo-skeleton-color);
@@ -137,7 +139,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;
 }
@@ -213,7 +215,7 @@
 }
 .neo-skeleton-text-paragraph.neo-alt {
   flex-flow: row wrap;
-  gap: var(--neo-skeleton-alt-gap, 0 var(--neo-gap-xxxs));
+  gap: var(--neo-skeleton-alt-gap, 0 var(--neo-gap-3xs));
 }
 .neo-skeleton-text-paragraph.neo-justify .neo-skeleton-text-line {
   flex: 1 1 auto;

package/dist/skeletons/neo-skeleton-container.model.d.ts

@@ -42,6 +42,10 @@ export type NeoSkeletonContainerProps<Tag extends keyof HTMLElementTagNameMap =
      * Optional flex strategy for the container
      */
     flex?: CSSStyleDeclaration['flex'];
+    /**
+     * Optional aspect ratio for the container.
+     */
+    ratio?: CSSStyleDeclaration['aspectRatio'];
     /**
      * Width of the container.
      */
@@ -50,6 +54,11 @@ export type NeoSkeletonContainerProps<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;
     /**
      * Props for the transition container.
      */

package/dist/skeletons/neo-skeleton-media.model.d.ts

@@ -1,8 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { NeoSkeletonContainerProps } from './neo-skeleton-container.model.js';
 import type { HTMLTransitionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
 import type { SizeInput } from '../utils/style.utils.js';
+export declare const NeoSkeletonMediaType: {
+    readonly Image: "image";
+    readonly Video: "video";
+    readonly Audio: "audio";
+    readonly Avatar: "avatar";
+    readonly Empty: "empty";
+};
+export type NeoSkeletonMediaTypes = (typeof NeoSkeletonMediaType)[keyof typeof NeoSkeletonMediaType];
 export type NeoSkeletonMediaProps = {
     /**
      * Snippet to display as the skeleton content.
@@ -19,19 +28,23 @@ export type NeoSkeletonMediaProps = {
     /**
      * Type of media skeleton to display.
      */
-    type: 'image' | 'video' | 'avatar' | 'empty';
+    type?: NeoSkeletonMediaTypes;
     /**
      * Size of the media skeleton icon.
      */
     size?: CSSStyleDeclaration['width'];
-    /**
-     * Overrides the default flex value.
-     */
-    flex?: CSSStyleDeclaration['flex'];
     /**
      * Alignment strategy for the skeleton.
      */
     align?: CSSStyleDeclaration['alignSelf'];
+    /**
+     * Optional aspect ratio for the image.
+     */
+    ratio?: CSSStyleDeclaration['aspectRatio'];
+    /**
+     * Overrides the default flex value.
+     */
+    flex?: CSSStyleDeclaration['flex'];
     /**
      * Optional width constraints.
      */
@@ -47,7 +60,7 @@ export type NeoSkeletonMediaProps = {
     /**
      * Whether to round the corners of the skeleton.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Whether to round the skeleton as a circle.
      */
@@ -57,11 +70,8 @@ export type NeoSkeletonMediaProps = {
      */
     glass?: boolean;
     /**
-     * Aspect ratio of the media.
+     * Props to pass to the skeleton container.
      */
-    ratio?: CSSStyleDeclaration['aspectRatio'] /**
-                                                * Props to pass to the skeleton container.
-                                                */;
     containerProps?: Omit<NeoSkeletonContainerProps, 'children' | 'content' | 'containerProps'>;
     /**
      * Props to pass to the transition container.

package/dist/skeletons/neo-skeleton-media.model.js

@@ -1 +1,7 @@
-export {};
+export const NeoSkeletonMediaType = {
+    Image: 'image',
+    Video: 'video',
+    Audio: 'audio',
+    Avatar: 'avatar',
+    Empty: 'empty',
+};

package/dist/skeletons/neo-skeleton-text.model.d.ts

@@ -62,6 +62,11 @@ export type NeoSkeletonTextProps = {
      * Whether to add glass like transparency to the skeleton.
      */
     glass?: boolean;
+    /**
+     * Reverse the direction of the container.
+     * Flow from right to left by default.
+     */
+    reverse?: boolean;
     /**
      * Props for the title div.
      */

package/dist/stepper/NeoStepper.svelte

@@ -3,7 +3,13 @@
   import type { SwipeOptions } from '@dvcol/svelte-utils/swipe';
 
   import type { NeoProgressBarMarkContext, NeoProgressBarProps } from '../progress/neo-progress-bar.model.js';
-  import type { NeoStepperBeforeEvent, NeoStepperContext, NeoStepperEvent, NeoStepperNavigations, NeoStepperProps } from './neo-stepper.model.js';
+  import type {
+    NeoStepperBeforeEvent,
+    NeoStepperContext,
+    NeoStepperEvent,
+    NeoStepperNavigations,
+    NeoStepperProps,
+  } from './neo-stepper.model.js';
   import type { ShadowElevation } from '../utils/shadow.utils.js';
 
   import { debounce } from '@dvcol/common-utils/common/debounce';
@@ -17,13 +23,7 @@
   import { NeoProgressDirection } from '../progress/neo-progress.model.js';
   import NeoProgressBar from '../progress/NeoProgressBar.svelte';
   import NeoProgressMark from '../progress/NeoProgressMark.svelte';
-  import {
-
-    NeoStepperNavigation,
-
-    NeoStepperPlacement,
-
-  } from './neo-stepper.model.js';
+  import { NeoStepperNavigation, NeoStepperPlacement } from './neo-stepper.model.js';
   import { toTransition, toTransitionProps } from '../utils/action.utils.js';
   import { Logger } from '../utils/logger.utils.js';
   import { coerce, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '../utils/shadow.utils.js';
@@ -167,7 +167,7 @@
    * This is imperative navigation, it will not check if next or previous constraints are met.
    * But, it will check if the target step is disabled.
    */
-  const goToStep: NeoStepperContext['goToStep'] = async (
+  export const goTo: NeoStepperContext['goToStep'] = async (
     index: number,
     reason: NeoStepperNavigations = NeoStepperNavigation.Navigate,
     target = steps[index],
@@ -185,16 +185,16 @@
     }
   };
 
-  const goPrevious: NeoStepperContext['goPrevious'] = async () => {
+  export const goPrevious: NeoStepperContext['goPrevious'] = async () => {
     if (isDisabled.previous) return;
-    if (active > 0) return goToStep(active - 1, NeoStepperNavigation.Previous);
-    return goToStep(steps.length - 1, NeoStepperNavigation.Previous);
+    if (active > 0) return goTo(active - 1, NeoStepperNavigation.Previous);
+    return goTo(steps.length - 1, NeoStepperNavigation.Previous);
   };
 
-  const goNext: NeoStepperContext['goNext'] = async () => {
+  export const goNext: NeoStepperContext['goNext'] = async () => {
     if (isDisabled.next) return;
-    if (active < steps.length - 1) return goToStep(active + 1, NeoStepperNavigation.Next);
-    return goToStep(0, NeoStepperNavigation.Next);
+    if (active < steps.length - 1) return goTo(active + 1, NeoStepperNavigation.Next);
+    return goTo(0, NeoStepperNavigation.Next);
   };
 
   const isMarkDisabled = (index: number, target = steps[index]): boolean => {
@@ -238,7 +238,7 @@
     active,
     last,
 
-    goToStep,
+    goToStep: goTo,
     goPrevious,
     goNext,
   });
@@ -250,14 +250,14 @@
     if (!marksRefs?.length || marksRefs.length < (marks?.length ?? 0)) return;
     return {
       start: toPixel((marksRefs[0]?.offsetWidth ?? 0) / 2),
-      end: toPixel((marksRefs[marksRefs.length - 1]?.offsetWidth ?? 0) / 2),
+      end: toPixel((marksRefs.at(-1)?.offsetWidth ?? 0) / 2),
     };
   });
 
   $effect(() => {
     if (!ref) return;
     Object.assign(ref, {
-      goTo: goToStep,
+      goTo,
       previous: goPrevious,
       next: goNext,
     });
@@ -276,7 +276,7 @@
     disabled={_disabled}
     readonly={_disabled}
     glass={progressProps?.glass}
-    onclick={() => goToStep(ctx.index)}
+    onclick={() => goTo(ctx.index)}
     label={(ctx.index + 1)?.toString()}
     {...markProps}
     {...steps[ctx.index]?.markProps}
@@ -318,7 +318,7 @@
           label="Cancel"
           aria-label="Cancel stepper"
           title="Cancel stepper"
-          onclick={() => goToStep(0, NeoStepperNavigation.Cancel)}
+          onclick={() => goTo(0, NeoStepperNavigation.Cancel)}
           transition={{ use: scale, props: { duration: quickDuration, start: 0.95 } }}
           {...buttonProps}
           {...cancelProps}

package/dist/stepper/NeoStepper.svelte.d.ts

@@ -1,4 +1,11 @@
-import type { NeoStepperProps } from './neo-stepper.model.js';
-declare const NeoStepper: import("svelte").Component<NeoStepperProps, {}, "ref" | "active" | "loading">;
+import type { NeoStepperContext, NeoStepperProps } from './neo-stepper.model.js';
+declare const NeoStepper: import("svelte").Component<NeoStepperProps, {
+    /**
+       * This is imperative navigation, it will not check if next or previous constraints are met.
+       * But, it will check if the target step is disabled.
+       */ goTo: NeoStepperContext["goToStep"];
+    goPrevious: NeoStepperContext["goPrevious"];
+    goNext: NeoStepperContext["goNext"];
+}, "loading" | "ref" | "active">;
 type NeoStepper = ReturnType<typeof NeoStepper>;
 export default NeoStepper;

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

@@ -1,12 +1,12 @@
 import type { SwipeOptions } from '@dvcol/svelte-utils/swipe';
 import type { TransitionProps } from '@dvcol/svelte-utils/transition';
-import type { NeoArrowButtonProps } from '../index.js';
 import type { Snippet } from 'svelte';
+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 { NeoProgressBarProps } from '../progress/neo-progress-bar.model.js';
 import type { NeoProgressMarkProps } from '../progress/neo-progress-mark.model.js';
 import type { HTMLTransitionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
 import type { ShadowShallowElevation, ShadowShallowElevationString } from '../utils/shadow.utils.js';
 import type { SizeInput } from '../utils/style.utils.js';
@@ -56,8 +56,8 @@ export interface NeoStepperContext<Value = unknown> {
      * But, it will check if the target step is disabled.
      *
      * @param step - index of the step to navigate to.
-     * @param target - Optional step instance (extracted from the steps array if not provided).
      * @param reason - Optional reason for the navigation.
+     * @param target - Optional step instance (extracted from the steps array if not provided).
      */
     goToStep: (step: number, reason?: NeoStepperNavigations, target?: NeoStepperStep<Value>) => Promise<undefined | NeoStepperEvent<Value>>;
     /**
@@ -274,7 +274,7 @@ export type NeoStepperProps<Value = unknown, Tag extends keyof HTMLElementTagNam
     /**
      * Whether to render the stepper's buttons with rounded borders.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Overrides the default flex value.
      */
@@ -326,7 +326,7 @@ export type NeoStepperProps<Value = unknown, Tag extends keyof HTMLElementTagNam
      * Step options will take precedence over these props.
      * @see NeoStepperStep.cancelProps
      */
-    cancelProps?: NeoIconButtonProps;
+    cancelProps?: NeoButtonProps;
     /**
      * Optional props to pass to the next button.
      *