@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/NeoInput.svelte

@@ -1,750 +0,0 @@
-<script lang="ts">
-  import { wait } from '@dvcol/common-utils/common/promise';
-  import { fade } from 'svelte/transition';
-
-  import type { EventHandler, FocusEventHandler, FormEventHandler, MouseEventHandler } from 'svelte/elements';
-
-  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 NeoValidation from './NeoValidation.svelte';
-  import {
-    type NeoInputContext,
-    NeoInputLabelPosition,
-    type NeoInputMethods,
-    type NeoInputProps,
-    type NeoInputState,
-  } from './neo-input.model.js';
-  import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
-  import { computeGlassFilter, computeHoverShadowElevation, computeShadowElevation } from '../utils/shadow.utils.js';
-  import { enterDefaultTransition, leaveDefaultTransition } from '../utils/transition.utils.js';
-
-  /* eslint-disable prefer-const -- necessary for binding checked */
-  let {
-    // Snippets
-    label,
-    prefix,
-    suffix,
-    message,
-    error,
-
-    // States
-    id = label ? `neo-input-${crypto.randomUUID()}` : undefined,
-    ref = $bindable(),
-    value = $bindable(''),
-    valid = $bindable(undefined),
-    dirty = $bindable(false),
-    touched = $bindable(false),
-    disabled,
-    readonly,
-    loading,
-    clearable,
-    dirtyOnInput,
-    validateOnInput,
-    position = NeoInputLabelPosition.Inside,
-
-    // Styles
-    elevation = 3,
-    hover = -1,
-    borderless,
-    rounded,
-    glass,
-    start,
-    floating = true,
-    skeleton,
-    validation,
-
-    // Transition
-    in: inAction,
-    out: outAction,
-    transition: transitionAction,
-
-    // Actions
-    use,
-
-    // Events
-    oninput,
-    onfocus,
-    onblur,
-    onmark,
-    onclear,
-    onchange,
-    oninvalid,
-
-    // Other props
-    labelRef = $bindable(),
-    labelProps,
-    suffixProps,
-    suffixTag = suffixProps?.onclick ? 'button' : 'span',
-    prefixProps,
-    prefixTag = prefixProps?.onclick ? 'button' : 'span',
-    containerProps,
-    containerTag = 'div',
-    wrapperProps,
-    wrapperTag = 'div',
-    messageProps,
-    messageTag = 'div',
-    ...rest
-  }: NeoInputProps = $props();
-  /* eslint-enable prefer-const */
-
-  let initial = $state(value);
-  let validationMessage: string | undefined = $state(ref?.validationMessage);
-
-  const filter = $derived.by(() => computeGlassFilter(elevation, glass));
-  const boxShadow = $derived.by(() => computeShadowElevation(elevation, glass));
-  const hoverShadow = $derived.by(() => computeHoverShadowElevation(elevation, hover, glass) ?? boxShadow);
-
-  const hoverFlat = $derived(boxShadow.endsWith('flat') && !hoverShadow.endsWith('flat'));
-  const flatHover = $derived(hoverShadow.endsWith('flat') && !boxShadow.endsWith('flat'));
-
-  let hovered = $state(false);
-  const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
-    hovered = true;
-    containerProps?.onmouseenter?.(e);
-  };
-
-  const onMouseLeave: MouseEventHandler<HTMLDivElement> = e => {
-    hovered = false;
-    containerProps?.onmouseleave?.(e);
-  };
-
-  let focused = $state(false);
-  const onFocus: FocusEventHandler<HTMLInputElement> = e => {
-    focused = true;
-    touched = true;
-    onfocus?.(e);
-  };
-
-  const onBlur: FocusEventHandler<HTMLInputElement> = e => {
-    focused = false;
-    onblur?.(e);
-  };
-
-  const checkValidity = (update: { dirty?: boolean; valid?: boolean } = { dirty: true, valid: true }) => {
-    if (update.dirty) dirty = value !== initial;
-    if (!update.valid) return;
-    valid = ref?.checkValidity();
-    validationMessage = ref?.validationMessage;
-  };
-
-  const onInput: FormEventHandler<HTMLInputElement> = e => {
-    checkValidity({ dirty: dirtyOnInput, valid: validateOnInput });
-    oninput?.(e);
-  };
-
-  const onChange: FormEventHandler<HTMLInputElement> = e => {
-    checkValidity();
-    onchange?.(e);
-  };
-
-  const onInvalid: EventHandler<Event, HTMLInputElement> = e => {
-    valid = false;
-    validationMessage = ref?.validationMessage;
-    e.preventDefault();
-    oninvalid?.(e);
-  };
-
-  /**
-   * Change the state of the input
-   * @param state
-   */
-  export const mark: NeoInputMethods<HTMLInputElement>['mark'] = (state: NeoInputState) => {
-    if (state.touched !== undefined) touched = state.touched;
-    if (state.valid !== undefined) valid = state.valid;
-    if (state.dirty === undefined) return onmark?.({ touched, dirty, valid, value });
-    dirty = state.dirty;
-    if (!dirty) initial = value;
-    return onmark?.({ touched, dirty, valid, value });
-  };
-
-  const focus = () => {
-    if (focused) return;
-    ref?.focus();
-  };
-
-  /**
-   * Clear the input state
-   */
-  export const clear: NeoInputMethods<HTMLInputElement>['clear'] = (state?: NeoInputState) => {
-    value = '';
-    focus();
-    if (!state) {
-      setTimeout(() => checkValidity());
-      return onclear?.({ touched, dirty, valid, value });
-    }
-    initial = value;
-    setTimeout(() => mark({ touched: false, dirty: false, ...state }));
-    return onclear?.({ touched, dirty, valid, value });
-  };
-
-  const affix = $derived(clearable || loading !== undefined || validation);
-  const close = $derived(clearable && (focused || hovered) && value?.length && !disabled && !readonly);
-  const isFloating = $derived(floating && !focused && !value?.length && !disabled && !readonly);
-
-  let labelHeight = $state<string>();
-  let labelWidth = $state<string>();
-
-  let first = $state(true);
-  // Skip enter transition on first render for floating label
-  const waitForTick = async () => {
-    if (!first) return;
-    await wait();
-    first = false;
-  };
-
-  $effect(() => {
-    if (first) waitForTick();
-    if (!labelRef) return;
-    if (position === NeoInputLabelPosition.Inside && !floating) return;
-    labelHeight = `${labelRef?.clientHeight ?? 0}px`;
-    if (position === NeoInputLabelPosition.Left || position === NeoInputLabelPosition.Right) return;
-    labelWidth = `${labelRef?.clientWidth ?? 0}px`;
-  });
-
-  const errorMessage = $derived.by(() => {
-    if (valid || valid === undefined) return;
-    if (error) return error;
-    if (!validation) return;
-    return error ?? validationMessage;
-  });
-
-  const showMessage = $derived(message || errorMessage || error || validation);
-  const messageId = $derived(showMessage ? (messageProps?.id ?? `neo-input-message-${crypto.randomUUID()}`) : undefined);
-
-  const context = $derived<NeoInputContext<HTMLInputElement>>({
-    // Ref
-    ref,
-
-    // Methods
-    mark,
-    clear,
-
-    // State
-    value,
-    touched,
-    dirty,
-    valid,
-    readonly,
-    disabled,
-
-    // Styles
-    elevation,
-    hover,
-    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));
-
-  const useFn = $derived(toAction(use));
-  const useProps = $derived(toActionProps(use));
-</script>
-
-{#snippet before()}
-  {#if prefix}
-    <svelte:element this={prefixTag} class:neo-input-prefix={true} {disabled} {readonly} {...prefixProps}>
-      {@render prefix(context)}
-    </svelte:element>
-  {/if}
-{/snippet}
-
-{#snippet after()}
-  <!--  Affix (loafing, clear, placeholder) -->
-  {#if affix}
-    <span class="neo-input-affix" class:suffix role="none" onclick={focus}>
-      {#if loading}
-        <span out:fade={enterDefaultTransition}>
-          <IconCircleLoading width="1.1875rem" height="1.1875rem" />
-        </span>
-      {:else if close}
-        <button class="neo-input-clear" aria-label="clear" in:fade out:fade={enterDefaultTransition} onclick={() => clear()}>
-          <IconClear width="1.1875rem" height="1.1875rem" />
-        </button>
-      {:else}
-        <span class="neo-input-affix-validation" in:fade={leaveDefaultTransition}>
-          {#if validation && valid === false}
-            <IconAlert width="1.1875rem" height="1.1875rem" />
-          {:else if validation && valid === true && touched}
-            <IconConfirm width="1.1875rem" height="1.1875rem" />
-          {/if}
-        </span>
-      {/if}
-    </span>
-  {/if}
-  <!--  Suffix  -->
-  {#if suffix}
-    <svelte:element this={suffixTag} class:neo-input-suffix={true} {disabled} {readonly} {...suffixProps}>
-      {@render suffix(context)}
-    </svelte:element>
-  {/if}
-{/snippet}
-
-{#snippet input()}
-  <input
-    {id}
-    {disabled}
-    {readonly}
-    aria-invalid={valid === undefined ? undefined : !valid}
-    aria-describedby={messageId}
-    bind:this={ref}
-    bind:value
-    class:neo-input={true}
-    class:suffix={suffix || affix}
-    class:prefix
-    onblur={onBlur}
-    onfocus={onFocus}
-    oninput={onInput}
-    onchange={onChange}
-    oninvalid={onInvalid}
-    use:useFn={useProps}
-    {...rest}
-  />
-{/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:readonly
-    class:borderless
-    class:rounded
-    class:glass
-    class:hover
-    class:start
-    class:skeleton
-    class:validation
-    class:disabled
-    class:raised={elevation > 3 || elevation + hover > 3}
-    class:inset={elevation < -3 || elevation + hover < -3}
-    class:flat={!elevation}
-    class:hover-flat={hoverFlat}
-    class: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}
-    out:outFn={outProps}
-    in:inFn={inProps}
-    onmouseenter={onMouseEnter}
-    onmouseleave={onMouseLeave}
-    {...containerProps}
-  >
-    {@render before()}
-    {#if label}
-      <div class="neo-input-label-container" class:prefix class:floating={isFloating} role="none" onclick={focus}>
-        <label
-          bind:this={labelRef}
-          for={id}
-          class:neo-input-label={true}
-          class:first
-          class:prefix
-          class:rounded
-          class:required={rest.required}
-          {...labelProps}
-        >
-          {#if typeof label === 'string'}
-            {label}
-          {:else}
-            {@render label(context)}
-          {/if}
-        </label>
-        {@render input()}
-      </div>
-    {:else}
-      {@render input()}
-    {/if}
-    {@render after()}
-  </svelte:element>
-{/snippet}
-
-{#if showMessage}
-  <NeoValidation
-    tag={wrapperTag}
-    error={errorMessage}
-    {context}
-    {message}
-    {messageId}
-    {messageTag}
-    {messageProps}
-    in={inAction}
-    out={outAction}
-    transition={transitionAction}
-    {...wrapperProps}
-  >
-    {@render inputGroup()}
-  </NeoValidation>
-{:else}
-  {@render inputGroup()}
-{/if}
-
-<style>.neo-input-group,
-.neo-input,
-.neo-input-clear,
-.neo-input-affix,
-.neo-input-prefix,
-.neo-input-suffix {
-  display: flex;
-  box-sizing: border-box;
-  font: inherit;
-  text-decoration: none;
-  outline: none;
-  transition: 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 {
-  flex: 1 1 auto;
-  align-self: center;
-  min-width: fit-content;
-  max-width: 100%;
-  min-height: fit-content;
-  padding: 0.75rem;
-  color: inherit;
-  text-overflow: ellipsis;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--neo-input-border-radius, var(--neo-border-radius));
-  outline: none;
-}
-.neo-input-prefix, .neo-input-suffix, .neo-input-affix {
-  align-items: center;
-}
-.neo-input-prefix {
-  color: var(--neo-input-prefix-color, inherit);
-  background-color: var(--neo-input-prefix-bg-color, transparent);
-  border: none;
-  border-right: var(--neo-border-width, 1px) var(--neo-input-prefix-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.prefix {
-  margin-left: -0.9rem;
-}
-.neo-input.suffix {
-  margin-right: -0.9rem;
-}
-.neo-input-suffix {
-  color: var(--neo-input-suffix-color, inherit);
-  background-color: var(--neo-input-suffix-bg-color, transparent);
-  border: none;
-  border-left: var(--neo-border-width, 1px) var(--neo-input-suffix-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-affix {
-  display: inline-grid;
-  grid-template-areas: "affix";
-  min-width: 2.75rem;
-  min-height: calc(var(--neo-line-height) + 1rem);
-  padding: 0.75rem;
-  border: none;
-  border-left: var(--neo-border-width, 1px) var(--neo-input-suffix-border-color, transparent) solid;
-}
-.neo-input-affix > * {
-  grid-area: affix;
-}
-.neo-input-affix-validation {
-  width: 100%;
-  height: 100%;
-}
-.neo-input-affix.suffix {
-  min-width: 2rem;
-  margin-right: -0.25rem;
-  padding-right: 0;
-}
-.neo-input::placeholder {
-  color: var(--neo-input-placeholder-color, var(--neo-text-color-disabled));
-  transition: opacity 0.3s ease;
-}
-.neo-input:read-only {
-  cursor: initial;
-}
-.neo-input:disabled {
-  color: var(--neo-text-color-disabled);
-  cursor: not-allowed;
-}
-
-.neo-input-prefix:is(button, a),
-.neo-input-suffix:is(button, a), .neo-input-clear {
-  cursor: pointer;
-}
-.neo-input-prefix:focus-visible:is(button, a),
-.neo-input-suffix:focus-visible:is(button, a), .neo-input-clear:focus-visible {
-  color: var(--neo-input-focus-color, var(--neo-text-color-focused));
-}
-.neo-input-prefix:hover:is(button, a),
-.neo-input-suffix:hover:is(button, a), .neo-input-clear:hover {
-  color: var(--neo-input-hover-color, var(--neo-text-color-hover));
-}
-.neo-input-prefix:active:is(button, a),
-.neo-input-suffix:active:is(button, a), .neo-input-clear:active {
-  color: var(--neo-input-active-color, var(--neo-text-color-hover-active));
-  scale: 0.9;
-}
-.neo-input-prefix:disabled:is(button, a),
-.neo-input-suffix:disabled:is(button, a), .neo-input-clear:disabled {
-  color: var(--neo-text-color-disabled);
-  cursor: not-allowed;
-  scale: 1;
-}
-
-.neo-input-clear {
-  align-items: center;
-  justify-content: center;
-  color: var(--neo-input-clear-color, inherit);
-  background-color: var(--neo-background-color-darker);
-  border: none;
-  border-radius: 50%;
-  aspect-ratio: 1;
-}
-.neo-input-clear:focus-visible {
-  color: var(--neo-close-color-focused, rgba(255, 0, 0, 0.75));
-  background-color: var(--neo-close-bg-color-focused, rgba(255, 0, 0, 0.05));
-}
-.neo-input-clear:hover {
-  color: var(--neo-color-warning, rgba(255, 0, 0, 0.75));
-  background-color: var(--neo-close-bg-color-focused, rgba(255, 0, 0, 0.05));
-}
-.neo-input-clear:disabled {
-  color: var(--neo-text-color-disabled);
-  cursor: not-allowed;
-}
-
-.neo-input-prefix,
-.neo-input-suffix {
-  padding: 0.75rem;
-}
-.neo-input-label-container {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  width: 100%;
-}
-.neo-input-label-container .neo-input-label {
-  display: flex;
-  min-height: var(--neo-input-label-height);
-  padding: 0 0.75rem;
-  overflow: hidden;
-  color: var(--neo-input-label-color, inherit);
-  text-wrap: stable;
-  text-overflow: ellipsis;
-  cursor: inherit;
-  transition: 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-label-container .neo-input-label.first {
-  transition: none;
-}
-.neo-input-label-container .neo-input-label.required::after {
-  margin-left: 0.1rem;
-  color: var(--neo-input-required-color, var(--neo-color-error-75));
-  font-size: var(--neo-font-size);
-  content: "*";
-}
-.neo-input-label-container.floating .neo-input-label {
-  color: var(--neo-input-floating-label-color, var(--neo-text-color-disabled));
-  translate: 0 calc(50% + 0.7rem - var(--neo-input-label-height) / 2);
-}
-.neo-input-label-container.floating .neo-input-label.required::after {
-  color: var(--neo-input-required-color, var(--neo-color-error-50));
-}
-.neo-input-label-container.floating ::placeholder {
-  opacity: 0;
-}
-
-.neo-input-group {
-  position: relative;
-  margin: var(--neo-shadow-margin, 0.6rem);
-  color: var(--neo-input-text-color, inherit);
-  background-color: var(--neo-input-bg-color, inherit);
-  border: 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: text;
-}
-.neo-input-group.readonly {
-  cursor: initial;
-}
-.neo-input-group.borderless {
-  border-color: transparent !important;
-}
-.neo-input-group.raised {
-  margin: var(--neo-shadow-margin-lg, 1.125rem);
-}
-.neo-input-group.inset {
-  padding: 0.25rem;
-}
-.neo-input-group.hover.flat-hover:hover, .neo-input-group.hover.flat-hover:focus-within, .neo-input-group.flat:not(.borderless, .hover-flat:hover, .hover-flat:focus-within) {
-  border-color: var(--neo-input-border-color, var(--neo-border-color));
-}
-.neo-input-group:focus-within, .neo-input-group.hover:hover {
-  box-shadow: var(--neo-input-hover-shadow, var(--neo-box-shadow-flat));
-}
-.neo-input-group.disabled {
-  box-shadow: var(--neo-box-shadow-flat) !important;
-  opacity: var(--neo-input-opacity-disabled, var(--neo-opacity-disabled));
-}
-.neo-input-group.disabled:not(.borderless) {
-  border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled)) !important;
-}
-.neo-input-group.disabled .neo-input-label {
-  color: unset;
-}
-.neo-input-group.rounded {
-  border-radius: var(--neo-input-border-radius-lg, var(--neo-border-radius-lg));
-}
-.neo-input-group.rounded .neo-input {
-  padding: 0.75rem 1rem;
-  border-radius: var(--neo-input-border-radius-lg, var(--neo-border-radius-lg));
-}
-.neo-input-group.rounded .neo-input.prefix {
-  margin-left: -1.25rem;
-}
-.neo-input-group.rounded .neo-input-prefix {
-  padding: 0.75rem 0.75rem 0.75rem 1rem;
-}
-.neo-input-group.rounded .neo-input.suffix {
-  margin-right: -1.25rem;
-}
-.neo-input-group.rounded .neo-input-suffix {
-  padding: 0.75rem 1rem 0.75rem 0.75rem;
-}
-.neo-input-group.rounded .neo-input-affix:not(.suffix) {
-  margin-right: 0.25rem;
-}
-.neo-input-group.rounded .neo-input-label-container:not(.prefix) {
-  padding-left: 0.5rem;
-}
-.neo-input-group.rounded .neo-input-label-container .neo-input-label {
-  padding: 0 1rem;
-}
-.neo-input-group[data-position=top] {
-  --neo-input-margin-top: calc(var(--neo-shadow-margin, 0.6rem) + var(--neo-input-label-height, var(--neo-line-height)));
-  margin-top: var(--neo-input-margin-top);
-}
-.neo-input-group[data-position=top] .neo-input-label-container .neo-input-label {
-  position: absolute;
-  top: calc(0% - var(--neo-input-margin-top));
-}
-.neo-input-group[data-position=left] {
-  --neo-input-margin-left: calc(var(--neo-shadow-margin, 0.6rem) + var(--neo-input-label-width, auto));
-  margin-left: var(--neo-input-margin-left);
-}
-.neo-input-group[data-position=left] .neo-input-label-container .neo-input-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=right] {
-  --neo-input-margin-right: calc(var(--shadow-margin, 0.6rem) + var(--neo-input-label-width, auto));
-  margin-right: var(--neo-input-margin-right);
-}
-.neo-input-group[data-position=right] .neo-input-label-container .neo-input-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=inside] .neo-input-label-container .neo-input {
-  padding: 0 1rem 0.5rem;
-}
-.neo-input-group[data-position=inside] .neo-input-label-container .neo-input-label {
-  padding: 0.75rem 1rem 0.2rem;
-  line-height: var(--neo-line-height-xs, 1rem);
-}
-.neo-input-group[data-position=inside] .neo-input-label-container .neo-input-label.prefix {
-  padding-left: 0.15rem;
-}
-.neo-input-group[data-position=inside] .neo-input-label-container:not(.floating) .neo-input-label {
-  font-size: var(--neo-font-size-sm, 0.875rem);
-}
-.neo-input-group[data-position=top] .neo-input-label-container.floating .neo-input-label, .neo-input-group[data-position=left] .neo-input-label-container.floating .neo-input-label, .neo-input-group[data-position=right] .neo-input-label-container.floating .neo-input-label {
-  top: calc(50% - 0.65rem - var(--neo-input-label-height) / 2);
-}
-.neo-input-group[data-position=left] .neo-input-label-container.floating .neo-input-label {
-  left: 0.5rem;
-}
-.neo-input-group[data-position=right] .neo-input-label-container.floating .neo-input-label {
-  right: calc(100% - var(--neo-input-label-width) - 0.5rem);
-}
-.neo-input-group.glass {
-  --neo-skeleton-color: var(--neo-glass-skeleton-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-4) var(--neo-saturate-2));
-}
-.neo-input-group.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-input-group.validation[data-valid=false] .neo-input-affix-validation {
-  color: var(--neo-input-validation-color-error, var(--neo-color-error));
-}
-.neo-input-group.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-input-group.validation[data-valid=true] .neo-input-affix-validation {
-  color: var(--neo-input-validation-color-success, var(--neo-color-success));
-}
-@starting-style {
-  .neo-input-group.start {
-    box-shadow: var(--neo-box-shadow-flat);
-  }
-  .neo-input-group.start:not(.borderless) {
-    border-color: var(--neo-input-border-color, var(--neo-border-color));
-  }
-}
-.neo-input-group.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.skeleton::before, .neo-input-group.skeleton::after,
-.neo-input-group.skeleton :global(> *::before),
-.neo-input-group.skeleton :global(> *::after),
-.neo-input-group.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);
-  }
-}
-.neo-input-group.skeleton.glass {
-  --neo-skeleton-color: var(--neo-glass-skeleton-color);
-}</style>