prepare basecoat 1.0 migration

docs/src/components/textarea.md

@@ -0,0 +1,101 @@
+---
+templateEngineOverride: njk
+layout: layouts/page.njk
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Field
+        id: example-field
+      - label: Disabled
+        id: example-disabled
+      - label: Invalid
+        id: example-invalid
+      - label: Button
+        id: example-button
+      - label: Form
+        id: example-form
+      - label: RTL
+        id: example-rtl
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<textarea class="textarea" placeholder="Type your message here"></textarea>{% endset %}
+{{ code_preview("textarea", code, class="w-full max-w-xs") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Add the <code>textarea</code> class to a <code>&lt;textarea&gt;</code> element. Textareas inside a <code>form</code> or <code>field</code> container also receive the same styling automatically.</p>
+  <p>Use native HTML attributes for behavior: <code>disabled</code> for disabled textareas and <code>aria-invalid="true"</code> for invalid state styling.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-field"><a href="#example-field">Field</a></h3>
+
+<section class="prose">
+  <p>Use <code>field</code> with a label and description to create an accessible textarea.</p>
+</section>
+
+{% set code_field %}<div role="group" class="field w-full max-w-xs">
+  <label for="textarea-field">Message</label>
+  <textarea id="textarea-field" placeholder="Type your message here"></textarea>
+  <p>Write a short message.</p>
+</div>{% endset %}
+{{ code_preview("textarea-field", code_field, class="w-full max-w-xs") }}
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code_disabled %}<textarea class="textarea" placeholder="Type your message here" disabled></textarea>{% endset %}
+{{ code_preview("textarea-disabled", code_disabled, class="w-full max-w-xs") }}
+
+<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
+
+{% set code_invalid %}<div role="group" class="field w-full max-w-xs">
+  <label for="textarea-invalid">Message</label>
+  <textarea class="textarea" id="textarea-invalid" placeholder="Type your message here" aria-invalid="true"></textarea>
+  <p>Message is required.</p>
+</div>{% endset %}
+{{ code_preview("textarea-invalid", code_invalid, class="w-full max-w-xs") }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+{% set code_button %}<div class="grid w-full max-w-xs gap-3">
+  <textarea class="textarea" placeholder="Type your message here"></textarea>
+  <button type="submit" class="btn">Submit</button>
+</div>{% endset %}
+{{ code_preview("textarea-button", code_button, class="w-full max-w-xs") }}
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code_form %}<form class="w-full max-w-sm space-y-6">
+  <div role="group" class="field">
+    <label for="textarea-form">Bio</label>
+    <textarea id="textarea-form" placeholder="Tell us a bit about yourself"></textarea>
+    <p>You can @mention other users and organizations.</p>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("textarea-form", code_form, class="w-full max-w-sm") }}
+
+<h3 id="example-rtl"><a href="#example-rtl">RTL</a></h3>
+
+<section class="prose">
+  <p>Textareas support right-to-left layouts through native browser direction handling. Add <code>dir="rtl"</code> to the textarea, field, or an ancestor.</p>
+</section>
+
+{% set code_rtl %}<div role="group" class="field w-full max-w-xs" dir="rtl">
+  <label for="textarea-rtl">التعليقات</label>
+  <textarea id="textarea-rtl" placeholder="تعليقاتك تساعدنا على التحسين..." rows="4"></textarea>
+  <p>شاركنا أفكارك حول الخدمة.</p>
+</div>{% endset %}
+{{ code_preview("textarea-rtl", code_rtl, class="w-full max-w-xs") }}