@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/inputs/NeoColorPicker.svelte

@@ -7,9 +7,10 @@
   import { getUUID } from '@dvcol/common-utils/common/string';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconPaint from '../icons/IconPaint.svelte';
+  import NeoIconPaint from '../icons/NeoIconPaint.svelte';
   import NeoInput from './common/NeoInput.svelte';
   import NeoColorPickerSelector from './NeoColorPickerSelector.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { HexColorRegexString } from '../utils/regex.utils.js';
   import { coerce, computeButtonTemplate, getDefaultElevation } from '../utils/shadow.utils.js';
 
@@ -93,10 +94,12 @@
 {#snippet after()}
   <NeoButton {...afterProps}>
     {#snippet icon(ctx)}
-      {#if customIcon}
+      {#if typeof customIcon === 'function'}
         {@render customIcon(ctx)}
+      {:else if typeof customIcon === 'string'}
+        <NeoImage src={customIcon} ratio="1/1" {...afterProps?.imageProps} />
       {:else}
-        <IconPaint size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+        <NeoIconPaint size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
       {/if}
     {/snippet}
   </NeoButton>

package/dist/inputs/NeoColorPicker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoColorPickerProps } from './neo-color-picker.model.js';
-declare const NeoColorPicker: import("svelte").Component<NeoColorPickerProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef" | "pickerRef">;
+declare const NeoColorPicker: import("svelte").Component<NeoColorPickerProps, {}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef" | "pickerRef">;
 type NeoColorPicker = ReturnType<typeof NeoColorPicker>;
 export default NeoColorPicker;

package/dist/inputs/NeoColorPickerSelector.svelte

@@ -43,8 +43,8 @@
   border-radius: var(--neo-border-radius-xs);
 }
 .neo-color-picker.neo-rounded {
-  border-radius: var(--neo-border-radius-lg);
+  border-radius: var(--neo-border-radius-xxl);
 }
 .neo-color-picker.neo-rounded::-webkit-color-swatch-wrapper, .neo-color-picker.neo-rounded::-webkit-color-swatch, .neo-color-picker.neo-rounded::-moz-color-swatch {
-  border-radius: var(--neo-border-radius-lg);
+  border-radius: var(--neo-border-radius-xxl);
 }</style>

package/dist/inputs/NeoColorPickerSelector.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoColorPickerSelectorProps } from './neo-color-picker.model.js';
-declare const NeoColorPickerSelector: import("svelte").Component<NeoColorPickerSelectorProps, {}, "ref" | "value">;
+declare const NeoColorPickerSelector: import("svelte").Component<NeoColorPickerSelectorProps, {}, "value" | "ref">;
 type NeoColorPickerSelector = ReturnType<typeof NeoColorPickerSelector>;
 export default NeoColorPickerSelector;

package/dist/inputs/NeoDateTime.svelte

@@ -3,8 +3,9 @@
   import type { NeoDateTimeProps } from './neo-date-time.model.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconCalendar from '../icons/IconCalendar.svelte';
+  import NeoIconCalendar from '../icons/NeoIconCalendar.svelte';
   import NeoInput from './common/NeoInput.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { coerce, computeButtonTemplate, getDefaultElevation } from '../utils/shadow.utils.js';
 
   let {
@@ -56,10 +57,12 @@
 {#snippet after()}
   <NeoButton {...afterProps}>
     {#snippet icon(ctx)}
-      {#if customIcon}
+      {#if typeof customIcon === 'function'}
         {@render customIcon(ctx)}
+      {:else if typeof customIcon === 'string'}
+        <NeoImage src={customIcon} ratio="1/1" {...afterProps?.imageProps} />
       {:else}
-        <IconCalendar size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+        <NeoIconCalendar size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
       {/if}
     {/snippet}
   </NeoButton>

package/dist/inputs/NeoDateTime.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoDateTimeProps } from './neo-date-time.model.js';
-declare const NeoDateTime: import("svelte").Component<NeoDateTimeProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef">;
+declare const NeoDateTime: import("svelte").Component<NeoDateTimeProps, {}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef">;
 type NeoDateTime = ReturnType<typeof NeoDateTime>;
 export default NeoDateTime;

package/dist/inputs/NeoFilePicker.svelte

@@ -12,12 +12,13 @@
   import { tick } from 'svelte';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconDownload from '../icons/IconDownload.svelte';
-  import IconFileUpload from '../icons/IconFileUpload.svelte';
+  import NeoIconDownload from '../icons/NeoIconDownload.svelte';
+  import NeoIconFileUpload from '../icons/NeoIconFileUpload.svelte';
   import NeoBaseInput from './common/NeoBaseInput.svelte';
   import NeoInput from './common/NeoInput.svelte';
   import NeoInputValidation from './common/NeoInputValidation.svelte';
   import NeoFilePickerCard from './NeoFilePickerCard.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { coerce, computeButtonTemplate, getDefaultElevation, getDefaultHoverElevation } from '../utils/shadow.utils.js';
   import { toSize } from '../utils/style.utils.js';
 
@@ -293,14 +294,18 @@
 {#snippet upload()}
   <NeoButton {...afterProps}>
     {#snippet icon(ctx)}
-      {#if isDragging && iconDownload}
+      {#if isDragging && typeof iconDownload === 'function'}
         {@render iconDownload(ctx)}
+      {:else if isDragging && typeof iconDownload === 'string'}
+        <NeoImage src={iconDownload} ratio="1/1" {...afterProps?.imageProps} />
       {:else if isDragging}
-        <IconDownload size="1.25rem" scale="1.5" stroke="1" />
-      {:else if iconUpload}
+        <NeoIconDownload size="1.25rem" scale="1.5" stroke="1" />
+      {:else if typeof iconUpload === 'function'}
         {@render iconUpload(ctx)}
+      {:else if typeof iconUpload === 'string'}
+        <NeoImage src={iconUpload} ratio="1/1" {...afterProps?.imageProps} />
       {:else}
-        <IconFileUpload size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+        <NeoIconFileUpload size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
       {/if}
     {/snippet}
   </NeoButton>

package/dist/inputs/NeoFilePicker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoFilePickerProps } from './neo-file-picker.model.js';
-declare const NeoFilePicker: import("svelte").Component<NeoFilePickerProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "expanded" | "touched" | "dirty" | "files" | "focusin" | "validationRef" | "containerRef" | "labelRef" | "dragging">;
+declare const NeoFilePicker: import("svelte").Component<NeoFilePickerProps, {}, "value" | "ref" | "hovered" | "focused" | "valid" | "expanded" | "files" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef" | "dragging">;
 type NeoFilePicker = ReturnType<typeof NeoFilePicker>;
 export default NeoFilePicker;

package/dist/inputs/NeoFilePickerCard.svelte

@@ -6,13 +6,14 @@
 
   import NeoButton from '../buttons/NeoButton.svelte';
   import NeoCard from '../cards/NeoCard.svelte';
-  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
-  import IconClear from '../icons/IconClear.svelte';
-  import IconDownload from '../icons/IconDownload.svelte';
-  import IconFileUpload from '../icons/IconFileUpload.svelte';
-  import IconPencil from '../icons/IconPencil.svelte';
+  import NeoIconCircleLoading from '../icons/NeoIconCircleLoading.svelte';
+  import NeoIconClear from '../icons/NeoIconClear.svelte';
+  import NeoIconDownload from '../icons/NeoIconDownload.svelte';
+  import NeoIconFileUpload from '../icons/NeoIconFileUpload.svelte';
+  import NeoIconPencil from '../icons/NeoIconPencil.svelte';
   import NeoAffix from './common/NeoAffix.svelte';
   import NeoLabel from './common/NeoLabel.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { quickCircOutProps, quickDelayProps, quickDurationProps } from '../utils/transition.utils.js';
 
   let {
@@ -127,7 +128,7 @@
                   class={['neo-file-remove-button', removeButtonProps?.class]}
                 >
                   {#snippet icon()}
-                    <IconClear size="1rem" scale="1.5" stroke="1" />
+                    <NeoIconClear size="1rem" scale="1.5" stroke="1" />
                   {/snippet}
                 </NeoButton>
               </span>
@@ -140,7 +141,7 @@
       <span>{placeholder}</span>
       <NeoButton {disabled} rounded text onclick={onEdit} title="Edit files" aria-label="Edit files" {...editButtonProps}>
         {#snippet icon()}
-          <IconPencil size="1.25rem" scale="1" />
+          <NeoIconPencil size="1.25rem" scale="1" />
         {/snippet}
       </NeoButton>
     </div>
@@ -161,16 +162,20 @@
       <div class="neo-expanded-button">
         <NeoButton aria-label="Add files" title="Add files" text rounded {skeleton} {disabled} onclick={onEdit} {...addButtonProps}>
           {#snippet icon(ctx)}
-            {#if dragging && iconDownload}
+            {#if dragging && typeof iconDownload === 'function'}
               {@render iconDownload(ctx)}
+            {:else if dragging && typeof iconDownload === 'string'}
+              <NeoImage src={iconDownload} ratio="1/1" {...addButtonProps?.imageProps} />
             {:else if dragging}
-              <IconDownload size="2rem" scale="1.25" stroke="0.5" />
+              <NeoIconDownload size="2rem" scale="1.25" stroke="0.5" />
             {:else if loading}
-              <IconCircleLoading size="2rem" scale="1" />
-            {:else if iconUpload}
+              <NeoIconCircleLoading size="2rem" scale="1" />
+            {:else if typeof iconUpload === 'function'}
               {@render iconUpload(ctx)}
+            {:else if typeof iconUpload === 'string'}
+              <NeoImage src={iconUpload} ratio="1/1" {...addButtonProps?.imageProps} />
             {:else}
-              <IconFileUpload size="2rem" scale="1" stroke="0.5" />
+              <NeoIconFileUpload size="2rem" scale="1" stroke="0.5" />
             {/if}
           {/snippet}
         </NeoButton>
@@ -219,7 +224,7 @@
   inset: 0;
 }
 .neo-expanded-empty.neo-rounded::before {
-  border-radius: var(--neo-border-radius-md);
+  border-radius: var(--neo-border-radius-lg);
 }
 .neo-expanded-empty.neo-disabled {
   cursor: no-drop;
@@ -260,7 +265,7 @@
   box-shadow: var(--neo-box-shadow-inset-1);
 }
 .neo-expanded-list.neo-rounded {
-  border-radius: var(--neo-border-radius-md);
+  border-radius: var(--neo-border-radius-lg);
 }
 .neo-expanded-list .neo-file {
   display: inline-flex;
@@ -275,6 +280,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }
 .neo-expanded-list .neo-file-remove {
   flex: 0 0 auto;

package/dist/inputs/NeoNativeSelect.svelte

@@ -3,8 +3,9 @@
   import type { NeoNativeSelectProps } from './neo-select.model.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconDoubleChevron from '../icons/IconDoubleChevron.svelte';
+  import NeoIconDoubleChevron from '../icons/NeoIconDoubleChevron.svelte';
   import NeoInput from './common/NeoInput.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { coerce, computeButtonTemplate, getDefaultElevation } from '../utils/shadow.utils.js';
 
   let {
@@ -72,10 +73,12 @@
 {#snippet after()}
   <NeoButton {onpointerdown} {onpointerup} {...afterProps}>
     {#snippet icon(ctx)}
-      {#if customIcon}
+      {#if typeof customIcon === 'function'}
         {@render customIcon(ctx)}
+      {:else if typeof customIcon === 'string'}
+        <NeoImage src={customIcon} ratio="1/1" {...afterProps?.imageProps} />
       {:else}
-        <IconDoubleChevron {space} />
+        <NeoIconDoubleChevron {space} />
       {/if}
     {/snippet}
   </NeoButton>

package/dist/inputs/NeoNativeSelect.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoNativeSelectProps } from './neo-select.model.js';
-declare const NeoNativeSelect: import("svelte").Component<NeoNativeSelectProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef">;
+declare const NeoNativeSelect: import("svelte").Component<NeoNativeSelectProps, {}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef">;
 type NeoNativeSelect = ReturnType<typeof NeoNativeSelect>;
 export default NeoNativeSelect;

package/dist/inputs/NeoNumberStep.svelte

@@ -5,9 +5,10 @@
   import { watch } from '@dvcol/svelte-utils/watch';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconAdd from '../icons/IconAdd.svelte';
-  import IconMinus from '../icons/IconMinus.svelte';
+  import NeoIconAdd from '../icons/NeoIconAdd.svelte';
+  import NeoIconMinus from '../icons/NeoIconMinus.svelte';
   import NeoInput from './common/NeoInput.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { toTransition, toTransitionProps } from '../utils/action.utils.js';
   import { coerce, computeButtonTemplate, DefaultShadowElevation } from '../utils/shadow.utils.js';
 
@@ -110,10 +111,12 @@
 {#snippet before()}
   <NeoButton aria-label="Decrement number" title="Decrement number" onclick={decrement} {...buttonsProps}>
     {#snippet icon(ctx)}
-      {#if iconMinus}
+      {#if typeof iconMinus === 'function'}
         {@render iconMinus(ctx)}
+      {:else if typeof iconMinus === 'string'}
+        <NeoImage src={iconMinus} ratio="1/1" {...buttonsProps?.imageProps} />
       {:else}
-        <IconMinus size="1.25rem" />
+        <NeoIconMinus size="1.25rem" />
       {/if}
     {/snippet}
   </NeoButton>
@@ -122,10 +125,12 @@
 {#snippet after()}
   <NeoButton aria-label="Increment number" title="Increment number" onclick={increment} {...buttonsProps}>
     {#snippet icon(ctx)}
-      {#if iconPlus}
+      {#if typeof iconPlus === 'function'}
         {@render iconPlus(ctx)}
+      {:else if typeof iconPlus === 'string'}
+        <NeoImage src={iconPlus} ratio="1/1" {...buttonsProps?.imageProps} />
       {:else}
-        <IconAdd size="1.25rem" />
+        <NeoIconAdd size="1.25rem" />
       {/if}
     {/snippet}
   </NeoButton>
@@ -168,12 +173,12 @@
 <style>.neo-number-step {
   display: contents;
 }
-.neo-number-step :global(.neo-input-number-step.neo-input[type="number"]) {
+.neo-number-step :global(.neo-input-number-step.neo-input[type='number']) {
   /* Hide arrows -Firefox */
   appearance: textfield;
   /* Hide arrows - Chrome, Safari, Edge, Opera */
 }
-.neo-number-step :global(.neo-input-number-step.neo-input[type="number"])::-webkit-outer-spin-button, .neo-number-step :global(.neo-input-number-step.neo-input[type="number"])::-webkit-inner-spin-button {
+.neo-number-step :global(.neo-input-number-step.neo-input[type='number'])::-webkit-outer-spin-button, .neo-number-step :global(.neo-input-number-step.neo-input[type='number'])::-webkit-inner-spin-button {
   margin: 0;
   appearance: none;
 }

package/dist/inputs/NeoNumberStep.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoNumberStepProps } from './neo-number-step.model.js';
-declare const NeoNumberStep: import("svelte").Component<NeoNumberStepProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef">;
+declare const NeoNumberStep: import("svelte").Component<NeoNumberStepProps, {}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef">;
 type NeoNumberStep = ReturnType<typeof NeoNumberStep>;
 export default NeoNumberStep;

package/dist/inputs/NeoPassword.svelte

@@ -4,8 +4,8 @@
   import type { ShadowElevation } from '../utils/shadow.utils.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconWatch from '../icons/IconWatch.svelte';
-  import IconWatchOff from '../icons/IconWatchOff.svelte';
+  import NeoIconWatch from '../icons/NeoIconWatch.svelte';
+  import NeoIconWatchOff from '../icons/NeoIconWatchOff.svelte';
   import NeoInput from './common/NeoInput.svelte';
   import NeoPin from './NeoPin.svelte';
   import { coerce, computeButtonTemplate, getDefaultElevation } from '../utils/shadow.utils.js';
@@ -63,9 +63,9 @@
       {#if customIcon}
         {@render customIcon({ show })}
       {:else if show}
-        <IconWatchOff size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+        <NeoIconWatchOff size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
       {:else}
-        <IconWatch size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+        <NeoIconWatch size="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
       {/if}
     {/snippet}
   </NeoButton>

package/dist/inputs/NeoPassword.svelte.d.ts

@@ -3,7 +3,7 @@ declare class __sveltets_Render<T extends boolean = false> {
     props(): NeoPasswordProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef";
+    bindings(): "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/inputs/NeoPin.svelte

@@ -11,7 +11,7 @@
   import { hovering } from '@dvcol/svelte-utils/hovering';
   import { doubleBind } from '@dvcol/svelte-utils/watch';
 
-  import IconMinus from '../icons/IconMinus.svelte';
+  import NeoIconMinus from '../icons/NeoIconMinus.svelte';
   import NeoAffix from './common/NeoAffix.svelte';
   import NeoInput from './common/NeoInput.svelte';
   import NeoInputValidation from './common/NeoInputValidation.svelte';
@@ -104,12 +104,12 @@
   const initial = $state(value);
   let validationMessage: string | undefined = $state(ref?.validationMessage);
 
-  const validate = () => {
+  export function validate() {
     dirty = value !== initial;
     valid = ref?.checkValidity();
     validationMessage = ref?.validationMessage;
     return { touched, dirty, valid, value, initial };
-  };
+  }
 
   const focus = (i = 0, j = 0, options: { previous?: boolean; last?: boolean; select?: boolean } = {}) => {
     let _group = i;
@@ -183,10 +183,10 @@
     );
   };
 
-  const clear = async () => {
+  export async function clear() {
     await Promise.all(refs?.map(group => group?.map(input => input?.clear?.())));
     focus(0, 0, { last: true });
-  };
+  }
 
   const paste = (data: string, i = 0, j = 0) => {
     let _group = i;
@@ -445,7 +445,7 @@
             {:else if typeof separator === 'string'}
               {separator}
             {:else}
-              <IconMinus />
+              <NeoIconMinus />
             {/if}
           </div>
         {/if}
@@ -586,12 +586,12 @@
   padding: 0.5rem;
   text-align: center;
 }
-.neo-pin-container :global(.neo-input-pin.neo-input[type="number"]) {
+.neo-pin-container :global(.neo-input-pin.neo-input[type='number']) {
   /* Hide arrows -Firefox */
   appearance: textfield;
   /* Hide arrows - Chrome, Safari, Edge, Opera */
 }
-.neo-pin-container :global(.neo-input-pin.neo-input[type="number"])::-webkit-outer-spin-button, .neo-pin-container :global(.neo-input-pin.neo-input[type="number"])::-webkit-inner-spin-button {
+.neo-pin-container :global(.neo-input-pin.neo-input[type='number'])::-webkit-outer-spin-button, .neo-pin-container :global(.neo-input-pin.neo-input[type='number'])::-webkit-inner-spin-button {
   margin: 0;
   appearance: none;
 }
@@ -599,12 +599,12 @@
   width: 2.25rem;
   padding: 0.5rem;
 }
-.neo-pin-container :global(.neo-input-pin.neo-input[type="password"]:not(:placeholder-shown)) {
+.neo-pin-container :global(.neo-input-pin.neo-input[type='password']:not(:placeholder-shown)) {
   -webkit-text-stroke-width: 0.1em;
   letter-spacing: 0;
 }
 @supports (-webkit-touch-callout: none) {
-  .neo-pin-container :global(.neo-input-pin.neo-input[type="password"]:not(:placeholder-shown)) {
+  .neo-pin-container :global(.neo-input-pin.neo-input[type='password']:not(:placeholder-shown)) {
     font: small-caption;
     font-size: var(--neo-font-size, 1rem);
   }

package/dist/inputs/NeoPin.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { NeoPinProps } from './neo-pin.model.js';
-declare const NeoPin: import("svelte").Component<NeoPinProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "validationRef" | "containerRef" | "labelRef">;
+declare const NeoPin: import("svelte").Component<NeoPinProps, {
+    validate: () => {
+        touched: boolean;
+        dirty: boolean;
+        valid: boolean | undefined;
+        value: any;
+        initial: any;
+    };
+    clear: () => Promise<void>;
+}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "validationRef" | "containerRef" | "labelRef">;
 type NeoPin = ReturnType<typeof NeoPin>;
 export default NeoPin;

package/dist/inputs/NeoRadio.svelte

@@ -7,7 +7,7 @@
   import { fade } from 'svelte/transition';
 
   import NeoRadioButton from '../buttons/NeoRadioButton.svelte';
-  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoIconCircleLoading from '../icons/NeoIconCircleLoading.svelte';
   import NeoBaseInput from './common/NeoBaseInput.svelte';
   import NeoLabel from './common/NeoLabel.svelte';
   import { toTransition, toTransitionProps } from '../utils/action.utils.js';
@@ -156,7 +156,7 @@
     <span class="neo-radio-suffix">
       {#if loading}
         <span class="neo-radio-loading" out:fade={quickDurationProps}>
-          <IconCircleLoading size="1rem" />
+          <NeoIconCircleLoading size="1rem" />
         </span>
       {/if}
     </span>
@@ -175,7 +175,7 @@
   transition: box-shadow 0.3s ease-out, border-radius 0.3s ease;
 }
 .neo-radio-container.neo-rounded {
-  border-radius: var(--neo-border-radius-lg);
+  border-radius: var(--neo-border-radius-xxl);
 }
 .neo-radio-container.neo-flat {
   --neo-label-margin: 0 0 0 0.625rem;

package/dist/inputs/NeoRadio.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoRadioProps } from './neo-radio.model.js';
-declare const NeoRadio: import("svelte").Component<NeoRadioProps, {}, "ref" | "hovered" | "focused" | "checked" | "valid" | "group" | "touched" | "dirty" | "containerRef" | "labelRef">;
+declare const NeoRadio: import("svelte").Component<NeoRadioProps, {}, "group" | "ref" | "hovered" | "focused" | "checked" | "valid" | "touched" | "dirty" | "containerRef" | "labelRef">;
 type NeoRadio = ReturnType<typeof NeoRadio>;
 export default NeoRadio;

package/dist/inputs/NeoRange.svelte

@@ -15,10 +15,11 @@
   import { innerWidth } from 'svelte/reactivity/window';
   import { fade } from 'svelte/transition';
 
-  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoIconCircleLoading from '../icons/NeoIconCircleLoading.svelte';
   import NeoInputValidation from './common/NeoInputValidation.svelte';
   import NeoLabel from './common/NeoLabel.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, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '../utils/shadow.utils.js';
   import { toSize } from '../utils/style.utils.js';
@@ -158,14 +159,14 @@
   };
 
   let holding = 1;
-  const stepUp = (index = 0) => {
+  export function stepUp(index = 0) {
     if (disabled || readonly) return value;
     return setValue((index ? (upper ?? 0) : lower) - (step || 1) * round(holding), index);
-  };
-  const stepDown = (index = 0) => {
+  }
+  export function stepDown(index = 0) {
     if (disabled || readonly) return value;
     return setValue((index ? (upper ?? 0) : lower) + (step || 1) * round(holding), index);
-  };
+  }
 
   const validity = $derived<NeoRangeValidationState>({
     touched,
@@ -405,6 +406,7 @@
     style:min-height={height?.min}
     style:max-height={height?.max}
     style:--neo-range-height={rangeHeight}
+    style:--neo-range-border-radius={computeBorderRadius(rounded)}
     use:useFn={useProps}
     out:outFn={outProps}
     in:inFn={inProps}
@@ -540,7 +542,7 @@
             {/if}
             {#if loading}
               <span class="neo-range-loading" out:fade={quickDurationProps}>
-                <IconCircleLoading size="1rem" />
+                <NeoIconCircleLoading size="1rem" />
               </span>
             {/if}
           </span>
@@ -603,7 +605,7 @@
   color: inherit;
   background: var(--neo-range-handle-background, var(--neo-background-color));
   border: 1px solid var(--neo-range-handle-border-color, transparent);
-  border-radius: var(--neo-border-radius-sm);
+  border-radius: var(--neo-range-border-radius, var(--neo-border-radius-sm));
   outline: none;
   box-shadow: var(--neo-range-handle-box-shadow, var(--neo-box-shadow-convex-2));
   backface-visibility: hidden;
@@ -614,35 +616,21 @@
   touch-action: none;
   aspect-ratio: 1/1;
 }
-.neo-range-handle:focus-visible, .neo-range-handle:active {
-  cursor: grabbing;
-  scale: 0.85;
-}
-.neo-range-handle:focus-visible {
-  outline: var(--neo-border-width, 1px) solid var(--neo-border-color-focused);
-}
 .neo-range-handle-before, .neo-range-handle-after {
   display: inline-flex;
   box-sizing: border-box;
   height: calc(100% - var(--neo-range-spacing) * 2);
   margin: var(--neo-range-spacing);
-  border-radius: var(--neo-border-radius-xs);
+  border-radius: var(--neo-range-border-radius, var(--neo-border-radius-xs));
 }
 .neo-range-handle-before {
   width: calc(var(--neo-range-min-width) - var(--neo-range-spacing) + var(--neo-range-progress, 0%));
 }
-.neo-range-handle-before:not(.neo-range) {
-  margin-right: 0;
-  margin-left: calc(var(--neo-range-spacing) - var(--neo-range-min-width));
-}
 .neo-range-handle-before.neo-range {
   width: calc(var(--neo-range-min-width) - var(--neo-range-progress, 0%) + var(--neo-range-array-progress, 0%));
   min-width: calc(var(--neo-range-spacing) / 2 + var(--neo-range-min-width));
   margin-inline: calc((var(--neo-range-spacing) - var(--neo-range-min-width)) / 2);
 }
-.neo-range-handle-before:not(.neo-array) {
-  background-color: var(--neo-range-checked-background, color-mix(in srgb, transparent, currentcolor 30%));
-}
 .neo-range-handle-after {
   flex: 1 1 auto;
   margin-right: calc(var(--neo-range-spacing) - var(--neo-range-min-width));
@@ -651,6 +639,20 @@
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
+.neo-range-handle:focus-visible, .neo-range-handle:active {
+  cursor: grabbing;
+  scale: 0.85;
+}
+.neo-range-handle:focus-visible {
+  outline: var(--neo-border-width, 1px) solid var(--neo-border-color-focused);
+}
+.neo-range-handle-before:not(.neo-range) {
+  margin-right: 0;
+  margin-left: calc(var(--neo-range-spacing) - var(--neo-range-min-width));
+}
+.neo-range-handle-before:not(.neo-array) {
+  background-color: var(--neo-range-checked-background, color-mix(in srgb, transparent, currentcolor 30%));
+}
 .neo-range-slider {
   display: inline-flex;
   align-items: center;
@@ -757,7 +759,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;
 }
@@ -799,7 +801,6 @@
 .neo-range-value {
   --neo-floating-z-index: calc(var(--neo-z-index-in-front, 1) + var(--neo-range-handler-z-index, 0));
   --neo-floating-padding: 0.125rem 0.375rem;
-  z-index: var(--neo-floating-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-floating-elevation, 1)));
   color: var(--neo-floating-color, inherit);
   background-color: var(--neo-floating-bg-color, var(--neo-glass-background-color));
   border: var(--neo-border-width, 1px) solid var(--neo-floating-border-color, var(--neo-glass-background-color));
@@ -809,15 +810,16 @@
   box-shadow: var(--neo-floating-box-shadow, var(--neo-glass-box-shadow-raised-1));
   backdrop-filter: var(--neo-floating-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-floating-padding, var(--neo-gap-xxxs) var(--neo-gap-xs));
+  z-index: var(--neo-floating-z-index, calc(var(--neo-z-index-layer-ui, 1000) + var(--neo-floating-elevation, 1)));
+  padding: var(--neo-floating-padding, var(--neo-gap-3xs) var(--neo-gap-xs));
 }
 .neo-range-value.neo-flat {
   border-color: var(--neo-floating-border-color, var(--neo-glass-border-color-flat));
 }
 .neo-range-value.neo-rounded {
   padding: var(--neo-floating-padding, var(--neo-gap-xs) var(--neo-gap));
-  border-radius: var(--neo-floating-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-floating-border-radius, var(--neo-floating-border-radius-rounded, var(--neo-border-radius-xxl)));
 }
 .neo-range-value.neo-rounded {
-  --neo-floating-border-radius: var(--neo-floating-border-radius-lg, var(--neo-border-radius-lg));
+  --neo-floating-border-radius: var(--neo-floating-border-radius-lg, var(--neo-border-radius-xxl));
 }</style>