@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/common/NeoInputValidation.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" generics="T extends HTMLElement, V extends any">
+  import type { NeoInputValidationProps } from './neo-input-validation.model.js';
+
+  import NeoValidation from './NeoValidation.svelte';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+    error,
+
+    // States
+    visible = $bindable(false),
+    validation,
+    validationMessage,
+
+    message,
+    valid,
+
+    // Other props
+    messageProps,
+    messageId = $bindable(messageProps?.id ?? `neo-validation-message-${crypto.randomUUID()}`),
+    ...rest
+  }: NeoInputValidationProps<T, V> = $props();
+  /* eslint-enable prefer-const */
+
+  const errorMessage = $derived.by(() => {
+    if (valid !== false) return;
+    if (error) return error;
+    if (!validation) return;
+    return validationMessage;
+  });
+
+  const showMessage = $derived(message || errorMessage || error || validation);
+
+  $effect(() => {
+    visible = !!showMessage;
+  });
+</script>
+
+{#if showMessage}
+  <NeoValidation bind:messageId error={errorMessage} {message} {messageProps} {children} {...rest} />
+{:else}
+  {@render children?.({ messageId, message, error })}
+{/if}

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

@@ -0,0 +1,22 @@
+import type { NeoInputValidationProps } from './neo-input-validation.model.js';
+declare class __sveltets_Render<T extends HTMLElement, V extends any> {
+    props(): NeoInputValidationProps<T, V>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "messageId" | "visible";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends HTMLElement, V extends any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, V>['props']>, ReturnType<__sveltets_Render<T, V>['events']>, ReturnType<__sveltets_Render<T, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, V>['exports']>;
+    <T extends HTMLElement, V extends any>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<T, V>['events']>;
+    }): ReturnType<__sveltets_Render<T, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoInputValidation: $$IsomorphicComponent;
+type NeoInputValidation<T extends HTMLElement, V extends any> = InstanceType<typeof NeoInputValidation<T, V>>;
+export default NeoInputValidation;

package/dist/inputs/common/NeoLabel.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  import type { NeoLabelProps } from './neo-label.model.js';
+
+  import { toAction, toActionProps } from '../../utils/action.utils.js';
+
+  let {
+    // Snippets
+    children,
+    label,
+
+    // States
+    ref = $bindable(),
+    valid,
+    required,
+    disabled,
+
+    // Actions
+    use,
+
+    // Other props
+    containerTag = 'div',
+    containerProps,
+    ...rest
+  }: NeoLabelProps = $props();
+  /* eslint-enable prefer-const */
+
+  const useFn = $derived(toAction(use));
+  const useProps = $derived(toActionProps(use));
+</script>
+
+<svelte:element this={containerTag} class:neo-label-container={true} {...containerProps}>
+  <label
+    bind:this={ref}
+    class:neo-label={true}
+    class:neo-disabled={disabled}
+    class:neo-valid={valid === true}
+    class:neo-invalid={valid === false}
+    class:neo-required={required}
+    use:useFn={useProps}
+    {...rest}
+  >
+    {#if typeof label === 'string'}
+      {label}
+    {:else}
+      {@render label?.()}
+    {/if}
+  </label>
+  {@render children?.()}
+</svelte:element>
+
+<style>.neo-label-container {
+  display: inline-flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.neo-label-container .neo-label {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: var(--neo-label-max-width);
+  margin: var(--neo-label-margin, var(--neo-shadow-margin, 0.625rem) var(--neo-shadow-margin, 0.625rem) 0);
+  padding: var(--neo-label-padding, 0 0.75rem);
+  overflow: hidden;
+  color: var(--neo-label-color, inherit);
+  text-wrap: stable;
+  text-overflow: ellipsis;
+  cursor: inherit;
+}
+.neo-label-container .neo-label.neo-required::after {
+  margin-left: 0.1rem;
+  color: var(--neo-label-required-color, var(--neo-color-error-75));
+  font-size: var(--neo-label-font-size, var(--neo-font-size, inherit));
+  content: "*";
+}
+.neo-label-container .neo-label.neo-invalid {
+  color: var(--neo-label-color-error, var(--neo-color-error));
+}
+.neo-label-container .neo-label.neo-valid {
+  color: var(--neo-label-color-success, var(--neo-color-success));
+}
+.neo-label-container .neo-label.neo-disabled {
+  color: var(--neo-label-disabled-color, var(--neo-color-disabled));
+}
+.neo-label-container .neo-label.neo-disabled.neo-invalid {
+  color: var(--neo-input-color-error-disabled, var(--neo-color-error-50));
+}
+.neo-label-container .neo-label.neo-disabled.neo-valid {
+  color: var(--neo-label-color-success-disabled, var(--neo-color-success-50));
+}
+.neo-label-container .neo-label.neo-disabled::after {
+  color: var(--neo-label-disabled-color, var(--neo-color-error-50));
+}</style>

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

@@ -0,0 +1,19 @@
+import type { NeoLabelProps } from './neo-label.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoLabel: $$__sveltets_2_IsomorphicComponent<NeoLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoLabel = InstanceType<typeof NeoLabel>;
+export default NeoLabel;

package/dist/inputs/{NeoValidation.svelte → common/NeoValidation.svelte}

@@ -1,10 +1,10 @@
-<script lang="ts" generics="T extends HTMLElement">
+<script lang="ts" generics="T extends HTMLElement, V extends any">
   import { fade } from 'svelte/transition';
 
   import type { NeoValidationContext, NeoValidationProps } from './neo-validation.model.js';
 
-  import { toTransition, toTransitionProps } from '../utils/action.utils.js';
-  import { enterDefaultTransition, leaveDefaultTransition } from '../utils/transition.utils.js';
+  import { toTransition, toTransitionProps } from '../../utils/action.utils.js';
+  import { enterDefaultTransition, leaveDefaultTransition } from '../../utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -25,12 +25,12 @@
     // Other props
     messageProps,
     messageTag = 'div',
-    messageId = messageProps?.id ?? `neo-validation-message-${crypto.randomUUID()}`,
+    messageId = $bindable(messageProps?.id ?? `neo-validation-message-${crypto.randomUUID()}`),
     ...rest
-  }: NeoValidationProps<T> = $props();
+  }: NeoValidationProps<T, V> = $props();
   /* eslint-enable prefer-const */
 
-  const innerContext = $derived<NeoValidationContext<T>>({
+  const innerContext = $derived<NeoValidationContext<T, V>>({
     messageId,
     message,
     error,
@@ -44,7 +44,7 @@
 
 <svelte:element this={tag} class:neo-validation-group-wrapper={true} out:outFn={outProps} in:inFn={inProps} {...rest}>
   {@render children?.(innerContext)}
-  <div class="neo-validation-message" class:rounded={context?.rounded}>
+  <div class="neo-validation-message">
     {#if error}
       <svelte:element
         this={messageTag}
@@ -85,7 +85,7 @@
 }
 .neo-validation-group-wrapper .neo-validation-message {
   min-height: var(--neo-line-height-sm, 1.25rem);
-  margin: 0.25rem var(--neo-shadow-margin, 0.6rem) var(--neo-shadow-margin, 0.6rem);
+  margin: var(--neo-validation-margin, 0.25rem var(--neo-shadow-margin, 0.625rem) var(--neo-shadow-margin, 0.625rem));
   font-size: var(--neo-font-size-sm, 0.875rem);
   line-height: var(--neo-line-height-xs, 1rem);
   transition: color 0.3s ease, padding 0.3s ease, margin 0.3s ease;
@@ -95,12 +95,5 @@
 }
 .neo-validation-group-wrapper .neo-validation-message .neo-validation-error,
 .neo-validation-group-wrapper .neo-validation-message .neo-validation-description {
-  padding: 0 0.75rem;
-}
-.neo-validation-group-wrapper .neo-validation-message.rounded {
-  margin: 0.25rem var(--neo-shadow-margin-lg, 1.125rem) var(--neo-shadow-margin-lg, 1.125rem);
-}
-.neo-validation-group-wrapper .neo-validation-message.rounded .neo-validation-error,
-.neo-validation-group-wrapper .neo-validation-message.rounded .neo-validation-description {
-  padding: 0 1rem;
+  padding: var(--neo-validation-padding, 0 0.75rem);
 }</style>

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

@@ -0,0 +1,22 @@
+import type { NeoValidationProps } from './neo-validation.model.js';
+declare class __sveltets_Render<T extends HTMLElement, V extends any> {
+    props(): NeoValidationProps<T, V>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "messageId";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends HTMLElement, V extends any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, V>['props']>, ReturnType<__sveltets_Render<T, V>['events']>, ReturnType<__sveltets_Render<T, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, V>['exports']>;
+    <T extends HTMLElement, V extends any>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<T, V>['events']>;
+    }): ReturnType<__sveltets_Render<T, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoValidation: $$IsomorphicComponent;
+type NeoValidation<T extends HTMLElement, V extends any> = InstanceType<typeof NeoValidation<T, V>>;
+export default NeoValidation;

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

@@ -0,0 +1,32 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../../utils/html-element.utils.js';
+export type NeoAffixProps = {
+    /**
+     * Display loading indicator
+     */
+    loading?: boolean;
+    /**
+     * Display a close button if not loading
+     */
+    close?: boolean;
+    /**
+     * Display validation state if not loading or closable
+     */
+    valid?: boolean;
+    /**
+     * Display a skeleton state
+     */
+    skeleton?: boolean;
+    /**
+     * Display a disabled state
+     */
+    disabled?: boolean;
+    /**
+     * The size of the inner svg
+     */
+    size?: string;
+    /**
+     * Props for the close button
+     */
+    closeProps?: HTMLButtonAttributes;
+} & HTMLNeoBaseElement<HTMLSpanElement> & HTMLRefProps<HTMLSpanElement>;

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

@@ -0,0 +1,20 @@
+import type { NeoValidationFieldContext, NeoValidationProps, NeoValidationValue } from './neo-validation.model.js';
+export type NeoInputValidationProps<T extends HTMLElement = HTMLElement, V extends NeoValidationValue = NeoValidationValue, C extends NeoValidationFieldContext<T, V> = NeoValidationFieldContext<T, V>> = NeoValidationProps<T, V, C> & {
+    /**
+     * `true` if the input passes validation.
+     */
+    valid?: boolean;
+    /**
+     * `true` if the any message is displayed
+     */
+    visible?: boolean;
+    /**
+     * `true` to display the validation message.
+     */
+    validation?: boolean;
+    /**
+     * Optional validation message.
+     * Note: This will be overridden by the error message if it is set.
+     */
+    validationMessage?: string;
+};

package/dist/inputs/common/neo-input-validation.model.js

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

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

@@ -1,44 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
-import type { HTMLActionProps } from '../utils/action.utils.js';
-import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
-import type { ShadowElevation } from '../utils/shadow.utils.js';
-export type NeoInputState = {
-    /**
-     * `true` if the input has been focused.
-     */
-    touched?: boolean;
-    /**
-     * `true` if the input content has been modified and defers from the initial state.
-     * If `dirtyOnChange` is `true`, the input will always be considered dirty once it has been modified.
-     *
-     * @see dirtyOnChange
-     */
-    dirty?: boolean;
-    /**
-     * `true` if the input passes validation.
-     */
-    valid?: boolean;
-    /**
-     * The input/textarea value.
-     */
-    value?: string;
-};
-export type NeoInputMethods<T extends HTMLElement> = HTMLRefProps<T> & {
-    /**
-     * Change the input state. If no value is provided, the state attributes will be unchanged.
-     * @param state
-     */
-    mark: (state: NeoInputState) => unknown;
-    /**
-     * Clear the input. If a state is provided, the input state will be updated accordingly.
-     * If a partial state is provided, the input state will be reinitialized and the provided state will be merged.
-     * @param state
-     */
-    clear: (state?: NeoInputState) => unknown;
+import type { NeoLabelProps } from './neo-label.model.js';
+import type { NeoValidationFieldContext, NeoValidationState } from './neo-validation.model.js';
+import type { HTMLTransitionProps, HTMLUseProps } from '../../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, SvelteEvent } from '../../utils/html-element.utils.js';
+import type { ShadowElevation } from '../../utils/shadow.utils.js';
+export type NeoInputValue<T extends HTMLInputElement | HTMLTextAreaElement> = T extends HTMLTextAreaElement ? HTMLTextareaAttributes['value'] : HTMLInputAttributes['value'] | HTMLInputAttributes['checked'] | HTMLInputAttributes['bind:files'];
+type NeoInputHTMLAttributes<T extends HTMLInputElement | HTMLTextAreaElement> = T extends HTMLTextAreaElement ? HTMLTextareaAttributes : HTMLInputAttributes & {
+    files?: HTMLInputAttributes['bind:files'];
+    group?: HTMLInputAttributes['bind:group'];
 };
-export type NeoInputElevation = ShadowElevation;
-export type NeoInputContext<T extends HTMLElement = HTMLElement> = NeoInputState & NeoInputMethods<T> & {
+export type NeoInputState<T extends HTMLInputElement | HTMLTextAreaElement> = NeoValidationState<NeoInputValue<T>>;
+export type NeoInputStyles = {
     /**
      * Input elevation.
      * @default 3
@@ -49,6 +22,10 @@ export type NeoInputContext<T extends HTMLElement = HTMLElement> = NeoInputState
      * @default 0
      */
     hover?: number;
+    /**
+     * If true, negative elevation (< 0) will be displayed as pressed instead of inset.
+     */
+    pressed?: boolean;
     /**
      * By default, inputs with no elevation will display a border.
      * If this is `true`, the input will never display a border.
@@ -80,6 +57,38 @@ export type NeoInputContext<T extends HTMLElement = HTMLElement> = NeoInputState
      */
     readonly?: boolean;
 };
+export type NeoInputMethods<T extends HTMLInputElement | HTMLTextAreaElement> = {
+    /**
+     * Change the input state. If no value is provided, the state attributes will be unchanged.
+     * @param state
+     */
+    mark: (state: NeoInputState<T>) => unknown;
+    /**
+     * Clear the input. If a state is provided, the input state will be updated accordingly.
+     * If a partial state is provided, the input state will be reinitialized and the provided state will be merged.
+     *
+     * Note: Clearing the input will trigger `onclear` and `oninput` events, but not `onchange`.
+     * @param state
+     * @param event
+     */
+    clear: (state?: NeoInputState<T>, event?: InputEvent | SvelteEvent<InputEvent>) => Promise<unknown>;
+    /**
+     * Change the input value.
+     * @param value
+     * @param event
+     */
+    change: (value: NeoInputValue<T>, event?: InputEvent | SvelteEvent<InputEvent>) => NeoInputState<T>;
+    /**
+     * Check the input validity.
+     * @param update whether to check the input dirty and/or valid state.
+     */
+    validate: (update?: {
+        dirty?: boolean;
+        valid?: boolean;
+    }) => NeoInputState<T>;
+};
+export type NeoInputElevation = ShadowElevation;
+export type NeoInputContext<T extends HTMLInputElement | HTMLTextAreaElement> = NeoValidationFieldContext<T, NeoInputValue<T>> & Partial<NeoInputStyles & NeoInputMethods<T>>;
 export declare const NeoInputLabelPosition: {
     readonly Inside: "inside";
     readonly Top: "top";
@@ -87,41 +96,104 @@ export declare const NeoInputLabelPosition: {
     readonly Right: "right";
 };
 export type NeoInputLabelPositions = (typeof NeoInputLabelPosition)[keyof typeof NeoInputLabelPosition];
-export type NeoCommonInputProps<T extends HTMLElement> = {
+export type NeoBaseInputProps<T extends HTMLInputElement | HTMLTextAreaElement = NeoInputHTMLElement> = {
     /**
-     * A snippet or a string to display as the input label.
+     * If `true`, the input will have no left padding/border radius.
      */
-    label?: Snippet<[NeoInputContext<T>]> | string;
+    after?: boolean;
     /**
-     * A snippet or a string to display as the input info message.
+     * If `true`, the input will have no right padding/border radius.
      */
-    message?: Snippet<[NeoInputContext<T>]> | string;
+    before?: boolean;
     /**
-     * A snippet or a string to display as the input error message.
+     * If the input is currently focused.
      */
-    error?: Snippet<[NeoInputContext<T>]> | string;
+    focused?: boolean;
     /**
-     * A snippet to display as the input suffix.
+     * If false, and a default value is provided, the input will be set to the default value when cleared.
+     *
+     * Note: This does not apply to checkboxes, radios, and file inputs.
+     *
+     * @default true
+     */
+    nullable?: boolean;
+    /**
+     * Fall back value when the input value is cleared.
+     */
+    defaultValue?: HTMLInputAttributes['value'];
+    /**
+     * Fall back checked state when the input value is cleared.
      */
-    suffix?: Snippet<[NeoInputContext<T>]>;
+    defaultChecked?: HTMLInputAttributes['checked'];
     /**
      * If `true`, the input dirty state will update on input events.
      * If `false`, the input dirty state will only update on change events.
      * @default false
      */
     dirtyOnInput?: boolean;
+    /**
+     * If `true`, the input dirty state will update on blur events.
+     * @default false
+     */
+    dirtyOnBlur?: boolean;
     /**
      * If `true`, the input will check for validity on input events.
      * If `false`, the input will only check for validity on change events.
      * @default false
      */
     validateOnInput?: boolean;
+    /**
+     * If `true`, the input will check for validity on blur events.
+     * @default false
+     */
+    validateOnBlur?: boolean;
+    /**
+     * Reflect the input validation message.
+     */
+    validationMessage?: T['validationMessage'];
+    /**
+     * Callback when the input state is manually changed.
+     * @param state
+     */
+    onmark?: (state: NeoInputState<T>) => unknown;
+    /**
+     * Callback when the input is cleared.
+     * @param state
+     * @param event
+     */
+    onclear?: (state: NeoInputState<T>, event?: InputEvent) => unknown;
+} & HTMLUseProps & HTMLRefProps<T> & NeoInputState<T> & NeoInputHTMLAttributes<T>;
+export type NeoInputGroupProps<T extends HTMLInputElement | HTMLTextAreaElement> = {
+    /**
+     * A snippet or a string to display as the input label.
+     */
+    label?: Snippet<[NeoInputContext<T>]> | string;
+    /**
+     * A snippet or a string to display as the input info message.
+     */
+    message?: Snippet<[NeoInputContext<T>]> | string;
+    /**
+     * A snippet or a string to display as the input error message.
+     */
+    error?: Snippet<[NeoInputContext<T>]> | string;
+    /**
+     * A snippet to display as the input suffix.
+     */
+    after?: Snippet<[NeoInputContext<T>]>;
+    /**
+     * Element(s) to render inside the input-group (after the input).
+     */
+    children?: Snippet<[NeoInputContext<T>]>;
     /**
      * Display a loading spinner inside the input.
      * If defined, some space will be reserved for the spinner.
      * Set to `undefined` when not loading to regain the space.
      */
     loading?: boolean;
+    /**
+     * If the input is currently hovered.
+     */
+    hovered?: boolean;
     /**
      * Display a clear button to reset the input value.
      * If used in combination with `loading`, the clear button will be hidden while loading.
@@ -146,16 +218,6 @@ export type NeoCommonInputProps<T extends HTMLElement> = {
      * @default 'inside'
      */
     position?: NeoInputLabelPositions;
-    /**
-     * Callback when the input state is manually changed.
-     * @param state
-     */
-    onmark?: (state: NeoInputState) => unknown;
-    /**
-     * Callback when the input is cleared.
-     * @param state
-     */
-    onclear?: (state: NeoInputState) => unknown;
     /**
      * The HTML tag to use for the wrapper component (when message or error are shown).
      */
@@ -181,35 +243,46 @@ export type NeoCommonInputProps<T extends HTMLElement> = {
      * The props to pass to the message and error components.
      */
     messageProps?: HTMLNeoBaseElement;
-    suffixTag?: keyof HTMLElementTagNameMap;
+    afterTag?: keyof HTMLElementTagNameMap;
     /**
      * The props to pass to the suffix.
      */
-    suffixProps?: HTMLNeoBaseElement;
+    afterProps?: HTMLNeoBaseElement;
+    /**
+     * The ref to bind to the suffix.
+     */
+    afterRef?: HTMLElement;
     /**
      * The props to pass to the label.
      */
-    labelProps?: HTMLNeoBaseElement<HTMLLabelElement>;
+    labelProps?: NeoLabelProps;
     /**
      * The ref to bind to the label.
      */
     labelRef?: HTMLLabelElement;
-} & NeoInputContext<T> & HTMLActionProps;
-export type NeoInputProps<T extends HTMLInputElement = HTMLInputElement> = {
+} & Omit<NeoBaseInputProps<T>, 'after' | 'before'> & NeoInputStyles & HTMLTransitionProps;
+export type NeoInputProps<T extends HTMLInputElement = NeoInputHTMLElement> = {
     /**
      * A snippet to display as the input prefix.
      */
-    prefix?: Snippet<[NeoInputContext<T>]>;
+    before?: Snippet<[NeoInputContext<T>]>;
     /**
      * The HTML tag to use for the prefix.
      * @default div
      */
-    prefixTag?: keyof HTMLElementTagNameMap;
+    beforeTag?: keyof HTMLElementTagNameMap;
     /**
      * The props to pass to the prefix.
      */
-    prefixProps?: HTMLNeoBaseElement;
-} & NeoCommonInputProps<T> & HTMLInputAttributes;
+    beforeProps?: HTMLNeoBaseElement;
+    /**
+     * The ref to bind to the prefix.
+     */
+    beforeRef?: HTMLElement;
+} & NeoInputGroupProps<T> & HTMLInputAttributes & {
+    files?: HTMLInputAttributes['bind:files'];
+    group?: HTMLInputAttributes['bind:group'];
+};
 export type NeoTextAreaResize = {
     /**
      * The minimum number of rows the textarea can have.
@@ -221,7 +294,11 @@ export type NeoTextAreaResize = {
      */
     max?: number;
 };
-export type NeoTextareaProps<T extends HTMLTextAreaElement = HTMLTextAreaElement> = {
+export type NeoTextareaProps<T extends HTMLTextAreaElement = NeoTextareaHTMLElement> = {
+    /**
+     * Fall back value when the textarea value is cleared.
+     */
+    defaultValue: HTMLTextareaAttributes['value'];
     /**
      * Automatically increments/decrements the textarea rows to fit the content.
      *
@@ -231,4 +308,7 @@ export type NeoTextareaProps<T extends HTMLTextAreaElement = HTMLTextAreaElement
      * @default true
      */
     autoResize?: boolean | NeoTextAreaResize;
-} & NeoCommonInputProps<T> & HTMLTextareaAttributes;
+} & NeoInputGroupProps<T> & HTMLTextareaAttributes;
+export type NeoInputHTMLElement<T extends HTMLInputElement = HTMLInputElement> = T & Partial<NeoInputMethods<T>>;
+export type NeoTextareaHTMLElement<T extends HTMLTextAreaElement = HTMLTextAreaElement> = T & Partial<NeoInputMethods<T>>;
+export {};

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import type { HTMLUseProps } from '../../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../../utils/html-element.utils.js';
+export type NeoLabelProps = {
+    /**
+     * The element(s) to wrap with the label.
+     */
+    children?: Snippet;
+    /**
+     * A snippet or a string to display as the label.
+     */
+    label?: Snippet | string;
+    /**
+     * If `true` or `false`, the label will be displayed as valid or invalid.
+     * If any other value (undefined, null, etc.), the label will be displayed as normal.
+     */
+    valid?: boolean;
+    /**
+     * If `true`, the label will be displayed a required asterisk.
+     */
+    required?: boolean | null;
+    /**
+     * If `true`, the label will be displayed as disabled.
+     */
+    disabled?: boolean | null;
+    /**
+     * The HTML tag to use for the container.
+     * @default div
+     */
+    containerTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The props to pass to the label container.
+     */
+    containerProps?: HTMLNeoBaseElement;
+} & HTMLRefProps<HTMLLabelElement> & HTMLLabelAttributes & HTMLUseProps;