@adia-ai/web-components 0.0.1

package/components/tag/tag.yaml

@@ -0,0 +1,125 @@
+# 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: AdiaTag
+tag: tag-ui
+component: Tag
+category: display
+version: 1
+description: Inline tag/chip with optional dismiss button.
+props:
+  disabled:
+    description: Disables interaction and dims the tag.
+    type: boolean
+    default: false
+    reflect: true
+  removable:
+    description: Shows a dismiss button that fires the remove event.
+    type: boolean
+    default: false
+  dismissible:
+    description: Alias for `removable`; accepted for back-compat.
+    type: boolean
+    default: false
+  size:
+    description: Size preset controlling font-size and padding.
+    type: string
+    default: md
+    enum:
+      - sm
+      - md
+  text:
+    description: Tag text content.
+    type: string
+    default: ""
+  variant:
+    description: Visual style variant with semantic colors.
+    type: string
+    default: default
+    enum:
+      - default
+      - info
+      - success
+      - warning
+      - error
+events:
+  remove:
+    description: Fired when the dismiss button is activated.
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-tag
+    description: Basic Tag usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Tag",
+          "text": "Example Tag"
+        }
+      ]
+keywords:
+  - tag
+  - autocomplete
+  - input
+  - badge
+  - chip
+  - label
+  - pill
+synonyms:
+  tag:
+    - tag
+    - input
+    - badge
+  autocomplete:
+    - search
+    - command
+    - palette
+    - tag
+  badge:
+    - badge
+    - showcase
+    - tag
+    - label
+  chip:
+    - badge
+    - tag
+    - input
+  input:
+    - form
+    - create
+    - tag
+    - input
+  label:
+    - badge
+    - tag
+    - divider
+    - label
+  pill:
+    - badge
+    - tag
+related: []

package/components/text/text.a2ui.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Text.json",
+  "title": "Text",
+  "description": "Typography wrapper that applies role tokens. Supports truncation and line clamping.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Text"
+    },
+    "lines": {
+      "description": "Multi-line clamp count (0 = no clamp)",
+      "type": "number",
+      "default": 0
+    },
+    "textContent": {
+      "description": "Display text content. The main payload field for Text components extracted from HTML.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "variant": {
+      "description": "Typography variant — sets role tokens (size/weight/tracking/color).",
+      "type": "string",
+      "enum": [
+        "body",
+        "heading",
+        "subheading",
+        "title",
+        "subsection",
+        "display",
+        "caption",
+        "label",
+        "kicker",
+        "deck",
+        "section",
+        "metric",
+        "code",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6"
+      ],
+      "default": "body"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "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": [
+      "text"
+    ],
+    "name": "AdiaText",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "empty-state",
+      "alert"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "text-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/text/text.css

@@ -0,0 +1,65 @@
+  :where(text-ui) {
+    /* ── Tokens (body defaults) ── */
+    --text-family:    var(--a-body-family);
+    --text-weight:    var(--a-weight);
+    --text-weight-strong:    var(--a-weight-semibold);
+    --text-size:      var(--a-body-size);
+    --text-leading:   var(--a-body-leading);
+    --text-tracking:  var(--a-body-tracking);
+    --text-case:      var(--a-body-case);
+    --text-color:     var(--a-fg);
+    --text-color-strong:     var(--a-fg-strong);
+  }
+@scope (text-ui) {
+
+  :scope {
+    box-sizing: border-box;
+    display: inline;
+    font-family: var(--text-family);
+    font-weight: var(--text-weight);
+    font-size: var(--text-size);
+    line-height: var(--text-leading);
+    letter-spacing: var(--text-tracking);
+    text-transform: var(--text-case);
+    color: var(--text-color);
+  }
+
+  /* Reset native heading styles inside text-ui so the variant controls the look */
+  :is(h1, h2, h3, h4, h5, h6) {
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+  }
+
+  :scope[strong], :is(strong) {
+    --text-weight: var(--text-weight-strong);
+    --text-color: var(--text-color-strong);
+  }
+
+  /* ── Variants ── */
+  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--a-fg); }
+  :scope[variant="display"]    { --text-family: var(--a-display-family); --text-weight: var(--a-display-weight); --text-size: var(--a-display-size); --text-leading: var(--a-display-leading); --text-tracking: var(--a-display-tracking); --text-case: var(--a-display-case); --text-color: var(--a-display-color); }
+  :scope[variant="title"]      { --text-family: var(--a-title-family);   --text-weight: var(--a-title-weight);   --text-size: var(--a-title-size);   --text-leading: var(--a-title-leading);   --text-tracking: var(--a-title-tracking);   --text-case: var(--a-title-case);   --text-color: var(--a-title-color); }
+  :scope[variant="heading"]    { --text-family: var(--a-heading-family); --text-weight: var(--a-heading-weight); --text-size: var(--a-heading-size); --text-leading: var(--a-heading-leading); --text-tracking: var(--a-heading-tracking); --text-case: var(--a-heading-case); --text-color: var(--a-heading-color); }
+  :scope[variant="section"]    { --text-family: var(--a-section-family); --text-weight: var(--a-section-weight); --text-size: var(--a-section-size); --text-leading: var(--a-section-leading); --text-tracking: var(--a-section-tracking); --text-case: var(--a-section-case); --text-color: var(--a-section-color); }
+  :scope[variant="caption"]    { --text-family: var(--a-caption-family); --text-weight: var(--a-caption-weight); --text-size: var(--a-caption-size); --text-leading: var(--a-caption-leading); --text-tracking: var(--a-caption-tracking); --text-case: var(--a-caption-case); --text-color: var(--a-caption-color); }
+  :scope[variant="label"]      { --text-family: var(--a-label-family);   --text-weight: var(--a-label-weight);   --text-size: var(--a-label-size);   --text-leading: var(--a-label-leading);   --text-tracking: var(--a-label-tracking);   --text-case: var(--a-label-case);   --text-color: var(--a-label-color); }
+  :scope[variant="kicker"]     { --text-family: var(--a-kicker-family);  --text-weight: var(--a-kicker-weight);  --text-size: var(--a-kicker-size);  --text-leading: var(--a-kicker-leading);  --text-tracking: var(--a-kicker-tracking);  --text-case: uppercase;             --text-color: var(--a-kicker-color); }
+  :scope[variant="code"]       { --text-family: var(--a-code-family);    --text-weight: var(--a-code-weight);    --text-size: var(--a-code-size);    --text-leading: var(--a-code-leading);    --text-tracking: var(--a-code-tracking);    --text-case: var(--a-code-case);    --text-color: var(--a-code-color); }
+
+  /* ── Truncation (single-line) ── */
+  :scope[truncate] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── Line clamp (multi-line) ── */
+  :scope[lines]:not([lines="0"]) {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--_text-lines, 1);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}

package/components/text/text.js

@@ -0,0 +1,35 @@
+/**
+ * <text-ui variant="heading">Hello World</text-ui>
+ * <text-ui truncate>Long text that gets cut off...</text-ui>
+ * <text-ui variant="body" lines="3">Multi-line clamped content...</text-ui>
+ *
+ * Typography wrapper that applies role tokens.
+ *
+ * Properties:
+ *   variant  — body | heading | title | display | caption | label | kicker | code
+ *   truncate — single-line truncation with ellipsis
+ *   lines    — multi-line clamp count (0 = no clamp)
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaText extends AdiaElement {
+  static properties = {
+    variant:  { type: String,  default: 'body', reflect: true },
+    truncate: { type: Boolean, default: false, reflect: true },
+    lines:    { type: Number,  default: 0, reflect: true },
+  };
+
+  static template = () => null;
+
+  render() {
+    if (this.lines > 0) {
+      this.style.setProperty('--_text-lines', String(this.lines));
+    } else {
+      this.style.removeProperty('--_text-lines');
+    }
+  }
+}
+customElements.define('text-ui', AdiaText);
+
+export { AdiaText };

package/components/text/text.yaml

@@ -0,0 +1,360 @@
+# 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: AdiaText
+tag: text-ui
+component: Text
+category: display
+version: 1
+description: Typography wrapper that applies role tokens. Supports truncation and line clamping.
+props:
+  lines:
+    description: Multi-line clamp count (0 = no clamp)
+    type: number
+    default: 0
+  textContent:
+    description: Display text content. The main payload field for Text components extracted from HTML.
+    type: string
+    default: ""
+    dynamic: true
+  variant:
+    description: Typography variant — sets role tokens (size/weight/tracking/color).
+    type: string
+    default: body
+    enum:
+      - body
+      - heading
+      - subheading
+      - title
+      - subsection
+      - display
+      - caption
+      - label
+      - kicker
+      - deck
+      - section
+      - metric
+      - code
+      - h1
+      - h2
+      - h3
+      - h4
+      - h5
+      - h6
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - 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"
+        }
+      ]
+keywords:
+  - text
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - empty-state
+  - alert