@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/floating/tooltips/NeoPopSelect.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { UseFloatingReturn } from '@skeletonlabs/floating-ui-svelte';
-  import type { NeoListSelectEvent, NeoTooltipContext, NeoTooltipToggle } from '../../index.js';
 
   import type { NeoPopSelectProps } from './neo-pop-select.model.js';
-  import type { NeoListContext, NeoListItemOrSection } from '../../list/neo-list.model.js';
+  import type { NeoTooltipContext, NeoTooltipToggle } from './neo-tooltip.model.js';
+  import type { NeoListContext, NeoListItemOrSection, NeoListSelectEvent } from '../../list/neo-list.model.js';
 
   import { watch } from '@dvcol/svelte-utils/watch';
 
@@ -37,6 +37,7 @@
     tooltipRef = $bindable(),
     triggerRef = $bindable(),
     open = $bindable(false),
+    position = $bindable(),
     target,
     color,
     filled,
@@ -113,7 +114,7 @@
     bind:filter
     bind:sort
     select
-    reverse={floating?.placement?.startsWith('top')}
+    flip={floating?.placement?.startsWith('top')}
     before={search ? beforeList : before}
     {items}
     onSelect={onSelected}
@@ -126,6 +127,7 @@
 <NeoTooltip
   bind:ref={tooltipRef}
   bind:triggerRef
+  bind:position
   bind:open={() => open || focused,
     (value) => {
       open = value;

package/dist/floating/tooltips/NeoPopSelect.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoPopSelectProps } from './neo-pop-select.model.js';
-declare const NeoPopSelect: import("svelte").Component<NeoPopSelectProps, {}, "focused" | "filter" | "sort" | "open" | "triggerRef" | "tooltipRef" | "highlight" | "selected" | "listRef">;
+declare const NeoPopSelect: import("svelte").Component<NeoPopSelectProps, {}, "filter" | "focused" | "sort" | "open" | "selected" | "position" | "triggerRef" | "tooltipRef" | "highlight" | "listRef">;
 type NeoPopSelect = ReturnType<typeof NeoPopSelect>;
 export default NeoPopSelect;

package/dist/floating/tooltips/NeoPopStepper.svelte

@@ -32,6 +32,7 @@
     tooltipRef = $bindable(),
     triggerRef = $bindable(),
     open = $bindable(false),
+    position = $bindable(),
     target,
     openDelay,
     hoverDelay,
@@ -137,6 +138,7 @@
   bind:ref={tooltipRef}
   bind:triggerRef
   bind:open
+  bind:position
   keepOpenOnFocus
   closeOnDismiss={closable}
   {tooltip}

package/dist/floating/tooltips/NeoPopStepper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoPopStepperProps } from './neo-pop-stepper.model.js';
-declare const NeoPopStepper: import("svelte").Component<NeoPopStepperProps, {}, "ref" | "active" | "loading" | "open" | "triggerRef" | "tooltipRef">;
+declare const NeoPopStepper: import("svelte").Component<NeoPopStepperProps, {}, "loading" | "ref" | "active" | "open" | "position" | "triggerRef" | "tooltipRef">;
 type NeoPopStepper = ReturnType<typeof NeoPopStepper>;
 export default NeoPopStepper;

package/dist/floating/tooltips/NeoTooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { NeoTooltipProps, NeoTooltipToggle } from './neo-tooltip.model.js';
+  import type { NeoTooltipHTMLElement, NeoTooltipProps } from './neo-tooltip.model.js';
   import type { HTMLNeoBaseElement } from '../../utils/html-element.utils.js';
   import type { SizeOption } from '../../utils/style.utils.js';
 
@@ -24,6 +24,7 @@
   import NeoPortal from '../portal/NeoPortal.svelte';
   import { isOffsetFunction, NeoTooltipSizeStrategy } from './neo-tooltip.model.js';
   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, DefaultShadowElevation, PositiveMinMaxElevation } from '../../utils/shadow.utils.js';
   import { isSizeOption, toPixel, toSize } from '../../utils/style.utils.js';
@@ -41,6 +42,7 @@
     open = $bindable(false),
     offset: spacing = 6,
     placement,
+    position = $bindable(),
     target,
     options,
     portal,
@@ -117,6 +119,7 @@
   const tooltipBlur = $derived(computeGlassFilter(blur, true));
   const tooltipShadow = $derived(computeShadowElevation(elevation, { glass: true }, PositiveMinMaxElevation));
 
+  let wrapperRef = $state<HTMLElement>();
   const host = $derived.by(() => {
     if (!target) return;
     if (typeof target === 'function') return target();
@@ -126,11 +129,11 @@
   const available = $state<{ width?: number; height?: number }>({});
 
   let focus = $state(false);
-  const floating = useFloating({
+  export const floating = useFloating({
     get elements() {
       return {
         floating: ref,
-        reference: host ?? triggerRef,
+        reference: host ?? wrapperRef,
       };
     },
     get open() {
@@ -144,11 +147,11 @@
       }
       if (_reason === 'hover' && !_open && (keepOpenOnHover || focus)) return;
       if (_reason === 'click' && _open && keepOpenOnClick) return;
-      open = _open;
+      if (_reason !== 'click') open = _open;
     },
     get middleware() {
       const middleware = [
-        offset(isOffsetFunction(spacing) ? spacing(floating.placement) : spacing),
+        offset((isOffsetFunction(spacing) ? spacing(position ?? placement) : spacing) ?? 6),
         size({
           apply({ availableWidth, availableHeight }) {
             available.width = availableWidth - 8;
@@ -167,6 +170,14 @@
     ...options,
   });
 
+  // Reflect final position
+  watch(
+    () => {
+      position = floating?.placement;
+    },
+    () => floating?.placement,
+  );
+
   const _role = useRole(floating.context, {
     get role() {
       return role ?? 'tooltip';
@@ -255,23 +266,28 @@
     };
   });
 
-  const toggle: NeoTooltipToggle = (state = !open) => {
+  export function toggle(state = !open) {
     open = state;
     return open;
   };
 
-  const addMethods = <T extends HTMLElement>(element?: T) => {
+  export function update() {
+    return floating.update();
+  }
+
+  const addMethods = <T extends HTMLElement>(element?: T | null): NeoTooltipHTMLElement<T> | undefined => {
     if (!element) return;
-    if (!Object.hasOwn(element, 'toggle')) {
-      Object.assign(element, { toggle });
-    }
-    if (!Object.hasOwn(element, 'update')) {
-      Object.assign(element, { update: () => floating.update() });
-    }
+    if (!Object.hasOwn(element, 'toggle')) Object.assign(element, { toggle });
+    if (!Object.hasOwn(element, 'update')) Object.assign(element, { update });
+    return element;
   };
 
-  $effect(() => addMethods(ref));
-  $effect(() => addMethods(triggerRef));
+  $effect(() => {
+    addMethods(ref);
+  });
+  $effect(() => {
+    triggerRef = addMethods(floating.elements.reference as HTMLElement);
+  });
 
   const computeSize = <T extends 'width' | 'height'>(value: NeoTooltipProps[T], dimension: T): SizeOption<T> | undefined => {
     const tSize = dimension === 'width' ? triggerRef?.offsetWidth : triggerRef?.offsetHeight;
@@ -329,7 +345,7 @@
 {#if !target}
   <svelte:element
     this={triggerTag}
-    bind:this={triggerRef}
+    bind:this={wrapperRef}
     class:neo-tooltip-trigger={true}
     onfocusin={triggerHandler?.onfocus}
     onfocusout={triggerHandler?.onblur}
@@ -347,6 +363,7 @@
       bind:this={ref}
       hidden={!floating.open}
       data-elevation={elevation}
+      data-position={position}
       data-unmount-on-close={unmountOnClose}
       class:neo-tooltip={true}
       class:neo-rounded={rounded}
@@ -377,6 +394,7 @@
       style:--neo-tooltip-backdrop-filter={tooltipBlur}
       style:--neo-tooltip-padding={padding}
       style:--neo-tooltip-elevation={elevation}
+      style:--neo-tooltip-border-radius={computeBorderRadius(rounded)}
       style={toStyle(tooltipStyle, rest.style)}
     >
       {#if typeof tooltip === 'function'}
@@ -389,7 +407,6 @@
 </NeoPortal>
 
 <style>.neo-tooltip {
-  z-index: var(--neo-tooltip-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-tooltip-elevation, 1)));
   color: var(--neo-tooltip-color, inherit);
   background-color: var(--neo-tooltip-bg-color, var(--neo-glass-background-color));
   border: var(--neo-border-width, 1px) solid var(--neo-tooltip-border-color, var(--neo-glass-background-color));
@@ -399,11 +416,8 @@
   box-shadow: var(--neo-tooltip-box-shadow, var(--neo-glass-box-shadow-raised-1));
   backdrop-filter: var(--neo-tooltip-backdrop-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;
-  padding: var(--neo-tooltip-padding, var(--neo-gap-xxxs) var(--neo-gap-xs));
-  display: flex;
-  flex: 1 0 fit-content;
-  flex-direction: column;
-  overflow: hidden;
+  z-index: var(--neo-tooltip-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-tooltip-elevation, 1)));
+  padding: var(--neo-tooltip-padding, var(--neo-gap-3xs) var(--neo-gap-xs));
 }
 .neo-tooltip.neo-tinted {
   background-color: var(--neo-tooltip-bg-color, var(--neo-glass-background-color-tinted));
@@ -420,7 +434,13 @@
 }
 .neo-tooltip.neo-rounded {
   padding: var(--neo-tooltip-padding, var(--neo-gap-xs) var(--neo-gap));
-  border-radius: var(--neo-tooltip-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-tooltip-border-radius, var(--neo-tooltip-border-radius-rounded, var(--neo-border-radius-xxl)));
+}
+.neo-tooltip {
+  display: flex;
+  flex: 1 0 fit-content;
+  flex-direction: column;
+  overflow: hidden;
 }
 .neo-tooltip :global(> .neo-list:only-child) {
   width: inherit;

package/dist/floating/tooltips/NeoTooltip.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { NeoTooltipProps } from './neo-tooltip.model.js';
-declare const NeoTooltip: import("svelte").Component<NeoTooltipProps, {}, "ref" | "open" | "triggerRef">;
+declare const NeoTooltip: import("svelte").Component<NeoTooltipProps, {
+    floating: import("@skeletonlabs/floating-ui-svelte").UseFloatingReturn;
+    toggle: (state?: boolean) => boolean;
+    update: () => Promise<void>;
+}, "ref" | "open" | "position" | "triggerRef">;
 type NeoTooltip = ReturnType<typeof NeoTooltip>;
 export default NeoTooltip;

package/dist/floating/tooltips/neo-pop-confirm.model.d.ts

@@ -55,4 +55,4 @@ export type NeoPopConfirmProps = {
      * Optional props to pass to the tooltip.
      */
     tooltipProps?: Omit<NeoTooltipProps, 'ref' | 'triggerRef' | 'open' | 'children'>;
-} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'rounded' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & Omit<NeoConfirmProps, 'children' | 'header'>;
+} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'position' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'rounded' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & Omit<NeoConfirmProps, 'children' | 'header'>;

package/dist/floating/tooltips/neo-pop-select.model.d.ts

@@ -31,12 +31,10 @@ export type NeoPopSelectProps<Value = unknown> = {
     searchProps?: NeoListSearchProps;
     /**
      * Event listener that fires when an item is selected/deselected.
-     * @param event
      */
     onSelect?: NeoListProps<Value>['onSelect'];
     /**
      * Event listener that fires when an item is selected/deselected.
-     * @param value
      */
     onChange?: (current: Value, previous: Value) => void;
     /**
@@ -47,4 +45,4 @@ export type NeoPopSelectProps<Value = unknown> = {
      * Optional props to pass to the tooltip.
      */
     tooltipProps?: Omit<NeoTooltipProps, 'ref' | 'triggerRef' | 'open' | 'children'>;
-} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'rounded' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & Omit<NeoListProps<Value>, 'ref' | 'children' | 'width' | 'height'>;
+} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'position' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'rounded' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & Omit<NeoListProps<Value>, 'ref' | 'children' | 'width' | 'height' | 'items'>;

package/dist/floating/tooltips/neo-pop-stepper.model.d.ts

@@ -14,7 +14,7 @@ export type NeoPopStepperProps = {
     /**
      * Element(s) to render inside the header once open.
      */
-    header?: Snippet<[NeoTooltipContext, NeoTooltipToggle, NeoStepperContext]>;
+    header?: string | Snippet<[NeoTooltipContext, NeoTooltipToggle, NeoStepperContext]>;
     /**
      * Optional ref to the tooltip.
      */
@@ -46,4 +46,4 @@ export type NeoPopStepperProps = {
      * Optional props to pass to the tooltip.
      */
     tooltipProps?: Omit<NeoTooltipProps, 'ref' | 'triggerRef' | 'open' | 'children'>;
-} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & NeoFloatingStepperProps;
+} & Pick<NeoTooltipProps, 'triggerRef' | 'open' | 'position' | 'target' | 'openDelay' | 'hoverDelay' | 'openOnFocus' | 'openOnHover' | 'openOnClick' | 'color' | 'filled' | 'tinted' | 'elevation' | 'flex' | 'align' | 'justify' | 'width' | 'height' | 'padding' | 'in' | 'out' | 'transition' | 'use' | 'onOpen' | 'onClose'> & Omit<NeoFloatingStepperProps, 'header' | 'children'>;

package/dist/floating/tooltips/neo-tooltip.model.d.ts

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 import type { NeoTooltipPlacement } from '../common/neo-placement.model.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, HTMLRefProps, HTMLTagProps } from '../../utils/html-element.utils.js';
 import type { PositiveShadowElevation, PositiveShadowElevationString } from '../../utils/shadow.utils.js';
@@ -21,7 +22,7 @@ export type NeoTooltipSizeStrategies = (typeof NeoTooltipSizeStrategy)[keyof typ
 export type NeoTooltipElevation = PositiveShadowElevation | PositiveShadowElevationString;
 export type NeoTooltipContext = UseFloatingReturn;
 export type NeoTooltipToggle = (open?: boolean) => boolean;
-export type NeoTooltipOffsetFunction = (placement: NeoTooltipPlacement) => Parameters<typeof offset>[0];
+export type NeoTooltipOffsetFunction = (placement?: NeoTooltipPlacement) => Parameters<typeof offset>[0];
 export declare const isOffsetFunction: (fn: NeoTooltipProps["offset"]) => fn is NeoTooltipOffsetFunction;
 export type NeoTooltipProps = {
     /**
@@ -63,6 +64,10 @@ export type NeoTooltipProps = {
      * Where to place the floating element relative to its reference element.
      */
     placement?: NeoTooltipPlacement;
+    /**
+     * Actual tooltip position after flip & re-flow to fit viewport
+     */
+    position?: NeoTooltipPlacement;
     /**
      * Whether the tooltip should be rendered in place or as a portal.
      * If not portal target is provided, the dialog will be attached to the body.
@@ -73,7 +78,7 @@ export type NeoTooltipProps = {
     /**
      * If true, the tooltip will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Tints the tooltip with the current color.
      */

package/dist/form/NeoForm.svelte

@@ -34,7 +34,7 @@
     ...rest
   }: NeoFormProps = $props();
 
-  const context = setNeoFormContext(id);
+  export const context = setNeoFormContext(id);
 
   const onReset: FormEventHandler<HTMLFormElement> = (e) => {
     context.validate();

package/dist/form/NeoForm.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { NeoFormProps } from './neo-form.model.js';
-declare const NeoForm: import("svelte").Component<NeoFormProps, {}, "ref" | "context">;
+declare const NeoForm: import("svelte").Component<NeoFormProps, {
+    context: import("./neo-form-context.svelte.js").NeoFormContext;
+}, "ref" | "context">;
 type NeoForm = ReturnType<typeof NeoForm>;
 export default NeoForm;

package/dist/form/neo-form-context.svelte.d.ts

@@ -4,6 +4,8 @@ export type NeoFormContextFieldHTMLElement<Element extends HTMLElement = HTMLEle
     /**
      * Check the input validity.
      * @param update whether to check the input dirty and/or valid state.
+     * @param update.dirty whether to mark the input dirty
+     * @param update.valid whether to force a valid state
      */
     validate?: (update?: {
         dirty?: boolean;

package/dist/icons/{IconAccount.svelte → NeoIconAccount.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { IconFilledProps } from './icon.model.js';
+  import type { NeoIconFilledProps } from './neo-icon.model.js';
 
   import { watch } from '@dvcol/svelte-utils/watch';
 
@@ -12,7 +12,7 @@
     enter = $bindable(true),
 
     ...rest
-  }: IconFilledProps = $props();
+  }: NeoIconFilledProps = $props();
 
   watch(
     () => {

package/dist/icons/NeoIconAccount.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconFilledProps } from './neo-icon.model.js';
+declare const NeoIconAccount: import("svelte").Component<NeoIconFilledProps, {}, "enter">;
+type NeoIconAccount = ReturnType<typeof NeoIconAccount>;
+export default NeoIconAccount;

package/dist/icons/{IconAdd.svelte → NeoIconAdd.svelte}

@@ -1,11 +1,16 @@
+<script lang="ts">
+  import type { NeoIconProps } from './neo-icon.model.js';
+
+  const { size = '1em', scale = 1, stroke = 1.5, ...rest }: NeoIconProps = $props();
+</script>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={$$props.size ?? '1em'}
-  height={$$props.size ?? '1em'}
+  width={size}
+  height={size}
   viewBox="0 0 24 24"
-  {...$$props}
-  style:scale={$$props.scale}
-  scale={undefined}
+  style:scale
+  {...rest}
 >
   <g
     fill="none"
@@ -14,7 +19,7 @@
     stroke-dashoffset="16"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width={$$props.stroke ?? 1.5}
+    stroke-width={stroke}
   >
     <path d="M5 12h14">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="16;0" />

package/dist/icons/NeoIconAdd.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconProps } from './neo-icon.model.js';
+declare const NeoIconAdd: import("svelte").Component<NeoIconProps, {}, "">;
+type NeoIconAdd = ReturnType<typeof NeoIconAdd>;
+export default NeoIconAdd;

package/dist/icons/{IconAddress.svelte → NeoIconAddress.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { IconAddressProps } from './icon.model.js';
+  import type { NeoIconAddressProps } from './neo-icon.model.js';
 
   import { watch } from '@dvcol/svelte-utils/watch';
 
@@ -14,7 +14,7 @@
     enter = $bindable(true),
 
     ...rest
-  }: IconAddressProps = $props();
+  }: NeoIconAddressProps = $props();
 
   watch(
     () => {

package/dist/icons/NeoIconAddress.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconAddressProps } from './neo-icon.model.js';
+declare const NeoIconAddress: import("svelte").Component<NeoIconAddressProps, {}, "enter">;
+type NeoIconAddress = ReturnType<typeof NeoIconAddress>;
+export default NeoIconAddress;

package/dist/icons/{IconAlert.svelte → NeoIconAlert.svelte}

@@ -1,13 +1,18 @@
+<script lang="ts">
+  import type { NeoIconProps } from './neo-icon.model.js';
+
+  const { size = '1em', scale = 1, stroke = 1.5, ...rest }: NeoIconProps = $props();
+</script>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={$$props.size ?? '1em'}
-  height={$$props.size ?? '1em'}
+  width={size}
+  height={size}
   viewBox="0 0 24 24"
-  {...$$props}
-  style:scale={$$props.scale}
-  scale={undefined}
+  style:scale
+  {...rest}
 >
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 1.5}>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={stroke}>
     <path
       stroke-dasharray="64"
       stroke-dashoffset="64"

package/dist/icons/NeoIconAlert.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconProps } from './neo-icon.model.js';
+declare const NeoIconAlert: import("svelte").Component<NeoIconProps, {}, "">;
+type NeoIconAlert = ReturnType<typeof NeoIconAlert>;
+export default NeoIconAlert;

package/dist/icons/{IconAlignBottom.svelte → NeoIconAlignBottom.svelte}

@@ -1,13 +1,18 @@
+<script lang="ts">
+  import type { NeoIconProps } from './neo-icon.model.js';
+
+  const { size = '1em', scale = 1, stroke = 2, ...rest }: NeoIconProps = $props();
+</script>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={$$props.size ?? '1em'}
-  height={$$props.size ?? '1em'}
+  width={size}
+  height={size}
   viewBox="0 0 24 24"
-  {...$$props}
-  style:scale={$$props.scale}
-  scale={undefined}
+  style:scale
+  {...rest}
 >
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 2}>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={stroke}>
     <path stroke-dasharray="20" stroke-dashoffset="20" d="M3 21l18 0">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
     </path>

package/dist/icons/NeoIconAlignBottom.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconProps } from './neo-icon.model.js';
+declare const NeoIconAlignBottom: import("svelte").Component<NeoIconProps, {}, "">;
+type NeoIconAlignBottom = ReturnType<typeof NeoIconAlignBottom>;
+export default NeoIconAlignBottom;

package/dist/icons/{IconAlignMiddle.svelte → NeoIconAlignMiddle.svelte}

@@ -1,13 +1,18 @@
+<script lang="ts">
+  import type { NeoIconProps } from './neo-icon.model.js';
+
+  const { size = '1em', scale = 1, stroke = 2, ...rest }: NeoIconProps = $props();
+</script>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={$$props.size ?? '1em'}
-  height={$$props.size ?? '1em'}
+  width={size}
+  height={size}
   viewBox="0 0 24 24"
-  {...$$props}
-  style:scale={$$props.scale}
-  scale={undefined}
+  style:scale
+  {...rest}
 >
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 2}>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={stroke}>
     <path stroke-dasharray="20" stroke-dashoffset="20" d="M3 12l18 0">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
     </path>

package/dist/icons/NeoIconAlignMiddle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconProps } from './neo-icon.model.js';
+declare const NeoIconAlignMiddle: import("svelte").Component<NeoIconProps, {}, "">;
+type NeoIconAlignMiddle = ReturnType<typeof NeoIconAlignMiddle>;
+export default NeoIconAlignMiddle;

package/dist/icons/{IconAlignTop.svelte → NeoIconAlignTop.svelte}

@@ -1,13 +1,18 @@
+<script lang="ts">
+  import type { NeoIconProps } from './neo-icon.model.js';
+
+  const { size = '1em', scale = 1, stroke = 2, ...rest }: NeoIconProps = $props();
+</script>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={$$props.size ?? '1em'}
-  height={$$props.size ?? '1em'}
+  width={size}
+  height={size}
   viewBox="0 0 24 24"
-  {...$$props}
-  style:scale={$$props.scale}
-  scale={undefined}
+  style:scale
+  {...rest}
 >
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 2}>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={stroke}>
     <path stroke-dasharray="20" stroke-dashoffset="20" d="M3 3l18 0">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
     </path>

package/dist/icons/NeoIconAlignTop.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconProps } from './neo-icon.model.js';
+declare const NeoIconAlignTop: import("svelte").Component<NeoIconProps, {}, "">;
+type NeoIconAlignTop = ReturnType<typeof NeoIconAlignTop>;
+export default NeoIconAlignTop;

package/dist/icons/{IconArrow.svelte → NeoIconArrow.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { IconArrowProps } from './icon.model.js';
+  import type { NeoIconArrowProps } from './neo-icon.model.js';
 
   import { watch } from '@dvcol/svelte-utils/watch';
 
-  import { IconArrowDirection } from './icon.model.js';
+  import { NeoIconArrowDirection } from './neo-icon.model.js';
 
   let {
     size = '1em',
@@ -12,14 +12,14 @@
 
     expanded = false,
     enter = $bindable(true),
-    direction = IconArrowDirection.Right,
+    direction = NeoIconArrowDirection.Right,
     chevron: noLine = false,
     delay,
     start,
     end,
 
     ...rest
-  }: IconArrowProps = $props();
+  }: NeoIconArrowProps = $props();
 
   watch(
     () => {
@@ -80,11 +80,7 @@
     </path>
   </g>
 
-  <style>.neo-icon-arrow-chevron {
-  transition: translate 0.2s linear;
-  transition-delay: var(--neo-arrow-delay, 0.15s);
-}
-.neo-icon-arrow-chevron[data-direction=right] {
+  <style>.neo-icon-arrow-chevron[data-direction=right] {
   translate: calc(0% - var(--neo-arrow-offset-start, 25%));
 }
 .neo-icon-arrow-chevron[data-direction=left] {
@@ -96,6 +92,10 @@
 .neo-icon-arrow-chevron[data-direction=down] {
   translate: 0 calc(0% - var(--neo-arrow-offset-start, 25%));
 }
+.neo-icon-arrow-chevron {
+  transition: translate 0.2s linear;
+  transition-delay: var(--neo-arrow-delay, 0.15s);
+}
 .neo-icon-arrow-chevron.neo-expanded {
   translate: 0;
   transition-delay: 0s;

package/dist/icons/NeoIconArrow.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoIconArrowProps } from './neo-icon.model.js';
+declare const NeoIconArrow: import("svelte").Component<NeoIconArrowProps, {}, "enter">;
+type NeoIconArrow = ReturnType<typeof NeoIconArrow>;
+export default NeoIconArrow;