@adia-ai/web-components 0.0.1

package/components/textarea/textarea.a2ui.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Textarea.json",
+  "title": "Textarea",
+  "description": "Multiline text input. The host IS the interactive surface.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Textarea"
+    },
+    "hint": {
+      "description": "Help text displayed below the textarea. Hidden when error is set.",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text displayed above the textarea.",
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "description": "Placeholder text shown when textarea is empty.",
+      "type": "string",
+      "default": ""
+    },
+    "resize": {
+      "description": "Resize behavior of the textarea.",
+      "type": "string",
+      "enum": [
+        "vertical",
+        "horizontal",
+        "both",
+        "none"
+      ],
+      "default": "vertical"
+    },
+    "rows": {
+      "description": "Number of visible text rows (sets min-height).",
+      "type": "number",
+      "default": 3
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "change": {
+        "description": "Fired when the textarea loses focus after a value change."
+      },
+      "input": {
+        "description": "Fired on each keystroke as the value changes."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Textarea usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Textarea\",\n    \"label\": \"Example Textarea\",\n    \"placeholder\": \"Enter textarea...\"\n  }\n]",
+        "name": "basic-textarea"
+      }
+    ],
+    "keywords": [
+      "textarea"
+    ],
+    "name": "AdiaTextarea",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "textarea-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/textarea/textarea.css

@@ -0,0 +1,93 @@
+@scope (textarea-ui) {
+  :where(:scope) {
+    /* ── Tokens (wired to --a-ui-*) ── */
+    --textarea-bg:              var(--a-ui-bg);
+    --textarea-fg:              var(--a-ui-text);
+    --textarea-border:          var(--a-ui-border);
+    --textarea-border-hover:    var(--a-ui-border-hover);
+    --textarea-border-focus:    var(--a-ui-border-active);
+    --textarea-radius:          var(--a-radius);
+    --textarea-min-height:      calc(var(--a-size) * 2);
+    --textarea-px:              var(--a-ui-px);
+    --textarea-py:              var(--a-ui-px);
+    --textarea-font-size:       var(--a-ui-size);
+    --textarea-label-size:      var(--a-label-size);
+    --textarea-label-fg:        var(--a-label-color);
+    --textarea-placeholder-fg:  var(--a-ui-text-placeholder);
+    --textarea-gap:             var(--a-space-1);
+
+    /* ── Transition ── */
+    --textarea-duration:        var(--a-duration-fast);
+    --textarea-easing:          var(--a-easing);
+
+    /* ── State ── */
+    --textarea-fg-hover:        var(--a-fg);
+    --textarea-label-fg-focus:  var(--a-fg-subtle);
+    --textarea-bg-disabled:     var(--a-ui-bg-disabled);
+    --textarea-fg-disabled:     var(--a-ui-text-disabled);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--textarea-gap);
+  }
+
+  :scope[data-direction="row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+
+  [slot="label"] {
+    font-size: var(--textarea-label-size);
+    color: var(--textarea-label-fg);
+  }
+  [slot="label"][label]::after { content: attr(label); }
+
+  [slot="text"] {
+    min-height: var(--textarea-min-height);
+    padding: var(--textarea-py) var(--textarea-px);
+    border: 1px solid var(--textarea-border);
+    border-radius: var(--textarea-radius);
+    background: var(--textarea-bg);
+    color: var(--textarea-fg);
+    font: inherit;
+    font-size: var(--textarea-font-size);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-y: auto;
+    cursor: text;
+    outline: none;
+    transition: border-color var(--textarea-duration) var(--textarea-easing);
+  }
+  :scope:not([disabled]) [slot="text"]:hover {
+    border-color: var(--textarea-border-hover);
+    color: var(--textarea-fg-hover);
+  }
+  :scope:not([disabled]) [slot="text"]:focus {
+    border-color: var(--textarea-border-focus);
+    color: var(--textarea-fg-hover);
+  }
+  :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
+  :scope:not([disabled]):focus-within [slot="label"] {
+    color: var(--textarea-label-fg-focus);
+  }
+
+  /* Placeholder */
+  [slot="text"][data-empty]::before {
+    content: attr(aria-placeholder);
+    color: var(--textarea-placeholder-fg);
+    pointer-events: none;
+  }
+
+  /* Disabled */
+  :scope[disabled] [slot="text"] {
+    background: var(--textarea-bg-disabled);
+    color: var(--textarea-fg-disabled);
+    cursor: not-allowed;
+  }
+}

package/components/textarea/textarea.js

@@ -0,0 +1,114 @@
+/**
+ * <textarea-ui> — Multiline text input. The host IS the interactive surface.
+ * Uses contenteditable for text entry, ElementInternals for form participation.
+ * No native <textarea> inside.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaTextarea extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    placeholder: { type: String,  default: '', reflect: true },
+    label:       { type: String,  default: '', reflect: true },
+    rows:        { type: Number,  default: 3, reflect: true },
+    resize:      { type: String,  default: 'vertical', reflect: true },
+  };
+
+  static template = () => null;
+
+  #textEl = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'textbox');
+    this.setAttribute('aria-multiline', 'true');
+
+    if (!this.querySelector('[slot="text"]')) {
+      this.innerHTML = `
+        ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
+        <div slot="text" contenteditable="plaintext-only" tabindex="0"
+             ${this.value ? '' : 'data-empty=""'}
+             aria-placeholder="${this.placeholder}"></div>
+      `;
+    }
+
+    this.#textEl = this.querySelector('[slot="text"]');
+    if (this.value) this.#textEl.textContent = this.value;
+
+    if (this.#textEl) {
+      this.#textEl.addEventListener('input', this.#onInput);
+      this.#textEl.addEventListener('keydown', this.#onKeydown);
+      this.#textEl.addEventListener('blur', this.#onBlur);
+      this.#textEl.addEventListener('paste', this.#onPaste);
+    }
+  }
+
+  render() {
+    if (!this.#textEl) return;
+
+    this.#textEl.setAttribute('aria-placeholder', this.placeholder);
+
+    if (this.disabled || this.readonly) {
+      this.#textEl.contentEditable = 'false';
+    } else {
+      this.#textEl.contentEditable = 'plaintext-only';
+    }
+
+    const label = this.querySelector('[slot="label"]');
+    if (label && this.label) label.setAttribute('label', this.label);
+
+    this.setAttribute('aria-label', this.label || this.placeholder || '');
+  }
+
+  #onInput = () => {
+    const text = this.#textEl.textContent || '';
+    this.value = text;
+    this.#textEl.toggleAttribute('data-empty', !text);
+    this.syncValue(text);
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  #onKeydown = (e) => {
+    // Enter without shift submits; shift+enter inserts newline
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.dispatchEvent(new Event('submit', { bubbles: true }));
+    }
+  };
+
+  #onBlur = () => {
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  #onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData?.getData('text/plain') || '';
+    document.execCommand('insertText', false, text);
+  };
+
+  focus() { this.#textEl?.focus(); }
+
+  clear() {
+    this.value = '';
+    if (this.#textEl) {
+      this.#textEl.textContent = '';
+      this.#textEl.setAttribute('data-empty', '');
+    }
+    this.syncValue('');
+  }
+
+  disconnected() {
+    super.disconnected();
+    if (this.#textEl) {
+      this.#textEl.removeEventListener('input', this.#onInput);
+      this.#textEl.removeEventListener('keydown', this.#onKeydown);
+      this.#textEl.removeEventListener('blur', this.#onBlur);
+      this.#textEl.removeEventListener('paste', this.#onPaste);
+    }
+    this.#textEl = null;
+  }
+}
+customElements.define('textarea-ui', AdiaTextarea);
+
+export { AdiaTextarea };

package/components/textarea/textarea.yaml

@@ -0,0 +1,79 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaTextarea
+tag: textarea-ui
+component: Textarea
+category: layout
+version: 1
+description: Multiline text input. The host IS the interactive surface.
+props:
+  hint:
+    description: Help text displayed below the textarea. Hidden when error is set.
+    type: string
+    default: ""
+  label:
+    description: Label text displayed above the textarea.
+    type: string
+    default: ""
+  placeholder:
+    description: Placeholder text shown when textarea is empty.
+    type: string
+    default: ""
+  resize:
+    description: Resize behavior of the textarea.
+    type: string
+    default: vertical
+    enum:
+      - vertical
+      - horizontal
+      - both
+      - none
+  rows:
+    description: Number of visible text rows (sets min-height).
+    type: number
+    default: 3
+events:
+  change:
+    description: Fired when the textarea loses focus after a value change.
+  input:
+    description: Fired on each keystroke as the value changes.
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-textarea
+    description: Basic Textarea usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Textarea",
+          "label": "Example Textarea",
+          "placeholder": "Enter textarea..."
+        }
+      ]
+keywords:
+  - textarea
+synonyms: {}
+related: []

package/components/timeline/timeline.a2ui.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Timeline.json",
+  "title": "Timeline",
+  "description": "Timeline and step wizard. Two modes: timeline (per-item state) and steps (parent-driven).",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Timeline"
+    },
+    "mode": {
+      "description": "Display mode",
+      "type": "string",
+      "enum": [
+        "timeline",
+        "steps"
+      ],
+      "default": "timeline"
+    },
+    "orientation": {
+      "description": "Layout direction",
+      "type": "string",
+      "enum": [
+        "vertical",
+        "horizontal"
+      ],
+      "default": "vertical"
+    },
+    "step": {
+      "description": "Current step index (steps mode)",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Order tracking card with a timeline showing order status milestones from placed to delivered.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"span\",\n    \"textContent\": \"Order #12345\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"textContent\": \"Estimated delivery: April 20, 2026\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"info\",\n      \"tl\"\n    ]\n  },\n  {\n    \"id\": \"info\",\n    \"component\": \"Row\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"status\",\n      \"carrier\"\n    ]\n  },\n  {\n    \"id\": \"status\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"children\": [\n      \"sl\",\n      \"sv\"\n    ]\n  },\n  {\n    \"id\": \"sl\",\n    \"component\": \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Status\"\n  },\n  {\n    \"id\": \"sv\",\n    \"component\": \"Text\",\n    \"weight\": \"semibold\",\n    \"textContent\": \"In Transit\"\n  },\n  {\n    \"id\": \"carrier\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"children\": [\n      \"cl\",\n      \"cv\"\n    ]\n  },\n  {\n    \"id\": \"cl\",\n    \"component\": \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Carrier\"\n  },\n  {\n    \"id\": \"cv\",\n    \"component\": \"Text\",\n    \"weight\": \"semibold\",\n    \"textContent\": \"FedEx Express\"\n  },\n  {\n    \"id\": \"tl\",\n    \"component\": \"Timeline\",\n    \"children\": [\n      \"t1\",\n      \"t2\",\n      \"t3\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"TimelineItem\",\n    \"text\": \"Order Placed\",\n    \"description\": \"April 15, 2026 at 2:30 PM\",\n    \"color\": \"success\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"TimelineItem\",\n    \"text\": \"Processing\",\n    \"description\": \"April 16, 2026 at 9:00 AM\",\n    \"color\": \"success\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"TimelineItem\",\n    \"text\": \"Shipped\",\n    \"description\": \"April 17, 2026 at 11:45 AM\",\n    \"color\": \"primary\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"TimelineItem\",\n    \"text\": \"Delivered\",\n    \"description\": \"Expected April 20, 2026\",\n    \"color\": \"muted\"\n  }\n]",
+        "name": "order-tracking"
+      }
+    ],
+    "keywords": [
+      "timeline"
+    ],
+    "name": "AdiaTimeline",
+    "related": [
+      "timeline-item"
+    ],
+    "slots": {
+      "default": {
+        "description": "Accepts <timeline-item-ui> children."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "timeline-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}