<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the textarea, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the textarea element, used for form submission.
     */
    name?: string;
    /**
     * The current value of the textarea field.
     */
    value?: string | number;
    /**
     * Text displayed when the textarea is empty.
     */
    placeholder?: string;
    /**
     * If `true`, the textarea is marked as invalid.
     */
    isinvalid?: boolean;
    /**
     * If `true`, the textarea is disabled and non-interactive.
     */
    disabled?: boolean;
    /**
     * The number of visible text lines in the textarea.
     */
    rows?: number;
    /**
     * Minimum number of characters required for the textarea.
     */
    minlength?: number;
    /**
     * Maximum number of characters allowed in the textarea.
     */
    maxlength?: number;
    /**
     * If `true`, the textarea is read-only (cannot be edited).
     */
    readonly?: boolean;
  }

  let {
    id,
    name,
    value = $bindable(),
    placeholder,
    isinvalid,
    disabled,
    rows = 2,
    minlength,
    maxlength,
    readonly,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<textarea
  bind:value
  class={['mc-textarea', isinvalid && 'is-invalid', className]}
  aria-invalid={isinvalid}
  {name}
  {id}
  {placeholder}
  {rows}
  {disabled}
  {minlength}
  {maxlength}
  {readonly}
  {...attrs}
></textarea>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-textarea {
  font-family: inherit;
  transition: box-shadow 200ms ease;
  background-color: var(--forms-color-background-default, #ffffff);
  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
  border-radius: var(--forms-border-radius, 0.25rem);
  transition: all ease 200ms;
  color: var(--forms-color-text-default, #000000);
  display: block;
  width: 100%;
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-m, 1.5);
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
}
.mc-textarea::placeholder {
  color: var(--forms-color-placeholder, #666666);
}
.mc-textarea:hover {
  border-color: var(--forms-color-border-hover, #4d4d4d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
}
.mc-textarea:focus {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-textarea:disabled {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
}
.mc-textarea[readonly] {
  border-color: var(--forms-color-border-read-only, #cccccc);
  pointer-events: none;
}
.mc-textarea.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-textarea.is-invalid:hover {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}</style>
