@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/NeoTextarea.svelte

@@ -1,59 +1,77 @@
 <script lang="ts">
   import { wait } from '@dvcol/common-utils/common/promise';
-  import { fade } from 'svelte/transition';
+
+  import { tick } from 'svelte';
 
   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 { SvelteEvent } from '../utils/html-element.utils.js';
+
+  import NeoAffix from './common/NeoAffix.svelte';
+  import NeoInputValidation from './common/NeoInputValidation.svelte';
+  import NeoLabel from './common/NeoLabel.svelte';
   import {
     type NeoInputContext,
     NeoInputLabelPosition,
     type NeoInputMethods,
     type NeoInputState,
+    type NeoInputValue,
+    type NeoTextareaHTMLElement,
     type NeoTextareaProps,
-  } from './neo-input.model.js';
+  } from './common/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';
+  import {
+    computeGlassFilter,
+    computeHoverShadowElevation,
+    computeShadowElevation,
+    getDefaultElevation,
+    getDefaultHoverElevation,
+    isShadowFlat,
+  } from '../utils/shadow.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
     // Snippets
     label,
-    suffix,
+    after,
     message,
     error,
+    children,
 
     // States
     id = label ? `neo-textarea-${crypto.randomUUID()}` : undefined,
     ref = $bindable(),
-    value = $bindable(''),
-    valid = $bindable(undefined),
+
+    value = $bindable(),
+    valid = $bindable(),
     dirty = $bindable(false),
     touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
     readonly,
     disabled,
     loading,
     clearable,
+    nullable = true,
+
     dirtyOnInput,
+    dirtyOnBlur,
     validateOnInput,
+    validateOnBlur,
     position = NeoInputLabelPosition.Inside,
     autoResize = true,
 
     // Styles
-    elevation = 3,
-    hover = -1,
     borderless,
+    pressed,
     rounded,
     glass,
     start,
     floating = true,
     skeleton,
     validation,
+    elevation = getDefaultElevation(pressed),
+    hover = getDefaultHoverElevation(pressed),
 
     // Transition
     in: inAction,
@@ -75,8 +93,9 @@
     // Other props
     labelRef = $bindable(),
     labelProps,
-    suffixProps,
-    suffixTag = suffixProps?.onclick ? 'button' : 'span',
+    afterRef = $bindable(),
+    afterProps,
+    afterTag = afterProps?.onclick ? 'button' : 'span',
     containerProps,
     containerTag = 'div',
     wrapperProps,
@@ -90,14 +109,28 @@
   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 filter = $derived(computeGlassFilter(elevation, glass));
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass, pressed }));
+  const hoverShadow = $derived(computeHoverShadowElevation(elevation, hover, { glass, pressed }) ?? boxShadow);
 
-  const hoverFlat = $derived(boxShadow.endsWith('flat') && !hoverShadow.endsWith('flat'));
-  const flatHover = $derived(hoverShadow.endsWith('flat') && !boxShadow.endsWith('flat'));
+  const hoverFlat = $derived(isShadowFlat(boxShadow) && !isShadowFlat(hoverShadow));
+  const flatHover = $derived(isShadowFlat(hoverShadow) && !isShadowFlat(boxShadow));
+
+  const affix = $derived(clearable || loading !== undefined || validation);
+  const hasValue = $derived(value !== undefined && (typeof value === 'string' ? !!value.length : value !== null));
+  const close = $derived(clearable && (focused || hovered) && hasValue && !disabled && !readonly);
+  const isFloating = $derived(floating && !focused && !hasValue && !disabled && !readonly);
+
+  const validate: NeoInputMethods<HTMLTextAreaElement>['validate'] = (
+    update: { dirty?: boolean; valid?: boolean } = { dirty: true, valid: true },
+  ) => {
+    if (update.dirty) dirty = value !== initial;
+    if (!update.valid) return { touched, dirty, valid, value, initial };
+    valid = ref?.checkValidity();
+    validationMessage = ref?.validationMessage;
+    return { touched, dirty, valid, value };
+  };
 
-  let hovered = $state(false);
   const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
     hovered = true;
     containerProps?.onmouseenter?.(e);
@@ -108,7 +141,6 @@
     containerProps?.onmouseleave?.(e);
   };
 
-  let focused = $state(false);
   const onFocus: FocusEventHandler<HTMLTextAreaElement> = e => {
     focused = true;
     touched = true;
@@ -117,23 +149,27 @@
 
   const onBlur: FocusEventHandler<HTMLTextAreaElement> = e => {
     focused = false;
+    validate({ dirty: dirtyOnBlur, valid: validateOnBlur });
     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<HTMLTextAreaElement> = e => {
-    checkValidity({ dirty: dirtyOnInput, valid: validateOnInput });
+    touched = true;
+    validate({ dirty: dirtyOnInput, valid: validateOnInput });
     oninput?.(e);
   };
 
+  const fallback = () => {
+    if (nullable) return value;
+    if (hasValue) return value;
+    value = rest?.defaultValue ?? '';
+    return value;
+  };
+
   const onChange: FormEventHandler<HTMLTextAreaElement> = e => {
-    checkValidity();
+    touched = true;
+    validate();
+    fallback();
     onchange?.(e);
   };
 
@@ -148,7 +184,7 @@
    * Change the state of the input
    * @param state
    */
-  export const mark: NeoInputMethods<HTMLTextAreaElement>['mark'] = (state: NeoInputState) => {
+  export const mark: NeoInputMethods<HTMLTextAreaElement>['mark'] = (state: NeoInputState<HTMLTextAreaElement>) => {
     if (state.touched !== undefined) touched = state.touched;
     if (state.valid !== undefined) valid = state.valid;
     if (state.dirty === undefined) return onmark?.({ touched, dirty, valid });
@@ -165,21 +201,35 @@
   /**
    * Clear the input state
    */
-  export const clear: NeoInputMethods<HTMLTextAreaElement>['clear'] = (state?: NeoInputState) => {
-    value = '';
+  export const clear: NeoInputMethods<HTMLTextAreaElement>['clear'] = async (
+    state?: NeoInputState<HTMLTextAreaElement>,
+    event?: InputEvent | SvelteEvent<InputEvent>,
+  ) => {
+    value = nullable ? '' : (rest?.defaultValue ?? '');
+    await tick();
     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 });
+    if (state) mark({ touched: false, dirty: false, ...state });
+    else validate();
+    onclear?.({ touched, dirty, valid, value, initial }, event);
+    if (event) return ref?.dispatchEvent(event);
+    const _event: InputEventInit = { bubbles: true, cancelable: false, data: value as InputEventInit['data'], inputType: 'clear' };
+    oninput?.(new InputEvent('input', _event) as SvelteEvent<InputEvent, HTMLTextAreaElement>);
   };
 
-  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);
+  /**
+   * Change the value of the input
+   */
+  export const change: NeoInputMethods<HTMLTextAreaElement>['change'] = (_value: NeoInputValue<HTMLTextAreaElement>, event?: InputEvent) => {
+    if (event) ref?.dispatchEvent(event);
+    value = _value;
+    focus();
+    return validate();
+  };
+
+  $effect(() => {
+    if (!ref) return;
+    Object.assign(ref, { mark, clear, change, validate });
+  });
 
   let labelHeight = $state<string>();
   let labelWidth = $state<string>();
@@ -197,13 +247,13 @@
     if (!labelRef) return;
     if (position === NeoInputLabelPosition.Inside && !floating) return;
     labelHeight = `${labelRef?.clientHeight ?? 0}px`;
-    if (position === NeoInputLabelPosition.Left || position === NeoInputLabelPosition.Right) return;
+    if (position !== NeoInputLabelPosition.Left && position !== NeoInputLabelPosition.Right) return;
     labelWidth = `${labelRef?.clientWidth ?? 0}px`;
   });
 
   const rows = $derived.by(() => {
-    if (typeof autoResize === 'boolean' || !autoResize) return suffix ? 3 : undefined;
-    if (suffix) return Math.max(3, autoResize.min ?? 0);
+    if (typeof autoResize === 'boolean' || !autoResize) return after ? 3 : undefined;
+    if (after) return Math.max(3, autoResize.min ?? 0);
     return autoResize.min;
   });
 
@@ -238,23 +288,18 @@
     resize();
   });
 
-  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-textarea-message-${crypto.randomUUID()}`) : undefined);
+  let visible = $state(false);
+  let messageId = $state(`neo-textarea-message-${crypto.randomUUID()}`);
 
-  const context = $derived<NeoInputContext<HTMLTextAreaElement>>({
+  const context = $derived<NeoInputContext<NeoTextareaHTMLElement>>({
     // Ref
     ref,
 
     // Methods
     mark,
     clear,
+    change,
+    validate,
 
     // State
     value,
@@ -267,6 +312,7 @@
     // Styles
     elevation,
     hover,
+    pressed,
     borderless,
     rounded,
     glass,
@@ -283,34 +329,24 @@
   const useProps = $derived(toActionProps(use));
 </script>
 
-{#snippet after()}
+{#snippet suffix()}
   <!--  Affix (loafing, clear, placeholder) -->
   {#if affix}
-    <span class="neo-textarea-affix" role="none" onclick={focus}>
-      {#if loading}
-        <span out:fade={enterDefaultTransition}>
-          <IconCircleLoading width="1.1875rem" height="1.1875rem" />
-        </span>
-      {:else if close}
-        <button class="neo-textarea-clear" aria-label="clear" in:fade out:fade={enterDefaultTransition} onclick={() => clear()}>
-          <IconClear width="1.1875rem" height="1.1875rem" />
-        </button>
-      {:else}
-        <span class="neo-textarea-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>
+    <NeoAffix
+      {loading}
+      {close}
+      {disabled}
+      {skeleton}
+      valid={validation ? valid : undefined}
+      closeProps={{ onclick: () => clear() }}
+      onclick={() => focus()}
+    />
   {/if}
 
   <!--  Suffix  -->
-  {#if suffix}
-    <svelte:element this={suffixTag} class:neo-textarea-suffix={true} {disabled} {readonly} {...suffixProps}>
-      {@render suffix(context)}
+  {#if after}
+    <svelte:element this={afterTag} bind:this={afterRef} class:neo-textarea-after={true} {disabled} {readonly} {...afterProps}>
+      {@render after(context)}
     </svelte:element>
   {/if}
 {/snippet}
@@ -321,11 +357,11 @@
     {disabled}
     {readonly}
     aria-invalid={valid === undefined ? undefined : !valid}
-    aria-describedby={messageId}
+    aria-describedby={visible ? messageId : undefined}
     bind:this={ref}
     bind:value
     class:neo-textarea={true}
-    class:affix={affix || suffix}
+    class:neo-affix={affix || after}
     {rows}
     onblur={onBlur}
     onfocus={onFocus}
@@ -338,6 +374,14 @@
   </textarea>
 {/snippet}
 
+{#snippet labelGroup()}
+  {#if typeof label === 'string'}
+    {label}
+  {:else if label}
+    {@render label(context)}
+  {/if}
+{/snippet}
+
 {#snippet textareaGroup()}
   <svelte:element
     this={containerTag}
@@ -347,20 +391,23 @@
     data-dirty={dirty}
     data-valid={valid}
     class:neo-textarea-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}
+    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-textarea-glass-blur={filter}
     style:--neo-textarea-box-shadow={boxShadow}
     style:--neo-textarea-hover-shadow={hoverShadow}
@@ -373,49 +420,60 @@
     {...containerProps}
   >
     {#if label}
-      <div class="neo-textarea-label-container" class:floating={isFloating} role="none" onclick={focus}>
-        <label bind:this={labelRef} for={id} class:neo-textarea-label={true} class:first class:rounded class:required={rest.required} {...labelProps}>
-          {#if typeof label === 'string'}
-            {label}
-          {:else}
-            {@render label(context)}
-          {/if}
-        </label>
+      <NeoLabel
+        for={id}
+        bind:ref={labelRef}
+        containerProps={{
+          class: [
+            affix || after ? 'neo-affix' : undefined,
+            first ? 'neo-first' : undefined,
+            rounded ? 'neo-rounded' : undefined,
+            isFloating ? 'neo-floating' : undefined,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          onclick: focus,
+        }}
+        label={labelGroup}
+        required={rest.required}
+        {disabled}
+        {...labelProps}
+      >
         {@render textarea()}
-      </div>
+      </NeoLabel>
     {:else}
       {@render textarea()}
     {/if}
-    {@render after()}
+    {@render suffix()}
+    {@render children?.(context)}
   </svelte:element>
 {/snippet}
 
-{#if showMessage}
-  <NeoValidation
-    tag={wrapperTag}
-    error={errorMessage}
-    {context}
-    {message}
-    {messageId}
-    {messageTag}
-    {messageProps}
-    in={inAction}
-    out={outAction}
-    transition={transitionAction}
-    {...wrapperProps}
-  >
-    {@render textareaGroup()}
-  </NeoValidation>
-{:else}
+<NeoInputValidation
+  tag={wrapperTag}
+  bind:visible
+  bind:messageId
+  {valid}
+  {validation}
+  {validationMessage}
+  {error}
+  {rounded}
+  {context}
+  {message}
+  {messageTag}
+  {messageProps}
+  in={inAction}
+  out={outAction}
+  transition={transitionAction}
+  {...wrapperProps}
+>
   {@render textareaGroup()}
-{/if}
+</NeoInputValidation>
 
 <style>.neo-textarea-group,
 .neo-textarea,
-.neo-textarea-clear,
-.neo-textarea-affix,
-.neo-textarea-suffix {
-  display: flex;
+.neo-textarea-after {
+  display: inline-flex;
   box-sizing: border-box;
   font: inherit;
   text-decoration: none;
@@ -423,32 +481,13 @@
   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-textarea-clear, .neo-textarea-suffix:is(button, a) {
-  cursor: pointer;
-}
-.neo-textarea-clear:focus-visible, .neo-textarea-suffix:focus-visible:is(button, a) {
-  color: var(--neo-textarea-focus-color, var(--neo-text-color-focused));
-}
-.neo-textarea-clear:hover, .neo-textarea-suffix:hover:is(button, a) {
-  color: var(--neo-textarea-hover-color, var(--neo-text-color-hover));
-}
-.neo-textarea-clear:active, .neo-textarea-suffix:active:is(button, a) {
-  color: var(--neo-textarea-active-color, var(--neo-text-color-hover-active));
-  scale: 0.9;
-}
-.neo-textarea-clear:disabled, .neo-textarea-suffix:disabled:is(button, a) {
-  color: var(--neo-text-color-disabled);
-  cursor: not-allowed;
-  scale: 1;
-}
-
 .neo-textarea {
   flex: 1 1 auto;
   align-self: center;
-  min-width: 100%;
+  min-width: fit-content;
   max-width: 100%;
   min-height: fit-content;
-  padding: 0.75rem;
+  padding: 0.75rem 0.95rem;
   color: inherit;
   text-overflow: ellipsis;
   background-color: transparent;
@@ -456,40 +495,48 @@
   border-radius: var(--neo-textarea-border-radius, var(--neo-border-radius));
   outline: none;
 }
-.neo-textarea.affix {
-  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
-}
-.neo-textarea-affix, .neo-textarea-suffix {
-  align-items: center;
-  margin: 0.25rem;
-  padding: 0.5rem;
+.neo-textarea.neo-affix {
+  padding: 0.75rem 2.25rem 0.75rem 0.95rem;
 }
-.neo-textarea-suffix {
+.neo-textarea-after {
   position: absolute;
   right: 0.125rem;
   bottom: 0.125rem;
-  color: var(--neo-textarea-suffix-color, inherit);
-  background-color: var(--neo-textarea-suffix-bg-color, transparent);
+  align-items: center;
+  margin: 0.25rem;
+  padding: 0.5rem;
+  color: var(--neo-textarea-after-color, inherit);
+  background-color: var(--neo-textarea-after-bg-color, transparent);
   border: none;
-  border-radius: var(--neo-textarea-suffix-border-radius, var(--neo-border-radius));
+  border-radius: var(--neo-textarea-after-border-radius, var(--neo-border-radius));
 }
-.neo-textarea-affix {
-  position: absolute;
-  top: 0.125rem;
-  right: 0.125rem;
-  display: inline-grid;
-  grid-template-areas: "affix";
-  min-width: 2rem;
-  min-height: 2rem;
-  border: none;
-  border-radius: var(--neo-textarea-affix-border-radius, var(--neo-border-radius));
+.neo-textarea-after:is(button, a) {
+  cursor: pointer;
 }
-.neo-textarea-affix > * {
-  grid-area: affix;
+.neo-textarea-after:is(button, a):focus-visible {
+  color: var(--neo-textarea-focus-color, var(--neo-text-color-focused));
 }
-.neo-textarea-affix-validation {
-  width: 100%;
-  height: 100%;
+.neo-textarea-after:is(button, a):hover {
+  color: var(--neo-textarea-hover-color, var(--neo-text-color-hover));
+}
+.neo-textarea-after:is(button, a):active {
+  color: var(--neo-textarea-active-color, var(--neo-text-color-hover-active));
+  scale: 0.9;
+}
+.neo-textarea-after:is(button, a):disabled {
+  color: var(--neo-text-color-disabled);
+  cursor: not-allowed;
+  scale: 1;
+}
+.neo-textarea-after:has(:global(.neo-button:only-child)) {
+  padding: 0;
+}
+.neo-textarea-after :global(.neo-button) {
+  --neo-btn-padding-empty: 0.4375rem;
+  --neo-btn-margin: auto;
+  --neo-btn-box-shadow-active-flat-toggle: var(--neo-box-shadow-inset-2);
+  --neo-btn-bg-color: transparent;
+  --neo-btn-backdrop-filter: none;
 }
 .neo-textarea::placeholder {
   color: var(--neo-textarea-placeholder-color, var(--neo-text-color-disabled));
@@ -504,68 +551,10 @@
   resize: none;
 }
 
-.neo-textarea-clear {
-  align-items: center;
-  justify-content: center;
-  color: var(--neo-textarea-clear-color, inherit);
-  background-color: var(--neo-background-color-darker);
-  border: none;
-  border-radius: 50%;
-  aspect-ratio: 1;
-}
-.neo-textarea-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-textarea-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-textarea-clear:disabled {
-  color: var(--neo-text-color-disabled);
-  cursor: not-allowed;
-}
-
-.neo-textarea-label-container {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  width: 100%;
-}
-.neo-textarea-label-container .neo-textarea-label {
-  display: flex;
-  min-height: var(--neo-textarea-label-height);
-  padding: 0 0.75rem;
-  overflow: hidden;
-  color: var(--neo-textarea-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-textarea-label-container .neo-textarea-label.first {
-  transition: none;
-}
-.neo-textarea-label-container .neo-textarea-label.required::after {
-  margin-left: 0.1rem;
-  color: var(--neo-textarea-required-color, var(--neo-color-error-75));
-  font-size: var(--neo-font-size);
-  content: "*";
-}
-.neo-textarea-label-container.floating .neo-textarea-label {
-  color: var(--neo-textarea-floating-label-color, var(--neo-text-color-disabled));
-  translate: 0 calc(50% + 0.7rem - var(--neo-textarea-label-height) / 2);
-}
-.neo-textarea-label-container.floating .neo-textarea-label.required::after {
-  color: var(--neo-textarea-required-color, var(--neo-color-error-50));
-}
-.neo-textarea-label-container.floating ::placeholder {
-  opacity: 0;
-}
-
 .neo-textarea-group {
   position: relative;
-  margin: var(--neo-shadow-margin, 0.6rem);
+  min-width: min-content;
+  margin: var(--neo-shadow-margin, 0.625rem);
   color: var(--neo-textarea-text-color, inherit);
   background-color: var(--neo-textarea-bg-color, inherit);
   border: var(--neo-border-width, 1px) var(--neo-textarea-border-color, transparent) solid;
@@ -573,128 +562,176 @@
   box-shadow: var(--neo-textarea-box-shadow, var(--neo-box-shadow-flat));
   cursor: text;
 }
-.neo-textarea-group.readonly {
+.neo-textarea-group.neo-readonly {
   cursor: initial;
 }
-.neo-textarea-group.borderless {
+.neo-textarea-group.neo-borderless {
   border-color: transparent !important;
 }
-.neo-textarea-group.raised {
+.neo-textarea-group.neo-inset.neo-pressed, .neo-textarea-group.neo-raised {
   margin: var(--neo-shadow-margin-lg, 1.125rem);
 }
-.neo-textarea-group.inset {
+.neo-textarea-group.neo-inset {
   padding: 0.25rem;
 }
-.neo-textarea-group.hover.flat-hover:hover, .neo-textarea-group.hover.flat-hover:focus-within, .neo-textarea-group.flat:not(.borderless, .hover-flat:hover, .hover-flat:focus-within) {
+.neo-textarea-group.neo-hover.neo-flat-hover.neo-hovered, .neo-textarea-group.neo-hover.neo-flat-hover:hover, .neo-textarea-group.neo-hover.neo-flat-hover:focus-within, .neo-textarea-group.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat.neo-hovered .neo-hover-flat:focus-within) {
   border-color: var(--neo-textarea-border-color, var(--neo-border-color));
 }
-.neo-textarea-group:focus-within, .neo-textarea-group.hover:hover {
+.neo-textarea-group:focus-within, .neo-textarea-group.neo-hover:hover, .neo-textarea-group.neo-hover.neo-hovered {
   box-shadow: var(--neo-textarea-hover-shadow, var(--neo-box-shadow-flat));
 }
-.neo-textarea-group.disabled {
+.neo-textarea-group.neo-disabled {
   box-shadow: var(--neo-box-shadow-flat) !important;
   opacity: var(--neo-textarea-opacity-disabled, var(--neo-opacity-disabled));
 }
-.neo-textarea-group.disabled:not(.borderless) {
-  border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled)) !important;
+.neo-textarea-group.neo-disabled:not(.neo-borderless) {
+  border-color: var(--neo-input-border-color-disabled, var(--neo-border-color-disabled)) !important;
+}
+.neo-textarea-group :global(.neo-affix-container) {
+  position: absolute;
+  top: 0.125rem;
+  right: 0.125rem;
+  margin: 0.25rem;
+  padding: 0.5rem;
+  border: none;
+  border-radius: var(--neo-textarea-affix-border-radius, var(--neo-border-radius));
+}
+.neo-textarea-group :global(.neo-label-container) {
+  width: 100%;
+}
+.neo-textarea-group :global(.neo-label-container) :global(.neo-label) {
+  --neo-label-padding: 0 1rem;
+  --neo-label-margin: 0;
+  --neo-label-color: var(--neo-textarea-label-color, inherit);
+  min-height: var(--neo-textarea-label-height);
+  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-textarea-group :global(.neo-label-container.neo-first .neo-label) {
+  transition: none;
+}
+.neo-textarea-group :global(.neo-label-container.neo-affix .neo-label) {
+  padding-right: 3.25rem;
 }
-.neo-textarea-group.disabled .neo-textarea-label {
-  color: unset;
+.neo-textarea-group :global(.neo-label-container.neo-floating) :global(.neo-label) {
+  --neo-label-color: var(--neo-textarea-floating-label-color, var(--neo-text-color-disabled));
+  --neo-label-required-color: var(--neo-input-required-color, var(--neo-color-error-50));
+  translate: 0 calc(50% + 0.75rem - var(--neo-textarea-label-height) / 2);
 }
-.neo-textarea-group.rounded {
+.neo-textarea-group :global(.neo-label-container.neo-floating) :global(.neo-input) {
+  color: var(--neo-input-floating-text-color, transparent);
+}
+.neo-textarea-group :global(.neo-label-container.neo-floating) :global(::placeholder) {
+  opacity: 0;
+}
+.neo-textarea-group.neo-rounded {
   border-radius: var(--neo-textarea-border-radius, var(--neo-border-radius-lg));
 }
-.neo-textarea-group.rounded .neo-textarea {
+.neo-textarea-group.neo-rounded :global(.neo-affix-container) {
+  right: 0.365rem;
+}
+.neo-textarea-group.neo-rounded .neo-textarea {
   --neo-scrollbar-button-height: 0.75rem;
   padding: 0.75rem 1rem;
   border-radius: var(--neo-border-radius-lg, 2rem);
 }
-.neo-textarea-group.rounded .neo-textarea.affix {
-  padding: 0.75rem 2.75rem 0.75rem 1rem;
+.neo-textarea-group.neo-rounded .neo-textarea.neo-affix {
+  padding: 0.75rem 2.75rem 0.75rem 1.2rem;
 }
-.neo-textarea-group.rounded .neo-textarea-suffix, .neo-textarea-group.rounded .neo-textarea-affix {
+.neo-textarea-group.neo-rounded .neo-textarea-after {
   right: 0.365rem;
 }
-.neo-textarea-group.rounded .neo-textarea-label-container {
-  padding-left: 0.5rem;
+.neo-textarea-group.neo-rounded :global(.neo-label-container .neo-label) {
+  padding: 0 1.25rem;
 }
-.neo-textarea-group.rounded .neo-textarea-label-container .neo-textarea-label {
-  padding: 0 1rem;
-}
-.neo-textarea-group[data-position=top] {
-  --neo-textarea-margin-top: calc(var(--neo-shadow-margin, 0.6rem) + var(--neo-textarea-label-height, var(--neo-line-height)));
-  margin-top: var(--neo-textarea-margin-top);
-}
-.neo-textarea-group[data-position=top] .neo-textarea-label-container .neo-textarea-label {
-  position: absolute;
-  top: calc(0% - var(--neo-textarea-margin-top));
+.neo-textarea-group.neo-rounded :global(.neo-label-container.neo-affix .neo-label) {
+  padding-right: 3.5rem;
 }
 .neo-textarea-group[data-position=left] {
-  --neo-textarea-margin-left: calc(var(--neo-shadow-margin, 0.6rem) + var(--neo-textarea-label-width, auto));
+  --neo-textarea-margin-left: calc(var(--neo-shadow-margin, 0.625rem) + var(--neo-textarea-label-width, auto));
   margin-left: var(--neo-textarea-margin-left);
 }
-.neo-textarea-group[data-position=left] .neo-textarea-label-container .neo-textarea-label {
+.neo-textarea-group[data-position=left] :global(.neo-label-container .neo-label) {
   position: absolute;
   top: 0.75rem;
   left: calc(0% - var(--neo-textarea-margin-left));
 }
+.neo-textarea-group[data-position=left] :global(.neo-label-container.neo-affix:not(.neo-floating) .neo-label) {
+  left: calc(2.5rem - var(--neo-textarea-margin-left));
+}
+.neo-textarea-group[data-position=left] :global(.neo-label-container.neo-affix:not(.neo-floating).neo-rounded .neo-label) {
+  left: calc(2.25rem - var(--neo-textarea-margin-left));
+}
+.neo-textarea-group[data-position=left] :global(.neo-label-container.neo-floating .neo-label) {
+  left: 0;
+}
 .neo-textarea-group[data-position=right] {
-  --neo-textarea-margin-right: calc(var(--shadow-margin, 0.6rem) + var(--neo-textarea-label-width, auto));
+  --neo-textarea-margin-right: calc(var(--neo-shadow-margin, 0.625rem) + var(--neo-textarea-label-width, auto));
   margin-right: var(--neo-textarea-margin-right);
 }
-.neo-textarea-group[data-position=right] .neo-textarea-label-container .neo-textarea-label {
+.neo-textarea-group[data-position=right] :global(.neo-label-container .neo-label) {
   position: absolute;
   top: 0.75rem;
+  right: calc(0.25rem - var(--neo-textarea-margin-right));
+}
+.neo-textarea-group[data-position=right] :global(.neo-label-container:not(.neo-floating).neo-rounded .neo-label) {
   right: calc(0% - var(--neo-textarea-margin-right));
 }
-.neo-textarea-group[data-position=inside] .neo-textarea-label-container .neo-textarea {
-  padding: 0 1rem 0.5rem;
+.neo-textarea-group[data-position=right] :global(.neo-label-container.neo-floating .neo-label) {
+  right: calc(100% - var(--neo-textarea-label-width));
 }
-.neo-textarea-group[data-position=inside] .neo-textarea-label-container .neo-textarea-label {
-  padding: 0.75rem 1rem 0.2rem;
+.neo-textarea-group[data-position=right] :global(.neo-label-container.neo-floating.neo-rounded .neo-label) {
+  right: calc(100% - 0.5rem - var(--neo-textarea-label-width));
+}
+.neo-textarea-group[data-position=inside] :global(.neo-label-container .neo-textarea) {
+  padding-top: 0.25rem;
+}
+.neo-textarea-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-textarea-group[data-position=inside] .neo-textarea-label-container:not(.floating) .neo-textarea-label {
+.neo-textarea-group[data-position=inside] :global(.neo-label-container.neo-rounded .neo-label) {
+  padding: 0.75rem 1rem 0.1875rem 1.25rem;
+}
+.neo-textarea-group[data-position=inside] :global(.neo-label-container:not(.neo-floating) .neo-label) {
   font-size: var(--neo-font-size-sm, 0.875rem);
 }
-.neo-textarea-group[data-position=top] .neo-textarea-label-container.floating .neo-textarea-label, .neo-textarea-group[data-position=left] .neo-textarea-label-container.floating .neo-textarea-label, .neo-textarea-group[data-position=right] .neo-textarea-label-container.floating .neo-textarea-label {
-  top: 0;
+.neo-textarea-group[data-position=top][data-position=top] {
+  --neo-textarea-margin-top: calc(var(--neo-shadow-margin, 0.625rem) + var(--neo-textarea-label-height, var(--neo-line-height)));
+  margin-top: var(--neo-textarea-margin-top);
 }
-.neo-textarea-group[data-position=left] .neo-textarea-label-container.floating .neo-textarea-label {
-  left: 0.5rem;
+.neo-textarea-group[data-position=top][data-position=top] :global(.neo-label-container .neo-label) {
+  position: absolute;
+  top: calc(0% - var(--neo-textarea-margin-top));
 }
-.neo-textarea-group[data-position=right] .neo-textarea-label-container.floating .neo-textarea-label {
-  right: calc(100% - var(--neo-textarea-label-width) - 0.5rem);
+.neo-textarea-group[data-position=top] :global(.neo-label-container.neo-floating .neo-label), .neo-textarea-group[data-position=left] :global(.neo-label-container.neo-floating .neo-label), .neo-textarea-group[data-position=right] :global(.neo-label-container.neo-floating .neo-label) {
+  top: 0;
 }
-.neo-textarea-group.glass {
+.neo-textarea-group.neo-glass {
   --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  --neo-border-color: var(--neo-glass-border-color);
   background-color: var(--neo-textarea-bg-color, var(--neo-glass-background-color));
   border-color: var(--neo-textarea-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-textarea-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+  backdrop-filter: var(--neo-textarea-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
 }
-.neo-textarea-group.validation[data-valid=false] {
+.neo-textarea-group.neo-validation[data-valid=false] {
   --neo-textarea-label-color: var(--neo-textarea-label-color-error, var(--neo-color-error));
   --neo-textarea-floating-label-color: var(--neo-textarea-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-textarea-group.validation[data-valid=false] .neo-textarea-affix-validation {
-  color: var(--neo-textarea-validation-color-error, var(--neo-color-error));
-}
-.neo-textarea-group.validation[data-valid=true] {
+.neo-textarea-group.neo-validation[data-valid=true] {
   --neo-textarea-label-color: var(--neo-textarea-label-color-success, var(--neo-color-success));
   --neo-textarea-floating-label-color: var(--neo-textarea-floating-label-color-success, var(--neo-color-success-50));
-}
-.neo-textarea-group.validation[data-valid=true] .neo-textarea-affix-validation {
-  color: var(--neo-textarea-validation-color-success, var(--neo-color-success));
+  --neo-label-disabled-color: var(--neo-input-floating-label-color-success, var(--neo-color-success-50));
 }
 @starting-style {
-  .neo-textarea-group.start {
+  .neo-textarea-group.neo-start {
     box-shadow: var(--neo-box-shadow-flat);
   }
-  .neo-textarea-group.start:not(.borderless) {
+  .neo-textarea-group.neo-start:not(.neo-borderless) {
     border-color: var(--neo-textarea-border-color, var(--neo-border-color));
   }
 }
-.neo-textarea-group.skeleton {
+.neo-textarea-group.neo-skeleton {
   box-shadow: var(--neo-box-shadow-flat);
   pointer-events: none;
   --neo-skeleton-color-start: var(--neo-skeleton-color);
@@ -706,10 +743,10 @@
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }
-.neo-textarea-group.skeleton::before, .neo-textarea-group.skeleton::after,
-.neo-textarea-group.skeleton :global(> *::before),
-.neo-textarea-group.skeleton :global(> *::after),
-.neo-textarea-group.skeleton :global(> *) {
+.neo-textarea-group.neo-skeleton::before, .neo-textarea-group.neo-skeleton::after,
+.neo-textarea-group.neo-skeleton :global(> *::before),
+.neo-textarea-group.neo-skeleton :global(> *::after),
+.neo-textarea-group.neo-skeleton :global(> *) {
   visibility: hidden;
   pointer-events: none;
 }
@@ -735,14 +772,11 @@
     border-color: var(--neo-skeleton-color-start);
   }
 }
-.neo-textarea-group.skeleton.glass {
-  --neo-skeleton-color: var(--neo-glass-skeleton-color);
-}
 .neo-textarea-group .neo-textarea {
   scrollbar-gutter: stable;
 }
 .neo-textarea-group .neo-textarea::-webkit-scrollbar {
-  width: var(--neo-scrollbar-width, 0.45rem);
+  width: var(--neo-scrollbar-width, 0.375rem);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -763,6 +797,6 @@
   outline: none;
 }
 .neo-textarea-group .neo-textarea::-webkit-resizer {
-  background: url("~/assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
+  background: url("../assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
   background-clip: border-box;
 }</style>