@adia-ai/web-components 0.0.1

package/components/timeline/timeline.yaml

@@ -0,0 +1,185 @@
+# 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: AdiaTimeline
+tag: timeline-ui
+component: Timeline
+category: display
+version: 1
+description: "Timeline and step wizard. Two modes: timeline (per-item state) and steps (parent-driven)."
+props:
+  mode:
+    description: Display mode
+    type: string
+    default: timeline
+    enum:
+      - timeline
+      - steps
+  orientation:
+    description: Layout direction
+    type: string
+    default: vertical
+    enum:
+      - vertical
+      - horizontal
+  step:
+    description: Current step index (steps mode)
+    type: number
+    default: 0
+events: {}
+slots:
+  default:
+    description: Accepts <timeline-item-ui> children.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: order-tracking
+    description: Order tracking card with a timeline showing order status milestones from placed to delivered.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "variant": "span",
+          "textContent": "Order #12345"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "textContent": "Estimated delivery: April 20, 2026"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "gap": "4",
+          "children": [
+            "info",
+            "tl"
+          ]
+        },
+        {
+          "id": "info",
+          "component": "Row",
+          "gap": "4",
+          "children": [
+            "status",
+            "carrier"
+          ]
+        },
+        {
+          "id": "status",
+          "component": "Column",
+          "gap": "0",
+          "children": [
+            "sl",
+            "sv"
+          ]
+        },
+        {
+          "id": "sl",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Status"
+        },
+        {
+          "id": "sv",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "In Transit"
+        },
+        {
+          "id": "carrier",
+          "component": "Column",
+          "gap": "0",
+          "children": [
+            "cl",
+            "cv"
+          ]
+        },
+        {
+          "id": "cl",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Carrier"
+        },
+        {
+          "id": "cv",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "FedEx Express"
+        },
+        {
+          "id": "tl",
+          "component": "Timeline",
+          "children": [
+            "t1",
+            "t2",
+            "t3",
+            "t4"
+          ]
+        },
+        {
+          "id": "t1",
+          "component": "TimelineItem",
+          "text": "Order Placed",
+          "description": "April 15, 2026 at 2:30 PM",
+          "color": "success"
+        },
+        {
+          "id": "t2",
+          "component": "TimelineItem",
+          "text": "Processing",
+          "description": "April 16, 2026 at 9:00 AM",
+          "color": "success"
+        },
+        {
+          "id": "t3",
+          "component": "TimelineItem",
+          "text": "Shipped",
+          "description": "April 17, 2026 at 11:45 AM",
+          "color": "primary"
+        },
+        {
+          "id": "t4",
+          "component": "TimelineItem",
+          "text": "Delivered",
+          "description": "Expected April 20, 2026",
+          "color": "muted"
+        }
+      ]
+keywords:
+  - timeline
+synonyms: {}
+related:
+  - timeline-item

package/components/toast/toast.a2ui.json

@@ -0,0 +1,199 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Toast.json",
+  "title": "Toast",
+  "description": "Notification popup with auto-dismiss. Animated enter/exit.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "closable": {
+      "description": "When true, renders a dismiss button.",
+      "type": "boolean",
+      "default": true
+    },
+    "component": {
+      "const": "Toast"
+    },
+    "duration": {
+      "description": "Auto-dismiss time in milliseconds. 0 disables auto-dismiss.",
+      "type": "number",
+      "default": 4000
+    },
+    "icon": {
+      "description": "Leading Phosphor icon name; when omitted, defaults from `variant` (success → check, danger → x, etc.).",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Controls visibility and triggers auto-dismiss timer",
+      "type": "boolean",
+      "default": false
+    },
+    "position": {
+      "description": "Screen position",
+      "type": "string",
+      "enum": [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right"
+      ],
+      "default": "bottom-right"
+    },
+    "text": {
+      "description": "Toast message text",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Color variant. `error` kept as alias for `danger`.",
+      "type": "string",
+      "enum": [
+        "default",
+        "success",
+        "warning",
+        "error",
+        "info",
+        "danger",
+        "primary",
+        "muted",
+        "neutral"
+      ],
+      "default": "info"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "close": {
+        "description": "Fired when the toast is dismissed via click or auto-timeout"
+      }
+    },
+    "examples": [
+      {
+        "description": "Column of three toast notification components showing success, warning, and error variants.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"t1\",\n      \"t2\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Toast\",\n    \"variant\": \"success\",\n    \"title\": \"Saved successfully\",\n    \"description\": \"Your changes have been saved.\",\n    \"dismissible\": true\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Toast\",\n    \"variant\": \"warning\",\n    \"title\": \"Storage almost full\",\n    \"description\": \"You are using 90% of your available storage.\",\n    \"dismissible\": true\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Toast\",\n    \"variant\": \"error\",\n    \"title\": \"Upload failed\",\n    \"description\": \"The file could not be uploaded. Please try again.\",\n    \"dismissible\": true\n  }\n]",
+        "name": "toast-notification"
+      }
+    ],
+    "keywords": [
+      "toast",
+      "inbox",
+      "message",
+      "snackbar",
+      "popup",
+      "warning",
+      "error",
+      "success",
+      "info",
+      "notification",
+      "remind",
+      "alert"
+    ],
+    "name": "AdiaToast",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "alert": [
+        "alert",
+        "banner",
+        "toast",
+        "notification"
+      ],
+      "error": [
+        "alert",
+        "error",
+        "toast",
+        "empty"
+      ],
+      "inbox": [
+        "notification",
+        "alert",
+        "toast",
+        "message",
+        "email",
+        "mail",
+        "folder"
+      ],
+      "info": [
+        "alert",
+        "toast",
+        "notification",
+        "tooltip"
+      ],
+      "message": [
+        "chat",
+        "notification",
+        "toast",
+        "alert"
+      ],
+      "notification": [
+        "notification",
+        "toast",
+        "alert",
+        "badge"
+      ],
+      "popup": [
+        "toast",
+        "notification",
+        "alert",
+        "popover",
+        "drawer"
+      ],
+      "remind": [
+        "notification",
+        "toast",
+        "calendar"
+      ],
+      "snackbar": [
+        "toast",
+        "notification",
+        "alert"
+      ],
+      "success": [
+        "alert",
+        "toast",
+        "notification"
+      ],
+      "warning": [
+        "alert",
+        "error",
+        "toast"
+      ]
+    },
+    "tag": "toast-ui",
+    "tokens": {
+      "--toast-background": {
+        "description": "Override background color"
+      },
+      "--toast-border-color": {
+        "description": "Override border color"
+      },
+      "--toast-foreground": {
+        "description": "Override text color"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/toast/toast.css

@@ -0,0 +1,211 @@
+/* ═══════════════════════════════════════════════════════════════
+   TOAST-N — Notification popup with auto-dismiss.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (toast-ui) {
+  :where(:scope) {
+    --toast-bg:       var(--a-bg-subtle);
+    --toast-fg:       var(--a-fg);
+    --toast-radius:   var(--a-radius-md);
+    --toast-shadow:   var(--a-shadow-lg);
+    --toast-duration: var(--a-duration);
+    --toast-easing:   var(--a-easing-out);
+    --toast-pad-x:    var(--a-space-4);
+    --toast-pad-y:    var(--a-space-3);
+    --toast-border:   var(--a-border-subtle);
+    --toast-max-width: 24rem;
+    --toast-gap:      var(--a-space-3);
+
+    /* ── Typography ── */
+    --toast-font:     var(--a-font-family);
+    --toast-size:     var(--a-ui-md);
+
+    /* ── Position offset ── */
+    --toast-offset:   var(--a-space-4);
+
+    /* ── Close button ── */
+    --toast-close-duration: var(--a-duration-fast);
+    --toast-close-easing:   var(--a-easing);
+    --toast-focus-ring:     var(--a-focus-ring);
+    --toast-focus-radius:   var(--a-radius-sm);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    gap: var(--toast-gap);
+    max-width: var(--toast-max-width);
+    padding: var(--toast-pad-y) var(--toast-pad-x);
+    background: var(--toast-bg);
+    color: var(--toast-fg);
+    font-family: var(--toast-font);
+    font-size: var(--toast-size);
+    border: 1px solid var(--toast-border);
+    border-radius: var(--toast-radius);
+    box-shadow: var(--toast-shadow);
+    opacity: 0;
+    pointer-events: auto;
+  }
+
+  /* ── Position variants ── */
+
+  :where(:scope),
+  :where(:scope[position="bottom-right"]) {
+    bottom: var(--toast-offset);
+    right: var(--toast-offset);
+    transform: translateY(1rem);
+  }
+  :where(:scope[position="bottom-left"]) {
+    bottom: var(--toast-offset);
+    left: var(--toast-offset);
+    right: auto;
+    transform: translateY(1rem);
+  }
+  :where(:scope[position="top-right"]) {
+    top: var(--toast-offset);
+    right: var(--toast-offset);
+    bottom: auto;
+    transform: translateY(-1rem);
+  }
+  :where(:scope[position="top-left"]) {
+    top: var(--toast-offset);
+    left: var(--toast-offset);
+    right: auto;
+    bottom: auto;
+    transform: translateY(-1rem);
+  }
+
+  /* ── Enter animation ── */
+
+  :scope[data-open] {
+    transition: transform var(--toast-duration) var(--toast-easing),
+                opacity var(--toast-duration) var(--toast-easing);
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ── Exit animation ── */
+
+  :scope[data-closing] {
+    transition: transform var(--toast-duration) var(--toast-easing),
+                opacity var(--toast-duration) var(--toast-easing);
+    opacity: 0;
+  }
+
+  :where(:scope[data-closing]),
+  :where(:scope[data-closing][position="bottom-right"]),
+  :where(:scope[data-closing][position="bottom-left"]) {
+    transform: translateY(1rem);
+  }
+  :where(:scope[data-closing][position="top-right"]),
+  :where(:scope[data-closing][position="top-left"]) {
+    transform: translateY(-1rem);
+  }
+
+  /* ── Variant: info (default) ── */
+
+  :where(:scope),
+  :where(:scope[variant="info"]) {
+    --toast-bg: var(--a-info-muted);
+    --toast-fg: var(--a-info-text-strong);
+    --toast-border: var(--a-info-border-subtle);
+  }
+
+  /* ── Variant: success ── */
+
+  :where(:scope[variant="success"]) {
+    --toast-bg: var(--a-success-muted);
+    --toast-fg: var(--a-success-text-strong);
+    --toast-border: var(--a-success-border-subtle);
+  }
+
+  /* ── Variant: warning ── */
+
+  :where(:scope[variant="warning"]) {
+    --toast-bg: var(--a-warning-muted);
+    --toast-fg: var(--a-warning-text-strong);
+    --toast-border: var(--a-warning-border-subtle);
+  }
+
+  /* ── Variant: danger ── */
+
+  :where(:scope[variant="danger"]) {
+    --toast-bg: var(--a-danger-muted);
+    --toast-fg: var(--a-danger-text-strong);
+    --toast-border: var(--a-danger-border-subtle);
+  }
+
+  /* ── Message slot ── */
+
+  [slot="message"] {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ── Close button ── */
+
+  [slot="close"] {
+    background: none;
+    border: none;
+    font-size: 0.875rem;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    opacity: 0.6;
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-top: 0.125rem;
+    transition: opacity var(--toast-close-duration) var(--toast-close-easing);
+  }
+  [slot="close"]::after { content: '\00d7'; }
+  [slot="close"]:hover { opacity: 1; }
+  [slot="close"]:focus-visible { box-shadow: var(--toast-focus-ring); border-radius: var(--toast-focus-radius); }
+
+  /* Inside a container: drop fixed positioning */
+  [data-toast-container] > :scope {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+}
+
+/* ── Top-layer: cannot inherit component tokens ── */
+/* ── Toast container — stacks toasts vertically ── */
+[data-toast-container] {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-2);
+  pointer-events: none;
+}
+
+[data-toast-container="bottom-right"] {
+  bottom: var(--a-space-4);
+  right: var(--a-space-4);
+  align-items: flex-end;
+}
+
+[data-toast-container="bottom-left"] {
+  bottom: var(--a-space-4);
+  left: var(--a-space-4);
+  align-items: flex-start;
+}
+
+[data-toast-container="top-right"] {
+  top: var(--a-space-4);
+  right: var(--a-space-4);
+  align-items: flex-end;
+}
+
+[data-toast-container="top-left"] {
+  top: var(--a-space-4);
+  left: var(--a-space-4);
+  align-items: flex-start;
+}