@dvcol/neo-svelte 0.1.1

package/dist/inputs/NeoInput.svelte

@@ -0,0 +1,750 @@
+<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>