@adia-ai/web-components 0.0.1

package/components/input/input.a2ui.json

@@ -0,0 +1,284 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Input.json",
+  "title": "Input",
+  "description": "Text input field with contenteditable or native input. Supports prefix/suffix icons, label, and form participation.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "type": {
+      "description": "Input type hint. Password type applies disc masking via -webkit-text-security.",
+      "type": "string",
+      "enum": [
+        "text",
+        "email",
+        "password",
+        "number",
+        "tel",
+        "url",
+        "search",
+        "date",
+        "datetime-local",
+        "time",
+        "month",
+        "week",
+        "color"
+      ],
+      "default": "text"
+    },
+    "required": {
+      "description": "Marks the field as required for form validation. Sets aria-required.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Input"
+    },
+    "disabled": {
+      "description": "Disables interaction, removes contenteditable, and dims the control",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error message. Set automatically by constraint validation or manually via setInvalid().",
+      "type": "string",
+      "default": ""
+    },
+    "icon": {
+      "description": "Leading Phosphor icon name (shortcut for setting `prefix` to an icon tag).",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text rendered above the input field",
+      "type": "string",
+      "default": ""
+    },
+    "maxlength": {
+      "description": "Maximum character length for validation",
+      "type": "number",
+      "default": null
+    },
+    "minlength": {
+      "description": "Minimum character length for validation",
+      "type": "number",
+      "default": null
+    },
+    "multiline": {
+      "description": "Render a multiline textarea-like surface. Prefer TextArea; kept for back-compat.",
+      "type": "boolean",
+      "default": false
+    },
+    "name": {
+      "description": "Form control name for form data submission",
+      "type": "string",
+      "default": ""
+    },
+    "pattern": {
+      "description": "Regex pattern for validation. Tested as ^(?:pattern)$ against the value.",
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "description": "Placeholder text shown when the input is empty, via ::before content",
+      "type": "string",
+      "default": ""
+    },
+    "prefix": {
+      "description": "Prefix text or icon rendered before the text surface (e.g., unit label, search icon)",
+      "type": "string",
+      "default": ""
+    },
+    "raw": {
+      "description": "Strips visual chrome (border, background) from the input",
+      "type": "boolean",
+      "default": false
+    },
+    "readonly": {
+      "description": "Prevents editing while keeping the field focusable. Sets contenteditable=false.",
+      "type": "boolean",
+      "default": false
+    },
+    "rows": {
+      "description": "Visible row count when multiline is true. Ignored otherwise.",
+      "type": "number",
+      "default": 3
+    },
+    "suffix": {
+      "description": "Suffix text rendered after the text surface (e.g., unit like 'kg')",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current input value, synced with contenteditable text surface",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired on blur after the value has changed (bubbles)"
+      },
+      "input": {
+        "description": "Fired on each keystroke as the user types (bubbles)"
+      },
+      "submit": {
+        "description": "Fired when the form is submitted."
+      }
+    },
+    "examples": [
+      {
+        "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\",\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n    \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n    \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "chat-interface"
+      },
+      {
+        "description": "Command palette card with search input and a list of command options.",
+        "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      \"search\"\n    ]\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\",\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n    \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n      \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n  {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\",\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]",
+        "name": "command-palette"
+      }
+    ],
+    "keywords": [
+      "input",
+      "field",
+      "chip",
+      "tag"
+    ],
+    "name": "AdiaInput",
+    "related": [
+      "avatar",
+      "button",
+      "table",
+      "pagination",
+      "check-box"
+    ],
+    "slots": {
+      "leading": {
+        "description": "Leading icon slot, sized to --content-height. Collapses text inline padding when present."
+      },
+      "text": {
+        "description": "Contenteditable text surface for user input"
+      },
+      "trailing": {
+        "description": "Trailing icon slot, sized to --content-height. Collapses text inline padding when present."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Keyboard focus ring.",
+        "name": "focused",
+        "selector": ":focus-visible"
+      }
+    ],
+    "synonyms": {
+      "chip": [
+        "badge",
+        "tag",
+        "input"
+      ],
+      "field": [
+        "form",
+        "create",
+        "input"
+      ],
+      "input": [
+        "form",
+        "create",
+        "tag",
+        "input"
+      ],
+      "tag": [
+        "tag",
+        "input",
+        "badge"
+      ]
+    },
+    "tag": "input-ui",
+    "tokens": {
+      "--density": {
+        "description": "Inherited multiplier for padding"
+      },
+      "--input-background": {
+        "description": "Override default background color"
+      },
+      "--input-border-color": {
+        "description": "Override default border color"
+      },
+      "--input-border-width": {
+        "description": "Override border width"
+      },
+      "--input-content-height": {
+        "description": "Override icon slot and text surface height"
+      },
+      "--input-disabled-opacity": {
+        "description": "Override disabled state opacity"
+      },
+      "--input-error-border-color": {
+        "description": "Override error state border color"
+      },
+      "--input-focus-border-color": {
+        "description": "Override focus state border color"
+      },
+      "--input-focus-ring": {
+        "description": "Override focus ring color"
+      },
+      "--input-font-family": {
+        "description": "Override font family"
+      },
+      "--input-font-size": {
+        "description": "Override font size"
+      },
+      "--input-font-weight": {
+        "description": "Override font weight"
+      },
+      "--input-foreground": {
+        "description": "Override default text color"
+      },
+      "--input-hover-border-color": {
+        "description": "Override hover state border color"
+      },
+      "--input-line-height": {
+        "description": "Override line height"
+      },
+      "--input-padding": {
+        "description": "Override base padding (density-scaled)"
+      },
+      "--input-placeholder-color": {
+        "description": "Override placeholder text color"
+      },
+      "--input-radius": {
+        "description": "Override border radius"
+      },
+      "--input-transition": {
+        "description": "Override transition timing"
+      }
+    },
+    "traits": [
+      "focusable"
+    ],
+    "version": 1
+  }
+}

package/components/input/input.css

@@ -0,0 +1,162 @@
+@scope (input-ui) {
+  :where(:scope) {
+    /* ── Tokens (wired to --a-ui-*) ── */
+    --input-bg:              var(--a-ui-bg);
+    --input-fg:              var(--a-ui-text);
+    --input-border:          var(--a-ui-border);
+    --input-border-hover:    var(--a-ui-border-hover);
+    --input-border-focus:    var(--a-ui-border-active);
+    --input-radius:          var(--a-radius);
+    --input-height:          var(--a-size);
+    --input-px:              var(--a-ui-px);
+    --input-font-size:       var(--a-ui-size);
+    --input-label-size:      var(--a-label-size);
+    --input-label-fg:        var(--a-label-color);
+    --input-placeholder-fg:  var(--a-ui-text-placeholder);
+    --input-affix-fg:        var(--a-ui-text-placeholder);
+    --input-gap:             var(--a-ui-py);
+    --input-field-gap:       var(--a-space-1);
+
+    /* ── Transitions ── */
+    --input-duration:        var(--a-duration-fast);
+    --input-easing:          var(--a-easing);
+
+    /* ── State: hover/focus ── */
+    --input-fg-hover:        var(--a-fg);
+    --input-affix-fg-hover:  var(--a-fg-subtle);
+    --input-fg-focus:        var(--a-fg);
+    --input-label-fg-focus:  var(--a-fg-subtle);
+
+    /* ── State: disabled ── */
+    --input-bg-disabled:     var(--a-ui-bg-disabled);
+    --input-fg-disabled:     var(--a-ui-text-disabled);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-gap);
+  }
+
+  :scope[data-direction="row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+
+  /* Label */
+  [slot="label"] {
+    font-size: var(--input-label-size);
+    color: var(--input-label-fg);
+  }
+  [slot="label"][label]::after { content: attr(label); }
+
+  /* Field container */
+  [slot="field"] {
+    display: flex;
+    align-items: center;
+    gap: var(--input-field-gap);
+    min-height: var(--input-height);
+    padding: 0 var(--input-px);
+    border: 1px solid var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-fg);
+    font: inherit;
+    font-size: var(--input-font-size);
+    line-height: 1;
+    cursor: text;
+    transition: border-color var(--input-duration) var(--input-easing);
+  }
+  :scope:not([disabled]) [slot="field"]:hover {
+    border-color: var(--input-border-hover);
+    color: var(--input-fg-hover);
+  }
+  :scope:not([disabled]) [slot="field"]:hover [slot="prefix"],
+  :scope:not([disabled]) [slot="field"]:hover [slot="suffix"] {
+    color: var(--input-affix-fg-hover);
+  }
+  :scope:not([disabled]):focus-within [slot="field"] {
+    border-color: var(--input-border-focus);
+    color: var(--input-fg-focus);
+  }
+  :scope:not([disabled]):focus-within [slot="label"] {
+    color: var(--input-label-fg-focus);
+  }
+
+  /* Text (contenteditable span) */
+  [slot="text"] {
+    flex: 1;
+    min-width: 0;
+    outline: none;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /* Text (native input — password, number) */
+  input[slot="text"] {
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    padding: 0;
+    height: auto;
+  }
+
+  input[slot="text"]::placeholder {
+    color: var(--input-placeholder-fg);
+  }
+
+  /* Placeholder (contenteditable only) */
+  span[slot="text"][data-empty]::before {
+    content: attr(aria-placeholder);
+    color: var(--input-placeholder-fg);
+    pointer-events: none;
+  }
+
+  /* Prefix + Suffix */
+  [slot="prefix"],
+  [slot="suffix"] {
+    flex-shrink: 0;
+    color: var(--input-affix-fg);
+    font-size: var(--input-font-size);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  [slot="suffix"] {
+    margin-inline-start: auto;
+  }
+
+  /* Disabled */
+  :scope[disabled] [slot="field"] {
+    background: var(--input-bg-disabled);
+    color: var(--input-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Raw mode */
+  :scope[raw] [slot="field"] {
+    border: none;
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    min-height: auto;
+  }
+
+  /* Size handled by universal [size] attribute system. */
+
+  /* Ghost variant */
+  :scope[variant="ghost"] {
+    --input-bg: transparent;
+    --input-border: transparent;
+    --input-border-hover: transparent;
+    --input-border-focus: transparent;
+  }
+  :scope[variant="ghost"]:hover {
+    --input-bg: var(--a-bg-muted);
+  }
+}

package/components/input/input.js

@@ -0,0 +1,148 @@
+/**
+ * <input-ui> — Text input. The host IS the interactive surface.
+ * Uses contenteditable for text entry, ElementInternals for form participation.
+ *
+ * Supports prefix/suffix slots:
+ *   <input-ui label="Weight" suffix="kg"></input-ui>
+ *   <input-ui placeholder="Search" prefix="search"></input-ui>
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import { isIconName } from '@core/icons.js';
+
+const renderAffix = (v) => isIconName(v)
+  ? `<icon-ui name="${v}"></icon-ui>`
+  : v;
+
+class AdiaInput extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    placeholder: { type: String,  default: '', reflect: true },
+    type:        { type: String,  default: 'text', reflect: true },
+    label:       { type: String,  default: '', reflect: true },
+    prefix:      { type: String,  default: '', reflect: true },
+    suffix:      { type: String,  default: '', reflect: true },
+    raw:         { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #textEl = null;
+
+  get #isNativeInput() {
+    return this.type === 'password' || this.type === 'number';
+  }
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'textbox');
+
+    if (!this.querySelector('[slot="text"]')) {
+      const useNative = this.#isNativeInput;
+      this.innerHTML = `
+        ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
+        <div slot="field">
+          ${this.prefix ? `<span slot="prefix">${renderAffix(this.prefix)}</span>` : ''}
+          ${useNative
+            ? `<input slot="text" type="${this.type}" tabindex="0"
+                      placeholder="${this.placeholder}" value="${this.value || ''}"
+                      autocomplete="${this.type === 'password' ? 'current-password' : 'off'}"
+                      ${this.disabled ? 'disabled' : ''} ${this.readonly ? 'readonly' : ''} />`
+            : `<span slot="text" contenteditable="plaintext-only" tabindex="0"
+                    ${this.value ? '' : 'data-empty=""'}
+                    aria-placeholder="${this.placeholder}"></span>`}
+          ${this.suffix ? `<span slot="suffix">${renderAffix(this.suffix)}</span>` : ''}
+        </div>
+      `;
+    }
+
+    this.#textEl = this.querySelector('[slot="text"]');
+    if (!this.#isNativeInput && 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;
+
+    if (this.#isNativeInput) {
+      this.#textEl.placeholder = this.placeholder;
+      this.#textEl.disabled = this.disabled;
+      this.#textEl.readOnly = this.readonly;
+    } else {
+      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.#isNativeInput
+      ? (this.#textEl.value || '')
+      : (this.#textEl.textContent || '');
+    this.value = text;
+    if (!this.#isNativeInput) this.#textEl.toggleAttribute('data-empty', !text);
+    this.syncValue(text);
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  #onKeydown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+      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) {
+      if (this.#isNativeInput) {
+        this.#textEl.value = '';
+      } else {
+        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('input-ui', AdiaInput);
+
+export { AdiaInput };