@adia-ai/web-components 0.0.1

package/components/avatar/avatar.js

@@ -0,0 +1,157 @@
+/**
+ * <avatar-ui src="photo.jpg" name="Alice Smith" size="md" shape="circle"></avatar-ui>
+ *
+ * Fallback chain: image → initials → empty.
+ * If src fails to load, falls back to initials derived from name.
+ *
+ * <avatar-group-ui max="4" size="md">
+ *   <avatar-ui name="Alice"></avatar-ui>
+ *   <avatar-ui name="Bob"></avatar-ui>
+ *   ...
+ * </avatar-group-ui>
+ *
+ * Overlapping avatar stack with +N overflow counter.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+// ── Avatar ──────────────────────────────────────────────────
+
+class AdiaAvatar extends AdiaElement {
+  static properties = {
+    src:   { type: String,  default: '', reflect: true },
+    text:  { type: String,  default: '', reflect: true },
+    name:  { type: String,  default: '', reflect: true }, // backcompat alias for text
+    icon:  { type: String,  default: '', reflect: true },
+    size:  { type: String,  default: 'md', reflect: true },
+    shape: { type: String,  default: 'circle', reflect: true },
+  };
+
+  /** Display string — `text` takes priority, `name` is backcompat alias */
+  get displayName() { return this.text || this.name; }
+
+  static template = () => null;
+
+  #imgEl = null;
+  #initialsEl = null;
+  #iconEl = null;
+
+  connected() {
+    this.setAttribute('role', 'img');
+  }
+
+  render() {
+    if (!this.src && !this.displayName && !this.icon) return;
+
+    if (this.src) {
+      if (!this.#imgEl) {
+        this.#imgEl = document.createElement('img');
+        this.#imgEl.setAttribute('slot', 'img');
+        this.#imgEl.onerror = () => {
+          this.#imgEl.remove();
+          this.#imgEl = null;
+          this.#showInitials();
+        };
+      }
+      this.#imgEl.src = this.src;
+      this.#imgEl.alt = this.name || '';
+      if (!this.#imgEl.parentElement) this.appendChild(this.#imgEl);
+
+      // Remove initials when image is showing
+      if (this.#initialsEl) {
+        this.#initialsEl.remove();
+        this.#initialsEl = null;
+      }
+    } else if (this.icon) {
+      // Icon avatar (system events, non-person rep)
+      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
+      if (this.#initialsEl) { this.#initialsEl.remove(); this.#initialsEl = null; }
+      if (!this.#iconEl) {
+        this.#iconEl = document.createElement('icon-ui');
+        this.#iconEl.setAttribute('slot', 'icon');
+        this.appendChild(this.#iconEl);
+      }
+      this.#iconEl.setAttribute('name', this.icon);
+    } else {
+      // No src / no icon — show initials
+      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
+      if (this.#iconEl) { this.#iconEl.remove(); this.#iconEl = null; }
+      this.#showInitials();
+    }
+
+    this.setAttribute('aria-label', this.displayName || this.icon || '');
+  }
+
+  #showInitials() {
+    if (!this.displayName) return;
+    const initials = this.displayName
+      .split(/\s+/)
+      .map(w => w[0])
+      .join('')
+      .slice(0, 2)
+      .toUpperCase();
+
+    if (!this.#initialsEl) {
+      this.#initialsEl = document.createElement('span');
+      this.#initialsEl.setAttribute('slot', 'initials');
+      this.appendChild(this.#initialsEl);
+    }
+    this.#initialsEl.textContent = initials;
+  }
+}
+
+customElements.define('avatar-ui', AdiaAvatar);
+
+// ── Avatar Group ────────────────────────────────────────────
+
+class AdiaAvatarGroup extends AdiaElement {
+  static properties = {
+    max:  { type: Number, default: 5, reflect: true },
+    size: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'group');
+    if (!this.hasAttribute('aria-label')) {
+      this.setAttribute('aria-label', 'Avatar group');
+    }
+  }
+
+  render() {
+    const avatars = [...this.querySelectorAll('avatar-ui')];
+    const max = this.max;
+    const overflow = avatars.length - max;
+
+    // Propagate size
+    if (this.size) {
+      for (const av of avatars) av.setAttribute('size', this.size);
+    }
+
+    // Show/hide based on max
+    avatars.forEach((av, i) => {
+      av.style.display = i < max ? '' : 'none';
+      av.style.zIndex = String(avatars.length - i);
+    });
+
+    // Overflow counter
+    let counter = this.querySelector('[slot="overflow"]');
+    if (overflow > 0) {
+      if (!counter) {
+        counter = document.createElement('span');
+        counter.setAttribute('slot', 'overflow');
+        this.appendChild(counter);
+      }
+      counter.textContent = `+${overflow}`;
+      counter.setAttribute('aria-label', `${overflow} more`);
+      counter.style.zIndex = '0';
+    } else if (counter) {
+      counter.remove();
+    }
+  }
+}
+
+customElements.define('avatar-group-ui', AdiaAvatarGroup);
+
+export { AdiaAvatar, AdiaAvatarGroup };

package/components/avatar/avatar.yaml

@@ -0,0 +1,559 @@
+# 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: AdiaAvatar
+tag: avatar-ui
+component: Avatar
+category: display
+version: 1
+description: Avatar with image → initials → empty fallback chain.
+props:
+  name:
+    description: User name for initials (first letter of each word, max 2).
+    type: string
+    default: ""
+  initials:
+    description: Explicit initials override. When set, takes precedence over `name`.
+    type: string
+    default: ""
+  icon:
+    description: Phosphor icon name shown instead of initials when `src`/`name` are empty.
+    type: string
+    default: ""
+  shape:
+    description: Avatar shape
+    type: string
+    default: circle
+    enum:
+      - circle
+      - square
+  variant:
+    description: Color/emphasis variant for the placeholder background + initials foreground.
+    type: string
+    default: default
+  size:
+    description: >-
+      Avatar size. Canonical scale (xs/sm/md/lg/xl); long-form aliases
+      (small/medium/large/xlarge) accepted for back-compat.
+    type: string
+    default: md
+    enum:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+      - small
+      - medium
+      - large
+      - xlarge
+  src:
+    description: Image source URL. Falls back to initials on error.
+    type: string
+    default: ""
+  text:
+    description: Display name (for initials)
+    type: string
+    default: ""
+events: {}
+slots:
+  icon:
+    description: Phosphor icon rendered inside the avatar circle (system-event avatars)
+  img:
+    description: Avatar image element
+  initials:
+    description: Initials text span
+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: email-inbox
+    description: Email inbox list with selectable rows showing checkbox, sender avatar, subject, preview
+      text, and time badge.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "list"
+          ]
+        },
+        {
+          "id": "list",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "m1",
+            "m2",
+            "m3",
+            "m4"
+          ]
+        },
+        {
+          "id": "m1",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "cb1",
+            "av1",
+            "body1",
+            "meta1"
+          ]
+        },
+        {
+          "id": "cb1",
+          "component": "CheckBox"
+        },
+        {
+          "id": "av1",
+          "component": "Avatar",
+          "text": "Sarah Chen",
+          "size": "sm"
+        },
+        {
+          "id": "body1",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "subj1",
+            "prev1"
+          ]
+        },
+        {
+          "id": "subj1",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Q4 Planning Review"
+        },
+        {
+          "id": "prev1",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Here are the updated projections for next quarter..."
+        },
+        {
+          "id": "meta1",
+          "component": "Column",
+          "gap": "1",
+          "align": "end",
+          "children": [
+            "time1",
+            "b1"
+          ]
+        },
+        {
+          "id": "time1",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "10:42 AM"
+        },
+        {
+          "id": "b1",
+          "component": "Badge",
+          "color": "primary",
+          "textContent": "New"
+        },
+        {
+          "id": "m2",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "cb2",
+            "av2",
+            "body2",
+            "time2"
+          ]
+        },
+        {
+          "id": "cb2",
+          "component": "CheckBox"
+        },
+        {
+          "id": "av2",
+          "component": "Avatar",
+          "text": "Alex Kim",
+          "size": "sm"
+        },
+        {
+          "id": "body2",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "subj2",
+            "prev2"
+          ]
+        },
+        {
+          "id": "subj2",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Design Review Feedback"
+        },
+        {
+          "id": "prev2",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Great work on the new components. A few notes..."
+        },
+        {
+          "id": "time2",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "9:15 AM"
+        },
+        {
+          "id": "m3",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "cb3",
+            "av3",
+            "body3",
+            "time3"
+          ]
+        },
+        {
+          "id": "cb3",
+          "component": "CheckBox"
+        },
+        {
+          "id": "av3",
+          "component": "Avatar",
+          "text": "Tom Wright",
+          "size": "sm"
+        },
+        {
+          "id": "body3",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "subj3",
+            "prev3"
+          ]
+        },
+        {
+          "id": "subj3",
+          "component": "Text",
+          "textContent": "CI Pipeline Update"
+        },
+        {
+          "id": "prev3",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "The new build system is deployed and running..."
+        },
+        {
+          "id": "time3",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Yesterday"
+        },
+        {
+          "id": "m4",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "cb4",
+            "av4",
+            "body4",
+            "time4"
+          ]
+        },
+        {
+          "id": "cb4",
+          "component": "CheckBox"
+        },
+        {
+          "id": "av4",
+          "component": "Avatar",
+          "text": "Emma Davis",
+          "size": "sm"
+        },
+        {
+          "id": "body4",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "subj4",
+            "prev4"
+          ]
+        },
+        {
+          "id": "subj4",
+          "component": "Text",
+          "textContent": "Team Offsite Planning"
+        },
+        {
+          "id": "prev4",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Let's finalize the agenda for next month's offsite..."
+        },
+        {
+          "id": "time4",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Monday"
+        }
+      ]
+keywords:
+  - avatar
+  - member
+  - people
+  - team
+  - roster
+  - directory
+  - contacts
+  - staff
+  - social
+  - profile
+  - user
+synonyms:
+  avatar:
+    - user
+    - profile
+    - avatar
+    - group
+  contacts:
+    - team
+    - avatar
+    - group
+    - user
+    - profile
+  directory:
+    - team
+    - avatar
+    - group
+    - table
+    - data
+  member:
+    - user
+    - profile
+    - avatar
+    - team
+    - activity
+  people:
+    - user
+    - profile
+    - avatar
+    - team
+    - group
+  profile:
+    - user
+    - profile
+    - avatar
+    - settings
+  roster:
+    - team
+    - activity
+    - avatar
+    - group
+    - leaderboard
+  social:
+    - social
+    - post
+    - avatar
+    - testimonial
+  staff:
+    - team
+    - avatar
+    - group
+    - user
+  team:
+    - team
+    - activity
+    - avatar
+    - group
+    - leaderboard
+    - project
+    - board
+    - kanban
+  user:
+    - user
+    - profile
+    - avatar
+    - login
+related:
+  - input
+  - button
+  - check-box
+  - badge
+  - avatar-group