@adia-ai/web-components 0.4.6 → 0.4.8

package/components/input/input.yaml

@@ -1,40 +1,43 @@
-# 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: UIInput
 tag: input-ui
 component: Input
 category: input
 version: 1
-description: Text input field with contenteditable surface. Supports prefix/suffix icons,
-  label, form participation, and a `type="number"` mode that renders [+]/[-] stepper buttons,
-  numeric input filtering, and ARIA spinbutton semantics — no native `<input type="number">`
-  under the hood. Password type uses a native `<input>` (only path that still wraps native,
-  for `-webkit-text-security` disc masking).
+description: Text input field with contenteditable surface. Supports prefix/suffix icons, label, form participation, and a
+  `type="number"` mode that renders [+]/[-] stepper buttons, numeric input filtering, and ARIA spinbutton semantics — no native
+  `<input type="number">` under the hood. Password type uses a native `<input>` (only path that still wraps native, for `-webkit-text-security`
+  disc masking).
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui  # [+]/[-] stepper buttons (created when type="number")
+  - icon-ui    # caret-up/caret-down icons inside the stepper buttons
+
 props:
   name:
     description: Form control name for form data submission
     type: string
-    default: ""
+    default: ''
   type:
-    description: Input type. `password` wraps a native `<input>` for disc masking; `number` renders
-      a contenteditable + stepper buttons (no native input). All other types use plain contenteditable.
+    description: Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper
+      buttons (no native input). All other types use plain contenteditable.
     type: string
     default: text
     enum:
-      - text
-      - email
-      - password
-      - number
-      - tel
-      - url
-      - search
-      - date
-      - datetime-local
-      - time
-      - month
-      - week
-      - color
+    - text
+    - email
+    - password
+    - number
+    - tel
+    - url
+    - search
+    - date
+    - datetime-local
+    - time
+    - month
+    - week
+    - color
   required:
     description: Marks the field as required for form validation. Sets aria-required.
     type: boolean
@@ -46,16 +49,14 @@ props:
     default: false
     reflect: true
   error:
-    description: Validation error message. Set automatically by constraint validation or manually via
-      setInvalid().
+    description: Validation error message. Set automatically by constraint validation or manually via setInvalid().
     type: string
-    default: ""
+    default: ''
   label:
-    description: Inline label rendered as a leading caption inside the input chrome,
-      between any prefix and the value. Wires aria-labelledby on the editable
-      surface. For stacked label / hint / error compositions, wrap with field-ui.
+    description: Inline label rendered as a leading caption inside the input chrome, between any prefix and the value. Wires
+      aria-labelledby on the editable surface. For stacked label / hint / error compositions, wrap with field-ui.
     type: string
-    default: ""
+    default: ''
   maxlength:
     description: Maximum character length for validation
     type: number
@@ -65,61 +66,65 @@ props:
     type: number
     default: null
   inputmode:
-    description: >-
-      Mobile keyboard hint per HTML inputmode spec. Routed via setAttribute
-      to the host element. Values: text, decimal, numeric, tel, search, email, url.
+    description: 'Mobile keyboard hint per HTML inputmode spec. Routed via setAttribute to the host element. Values: text,
+      decimal, numeric, tel, search, email, url.'
     type: string
     default: null
-    enum: [text, decimal, numeric, tel, search, email, url, none]
+    enum:
+    - text
+    - decimal
+    - numeric
+    - tel
+    - search
+    - email
+    - url
+    - none
   autocomplete:
-    description: >-
-      Browser autofill behavior per HTML autocomplete spec. Routed via
-      setAttribute to the host element. Common values: off, on, cc-number,
-      cc-exp, cc-csc, cc-name, email, username, current-password, new-password,
-      one-time-code, given-name, family-name, street-address, postal-code.
+    description: 'Browser autofill behavior per HTML autocomplete spec. Routed via setAttribute to the host element. Common
+      values: off, on, cc-number, cc-exp, cc-csc, cc-name, email, username, current-password, new-password, one-time-code,
+      given-name, family-name, street-address, postal-code.'
     type: string
-    default: ""
+    default: ''
   min:
-    description: Minimum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemin
-      + the [-] button's disabled state.
+    description: Minimum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemin + the [-] button's disabled
+      state.
     type: number
     default: null
   max:
-    description: Maximum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemax
-      + the [+] button's disabled state.
+    description: Maximum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemax + the [+] button's disabled
+      state.
     type: number
     default: null
   step:
-    description: Stepper increment for `type="number"`. Drives ↑/↓ ArrowUp/Down + [+]/[-] button
-      magnitude. Also determines decimal-count for value formatting unless `precision` is set.
+    description: Stepper increment for `type="number"`. Drives ↑/↓ ArrowUp/Down + [+]/[-] button magnitude. Also determines
+      decimal-count for value formatting unless `precision` is set.
     type: number
     default: 1
   precision:
-    description: Decimal places to display + clamp to, when `type="number"`. Overrides the implicit
-      decimal-count from `step` — e.g. `step=1 precision=2` formats "10.00".
+    description: Decimal places to display + clamp to, when `type="number"`. Overrides the implicit decimal-count from `step`
+      — e.g. `step=1 precision=2` formats "10.00".
     type: number
     default: null
   locale:
-    description: BCP-47 locale tag for `type="number"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set,
-      the input accepts both `.` AND the locale's decimal separator (e.g. `,` in de-DE), uses
-      `Intl.NumberFormat` for display, and groups thousands on blur (e.g. en-US `1,234,567.89`,
-      de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing.
-      `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))`
-      round-trips. Default empty = en-US-equivalent path (no behavior change).
+    description: BCP-47 locale tag for `type="number"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set, the input accepts both `.`
+      AND the locale's decimal separator (e.g. `,` in de-DE), uses `Intl.NumberFormat` for display, and groups thousands on
+      blur (e.g. en-US `1,234,567.89`, de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing.
+      `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))` round-trips. Default empty =
+      en-US-equivalent path (no behavior change).
     type: string
-    default: ""
+    default: ''
   pattern:
     description: Regex pattern for validation. Tested as ^(?:pattern)$ against the value.
     type: string
-    default: ""
+    default: ''
   placeholder:
     description: Placeholder text shown when the input is empty, via ::before content
     type: string
-    default: ""
+    default: ''
   prefix:
     description: Prefix text or icon rendered before the text surface (e.g., unit label, search icon)
     type: string
-    default: ""
+    default: ''
   raw:
     description: Strips visual chrome (border, background) from the input
     type: boolean
@@ -133,19 +138,19 @@ props:
   suffix:
     description: Suffix text rendered after the text surface (e.g., unit like 'kg')
     type: string
-    default: ""
+    default: ''
   value:
-    description: Current input value, synced with contenteditable text surface. For `type="number"`,
-      this is the formatted numeric string; read `el.valueAsNumber` for the parsed Number.
+    description: Current input value, synced with contenteditable text surface. For `type="number"`, this is the formatted
+      numeric string; read `el.valueAsNumber` for the parsed Number.
     type: string
-    default: ""
+    default: ''
 events:
   change:
     description: Fired on blur, Enter, or a stepper-button click (bubbles)
   input:
     description: Fired on each keystroke or stepper-button increment (bubbles)
   submit:
-    description: "Fired when Enter commits the value."
+    description: Fired when Enter commits the value.
 slots:
   leading:
     description: Leading icon slot, sized to --content-height. Collapses text inline padding when present.
@@ -154,16 +159,16 @@ slots:
   trailing:
     description: Trailing icon slot, sized to --content-height. Collapses text inline padding when present.
 states:
-  - name: idle
-    description: Default, ready for interaction.
-  - name: disabled
-    description: Non-interactive; dimmed.
-    attribute: disabled
-  - name: focused
-    description: Keyboard focus ring.
-    selector: :focus-visible
+- name: idle
+  description: Default, ready for interaction.
+- name: disabled
+  description: Non-interactive; dimmed.
+  attribute: disabled
+- name: focused
+  description: Keyboard focus ring.
+  selector: :focus-visible
 traits:
-  - focusable
+- focusable
 tokens:
   --density:
     description: Inherited multiplier for padding
@@ -207,380 +212,110 @@ a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: quantity-stepper
-    description: Number input with [+]/[-] stepper buttons, min/max bounds, and a quantity label.
-      Use for product quantity, item count, or any bounded integer input.
-    a2ui: >-
-      [
-        {"id": "root", "component": "Field", "label": "Quantity",
-         "children": ["qty"]},
-        {"id": "qty", "component": "Input", "type": "number",
-         "name": "quantity", "value": "1", "min": 0, "max": 99, "step": 1}
-      ]
-  - name: price-with-currency
-    description: Currency number input with $ prefix, 2-decimal precision, and step 0.01.
-      The stepper buttons increment by one cent.
-    a2ui: >-
-      [
-        {"id": "root", "component": "Field", "label": "Price",
-         "children": ["price"]},
-        {"id": "price", "component": "Input", "type": "number",
-         "name": "price", "value": "9.99", "min": 0, "step": 0.01,
-         "precision": 2, "prefix": "$"}
-      ]
-  - name: weight-with-unit
-    description: Weight number input with a kg suffix and 0.1 step for decigram precision.
-    a2ui: >-
-      [
-        {"id": "root", "component": "Field", "label": "Weight",
-         "children": ["weight"]},
-        {"id": "weight", "component": "Input", "type": "number",
-         "name": "weight", "value": "70", "min": 0, "max": 500,
-         "step": 0.1, "suffix": "kg"}
-      ]
-  - name: percent-bounded
-    description: Percent number input bounded 0..100 with a % suffix.
-    a2ui: >-
-      [
-        {"id": "root", "component": "Field", "label": "Discount",
-         "children": ["pct"]},
-        {"id": "pct", "component": "Input", "type": "number",
-         "name": "discount", "value": "25", "min": 0, "max": 100,
-         "step": 5, "suffix": "%"}
-      ]
-  - name: temperature-negative
-    description: Number input allowing negative values, e.g. temperature offset.
-    a2ui: >-
-      [
-        {"id": "root", "component": "Field", "label": "Temperature offset",
-         "children": ["temp"]},
-        {"id": "temp", "component": "Input", "type": "number",
-         "name": "temp", "value": "0", "min": -100, "max": 100,
-         "step": 1, "suffix": "°C"}
-      ]
-  - name: chat-interface
-    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec",
-            "ftr"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "textContent": "Chat"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "messages"
-          ]
-        },
-        {
-          "id": "messages",
-          "component": "Column",
-          "gap": "3",
-          "children": [
-            "msg1",
-            "msg2",
-            "msg3",
-            "msg4"
-          ]
-        },
-        {
-          "id": "msg1",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a1",
-            "t1"
-          ]
-        },
-        {
-          "id": "a1",
-          "component": "Avatar",
-          "name": "User",
-          "size": "sm"
-        },
-        {
-          "id": "t1",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Hello! Can you help me with something?"
-        },
-        {
-          "id": "msg2",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a2",
-            "t2"
-          ]
-        },
-        {
-          "id": "a2",
-          "component": "Avatar",
-          "name": "Assistant",
-          "size": "sm"
-        },
-        {
-          "id": "t2",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Of course! I'd be happy to help. What do you need?"
-        },
-        {
-          "id": "msg3",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a3",
-            "t3"
-          ]
-        },
-        {
-          "id": "a3",
-          "component": "Avatar",
-          "name": "User",
-          "size": "sm"
-        },
-        {
-          "id": "t3",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "I need to build a dashboard layout."
-        },
-        {
-          "id": "msg4",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a4",
-            "t4"
-          ]
-        },
-        {
-          "id": "a4",
-          "component": "Avatar",
-          "name": "Assistant",
-          "size": "sm"
-        },
-        {
-          "id": "t4",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Great choice! Let me suggest some patterns for that."
-        },
-        {
-          "id": "ftr",
-          "component": "Footer",
-          "children": [
-            "input-row"
-          ]
-        },
-        {
-          "id": "input-row",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "chat-input",
-            "send-btn"
-          ]
-        },
-        {
-          "id": "chat-input",
-          "component": "Input",
-          "placeholder": "Type a message..."
-        },
-        {
-          "id": "send-btn",
-          "component": "Button",
-          "text": "Send",
-          "icon": "send",
-          "variant": "primary"
-        }
-      ]
-  - name: command-palette
-    description: Command palette card with search input and a list of command options.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "search"
-          ]
-        },
-        {
-          "id": "search",
-          "component": "Input",
-          "placeholder": "Type a command or search...",
-          "icon": "search"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "options"
-          ]
-        },
-        {
-          "id": "options",
-          "component": "Column",
-          "gap": "1",
-          "children": [
-            "opt1",
-            "opt2",
-            "opt3",
-            "opt4",
-            "opt5"
-          ]
-        },
-        {
-          "id": "opt1",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i1",
-            "l1"
-          ]
-        },
-        {
-          "id": "i1",
-          "component": "Icon",
-          "name": "file"
-        },
-        {
-          "id": "l1",
-          "component": "Text",
-          "textContent": "Open File"
-        },
-        {
-          "id": "opt2",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i2",
-            "l2"
-          ]
-        },
-        {
-          "id": "i2",
-          "component": "Icon",
-          "name": "gear"
-        },
-        {
-          "id": "l2",
-          "component": "Text",
-          "textContent": "Settings"
-        },
-        {
-          "id": "opt3",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i3",
-            "l3"
-          ]
-        },
-        {
-          "id": "i3",
-          "component": "Icon",
-          "name": "palette"
-        },
-        {
-          "id": "l3",
-          "component": "Text",
-          "textContent": "Change Theme"
-        },
-        {
-          "id": "opt4",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i4",
-            "l4"
-          ]
-        },
-        {
-          "id": "i4",
-          "component": "Icon",
-          "name": "users"
-        },
-        {
-          "id": "l4",
-          "component": "Text",
-          "textContent": "Manage Users"
-        },
-        {
-          "id": "opt5",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i5",
-            "l5"
-          ]
-        },
-        {
-          "id": "i5",
-          "component": "Icon",
-          "name": "sign-out"
-        },
-        {
-          "id": "l5",
-          "component": "Text",
-          "textContent": "Sign Out"
-        }
-      ]
+- name: quantity-stepper
+  description: Number input with [+]/[-] stepper buttons, min/max bounds, and a quantity label. Use for product quantity,
+    item count, or any bounded integer input.
+  a2ui: "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Quantity\",\n   \"children\": [\"qty\"]},\n  {\"id\"\
+    : \"qty\", \"component\": \"Input\", \"type\": \"number\",\n   \"name\": \"quantity\", \"value\": \"1\", \"min\": 0, \"\
+    max\": 99, \"step\": 1}\n]"
+- name: price-with-currency
+  description: Currency number input with $ prefix, 2-decimal precision, and step 0.01. The stepper buttons increment by one
+    cent.
+  a2ui: "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Price\",\n   \"children\": [\"price\"]},\n  {\"id\"\
+    : \"price\", \"component\": \"Input\", \"type\": \"number\",\n   \"name\": \"price\", \"value\": \"9.99\", \"min\": 0,\
+    \ \"step\": 0.01,\n   \"precision\": 2, \"prefix\": \"$\"}\n]"
+- name: weight-with-unit
+  description: Weight number input with a kg suffix and 0.1 step for decigram precision.
+  a2ui: "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Weight\",\n   \"children\": [\"weight\"]},\n  {\"\
+    id\": \"weight\", \"component\": \"Input\", \"type\": \"number\",\n   \"name\": \"weight\", \"value\": \"70\", \"min\"\
+    : 0, \"max\": 500,\n   \"step\": 0.1, \"suffix\": \"kg\"}\n]"
+- name: percent-bounded
+  description: Percent number input bounded 0..100 with a % suffix.
+  a2ui: "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Discount\",\n   \"children\": [\"pct\"]},\n  {\"id\"\
+    : \"pct\", \"component\": \"Input\", \"type\": \"number\",\n   \"name\": \"discount\", \"value\": \"25\", \"min\": 0,\
+    \ \"max\": 100,\n   \"step\": 5, \"suffix\": \"%\"}\n]"
+- name: temperature-negative
+  description: Number input allowing negative values, e.g. temperature offset.
+  a2ui: "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Temperature offset\",\n   \"children\": [\"temp\"\
+    ]},\n  {\"id\": \"temp\", \"component\": \"Input\", \"type\": \"number\",\n   \"name\": \"temp\", \"value\": \"0\", \"\
+    min\": -100, \"max\": 100,\n   \"step\": 1, \"suffix\": \"°C\"}\n]"
+- name: chat-interface
+  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: command-palette
+  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]"
 keywords:
-  - input
-  - field
-  - chip
-  - tag
+- input
+- field
+- chip
+- tag
 synonyms:
   tag:
-    - tag
-    - input
-    - badge
+  - tag
+  - input
+  - badge
   chip:
-    - badge
-    - tag
-    - input
+  - badge
+  - tag
+  - input
   field:
-    - form
-    - create
-    - input
+  - form
+  - create
+  - input
   input:
-    - form
-    - create
-    - tag
-    - input
+  - form
+  - create
+  - tag
+  - input
+  tags:
+  - TextField
 related:
-  - avatar
-  - button
-  - table
-  - pagination
-  - check-box
+- avatar
+- button
+- table
+- pagination
+- check-box