@adia-ai/web-components 0.0.1

package/components/alert/alert.yaml

@@ -0,0 +1,205 @@
+# 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: AdiaAlert
+tag: alert-ui
+component: Alert
+category: container
+version: 1
+description: Inline alert banner with optional icon and close button.
+props:
+  closable:
+    description: Whether a close button is displayed
+    type: boolean
+    default: false
+  icon:
+    description: Icon identifier displayed before the message content
+    type: string
+    default: ""
+  text:
+    description: Alert message text
+    type: string
+    default: ""
+  variant:
+    description: Semantic color variant. `error` kept as alias for `danger`.
+    type: string
+    default: default
+    enum:
+      - default
+      - info
+      - success
+      - warning
+      - error
+      - danger
+      - muted
+      - neutral
+events:
+  close:
+    description: Fired when the close button is clicked
+slots:
+  default:
+    description: Rich content for the alert body
+  icon:
+    description: Custom icon element
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: alert-banner
+    description: Single alert component with icon and dismiss action.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Alert",
+          "variant": "info",
+          "icon": "info-circle",
+          "title": "System Update",
+          "description": "A new version is available. Please refresh to get the latest features.",
+          "dismissible": true
+        }
+      ]
+  - name: error-state
+    description: Card with error alert and a retry button for error state display.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "alert"
+          ]
+        },
+        {
+          "id": "alert",
+          "component": "Alert",
+          "variant": "error",
+          "title": "Something went wrong",
+          "description": "We encountered an error while loading the data. Please try again."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "retry"
+          ]
+        },
+        {
+          "id": "retry",
+          "component": "Button",
+          "text": "Retry",
+          "icon": "refresh",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - alert
+  - inbox
+  - mailbox
+  - message
+  - snackbar
+  - popup
+  - modal
+  - dialog
+  - banner
+  - warning
+  - error
+  - success
+  - info
+  - confirm
+  - notification
+  - announce
+synonyms:
+  alert:
+    - alert
+    - banner
+    - toast
+    - notification
+  announce:
+    - alert
+    - banner
+    - cta
+  banner:
+    - alert
+    - cta
+    - hero
+    - cookie
+  confirm:
+    - alert
+    - cookie
+    - consent
+  dialog:
+    - drawer
+    - alert
+    - popover
+    - panel
+  error:
+    - alert
+    - error
+    - toast
+    - empty
+  inbox:
+    - notification
+    - alert
+    - toast
+    - message
+    - email
+    - mail
+    - folder
+  info:
+    - alert
+    - toast
+    - notification
+    - tooltip
+  mailbox:
+    - notification
+    - alert
+    - message
+  message:
+    - chat
+    - notification
+    - toast
+    - alert
+  modal:
+    - drawer
+    - alert
+    - popover
+    - panel
+  notification:
+    - notification
+    - toast
+    - alert
+    - badge
+  popup:
+    - toast
+    - notification
+    - alert
+    - popover
+    - drawer
+  snackbar:
+    - toast
+    - notification
+    - alert
+  success:
+    - alert
+    - toast
+    - notification
+  warning:
+    - alert
+    - error
+    - toast
+related:
+  - button

package/components/avatar/avatar.a2ui.json

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

package/components/avatar/avatar.css

@@ -0,0 +1,159 @@
+/* ═══════════════════════════════════════════════════════════════
+   AVATAR-N — Circular image or initials
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (avatar-ui) {
+  :where(:scope) {
+    --avatar-size:        var(--a-size);
+    --avatar-bg:          var(--a-bg-muted);
+    --avatar-fg:          var(--a-fg-subtle);
+    --avatar-radius:      var(--a-radius-full);
+    --avatar-font-size:   var(--a-ui-sm);
+    --avatar-font-weight: var(--a-weight-medium);
+
+    /* Sizes */
+    --avatar-size-xs:     1.25rem;
+    --avatar-size-sm:     1.75rem;
+    --avatar-size-md:     2.5rem;
+    --avatar-size-lg:     3.5rem;
+    --avatar-size-xl:     4.5rem;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+    border-radius: var(--avatar-radius);
+    font-size: var(--avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  /* ── Image ── */
+  [slot="img"] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* ── Initials ── */
+  [slot="initials"] {
+    user-select: none;
+    text-transform: uppercase;
+    line-height: 1;
+  }
+
+  /* ── Icon (non-person avatar) ── */
+  [slot="icon"] {
+    color: var(--avatar-fg);
+    --a-icon-size: calc(var(--avatar-size) * 0.55);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ── Sizes ── */
+  :scope[size="xs"] { --avatar-size: var(--avatar-size-xs); --avatar-font-size: var(--a-ui-sm); }
+  :scope[size="sm"] { --avatar-size: var(--avatar-size-sm); --avatar-font-size: var(--a-ui-sm); }
+  :scope[size="md"] { --avatar-size: var(--avatar-size-md); --avatar-font-size: var(--a-ui-sm); }
+  :scope[size="lg"] { --avatar-size: var(--avatar-size-lg); --avatar-font-size: var(--a-ui-md); }
+  :scope[size="xl"] { --avatar-size: var(--avatar-size-xl); --avatar-font-size: var(--a-ui-lg); }
+
+  /* ── Shape ── */
+  :scope[shape="circle"] { --avatar-radius: var(--a-radius-full); }
+  :scope[shape="square"] { --avatar-radius: var(--a-radius-md); }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   AVATAR-GROUP-N — Overlapping avatar stack with +N overflow
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (avatar-group-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --avatar-group-overlap:       -0.5rem;
+    --avatar-group-spread:        var(--a-space-0-5);
+    --avatar-group-overflow-px:   var(--a-space-1);
+    --avatar-group-counter-size:  2rem;
+
+    /* ── Colors ── */
+    --avatar-group-border:        2px solid var(--a-bg);
+    --avatar-group-counter-bg:    var(--a-bg-muted);
+    --avatar-group-counter-fg:    var(--a-fg-subtle);
+    --avatar-group-counter-radius: var(--a-radius-full);
+
+    /* ── Typography ── */
+    --avatar-group-counter-font-size:   var(--a-ui-sm);
+    --avatar-group-counter-font-weight: var(--a-weight-medium);
+
+    /* ── Transition ── */
+    --avatar-group-duration-fast: var(--a-duration-fast);
+    --avatar-group-duration:      var(--a-duration);
+    --avatar-group-easing:        var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* Stack with overlap */
+  :scope > avatar-ui:not(:first-child) {
+    margin-inline-start: var(--avatar-group-overlap);
+  }
+
+  /* Ring border to separate stacked avatars */
+  :scope > avatar-ui {
+    border: var(--avatar-group-border);
+    transition:
+      transform var(--avatar-group-duration-fast) var(--avatar-group-easing),
+      margin var(--avatar-group-duration) var(--avatar-group-easing);
+  }
+
+  /* Hover: pop single avatar */
+  :scope > avatar-ui:hover {
+    transform: translateY(-2px) scale(1.05);
+    z-index: 99 !important;
+  }
+
+  /* Group hover: spread apart */
+  :scope:hover > avatar-ui:not(:first-child) {
+    margin-inline-start: var(--avatar-group-spread);
+  }
+
+  /* Overflow counter */
+  [slot="overflow"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--avatar-group-counter-size);
+    height: var(--avatar-group-counter-size);
+    margin-inline-start: var(--avatar-group-overlap);
+    padding: 0 var(--avatar-group-overflow-px);
+    background: var(--avatar-group-counter-bg);
+    color: var(--avatar-group-counter-fg);
+    border: var(--avatar-group-border);
+    border-radius: var(--avatar-group-counter-radius);
+    font-size: var(--avatar-group-counter-font-size);
+    font-weight: var(--avatar-group-counter-font-weight);
+    white-space: nowrap;
+    transition: margin var(--avatar-group-duration) var(--avatar-group-easing);
+  }
+
+  :scope:hover > [slot="overflow"] {
+    margin-inline-start: var(--avatar-group-spread);
+  }
+
+  /* Size variants — adjust counter + overlap */
+  :scope[size="xs"] { --avatar-group-counter-size: 1.25rem; --avatar-group-overlap: -0.3rem; }
+  :scope[size="sm"] { --avatar-group-counter-size: 1.75rem; --avatar-group-overlap: -0.4rem; }
+  :scope[size="lg"] { --avatar-group-counter-size: 3.5rem;  --avatar-group-overlap: -0.625rem; }
+  :scope[size="xl"] { --avatar-group-counter-size: 4.5rem;  --avatar-group-overlap: -0.75rem; }
+}