Textarea Autosize

---
// src/components/ui/forms/textarea-autosize/TextareaAutosize.astro — headless primitive (see ../../README.md).
// A <textarea> that grows with its content. The platform does this natively now — `field-sizing:
// content`, which structure.css sets — so the first choice here is one CSS declaration and no script
// at all: no measuring, no reflow, no layout thrash, and it works before any JavaScript loads.
//
// The bundled script is a FALLBACK and checks for that support before doing anything, so on a browser
// with `field-sizing` it adds exactly one `CSS.supports` call and then gets out of the way. Where it
// does run, it is the classic reset-then-measure (`height: auto` before reading `scrollHeight`),
// because a textarea's `scrollHeight` never shrinks below its current height.
//
// Both paths write an inline style, never a class (contract rule 4). Mirrors Textarea's `data-size` /
// `data-state` field surface; `rows` is still the minimum height, and a `max-height` in your theme is
// still respected by both paths.
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"textarea"> & {
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const { size = "md", state = "default", class: className, ...rest } = Astro.props;
---

<textarea
  class={className}
  data-slot="textarea-autosize"
  data-size={size}
  data-state={state}
  {...rest}></textarea>

<script>
  import { onReadyOnce } from "../../_once";

  const NATIVE = CSS.supports("field-sizing", "content");

  function wire(element: HTMLElement) {
    if (NATIVE || !(element instanceof HTMLTextAreaElement)) return;

    const fit = () => {
      // The scrollbar would flash on every keystroke between the reset and the new height.
      element.style.overflowY = "hidden";
      element.style.height = "auto";
      element.style.height = `${element.scrollHeight}px`;
    };

    element.addEventListener("input", fit);
    fit();
  }

  onReadyOnce('[data-slot="textarea-autosize"]', wire);
</script>

import TextareaAutosize from "./TextareaAutosize.astro";

export { TextareaAutosize };
export default TextareaAutosize;