@adia-ai/web-components 0.0.1

package/components/tabs/tabs.yaml

@@ -0,0 +1,255 @@
+# 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: AdiaTabs
+tag: tabs-ui
+component: Tabs
+category: container
+version: 1
+description: Tabbed panel switcher. Renders button strip from child tab-ui elements.
+props:
+  orientation:
+    description: Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal.
+    type: string
+    default: ""
+  variant:
+    description: Visual variant — default underline strip, `pills` for filled pill tabs, `underline` (explicit).
+    type: string
+    default: default
+    enum: [default, pills, underline, segmented, bordered]
+  value:
+    description: Value of the currently active tab. Set programmatically or auto-assigned to the first
+      non-disabled tab on connect.
+    type: string
+    default: ""
+events:
+  change:
+    description: "Fired when the value changes (on blur for inputs, on selection for pickers)."
+slots:
+  default:
+    description: Child tab-ui elements that form the tab strip
+  indicator:
+    description: Auto-created sliding indicator element (line variant only)
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --tabs-background:
+    description: Override tab strip background
+  --tabs-border-bottom:
+    description: Override bottom border (full shorthand)
+  --tabs-border-color:
+    description: Override bottom border color
+  --tabs-gap:
+    description: Override gap between tabs
+  --tabs-indicator-color:
+    description: Override sliding indicator color
+  --tabs-indicator-height:
+    description: Override sliding indicator thickness
+  --tabs-outer-radius:
+    description: Override outer container border radius
+  --tabs-padding:
+    description: Override inner tab padding (density-scaled)
+  --tabs-padding-outer:
+    description: Override outer container padding
+  --tabs-pill-background:
+    description: Override pill variant container background
+  --tabs-pill-border-bottom:
+    description: Override pill variant bottom border
+  --tabs-pill-border-color:
+    description: Override pill variant border color
+  --tabs-pill-gap:
+    description: Override pill variant tab gap
+  --tabs-pill-padding-outer:
+    description: Override pill variant outer padding
+  --tabs-pill-radius:
+    description: Override pill variant border radius
+  --tabs-radius:
+    description: Override base border radius
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: tabs-panels
+    description: Tabs component with three tab panels, each containing descriptive content for different
+      sections.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "body"
+          ]
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": [
+            "tabs"
+          ]
+        },
+        {
+          "id": "tabs",
+          "component": "Tabs",
+          "attrs": {
+            "defaultValue": "overview"
+          },
+          "children": [
+            "tab-overview",
+            "tab-features",
+            "tab-specs"
+          ]
+        },
+        {
+          "id": "tab-overview",
+          "component": "Tab",
+          "attrs": {
+            "value": "overview",
+            "label": "Overview"
+          },
+          "children": [
+            "overview-content"
+          ]
+        },
+        {
+          "id": "overview-content",
+          "component": "Column",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "overview-heading",
+            "overview-text"
+          ]
+        },
+        {
+          "id": "overview-heading",
+          "component": "Text",
+          "attrs": {
+            "variant": "heading"
+          },
+          "content": "Product Overview"
+        },
+        {
+          "id": "overview-text",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Our platform provides a comprehensive suite of tools for building modern web applications. From design to deployment, everything you need is included."
+        },
+        {
+          "id": "tab-features",
+          "component": "Tab",
+          "attrs": {
+            "value": "features",
+            "label": "Features"
+          },
+          "children": [
+            "features-content"
+          ]
+        },
+        {
+          "id": "features-content",
+          "component": "Column",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "features-heading",
+            "features-text"
+          ]
+        },
+        {
+          "id": "features-heading",
+          "component": "Text",
+          "attrs": {
+            "variant": "heading"
+          },
+          "content": "Key Features"
+        },
+        {
+          "id": "features-text",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Includes real-time collaboration, version control integration, automated testing, CI/CD pipelines, and a built-in component library with 50+ pre-built patterns."
+        },
+        {
+          "id": "tab-specs",
+          "component": "Tab",
+          "attrs": {
+            "value": "specs",
+            "label": "Specifications"
+          },
+          "children": [
+            "specs-content"
+          ]
+        },
+        {
+          "id": "specs-content",
+          "component": "Column",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "specs-heading",
+            "specs-text"
+          ]
+        },
+        {
+          "id": "specs-heading",
+          "component": "Text",
+          "attrs": {
+            "variant": "heading"
+          },
+          "content": "Technical Specs"
+        },
+        {
+          "id": "specs-text",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Built on TypeScript with React 19 support. Bundle size under 15KB gzipped. Supports SSR, RSC, and edge runtime. Compatible with Node.js 18+ and all modern browsers."
+        }
+      ]
+keywords:
+  - tabs
+  - panel
+  - navigation
+  - layout
+  - tab
+synonyms:
+  layout:
+    - split
+    - sidebar
+    - drawer
+    - tabs
+    - divider
+    - bleed
+  navigation:
+    - nav
+    - sidebar
+    - breadcrumb
+    - tabs
+    - menu
+    - pagination
+  panel:
+    - tabs
+    - drawer
+    - panel
+    - split
+  tab:
+    - tabs
+    - panel
+    - segmented
+  tabs:
+    - tabs
+    - panel
+    - segmented
+related:
+  - tab

package/components/tag/tag.a2ui.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Tag.json",
+  "title": "Tag",
+  "description": "Inline tag/chip with optional dismiss button.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Tag"
+    },
+    "disabled": {
+      "description": "Disables interaction and dims the tag.",
+      "type": "boolean",
+      "default": false
+    },
+    "dismissible": {
+      "description": "Alias for `removable`; accepted for back-compat.",
+      "type": "boolean",
+      "default": false
+    },
+    "removable": {
+      "description": "Shows a dismiss button that fires the remove event.",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Size preset controlling font-size and padding.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md"
+      ],
+      "default": "md"
+    },
+    "text": {
+      "description": "Tag text content.",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual style variant with semantic colors.",
+      "type": "string",
+      "enum": [
+        "default",
+        "info",
+        "success",
+        "warning",
+        "error"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {
+      "remove": {
+        "description": "Fired when the dismiss button is activated."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Tag 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\": \"Tag\",\n    \"text\": \"Example Tag\"\n  }\n]",
+        "name": "basic-tag"
+      }
+    ],
+    "keywords": [
+      "tag",
+      "autocomplete",
+      "input",
+      "badge",
+      "chip",
+      "label",
+      "pill"
+    ],
+    "name": "AdiaTag",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "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"
+      ],
+      "tag": [
+        "tag",
+        "input",
+        "badge"
+      ]
+    },
+    "tag": "tag-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/tag/tag.css

@@ -0,0 +1,118 @@
+@scope (tag-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --tag-bg:           var(--a-bg-muted);
+    --tag-fg:           var(--a-fg);
+    --tag-border:       transparent;
+    --tag-radius:       var(--a-radius-full);
+    --tag-px:           var(--a-space-2);
+    --tag-py:           0.125rem;
+    --tag-gap:          var(--a-space-1);
+    --tag-font:         var(--a-ui-sm);
+    --tag-dismiss-size: 1rem;
+    --tag-bg-hover:     var(--a-bg-hover);
+    --tag-bg-disabled:  var(--a-ui-bg-disabled);
+    --tag-fg-disabled:  var(--a-ui-text-disabled);
+
+    /* ── Focus ── */
+    --tag-focus-ring:   var(--a-focus-ring);
+
+    /* ── Motion ── */
+    --tag-duration:     var(--a-duration-fast);
+    --tag-easing:       var(--a-easing);
+
+    /* ── Dismiss ── */
+    --tag-dismiss-radius: var(--a-radius-full);
+    --tag-dismiss-fg:   var(--a-fg-muted);
+    --tag-dismiss-fg-hover: var(--a-fg);
+    --tag-dismiss-bg-hover: var(--a-bg-muted);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tag-gap);
+    padding: var(--tag-py) var(--tag-px);
+    border-radius: var(--tag-radius);
+    border: 1px solid var(--tag-border);
+    font: inherit;
+    font-size: var(--tag-font);
+    font-weight: 500;
+    line-height: 1;
+    color: var(--tag-fg);
+    background: var(--tag-bg);
+    white-space: nowrap;
+    user-select: none;
+    transition: background var(--tag-duration) var(--tag-easing), color var(--tag-duration) var(--tag-easing);
+  }
+
+  :scope::after {
+    content: attr(text);
+  }
+
+  /* ── Variants ── */
+  :scope[variant="info"] {
+    --tag-bg: var(--a-info-muted);
+    --tag-fg: var(--a-info-bg);
+  }
+
+  :scope[variant="success"] {
+    --tag-bg: var(--a-success-muted);
+    --tag-fg: var(--a-success-bg);
+  }
+
+  :scope[variant="warning"] {
+    --tag-bg: var(--a-warning-muted);
+    --tag-fg: var(--a-warning-bg);
+  }
+
+  :scope[variant="danger"] {
+    --tag-bg: var(--a-danger-muted);
+    --tag-fg: var(--a-danger-bg);
+  }
+
+  /* Size handled by universal [size] attribute system. */
+
+  /* ── Hover (only interactive/removable tags) ── */
+  :scope[removable]:not([disabled]):hover {
+    --tag-bg: var(--tag-bg-hover);
+  }
+
+  /* ── Focus ── */
+  :scope:focus-visible {
+    outline: none;
+    box-shadow: var(--tag-focus-ring);
+  }
+
+  /* ── Dismiss button ── */
+  [slot="dismiss"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--tag-dismiss-size);
+    height: var(--tag-dismiss-size);
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--tag-dismiss-radius);
+    color: var(--tag-dismiss-fg);
+    --a-icon-size: 0.875rem;
+    order: 1; /* push dismiss to end so layout reads [text] [×] */
+    transition: color var(--tag-duration) var(--tag-easing), background var(--tag-duration) var(--tag-easing);
+  }
+
+  [slot="dismiss"]:hover {
+    color: var(--tag-dismiss-fg-hover);
+    background: var(--tag-dismiss-bg-hover);
+  }
+
+  /* ── Disabled ── */
+  :scope[disabled] {
+    --tag-bg: var(--tag-bg-disabled);
+    --tag-fg: var(--tag-fg-disabled);
+    pointer-events: none;
+  }
+}

package/components/tag/tag.js

@@ -0,0 +1,88 @@
+/**
+ * <tag-ui text="Label" variant="info" removable></tag-ui>
+ *
+ * Inline tag / chip. Pill-shaped, text rendered via CSS attr().
+ * Optional dismiss button dispatches a 'remove' CustomEvent.
+ *
+ * Variants: default, info, success, warning, danger
+ * Sizes: sm, md (default)
+ *
+ * Events:
+ *   remove — { detail: { text, value } } fired when dismiss is clicked
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaTag extends AdiaElement {
+  static properties = {
+    text:      { type: String,  default: '', reflect: true },
+    variant:   { type: String,  default: 'default', reflect: true },
+    size:      { type: String,  default: 'md', reflect: true },
+    removable: { type: Boolean, default: false, reflect: true },
+    disabled:  { type: Boolean, default: false, reflect: true },
+  };
+
+  static parts = {
+    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x"></icon-ui></button>',
+  };
+
+  static template = () => null;
+
+  #onClick = (e) => {
+    if (this.disabled) return;
+    if (e.target.closest('[slot="dismiss"]')) {
+      this.dispatchEvent(new CustomEvent('remove', {
+        bubbles: true,
+        detail: { text: this.text, value: this.text },
+      }));
+      this.remove();
+    }
+  };
+
+  #onKeydown = (e) => {
+    if (this.disabled) return;
+    if (e.target.closest('[slot="dismiss"]') && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('remove', {
+        bubbles: true,
+        detail: { text: this.text, value: this.text },
+      }));
+      this.remove();
+    }
+  };
+
+  connected() {
+    this.setAttribute('role', 'status');
+    this.setAttribute('tabindex', '0');
+
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeydown);
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeydown);
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.setAttribute('tabindex', '0');
+    }
+
+    if (this.removable && !this.disabled) {
+      const btn = this.ensure('dismiss');
+      if (btn && btn.parentElement !== this) this.appendChild(btn);
+    } else {
+      this.drop('dismiss');
+    }
+  }
+}
+customElements.define('tag-ui', AdiaTag);
+
+export { AdiaTag };