@adia-ai/web-components 0.0.1

package/components/tabs/tabs.a2ui.json

@@ -0,0 +1,174 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Tabs.json",
+  "title": "Tabs",
+  "description": "Tabbed panel switcher. Renders button strip from child tab-ui elements.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Tabs"
+    },
+    "orientation": {
+      "description": "Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal.",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Value of the currently active tab. Set programmatically or auto-assigned to the first non-disabled tab on connect.",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual variant — default underline strip, `pills` for filled pill tabs, `underline` (explicit).",
+      "type": "string",
+      "enum": [
+        "default",
+        "pills",
+        "underline",
+        "segmented",
+        "bordered"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "change": {
+        "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
+      }
+    },
+    "examples": [
+      {
+        "description": "Tabs component with three tab panels, each containing descriptive content for different sections.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"body\"\n    ]\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tabs\"\n    ]\n  },\n  {\n    \"id\": \"tabs\",\n    \"component\": \"Tabs\",\n    \"attrs\": {\n      \"defaultValue\": \"overview\"\n    },\n    \"children\": [\n      \"tab-overview\",\n      \"tab-features\",\n      \"tab-specs\"\n    ]\n  },\n  {\n    \"id\": \"tab-overview\",\n    \"component\": \"Tab\",\n    \"attrs\": {\n      \"value\": \"overview\",\n      \"label\": \"Overview\"\n    },\n    \"children\": [\n      \"overview-content\"\n    ]\n  },\n  {\n    \"id\": \"overview-content\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"overview-heading\",\n      \"overview-text\"\n    ]\n  },\n  {\n    \"id\": \"overview-heading\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"heading\"\n    },\n    \"content\": \"Product Overview\"\n  },\n  {\n    \"id\": \"overview-text\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"body\"\n    },\n    \"content\": \"Our platform provides a comprehensive suite of tools for building modern web applications. From design to deployment, everything you need is included.\"\n  },\n  {\n    \"id\": \"tab-features\",\n    \"component\": \"Tab\",\n    \"attrs\": {\n      \"value\": \"features\",\n      \"label\": \"Features\"\n    },\n    \"children\": [\n      \"features-content\"\n    ]\n  },\n  {\n    \"id\": \"features-content\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"features-heading\",\n      \"features-text\"\n    ]\n  },\n  {\n    \"id\": \"features-heading\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"heading\"\n    },\n    \"content\": \"Key Features\"\n  },\n  {\n    \"id\": \"features-text\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"body\"\n    },\n    \"content\": \"Includes real-time collaboration, version control integration, automated testing, CI/CD pipelines, and a built-in component library with 50+ pre-built patterns.\"\n  },\n  {\n    \"id\": \"tab-specs\",\n    \"component\": \"Tab\",\n    \"attrs\": {\n      \"value\": \"specs\",\n      \"label\": \"Specifications\"\n    },\n    \"children\": [\n      \"specs-content\"\n    ]\n  },\n  {\n    \"id\": \"specs-content\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"specs-heading\",\n      \"specs-text\"\n    ]\n  },\n  {\n    \"id\": \"specs-heading\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"heading\"\n    },\n    \"content\": \"Technical Specs\"\n  },\n  {\n    \"id\": \"specs-text\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"body\"\n    },\n    \"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.\"\n  }\n]",
+        "name": "tabs-panels"
+      }
+    ],
+    "keywords": [
+      "tabs",
+      "panel",
+      "navigation",
+      "layout",
+      "tab"
+    ],
+    "name": "AdiaTabs",
+    "related": [
+      "tab"
+    ],
+    "slots": {
+      "default": {
+        "description": "Child tab-ui elements that form the tab strip"
+      },
+      "indicator": {
+        "description": "Auto-created sliding indicator element (line variant only)"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "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"
+      ]
+    },
+    "tag": "tabs-ui",
+    "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"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/tabs/tabs.css

@@ -0,0 +1,162 @@
+@scope (tabs-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --tabs-border:          transparent;
+    --tabs-bg:              transparent;
+    --tabs-radius:          var(--a-radius-md);
+    --tabs-button-height:   2.25rem;
+    --tabs-button-px:       var(--a-space-2);
+    --tabs-font-size:       var(--a-ui-md);
+    --tabs-gap:             var(--a-space-1);
+    --tabs-indicator-color: var(--a-primary);
+    --tabs-indicator-height: 2px;
+    --tabs-fg:              var(--a-fg-subtle);
+    --tabs-fg-hover:        var(--a-fg);
+    --tabs-fg-active:       var(--a-fg-selected);
+    --tabs-fg-disabled:     var(--a-fg-muted);
+
+    /* ── Spacing ── */
+    --tabs-vertical-gap:    var(--a-space-4);
+    --tabs-button-gap:      var(--a-space-1);
+
+    /* ── Transitions ── */
+    --tabs-duration:        var(--a-duration);
+    --tabs-duration-fast:   var(--a-duration-fast);
+    --tabs-easing:          var(--a-easing);
+    --tabs-easing-out:      var(--a-easing-out);
+
+    /* ── Focus ── */
+    --tabs-focus-ring:      var(--a-focus-ring);
+    --tabs-focus-radius:    var(--a-radius-sm);
+
+    /* ── Vertical strip min-width ── */
+    /* Component-intrinsic visual constant; no --a-space-* equivalent */
+    --tabs-vertical-strip-min-width: 140px;
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: var(--tabs-bg);
+    border-radius: var(--tabs-radius);
+  }
+
+  /* Bordered variant — baseline border under the tab strip.
+     The active indicator sits on top of the border for a clean join. */
+  :scope[variant="bordered"] { --tabs-border: var(--a-border-subtle); }
+  :scope[divider]            { --tabs-border: var(--a-border-subtle); }
+
+  /* Vertical orientation: strip on the left, panels on the right */
+  :scope[orientation="vertical"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--tabs-vertical-gap);
+  }
+
+  /* ── Button strip ── */
+  [slot="strip"] {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--tabs-gap);
+    border-bottom: 1px solid var(--tabs-border);
+    position: relative;
+  }
+
+  :scope[orientation="vertical"] > [slot="strip"] {
+    flex-direction: column;
+    align-items: stretch;
+    border-bottom: none;
+    border-inline-start: 1px solid var(--tabs-border);
+    flex-shrink: 0;
+    min-width: var(--tabs-vertical-strip-min-width);
+  }
+
+  /* ── Sliding indicator ── */
+  [slot="indicator"] {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    height: var(--tabs-indicator-height);
+    background: var(--tabs-indicator-color);
+    border-radius: var(--tabs-indicator-height);
+    pointer-events: none;
+    transition:
+      transform var(--tabs-duration) var(--tabs-easing-out),
+      width var(--tabs-duration) var(--tabs-easing-out);
+  }
+
+  :scope[orientation="vertical"] [slot="indicator"] {
+    bottom: auto;
+    left: -1px;
+    top: 0;
+    width: var(--tabs-indicator-height);
+    height: auto;
+    transition:
+      transform var(--tabs-duration) var(--tabs-easing-out),
+      height var(--tabs-duration) var(--tabs-easing-out);
+  }
+
+  /* Vertical panel area takes remaining space */
+  :scope[orientation="vertical"] > tab-ui {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ── Tab buttons ── */
+  [slot="tab-button"] {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tabs-button-gap);
+    height: var(--tabs-button-height);
+    padding-inline: var(--tabs-button-px);
+    border: none;
+    background: none;
+    color: var(--tabs-fg);
+    font: inherit;
+    font-size: var(--tabs-font-size);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: color var(--tabs-duration-fast) var(--tabs-easing);
+  }
+
+  :scope[orientation="vertical"] [slot="tab-button"] {
+    justify-content: flex-start;
+    text-align: start;
+    width: 100%;
+  }
+
+  [slot="tab-button"]:not([disabled]):hover {
+    color: var(--tabs-fg-hover);
+  }
+
+  [slot="tab-button"][data-active] {
+    color: var(--tabs-fg-active);
+  }
+
+  [slot="tab-button"][disabled] {
+    color: var(--tabs-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  [slot="tab-button"]:focus-visible {
+    outline: none;
+    box-shadow: var(--tabs-focus-ring);
+    border-radius: var(--tabs-focus-radius);
+  }
+
+  /* ── Tab panels ── */
+  tab-ui {
+    box-sizing: border-box;
+    display: block;
+  }
+
+  tab-ui[hidden] {
+    display: none;
+  }
+}

package/components/tabs/tabs.js

@@ -0,0 +1,226 @@
+/**
+ * <tabs-ui value="tab1">
+ *   <tab-ui value="tab1" text="Tab 1">Content for tab 1</tab-ui>
+ *   <tab-ui value="tab2" text="Tab 2">Content for tab 2</tab-ui>
+ * </tabs-ui>
+ *
+ * Tabbed panel switcher. Renders a button strip from child tab-ui elements.
+ * Only the active tab's content is visible.
+ *
+ * Events:
+ *   change — { detail: { value } }
+ *
+ * Keyboard:
+ *   ArrowLeft / ArrowRight to navigate tabs
+ */
+
+import { AdiaElement, html } from '@core/element.js';
+import '@components/tabs/tab.js';
+
+class AdiaTabs extends AdiaElement {
+  static properties = {
+    value:       { type: String, default: '', reflect: true },
+    orientation: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #strip = null;
+  #indicator = null;
+
+  connected() {
+    this.setAttribute('role', 'tablist');
+
+    this.addEventListener('click', this.#handleClick);
+    this.addEventListener('keydown', this.#handleKeydown);
+
+    // Default to first tab if no value
+    if (!this.value) {
+      const first = this.querySelector('tab-ui:not([disabled])');
+      if (first) this.value = first.value || first.getAttribute('value') || '';
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#handleClick);
+    this.removeEventListener('keydown', this.#handleKeydown);
+    this.#strip = null;
+    this.#indicator = null;
+  }
+
+  get #tabs() {
+    return [...this.querySelectorAll('tab-ui')];
+  }
+
+  get #enabledTabs() {
+    return this.#tabs.filter(t => !t.disabled);
+  }
+
+  render() {
+    const tabs = this.#tabs;
+    if (!tabs.length) return;
+
+    // Ensure button strip exists
+    if (!this.#strip) {
+      this.#strip = document.createElement('div');
+      this.#strip.setAttribute('slot', 'strip');
+      this.#strip.setAttribute('role', 'presentation');
+    }
+    if (this.#strip.parentElement !== this) {
+      this.prepend(this.#strip);
+    }
+
+    // Reconcile buttons in the strip
+    this.reconcile(
+      this.#strip,
+      tabs,
+      (tab) => tab.value || tab.getAttribute('value') || '',
+      (tab, i, existing) => {
+        const val = tab.value || tab.getAttribute('value') || '';
+        const text = tab.text || tab.getAttribute('text') || '';
+        const icon = tab.icon || tab.getAttribute('icon') || '';
+        const isActive = val === this.value;
+        const isDisabled = tab.disabled || tab.hasAttribute('disabled');
+
+        if (existing) {
+          existing.textContent = '';
+          if (icon) {
+            const iconEl = document.createElement('icon-ui');
+            iconEl.setAttribute('name', icon);
+            existing.appendChild(iconEl);
+          }
+          if (text) {
+            existing.appendChild(document.createTextNode(text));
+          }
+          existing.setAttribute('aria-selected', String(isActive));
+          existing.setAttribute('tabindex', isActive ? '0' : '-1');
+          if (isDisabled) existing.setAttribute('disabled', '');
+          else existing.removeAttribute('disabled');
+          if (isActive) existing.setAttribute('data-active', '');
+          else existing.removeAttribute('data-active');
+          existing.dataset.value = val;
+          return existing;
+        }
+
+        const btn = document.createElement('div');
+        btn.setAttribute('role', 'tab');
+        btn.setAttribute('slot', 'tab-button');
+        btn.dataset.value = val;
+        btn.setAttribute('aria-selected', String(isActive));
+        btn.setAttribute('tabindex', isActive ? '0' : '-1');
+        if (isDisabled) btn.setAttribute('disabled', '');
+        if (isActive) btn.setAttribute('data-active', '');
+        if (icon) {
+          const iconEl = document.createElement('icon-ui');
+          iconEl.setAttribute('name', icon);
+          btn.appendChild(iconEl);
+        }
+        if (text) {
+          btn.appendChild(document.createTextNode(text));
+        }
+        return btn;
+      },
+    );
+
+    // Update sliding indicator
+    this.#updateIndicator();
+
+    // Sync tab content visibility
+    for (const tab of tabs) {
+      const tabVal = tab.value || tab.getAttribute('value') || '';
+      const isActive = tabVal === this.value;
+      if (isActive) {
+        tab.removeAttribute('hidden');
+        tab.setAttribute('role', 'tabpanel');
+      } else {
+        tab.setAttribute('hidden', '');
+      }
+    }
+  }
+
+  #updateIndicator() {
+    const activeBtn = this.#strip?.querySelector('[slot="tab-button"][data-active]');
+    if (!activeBtn) {
+      if (this.#indicator) this.#indicator.style.opacity = '0';
+      return;
+    }
+
+    // Lazy-create indicator
+    const isNew = !this.#indicator;
+    if (isNew) {
+      this.#indicator = document.createElement('span');
+      this.#indicator.setAttribute('slot', 'indicator');
+      this.#strip.appendChild(this.#indicator);
+    }
+
+    const stripRect = this.#strip.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    const isVertical = this.orientation === 'vertical';
+
+    const apply = () => {
+      if (isVertical) {
+        const top = btnRect.top - stripRect.top;
+        this.#indicator.style.transform = `translateY(${top}px)`;
+        this.#indicator.style.height = `${btnRect.height}px`;
+        this.#indicator.style.width = '';
+      } else {
+        const left = btnRect.left - stripRect.left;
+        this.#indicator.style.transform = `translateX(${left}px)`;
+        this.#indicator.style.width = `${btnRect.width}px`;
+        this.#indicator.style.height = '';
+      }
+      this.#indicator.style.opacity = '1';
+    };
+
+    if (isNew) {
+      this.#indicator.style.transition = 'none';
+      apply();
+      requestAnimationFrame(() => {
+        if (this.#indicator) this.#indicator.style.transition = '';
+      });
+    } else {
+      apply();
+    }
+  }
+
+  #select(value) {
+    if (value === this.value) return;
+    this.value = value;
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #handleClick = (e) => {
+    const btn = e.target.closest('[slot="tab-button"]');
+    if (!btn || !this.contains(btn) || btn.hasAttribute('disabled')) return;
+    this.#select(btn.dataset.value);
+  };
+
+  #handleKeydown = (e) => {
+    const btn = e.target.closest('[slot="tab-button"]');
+    if (!btn || !this.contains(btn)) return;
+
+    const buttons = [...this.#strip.querySelectorAll('[slot="tab-button"]:not([disabled])')];
+    const idx = buttons.indexOf(btn);
+    if (idx < 0) return;
+
+    const isVertical = this.orientation === 'vertical';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+
+    let next;
+    switch (e.key) {
+      case nextKey: next = idx < buttons.length - 1 ? idx + 1 : 0; break;
+      case prevKey: next = idx > 0 ? idx - 1 : buttons.length - 1; break;
+      case 'Home':  next = 0; break;
+      case 'End':   next = buttons.length - 1; break;
+      default: return;
+    }
+
+    e.preventDefault();
+    buttons[next].focus();
+    this.#select(buttons[next].dataset.value);
+  };
+}
+customElements.define('tabs-ui', AdiaTabs);
+
+export { AdiaTabs };