@dvcol/neo-svelte 1.1.2 → 1.2.0

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

@@ -1,4 +1,7 @@
-import type { NeoRangeProps } from './neo-range.model.js';
-declare const NeoRange: import("svelte").Component<NeoRangeProps, {}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "validationRef" | "labelRef">;
+import type { NeoRangeProps, NeoRangeValue } from './neo-range.model.js';
+declare const NeoRange: import("svelte").Component<NeoRangeProps, {
+    stepUp: (index?: number) => NeoRangeValue;
+    stepDown: (index?: number) => NeoRangeValue;
+}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "validationRef" | "labelRef">;
 type NeoRange = ReturnType<typeof NeoRange>;
 export default NeoRange;

package/dist/inputs/NeoSelect.svelte

@@ -13,10 +13,11 @@
 
   import NeoButton from '../buttons/NeoButton.svelte';
   import NeoPopSelect from '../floating/tooltips/NeoPopSelect.svelte';
-  import IconDoubleChevron from '../icons/IconDoubleChevron.svelte';
+  import NeoIconDoubleChevron from '../icons/NeoIconDoubleChevron.svelte';
   import NeoInput from './common/NeoInput.svelte';
   import { displayValue, transformValue } from './neo-select.model.js';
-  import { findByValueInList } from '../list/neo-list.model.js';
+  import { findByValuesInList } from '../list/neo-list.model.js';
+  import NeoImage from '../media/NeoImage.svelte';
   import { coerce, computeButtonTemplate, getDefaultElevation, getDefaultHoverElevation, MaxShadowElevation } from '../utils/shadow.utils.js';
 
   let {
@@ -61,6 +62,7 @@
     tooltipRef = $bindable(),
     triggerRef = $bindable(),
     open = $bindable(false),
+    position = $bindable(),
     openDelay,
     hoverDelay = 300,
     openOnHover = false,
@@ -127,15 +129,18 @@
   );
 
   /**
-   * Reflects change in autocomplete input value to selected value
+   * Reflects change in input value to selected value
    */
   const reflectValue = () => {
-    selected = findByValueInList(value, items);
+    selected = findByValuesInList(value, items);
     if (selected === undefined) value = undefined;
   };
 
-  // Reflect initial value if value is set but selected is not
-  reflectValue();
+  watch(() => {
+    if (!value || transformed === value) return;
+    if (Array.isArray(value) && Array.isArray(transformed) && value.every(v => transformed.includes(v))) return;
+    reflectValue();
+  }, () => value);
 
   const hasValue = $derived(!!(Array.isArray(selected) ? selected.length : selected));
   const close = $derived(clearable && (focusin || focused || hovered || open) && hasValue);
@@ -167,10 +172,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}
-        <IconDoubleChevron {space} />
+        <NeoIconDoubleChevron {space} />
       {/if}
     {/snippet}
   </NeoButton>
@@ -207,6 +214,7 @@
   {nullable}
   {autocomplete}
   {...rest}
+  clickable
   readonly
   inert
   tabindex={-1}
@@ -239,6 +247,7 @@
   bind:tooltipRef
   bind:triggerRef
   bind:open
+  bind:position
   {readonly}
   {items}
   multiple={!!multiple}

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

@@ -1,4 +1,4 @@
 import type { NeoSelectProps } from './neo-select.model.js';
-declare const NeoSelect: import("svelte").Component<NeoSelectProps, {}, "ref" | "value" | "hovered" | "focused" | "filter" | "valid" | "sort" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "labelRef" | "open" | "triggerRef" | "tooltipRef" | "highlight" | "selected" | "listRef">;
+declare const NeoSelect: import("svelte").Component<NeoSelectProps, {}, "value" | "ref" | "filter" | "hovered" | "focused" | "valid" | "sort" | "open" | "selected" | "position" | "triggerRef" | "tooltipRef" | "highlight" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "labelRef" | "listRef">;
 type NeoSelect = ReturnType<typeof NeoSelect>;
 export default NeoSelect;

package/dist/inputs/NeoSwitch.svelte

@@ -10,7 +10,7 @@
   import { fade } from 'svelte/transition';
 
   import NeoSwitchButton from '../buttons/NeoSwitchButton.svelte';
-  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoIconCircleLoading from '../icons/NeoIconCircleLoading.svelte';
   import NeoBaseInput from './common/NeoBaseInput.svelte';
   import NeoInputValidation from './common/NeoInputValidation.svelte';
   import NeoLabel from './common/NeoLabel.svelte';
@@ -228,7 +228,7 @@
       <span class="neo-switch-suffix">
         {#if loading}
           <span class="neo-switch-loading" out:fade={quickDurationProps}>
-            <IconCircleLoading size="1rem" />
+            <NeoIconCircleLoading size="1rem" />
           </span>
         {/if}
       </span>

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

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

package/dist/inputs/common/NeoAffix.svelte

@@ -4,10 +4,10 @@
   import { debounced } from '@dvcol/svelte-utils/debounce';
   import { fade } from 'svelte/transition';
 
-  import IconAlert from '../../icons/IconAlert.svelte';
-  import IconCircleLoading from '../../icons/IconCircleLoading.svelte';
-  import IconClear from '../../icons/IconClear.svelte';
-  import IconConfirm from '../../icons/IconConfirm.svelte';
+  import NeoIconAlert from '../../icons/NeoIconAlert.svelte';
+  import NeoIconCircleLoading from '../../icons/NeoIconCircleLoading.svelte';
+  import NeoIconClear from '../../icons/NeoIconClear.svelte';
+  import NeoIconConfirm from '../../icons/NeoIconConfirm.svelte';
   import { toTransition, toTransitionProps } from '../../utils/action.utils.js';
   import { quickDurationProps } from '../../utils/transition.utils.js';
 
@@ -63,7 +63,7 @@
       {#if loader}
         {@render loader({ size })}
       {:else}
-        <IconCircleLoading />
+        <NeoIconCircleLoading />
       {/if}
     </span>
   {:else if clear}
@@ -71,7 +71,7 @@
       {#if reset}
         {@render reset({ size })}
       {:else}
-        <IconClear />
+        <NeoIconClear />
       {/if}
     </button>
   {:else}
@@ -80,9 +80,9 @@
         {#if validation}
           {@render validation({ size, valid })}
         {:else if valid}
-          <IconConfirm />
+          <NeoIconConfirm />
         {:else}
-          <IconAlert />
+          <NeoIconAlert />
         {/if}
       {/if}
     </span>
@@ -137,7 +137,7 @@
   margin: 0;
   padding: 0;
   color: var(--neo-affix-clear-color, inherit);
-  background-color: var(--neo-background-color-secondary);
+  background-color: var(--neo-affix-clear-bg-color, var(--neo-background-color-secondary));
   border: none;
   border-radius: 50%;
   aspect-ratio: 1;
@@ -169,7 +169,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/inputs/common/NeoBaseInput.svelte

@@ -494,6 +494,9 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.neo-input:is(select) {
+  overflow: auto;
+}
 .neo-input[type=password]:not(:placeholder-shown, :-webkit-autofill:focus, :-webkit-autofill:active) {
   letter-spacing: 0.2em;
   -webkit-text-stroke-width: 0.15em;
@@ -508,7 +511,7 @@
 .neo-input[type=search]::-webkit-search-decoration, .neo-input[type=search]::-webkit-search-cancel-button, .neo-input[type=search]::-webkit-search-results-button, .neo-input[type=search]::-webkit-search-results-decoration {
   appearance: none;
 }
-.neo-input:-webkit-autofill, .neo-input:-webkit-autofill:hover, .neo-input:-webkit-autofill:focus, .neo-input:-webkit-autofill:active, .neo-input:-webkit-autofill::first-line {
+.neo-input:-webkit-autofill, .neo-input:-webkit-autofill:hover, .neo-input:-webkit-autofill:focus, .neo-input:-webkit-autofill:active {
   color: var(--neo-input-text-color, var(--neo-text-color, inherit)) !important;
   text-decoration: none;
   background-clip: text;
@@ -519,6 +522,17 @@
   -webkit-text-fill-color: var(--neo-input-text-color, var(--neo-text-color, inherit));
   -webkit-text-stroke-color: var(--neo-input-text-color, var(--neo-text-color, inherit));
 }
-.neo-input:-webkit-autofill::selection, .neo-input:-webkit-autofill:hover::selection, .neo-input:-webkit-autofill:focus::selection, .neo-input:-webkit-autofill:active::selection, .neo-input:-webkit-autofill::first-line::selection {
+.neo-input:-webkit-autofill::selection, .neo-input:-webkit-autofill:hover::selection, .neo-input:-webkit-autofill:focus::selection, .neo-input:-webkit-autofill:active::selection {
   background-color: oklch(from var(--neo-input-text-color, var(--neo-text-color, inherit)) calc(l + 0.3) c h/20%);
+}
+.neo-input:-webkit-autofill::first-line {
+  color: var(--neo-input-text-color, var(--neo-text-color, inherit)) !important;
+  text-decoration: none;
+  background-clip: text;
+  box-shadow: none;
+  appearance: none;
+  text-decoration-color: inherit;
+  caret-color: var(--neo-input-text-color, var(--neo-text-color, inherit));
+  -webkit-text-fill-color: var(--neo-input-text-color, var(--neo-text-color, inherit));
+  -webkit-text-stroke-color: var(--neo-input-text-color, var(--neo-text-color, inherit));
 }</style>

package/dist/inputs/common/NeoBaseInput.svelte.d.ts

@@ -12,6 +12,6 @@ declare const NeoBaseInput: import("svelte").Component<NeoBaseInputProps, {
     /**
        * Change the state of the input
        */ change: NeoInputMethods<HTMLInputElement>["change"];
-}, "ref" | "value" | "focused" | "checked" | "valid" | "group" | "initial" | "touched" | "dirty" | "validationMessage" | "files" | "indeterminate">;
+}, "value" | "group" | "ref" | "focused" | "checked" | "valid" | "initial" | "validationMessage" | "files" | "indeterminate" | "touched" | "dirty">;
 type NeoBaseInput = ReturnType<typeof NeoBaseInput>;
 export default NeoBaseInput;

package/dist/inputs/common/NeoInput.svelte

@@ -13,6 +13,7 @@
   import NeoInputValidation from './NeoInputValidation.svelte';
   import NeoLabel from './NeoLabel.svelte';
   import { toTransition, toTransitionProps } from '../../utils/action.utils.js';
+  import { computeBorderRadius } from '../../utils/border.utils.js';
   import { getColorVariable } from '../../utils/colors.utils.js';
   import {
     coerce,
@@ -52,6 +53,7 @@
     focusin = $bindable(false),
     disabled,
     readonly,
+    clickable,
 
     loading,
     clearable,
@@ -372,6 +374,7 @@
     class:neo-flat={!elevation}
     class:neo-hover-flat={hoverFlat}
     class:neo-flat-hover={flatHover}
+    class:neo-pointer={clickable ?? rest.type === 'select'}
     style:flex
     style:width={width?.absolute}
     style:min-width={width?.min}
@@ -389,6 +392,7 @@
     style:--neo-input-before-width={beforeWidth}
     style:--neo-input-after-width={afterWidth}
     style:--neo-input-affix-width={affixWidth}
+    style:--neo-input-border-radius={computeBorderRadius(rounded)}
     out:outFn={outProps}
     in:inFn={inProps}
     use:focusing={{
@@ -556,6 +560,9 @@
 .neo-input-group.neo-readonly {
   cursor: inherit;
 }
+.neo-input-group.neo-pointer {
+  cursor: var(--neo-input-cursor, pointer);
+}
 .neo-input-group.neo-borderless {
   border-color: transparent !important;
 }
@@ -582,7 +589,7 @@
   color: var(--neo-input-text-color, inherit);
   background-color: transparent;
   background-clip: text;
-  border-radius: var(--neo-input-border-radius, var(--neo-border-radius-sm));
+  border-radius: var(--neo-input-option-border-radius, var(--neo-border-radius-sm));
   backface-visibility: hidden;
   cursor: pointer;
   transition: -webkit-text-fill-color 0.15s ease, color 0.15s ease, box-shadow 0.3s ease-out, scale 0.3s ease-out;
@@ -643,6 +650,7 @@
 }
 .neo-input-group.neo-disabled {
   box-shadow: var(--neo-box-shadow-flat) !important;
+  cursor: not-allowed;
   opacity: var(--neo-input-opacity-disabled, var(--neo-opacity-disabled));
 }
 .neo-input-group.neo-disabled:not(.neo-borderless) {
@@ -663,10 +671,10 @@
   margin-right: -0.375rem;
 }
 .neo-input-group.neo-rounded {
-  border-radius: var(--neo-input-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-input-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-input-group.neo-rounded :global(.neo-input:is(select) option) {
-  border-radius: var(--neo-input-border-radius, var(--neo-border-radius));
+  border-radius: var(--neo-input-option-border-radius, var(--neo-border-radius-md));
 }
 .neo-input-group.neo-rounded :global(.neo-affix-container:not(.neo-after)) {
   margin-right: 0.25rem;
@@ -805,7 +813,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/inputs/common/NeoInput.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoInputHTMLElement, NeoInputProps } from './neo-input.model.js';
-declare const NeoInput: import("svelte").Component<NeoInputProps<NeoInputHTMLElement>, {}, "ref" | "value" | "hovered" | "focused" | "checked" | "valid" | "group" | "touched" | "dirty" | "files" | "indeterminate" | "focusin" | "validationRef" | "containerRef" | "afterRef" | "affixRef" | "labelRef" | "beforeRef">;
+declare const NeoInput: import("svelte").Component<NeoInputProps<NeoInputHTMLElement>, {}, "value" | "group" | "ref" | "hovered" | "focused" | "checked" | "valid" | "files" | "indeterminate" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "afterRef" | "affixRef" | "labelRef" | "beforeRef">;
 type NeoInput = ReturnType<typeof NeoInput>;
 export default NeoInput;

package/dist/inputs/common/NeoTextarea.svelte

@@ -24,6 +24,7 @@
   import NeoInputValidation from './NeoInputValidation.svelte';
   import NeoLabel from './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,
@@ -155,7 +156,7 @@
   const close = $derived(clearable && (focusin || focused || hovered) && hasValue);
   const isFloating = $derived(floating && !hasValue && (!focused || disabled || readonly));
 
-  const validate: NeoInputMethods<HTMLTextAreaElement>['validate'] = (
+  export const validate: NeoInputMethods<HTMLTextAreaElement>['validate'] = (
     update: { dirty?: boolean; valid?: boolean } = { dirty: true, valid: true },
   ) => {
     if (update.dirty) dirty = value !== initial;
@@ -476,6 +477,7 @@
     style:--neo-textarea-box-shadow-hover={hoverShadow}
     style:--neo-textarea-label-height={labelHeight}
     style:--neo-textarea-label-width={labelWidth}
+    style:--neo-textarea-border-radius={computeBorderRadius(rounded)}
     out:outFn={outProps}
     in:inFn={inProps}
     use:focusing={{
@@ -639,7 +641,7 @@
   cursor: not-allowed;
   resize: none;
 }
-.neo-textarea:-webkit-autofill, .neo-textarea:-webkit-autofill:hover, .neo-textarea:-webkit-autofill:focus, .neo-textarea:-webkit-autofill:active, .neo-textarea:-webkit-autofill::first-line {
+.neo-textarea:-webkit-autofill, .neo-textarea:-webkit-autofill:hover, .neo-textarea:-webkit-autofill:focus, .neo-textarea:-webkit-autofill:active {
   color: var(--neo-textarea-text-color, var(--neo-text-color, inherit)) !important;
   text-decoration: none;
   background-clip: text;
@@ -649,9 +651,19 @@
   caret-color: var(--neo-textarea-text-color, var(--neo-text-color, inherit));
   -webkit-text-fill-color: var(--neo-textarea-text-color, var(--neo-text-color, inherit));
 }
-.neo-textarea:-webkit-autofill::selection, .neo-textarea:-webkit-autofill:hover::selection, .neo-textarea:-webkit-autofill:focus::selection, .neo-textarea:-webkit-autofill:active::selection, .neo-textarea:-webkit-autofill::first-line::selection {
+.neo-textarea:-webkit-autofill::selection, .neo-textarea:-webkit-autofill:hover::selection, .neo-textarea:-webkit-autofill:focus::selection, .neo-textarea:-webkit-autofill:active::selection {
   background-color: oklch(from var(--neo-textarea-text-color, var(--neo-text-color, inherit)) calc(l + 0.3) c h/20%);
 }
+.neo-textarea:-webkit-autofill::first-line {
+  color: var(--neo-textarea-text-color, var(--neo-text-color, inherit)) !important;
+  text-decoration: none;
+  background-clip: text;
+  box-shadow: none;
+  appearance: none;
+  text-decoration-color: inherit;
+  caret-color: var(--neo-textarea-text-color, var(--neo-text-color, inherit));
+  -webkit-text-fill-color: var(--neo-textarea-text-color, var(--neo-text-color, inherit));
+}
 
 .neo-textarea-group {
   position: relative;
@@ -735,7 +747,7 @@
   opacity: 0;
 }
 .neo-textarea-group.neo-rounded {
-  border-radius: var(--neo-textarea-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-textarea-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-textarea-group.neo-rounded :global(.neo-affix-container) {
   right: 0.365rem;
@@ -743,7 +755,7 @@
 .neo-textarea-group.neo-rounded .neo-textarea {
   --neo-scrollbar-button-height: 0.75rem;
   padding: 0.75rem 1rem;
-  border-radius: var(--neo-border-radius-lg, 2rem);
+  border-radius: var(--neo-textarea-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-textarea-group.neo-rounded .neo-textarea.neo-affix {
   padding: 0.75rem 2.75rem 0.75rem 1.25rem;
@@ -867,7 +879,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/inputs/common/NeoTextarea.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { NeoInputMethods, NeoTextareaProps } from './neo-input.model.js';
 declare const NeoTextarea: import("svelte").Component<NeoTextareaProps, {
+    validate: NeoInputMethods<HTMLTextAreaElement>["validate"];
     /**
        * Change the state of the input
        * @param state
@@ -10,6 +11,6 @@ declare const NeoTextarea: import("svelte").Component<NeoTextareaProps, {
     /**
        * Change the value of the input
        */ change: NeoInputMethods<HTMLTextAreaElement>["change"];
-}, "ref" | "value" | "hovered" | "focused" | "valid" | "touched" | "dirty" | "focusin" | "validationRef" | "containerRef" | "afterRef" | "affixRef" | "labelRef">;
+}, "value" | "ref" | "hovered" | "focused" | "valid" | "touched" | "focusin" | "dirty" | "validationRef" | "containerRef" | "afterRef" | "affixRef" | "labelRef">;
 type NeoTextarea = ReturnType<typeof NeoTextarea>;
 export default NeoTextarea;

package/dist/inputs/common/NeoValidation.svelte

@@ -120,10 +120,6 @@
   font-size: var(--neo-font-size-sm, 0.875rem);
   line-height: var(--neo-line-height-xs, 1rem);
   transition: color 0.15s ease, padding 0.3s ease, margin 0.3s ease;
-  display: grid;
-  flex-grow: 1;
-  grid-template-areas: "transition";
-  width: 100%;
 }
 .neo-validation-group-wrapper .neo-validation-message .neo-validation-error {
   color: var(--neo-validation-error-color, var(--neo-color-error));
@@ -132,6 +128,12 @@
 .neo-validation-group-wrapper .neo-validation-message .neo-validation-description {
   padding: var(--neo-validation-padding, 0 0.75rem);
 }
+.neo-validation-group-wrapper .neo-validation-message {
+  display: grid;
+  flex-grow: 1;
+  grid-template-areas: "transition";
+  width: 100%;
+}
 .neo-validation-group-wrapper .neo-validation-message :global(> *) {
   grid-area: transition;
 }</style>

package/dist/inputs/common/neo-input.model.d.ts

@@ -5,6 +5,7 @@ import type { NeoInputValidationProps } from './neo-input-validation.model.js';
 import type { NeoLabelProps } from './neo-label.model.js';
 import type { NeoValidationFieldContext, NeoValidationProps, NeoValidationState } from './neo-validation.model.js';
 import type { HTMLTransitionProps, HTMLUseProps } from '../../utils/action.utils.js';
+import type { BorderRadiusInput } from '../../utils/border.utils.js';
 import type { Color } from '../../utils/colors.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps, SvelteEvent } from '../../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, ShadowElevation, ShadowElevationString, ShadowHoverElevation, ShadowHoverElevationsString } from '../../utils/shadow.utils.js';
@@ -47,7 +48,7 @@ export interface NeoInputStyles {
     /**
      * If true, the input will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * If true, the input will be displayed with a glass effect.
      */
@@ -102,6 +103,8 @@ export interface NeoInputMethods<T extends HTMLInputElement | HTMLTextAreaElemen
     /**
      * 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;
@@ -276,6 +279,10 @@ export type NeoInputGroupProps<T extends HTMLInputElement | HTMLTextAreaElement
      * If false, the input will not be registered with the form context.
      */
     register?: NeoInputValidationProps<T>['register'];
+    /**
+     * If true, the cursor will be set to pointer when hovering the input.
+     */
+    clickable?: boolean;
     /**
      * Display the label as a placeholder inside the input when empty
      * @default true

package/dist/inputs/common/neo-validation.model.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 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 { SizeInput } from '../../utils/style.utils.js';
 export type NeoValidationValue = string | string[] | number | boolean | boolean[] | FileList | any;
@@ -77,7 +78,7 @@ export type NeoValidationProps<T extends HTMLElement = HTMLElement, V extends Ne
     /**
      * If true, the wrapper will adjust spacing to match rounded styles.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * The props to pass to the message and error components.
      */

package/dist/inputs/neo-range.model.d.ts

@@ -5,6 +5,7 @@ import type { NeoInputValidationProps } from './common/neo-input-validation.mode
 import type { NeoLabelProps } from './common/neo-label.model.js';
 import type { NeoValidationFieldContext, NeoValidationState } from './common/neo-validation.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 { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
 import type { ShadowShallowElevation, ShadowShallowElevationString } from '../utils/shadow.utils.js';
@@ -68,7 +69,7 @@ export interface NeoRangeStyles {
     /**
      * If true, the input will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * If true, the input will be displayed with a glass effect.
      */

package/dist/inputs/neo-select.model.d.ts

@@ -4,12 +4,12 @@ import type { NeoButtonProps } from '../buttons/neo-button.model.js';
 import type { NeoPopSelectProps } from '../floating/tooltips/neo-pop-select.model.js';
 import type { NeoInputProps } from './common/neo-input.model.js';
 import type { NeoListItemOrSection, NeoListSelectedItem } from '../list/neo-list.model.js';
-export type NeoNativeSelectOption<Value = unknown> = string | number | ({
+export type NeoNativeSelectOption<Value = any> = string | number | ({
     value: Value;
     label?: string | Snippet;
     id?: string | number;
 } & HTMLOptionAttributes);
-export type NeoNativeSelectProps<Value = unknown> = {
+export type NeoNativeSelectProps<Value = any> = {
     /**
      * Custom icon for the picker.
      */
@@ -23,8 +23,8 @@ export type NeoNativeSelectProps<Value = unknown> = {
      */
     options?: NeoNativeSelectOption<Value>[];
 } & NeoInputProps;
-export type NeoSelectOption<Value = unknown> = NeoListItemOrSection<Value>;
-export type NeoSelectProps<Value = unknown> = {
+export type NeoSelectOption<Value = any> = NeoListItemOrSection<Value>;
+export type NeoSelectProps<Value = any> = {
     /**
      * Custom icon for the picker.
      */
@@ -86,6 +86,10 @@ export type NeoSelectProps<Value = unknown> = {
      * The tooltip open state.
      */
     open?: NeoPopSelectProps<Value>['open'];
+    /**
+     * Actual tooltip position after flip & re-flow to fit viewport
+     */
+    position?: NeoPopSelectProps<Value>['position'];
     /**
      * The delay in milliseconds before the tooltip opens on hover.
      *