@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/common/NeoInput.svelte

@@ -0,0 +1,684 @@
+<script lang="ts">
+  import { wait } from '@dvcol/common-utils/common/promise';
+
+  import type { MouseEventHandler } from 'svelte/elements';
+
+  import type { NeoInputContext, NeoInputHTMLElement, NeoInputProps } from './neo-input.model.js';
+
+  import NeoAffix from './NeoAffix.svelte';
+  import NeoBaseInput from './NeoBaseInput.svelte';
+  import NeoInputValidation from './NeoInputValidation.svelte';
+  import NeoLabel from './NeoLabel.svelte';
+  import { NeoInputLabelPosition } from './neo-input.model.js';
+
+  import { toTransition, toTransitionProps } from '../../utils/action.utils.js';
+  import {
+    computeGlassFilter,
+    computeHoverShadowElevation,
+    computeShadowElevation,
+    getDefaultElevation,
+    getDefaultHoverElevation,
+    isShadowFlat,
+  } from '../../utils/shadow.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    label,
+    before,
+    after,
+    message,
+    error,
+    children,
+
+    // States
+    id = label ? `neo-input-${crypto.randomUUID()}` : undefined,
+    ref = $bindable(),
+    files = $bindable(), // type="file"
+    value = $bindable(),
+    group = $bindable(), // type="radio"
+    checked = $bindable(), // type="checkbox"
+    indeterminate = $bindable(), // type="checkbox"
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+    disabled,
+    readonly,
+
+    loading,
+    clearable,
+
+    position = NeoInputLabelPosition.Inside,
+
+    // Styles
+    borderless,
+    pressed,
+    rounded,
+    glass,
+    start,
+    floating = true,
+    skeleton,
+    validation,
+    elevation = getDefaultElevation(pressed),
+    hover = getDefaultHoverElevation(pressed),
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other props
+    labelRef = $bindable(),
+    labelProps,
+    afterRef = $bindable(),
+    afterProps,
+    afterTag = afterProps?.onclick ? 'button' : 'span',
+    beforeRef = $bindable(),
+    beforeProps,
+    beforeTag = beforeProps?.onclick ? 'button' : 'span',
+    containerProps,
+    containerTag = 'div',
+    wrapperProps,
+    wrapperTag = 'div',
+    messageProps,
+    messageTag = 'div',
+    ...rest
+  }: NeoInputProps = $props();
+  /* eslint-enable prefer-const */
+
+  const getValue = () => {
+    if (rest?.type === 'file') return files;
+    if (rest?.type === 'checkbox' || rest?.type === 'radio') return checked;
+    return value;
+  };
+
+  let initial = $state(getValue());
+  let validationMessage = $state<string>(ref?.validationMessage ?? '');
+
+  const filter = $derived(computeGlassFilter(elevation, glass));
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass, pressed }));
+  const hoverShadow = $derived(computeHoverShadowElevation(elevation, hover, { glass, pressed }) ?? boxShadow);
+
+  const hoverFlat = $derived(isShadowFlat(boxShadow) && !isShadowFlat(hoverShadow));
+  const flatHover = $derived(isShadowFlat(hoverShadow) && !isShadowFlat(boxShadow));
+
+  const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
+    hovered = true;
+    containerProps?.onmouseenter?.(e);
+  };
+
+  const onMouseLeave: MouseEventHandler<HTMLDivElement> = e => {
+    hovered = false;
+    containerProps?.onmouseleave?.(e);
+  };
+
+  const typedValue = $derived(getValue());
+  const hasValue = $derived.by(() => {
+    if (rest?.type === 'file') return !!files?.length;
+    if (rest?.type === 'checkbox' || rest?.type === 'radio') return checked !== undefined;
+    if (typeof value === 'string') return !!value.length;
+    return value !== undefined && value !== null;
+  });
+
+  const affix = $derived(clearable || loading !== undefined || validation);
+  const close = $derived(clearable && (focused || hovered) && hasValue && !disabled && !readonly);
+  const isFloating = $derived(floating && !focused && !hasValue && !disabled && !readonly);
+  const inside = $derived(position === NeoInputLabelPosition.Inside && label);
+
+  const onClear = () => {
+    if (disabled || readonly) return;
+    ref?.clear?.();
+  };
+  const onFocus = () => {
+    if (focused || disabled || readonly) return;
+    ref?.focus();
+  };
+
+  let first = $state(true);
+  // Skip enter transition on first render for floating label
+  const waitForTick = async () => {
+    if (!first) return;
+    await wait();
+    first = false;
+  };
+
+  let affixRef = $state<HTMLElement>();
+  let affixWidth = $state<string>();
+  let afterWidth = $state<string>();
+  let beforeWidth = $state<string>();
+  let labelWidth = $state<string>();
+  let labelHeight = $state<string>();
+
+  const updateRefs = () => {
+    labelHeight = `${labelRef?.clientHeight ?? 0}px`;
+    labelWidth = `${labelRef?.clientWidth ?? 0}px`;
+    beforeWidth = `${beforeRef?.clientWidth ?? 0}px`;
+    afterWidth = `${afterRef?.clientWidth ?? 0}px`;
+    affixWidth = `${affixRef?.clientWidth ?? 0}px`;
+  };
+
+  $effect(() => {
+    if (first) waitForTick();
+    updateRefs();
+  });
+
+  let visible = $state(false);
+  let messageId = $state(`neo-textarea-message-${crypto.randomUUID()}`);
+
+  const context = $derived<NeoInputContext<NeoInputHTMLElement>>({
+    // Ref
+    ref,
+
+    // Methods
+    mark: ref?.mark,
+    clear: ref?.clear,
+    change: ref?.change,
+    validate: ref?.validate,
+
+    // State
+    initial,
+    value: typedValue,
+    touched,
+    dirty,
+    valid,
+    readonly,
+    disabled,
+
+    // Styles
+    elevation,
+    hover,
+    pressed,
+    borderless,
+    rounded,
+    glass,
+    start,
+    skeleton,
+  });
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+</script>
+
+{#snippet prefix()}
+  {#if before}
+    <svelte:element
+      this={beforeTag}
+      bind:this={beforeRef}
+      class:neo-input-before={true}
+      class:neo-inside={inside}
+      class:neo-pressed={pressed}
+      class:neo-inset={elevation < 0}
+      class:neo-deep={elevation < -3}
+      {disabled}
+      {readonly}
+      {...beforeProps}
+    >
+      {@render before(context)}
+    </svelte:element>
+  {/if}
+{/snippet}
+
+{#snippet suffix()}
+  <!--  Affix (loafing, clear, placeholder) -->
+  {#if affix}
+    <NeoAffix
+      bind:ref={affixRef}
+      class={after ? 'neo-after' : undefined}
+      {loading}
+      {close}
+      {disabled}
+      {skeleton}
+      valid={validation ? valid : undefined}
+      closeProps={{ onclick: onClear }}
+      onclick={onFocus}
+    />
+  {/if}
+  <!--  Suffix  -->
+  {#if after}
+    <svelte:element
+      this={afterTag}
+      bind:this={afterRef}
+      class:neo-input-after={true}
+      class:neo-inside={inside}
+      class:neo-pressed={pressed}
+      class:neo-inset={elevation < 0}
+      class:neo-deep={elevation < -3}
+      {disabled}
+      {readonly}
+      {...afterProps}
+    >
+      {@render after(context)}
+    </svelte:element>
+  {/if}
+{/snippet}
+
+{#snippet input()}
+  <NeoBaseInput
+    aria-invalid={valid === undefined ? undefined : !valid}
+    aria-describedby={visible ? messageId : undefined}
+    bind:ref
+    bind:files
+    bind:initial
+    bind:value
+    bind:group
+    bind:checked
+    bind:indeterminate
+    bind:valid
+    bind:dirty
+    bind:touched
+    bind:focused
+    bind:validationMessage
+    {id}
+    {disabled}
+    {readonly}
+    after={!!(after || affix)}
+    before={!!before}
+    {...rest}
+  />
+{/snippet}
+
+{#snippet labelGroup()}
+  {#if typeof label === 'string'}
+    {label}
+  {:else if label}
+    {@render label(context)}
+  {/if}
+{/snippet}
+
+{#snippet inputGroup()}
+  <svelte:element
+    this={containerTag}
+    role="none"
+    data-position={position}
+    data-touched={touched}
+    data-dirty={dirty}
+    data-valid={valid}
+    class:neo-input-group={true}
+    class:neo-readonly={readonly}
+    class:neo-pressed={pressed}
+    class:neo-borderless={borderless}
+    class:neo-rounded={rounded}
+    class:neo-glass={glass}
+    class:neo-hover={hover}
+    class:neo-hovered={hovered}
+    class:neo-floating={floating}
+    class:neo-start={start}
+    class:neo-skeleton={skeleton}
+    class:neo-validation={validation}
+    class:neo-disabled={disabled}
+    class:neo-raised={elevation > 3 || elevation + hover > 3}
+    class:neo-inset={elevation < -3 || elevation + hover < -3}
+    class:neo-flat={!elevation}
+    class:neo-hover-flat={hoverFlat}
+    class:neo-flat-hover={flatHover}
+    style:--neo-input-glass-blur={filter}
+    style:--neo-input-box-shadow={boxShadow}
+    style:--neo-input-hover-shadow={hoverShadow}
+    style:--neo-input-label-height={labelHeight}
+    style:--neo-input-label-width={labelWidth}
+    style:--neo-input-before-width={beforeWidth}
+    style:--neo-input-after-width={afterWidth}
+    style:--neo-input-affix-width={affixWidth}
+    out:outFn={outProps}
+    in:inFn={inProps}
+    {...containerProps}
+    onmouseenter={onMouseEnter}
+    onmouseleave={onMouseLeave}
+  >
+    {@render prefix()}
+    {#if label}
+      <NeoLabel
+        for={id}
+        bind:ref={labelRef}
+        containerProps={{
+          class: [
+            first ? 'neo-first' : undefined,
+            before ? 'neo-before' : undefined,
+            after ? 'neo-after' : undefined,
+            rounded ? 'neo-rounded' : undefined,
+            isFloating ? 'neo-floating' : undefined,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          onclick: onFocus,
+        }}
+        label={labelGroup}
+        required={rest.required}
+        {disabled}
+        {...labelProps}
+      >
+        {@render input()}
+      </NeoLabel>
+    {:else}
+      {@render input()}
+    {/if}
+    {@render suffix()}
+    {@render children?.(context)}
+  </svelte:element>
+{/snippet}
+
+<NeoInputValidation
+  tag={wrapperTag}
+  bind:visible
+  bind:messageId
+  {valid}
+  {validation}
+  {validationMessage}
+  {error}
+  {rounded}
+  {context}
+  {message}
+  {messageTag}
+  {messageProps}
+  in={inAction}
+  out={outAction}
+  transition={transitionAction}
+  {...wrapperProps}
+>
+  {@render inputGroup()}
+</NeoInputValidation>
+
+<style>.neo-input-group,
+.neo-input-before,
+.neo-input-after {
+  display: inline-flex;
+  box-sizing: border-box;
+  min-width: min-content;
+  font: inherit;
+  text-decoration: none;
+  outline: none;
+  transition: opacity 0.3s ease, color 0.3s ease, margin 0.3s ease, padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
+}
+
+.neo-input-before {
+  color: var(--neo-input-before-color, inherit);
+  background-color: var(--neo-input-before-bg-color, transparent);
+  border: none;
+  border-right: var(--neo-border-width, 1px) var(--neo-input-before-border-color, transparent) solid;
+  border-radius: var(--neo-input-border-radius, var(--neo-border-radius)) 0 0 var(--neo-input-border-radius, var(--neo-border-radius));
+}
+.neo-input-after {
+  color: var(--neo-input-after-color, inherit);
+  background-color: var(--neo-input-after-bg-color, transparent);
+  border: none;
+  border-left: var(--neo-border-width, 1px) var(--neo-input-after-border-color, transparent) solid;
+  border-radius: 0 var(--neo-input-border-radius, var(--neo-border-radius)) var(--neo-input-border-radius, var(--neo-border-radius)) 0;
+}
+.neo-input-before, .neo-input-after {
+  align-items: center;
+  min-width: max-content;
+  padding: 0.75rem;
+}
+.neo-input-before:is(button, a), .neo-input-after:is(button, a) {
+  cursor: pointer;
+}
+.neo-input-before:is(button, a):focus-visible, .neo-input-after:is(button, a):focus-visible {
+  color: var(--neo-input-focus-color, var(--neo-text-color-focused));
+}
+.neo-input-before:is(button, a):hover, .neo-input-after:is(button, a):hover {
+  color: var(--neo-input-hover-color, var(--neo-text-color-hover));
+}
+.neo-input-before:is(button, a):active, .neo-input-after:is(button, a):active {
+  color: var(--neo-input-active-color, var(--neo-text-color-hover-active));
+  scale: 0.9;
+}
+.neo-input-before:is(button, a):disabled, .neo-input-after:is(button, a):disabled {
+  color: var(--neo-text-color-disabled);
+  cursor: not-allowed;
+  scale: 1;
+}
+.neo-input-before:has(:global(.neo-button:only-child)):not(.neo-inside), .neo-input-after:has(:global(.neo-button:only-child)):not(.neo-inside) {
+  padding: 0 0.125rem;
+}
+.neo-input-before :global(.neo-button), .neo-input-after :global(.neo-button) {
+  --neo-btn-padding: 0.5rem 0.75rem;
+  --neo-btn-margin: auto;
+  --neo-btn-min-width: 2.375rem;
+  --neo-btn-box-shadow-active-flat-toggle: var(--neo-box-shadow-inset-2);
+  --neo-btn-bg-color: transparent;
+  --neo-btn-backdrop-filter: none;
+}
+.neo-input-before.neo-inset :global(.neo-button), .neo-input-after.neo-inset :global(.neo-button) {
+  --neo-btn-margin: auto 0;
+  --neo-btn-padding-empty: 0.375rem;
+}
+.neo-input-before.neo-inset.neo-pressed :global(.neo-button), .neo-input-after.neo-inset.neo-pressed :global(.neo-button) {
+  --neo-input-icon-scale: 1;
+}
+.neo-input-before.neo-deep :global(.neo-button), .neo-input-after.neo-deep :global(.neo-button) {
+  --neo-btn-margin: auto 0.25rem;
+}
+.neo-input-group {
+  position: relative;
+  margin: var(--neo-shadow-margin, 0.625rem);
+  padding: 0 0.1875rem;
+  color: var(--neo-input-text-color, inherit);
+  background-color: var(--neo-input-bg-color, inherit);
+  border: var(--neo-input-border-width, var(--neo-border-width, 1px)) var(--neo-input-border-color, transparent) solid;
+  border-radius: var(--neo-input-border-radius, var(--neo-border-radius));
+  box-shadow: var(--neo-input-box-shadow, var(--neo-box-shadow-flat));
+  cursor: var(--neo-input-cursor, text);
+}
+.neo-input-group.neo-readonly {
+  cursor: inherit;
+}
+.neo-input-group.neo-borderless {
+  border-color: transparent !important;
+}
+.neo-input-group.neo-inset.neo-pressed, .neo-input-group.neo-raised {
+  margin: var(--neo-shadow-margin-lg, 1.125rem);
+}
+.neo-input-group.neo-inset {
+  padding: 0.25rem;
+}
+.neo-input-group.neo-hover.neo-flat-hover.neo-hovered, .neo-input-group.neo-hover.neo-flat-hover:hover, .neo-input-group.neo-hover.neo-flat-hover:focus-within, .neo-input-group.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat.neo-hovered, .neo-hover-flat:focus-within) {
+  border-color: var(--neo-input-border-color, var(--neo-border-color));
+}
+.neo-input-group:focus-within, .neo-input-group.neo-hover:hover, .neo-input-group.neo-hover.neo-hovered {
+  box-shadow: var(--neo-input-hover-shadow, var(--neo-box-shadow-flat));
+}
+.neo-input-group :global(.neo-label-container) {
+  width: 100%;
+  transition: opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
+}
+.neo-input-group :global(.neo-label-container) :global(.neo-label) {
+  --neo-label-padding: 0 0.75rem;
+  --neo-label-margin: 0;
+  --neo-label-color: var(--neo-input-label-color, inherit);
+  min-height: var(--neo-input-label-height);
+  transition: opacity 0.3s ease, padding 0.3s ease, color 0.3s ease, font-size 0.3s ease, line-height 0.3s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, translate 0.3s ease;
+}
+.neo-input-group :global(.neo-label-container.neo-rounded:not(.neo-before)) {
+  padding-left: 0.25rem;
+}
+.neo-input-group :global(.neo-label-container.neo-first .neo-label) {
+  transition: none;
+}
+.neo-input-group :global(.neo-label-container.neo-before .neo-label) {
+  padding-left: 0;
+}
+.neo-input-group :global(.neo-label-container.neo-after .neo-label) {
+  padding-right: 0;
+}
+.neo-input-group :global(.neo-label-container.neo-floating) :global(.neo-label) {
+  --neo-label-color: var(--neo-input-floating-label-color, var(--neo-text-color-disabled));
+  --neo-label-required-color: var(--neo-input-required-color, var(--neo-color-error-50));
+}
+.neo-input-group :global(.neo-label-container.neo-floating) :global(.neo-input) {
+  color: var(--neo-input-floating-text-color, transparent);
+}
+.neo-input-group :global(.neo-label-container.neo-floating) :global(::placeholder) {
+  opacity: 0;
+}
+.neo-input-group.neo-disabled {
+  box-shadow: var(--neo-box-shadow-flat) !important;
+  opacity: var(--neo-input-opacity-disabled, var(--neo-opacity-disabled));
+}
+.neo-input-group.neo-disabled:not(.neo-borderless) {
+  border-color: var(--neo-input-border-color-disabled, var(--neo-border-color-disabled)) !important;
+}
+.neo-input-group :global(.neo-affix-container.neo-after) {
+  min-width: 1.75rem;
+  padding-right: 0;
+  padding-left: 0.5rem;
+}
+.neo-input-group.neo-rounded {
+  border-radius: var(--neo-input-border-radius-lg, var(--neo-border-radius-lg));
+}
+.neo-input-group.neo-rounded :global(.neo-affix-container:not(.neo-after)) {
+  margin-right: 0.25rem;
+}
+.neo-input-group.neo-rounded :global(.neo-label-container .neo-label) {
+  padding: 0 1rem;
+}
+.neo-input-group.neo-rounded :global(.neo-label-container.neo-before .neo-label) {
+  padding-left: 0;
+}
+.neo-input-group.neo-rounded :global(.neo-label-container.neo-after .neo-label) {
+  padding-right: 0;
+}
+.neo-input-group[data-position=left] {
+  --neo-input-margin-left: calc(var(--neo-shadow-margin, 0.625rem) * 2 + var(--neo-input-label-width, auto));
+  margin-left: var(--neo-input-margin-left);
+}
+.neo-input-group[data-position=left] :global(.neo-label-container .neo-label) {
+  position: absolute;
+  top: calc(50% - var(--neo-input-label-height) / 2);
+  left: calc(0% - var(--neo-input-margin-left));
+}
+.neo-input-group[data-position=left] :global(.neo-label-container.neo-before .neo-label) {
+  left: calc(0% - var(--neo-input-margin-left));
+}
+.neo-input-group[data-position=left] :global(.neo-label-container.neo-floating .neo-label) {
+  left: calc(0.25rem + var(--neo-input-before-width));
+}
+.neo-input-group[data-position=right] {
+  --neo-input-margin-right: calc(var(--neo-shadow-margin, 0.625rem) * 2 + var(--neo-input-label-width, auto));
+  margin-right: var(--neo-input-margin-right);
+}
+.neo-input-group[data-position=right] :global(.neo-label-container .neo-label) {
+  position: absolute;
+  top: calc(50% - var(--neo-input-label-height) / 2);
+  right: calc(0% - var(--neo-input-margin-right));
+}
+.neo-input-group[data-position=right] :global(.neo-label-container.neo-before .neo-label) {
+  right: calc(0% - var(--neo-input-margin-right));
+}
+.neo-input-group[data-position=right] :global(.neo-label-container.neo-floating .neo-label) {
+  right: calc(100% - var(--neo-input-label-width) - 0.25rem - var(--neo-input-before-width));
+}
+.neo-input-group[data-position=right] :global(.neo-label-container.neo-floating.neo-rounded:not(.neo-before) .neo-label) {
+  right: calc(100% - var(--neo-input-label-width) - 0.75rem - var(--neo-input-before-width));
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container .neo-input) {
+  padding: 0 1rem 0.5rem;
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container.neo-before .neo-input) {
+  padding-left: 0;
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container.neo-after .neo-input) {
+  padding-right: 0;
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container .neo-label) {
+  padding: 0.75rem 1rem 0.1875rem;
+  line-height: var(--neo-line-height-xs, 1rem);
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container.neo-before .neo-label) {
+  padding-left: 0;
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container.neo-floating .neo-label) {
+  translate: 0 calc(50% - 0.28125rem);
+}
+.neo-input-group[data-position=inside] :global(.neo-label-container:not(.neo-floating) .neo-label) {
+  font-size: var(--neo-font-size-sm, 0.875rem);
+}
+.neo-input-group[data-position=top][data-position=top] {
+  --neo-input-margin-top: calc(var(--neo-shadow-margin, 0.625rem) + var(--neo-input-label-height, var(--neo-line-height)));
+  margin-top: var(--neo-input-margin-top);
+}
+.neo-input-group[data-position=top][data-position=top] :global(.neo-label-container .neo-label) {
+  position: absolute;
+  top: calc(0% - var(--neo-input-margin-top));
+}
+.neo-input-group[data-position=top][data-position=top]:not(.neo-floating) :global(.neo-label-container .neo-label) {
+  left: 0;
+  padding: var(--neo-label-padding, 0 1rem);
+}
+.neo-input-group[data-position=top] :global(.neo-label-container.neo-floating .neo-label), .neo-input-group[data-position=left] :global(.neo-label-container.neo-floating .neo-label), .neo-input-group[data-position=right] :global(.neo-label-container.neo-floating .neo-label) {
+  top: calc(50% - var(--neo-input-label-height) / 2);
+}
+.neo-input-group[data-position=top].neo-floating, .neo-input-group[data-position=left].neo-floating, .neo-input-group[data-position=right].neo-floating {
+  --neo-input-min-width: var(--neo-input-label-width);
+  --neo-input-min-height: var(--neo-input-label-height);
+  --neo-label-max-width: calc(100% - var(--neo-input-after-width) - var(--neo-input-before-width) - var(--neo-input-affix-width));
+}
+.neo-input-group.neo-glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  --neo-border-color: var(--neo-glass-border-color);
+  background-color: var(--neo-input-bg-color, var(--neo-glass-background-color));
+  border-color: var(--neo-input-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+  backdrop-filter: var(--neo-input-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
+}
+.neo-input-group.neo-validation[data-valid=false] {
+  --neo-input-label-color: var(--neo-input-label-color-error, var(--neo-color-error));
+  --neo-input-floating-label-color: var(--neo-input-floating-label-color-error, var(--neo-color-error-50));
+  --neo-label-disabled-color: var(--neo-input-floating-label-color-error, var(--neo-color-error-50));
+}
+.neo-input-group.neo-validation[data-valid=true] {
+  --neo-input-label-color: var(--neo-input-label-color-success, var(--neo-color-success));
+  --neo-input-floating-label-color: var(--neo-input-floating-label-color-success, var(--neo-color-success-50));
+  --neo-label-disabled-color: var(--neo-input-floating-label-color-success, var(--neo-color-success-50));
+}
+@starting-style {
+  .neo-input-group.neo-start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+  .neo-input-group.neo-start:not(.neo-borderless) {
+    border-color: var(--neo-input-border-color, var(--neo-border-color));
+  }
+}
+.neo-input-group.neo-skeleton {
+  box-shadow: var(--neo-box-shadow-flat);
+  pointer-events: none;
+  --neo-skeleton-color-start: var(--neo-skeleton-color);
+  --neo-skeleton-color-end: oklch(from var(--neo-skeleton-color) calc(l - var(--neo-skeleton-color-step, 0.05)) c h);
+  color: var(--neo-skeleton-color-start);
+  background-color: var(--neo-skeleton-color-start);
+  border-color: var(--neo-skeleton-color-start);
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+.neo-input-group.neo-skeleton::before, .neo-input-group.neo-skeleton::after,
+.neo-input-group.neo-skeleton :global(> *::before),
+.neo-input-group.neo-skeleton :global(> *::after),
+.neo-input-group.neo-skeleton :global(> *) {
+  visibility: hidden;
+  pointer-events: none;
+}
+@keyframes skeleton {
+  0% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  40% {
+    color: var(--neo-skeleton-color-end);
+    background-color: var(--neo-skeleton-color-end);
+    border-color: var(--neo-skeleton-color-end);
+  }
+  80% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  100% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+}</style>

package/dist/inputs/{NeoInput.svelte.d.ts → common/NeoInput.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type NeoInputMethods, type NeoInputProps } from './neo-input.model.js';
+import type { NeoInputProps } from './neo-input.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;
@@ -14,14 +14,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const NeoInput: $$__sveltets_2_IsomorphicComponent<NeoInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {
-    /**
-       * Change the state of the input
-       * @param state
-       */ mark: NeoInputMethods<HTMLInputElement>["mark"];
-    /**
-       * Clear the input state
-       */ clear: NeoInputMethods<HTMLInputElement>["clear"];
-}, "value" | "ref" | "valid" | "dirty" | "touched" | "labelRef">;
+}, {}, {}, "value" | "group" | "ref" | "checked" | "hovered" | "focused" | "files" | "indeterminate" | "touched" | "dirty" | "valid" | "labelRef" | "afterRef" | "beforeRef">;
 type NeoInput = InstanceType<typeof NeoInput>;
 export default NeoInput;