@adia-ai/web-components 0.0.1

package/components/card/card.js

@@ -0,0 +1,58 @@
+/**
+ * <card-ui> — Bordered container with header, body, and footer.
+ *
+ * Usage:
+ *   <card-ui>
+ *     <header>
+ *       <span slot="heading">Title</span>
+ *       <span slot="description">Subtitle text</span>
+ *       <button-ui slot="action" variant="ghost" icon="dots-three"></button-ui>
+ *     </header>
+ *     <section>Body content</section>
+ *     <footer>
+ *       <span slot="description">Footer note</span>
+ *       <button-ui slot="action" text="Save" variant="primary"></button-ui>
+ *     </footer>
+ *   </card-ui>
+ *
+ * Attributes:
+ *   variant   — "default" | "outlined" | "filled" | "ghost"
+ *   size      — "sm" | "md" | "lg" (controls padding + font scale)
+ *   elevation — 0-3 (shadow depth)
+ *   raw       — strips all chrome (border, bg, shadow, padding)
+ *   draggable — enables drag handle + cursor:grab; wires the draggable trait
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { draggable } from '@traits/draggable.js';
+
+class AdiaCard extends AdiaElement {
+  static properties = {
+    variant:   { type: String,  default: 'default', reflect: true },
+    size:      { type: String,  default: '',         reflect: true },
+    elevation: { type: Number,  default: 1,          reflect: true },
+    raw:       { type: Boolean, default: false,       reflect: true },
+    draggable: { type: Boolean, default: false,       reflect: true },
+  };
+
+  static template = () => null;
+
+  #dragAttached = false;
+
+  connected() {
+    if (this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('draggable') && this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+}
+
+customElements.define('card-ui', AdiaCard);
+export { AdiaCard };

package/components/card/card.yaml

@@ -0,0 +1,527 @@
+# 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: AdiaCard
+tag: card-ui
+component: Card
+category: container
+version: 1
+description: >-
+  Bordered container with header, body, and footer sections. The nested <header>
+  activates a 3-column grid when any direct [slot="icon|heading|description|action"]
+  child is present (icon column | heading + description stack | action column).
+  Slot-gating uses :has(> [slot="…"]) (direct-child only) so a nested slot inside a
+  composite child — e.g. <avatar-ui> owning an internal <icon-ui slot="icon"> — does not
+  falsely activate the icon column. The nested <footer> flex-rows with a
+  [slot="description"] + [slot="action"] space-between pattern; multiple <section>
+  siblings stack as the body.
+props:
+  padding:
+    description: >-
+      Interior padding scale (overrides --card-padding). Accepts the named
+      scale (none/xs/sm/md/lg/xl) or a numeric rung ("1"…"16").
+    type: string
+    default: md
+  interactive:
+    description: Marks the card as clickable — enables hover elevation, pointer cursor, and focus ring.
+    type: boolean
+    default: false
+    reflect: true
+  radius:
+    description: Border radius preset (overrides --card-radius). Named (none/sm/md/lg/round) or numeric.
+    type: string
+    default: ""
+  density:
+    description: Interior density — compact/comfortable/spacious. Tightens or loosens padding + gap.
+    type: string
+    default: ""
+    enum: ["", compact, comfortable, spacious]
+  draggable:
+    description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
+    type: boolean
+    default: false
+    reflect: true
+  elevation:
+    description: Shadow depth 0-3
+    type: number
+    default: 1
+    enum:
+      - 0
+      - 1
+      - 2
+      - 3
+  raw:
+    description: Strips background, border, and shadow. Parent owns the surface. Content structure still
+      applies.
+    type: boolean
+    default: false
+    reflect: true
+  size:
+    description: Card scale. Controls inset, radius, gap, and font sizes. Default (empty) = md.
+    type: string
+    default: ""
+    enum:
+      - sm
+      - md
+      - lg
+  variant:
+    description: Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted surfaces.
+    type: string
+    default: default
+    enum:
+      - default
+      - outlined
+      - outline
+      - filled
+      - ghost
+      - flat
+      - soft
+      - primary
+events:
+  drag-end:
+    description: "Fired when a drag completes."
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --card-background:
+    description: Override surface background
+  --card-border-color:
+    description: Override border color
+  --card-description-color:
+    description: Override description color
+  --card-divider-color:
+    description: Override divider border color
+  --card-heading-color:
+    description: Override heading color
+  --card-heading-size:
+    description: Override heading text size
+  --card-inset:
+    description: Override --inset for all children
+  --card-radius:
+    description: Override border radius
+  --card-shadow:
+    description: Override box-shadow
+  --card-text-color:
+    description: Override body text color
+  --card-text-size:
+    description: Override body text size
+a2ui:
+  rules:
+    - >-
+      The card's <header> grid activates only for DIRECT-child slotted elements. If
+      you need an icon column, place the icon element (avatar-ui, icon-ui) directly in
+      the header with slot="icon" — not inside a wrapper.
+    - >-
+      Heading slot accepts inline badges/metadata: <span slot="heading"><text-ui
+      strong>Title</text-ui><badge-ui text="New" variant="accent"></badge-ui></span>
+      renders title + badge on one row.
+    - >-
+      Description slot also accepts bare <p> or <small> elements as siblings of the
+      heading — they participate in the grid's row 2 without needing slot="description".
+    - >-
+      Multiple <section> siblings are allowed and stack vertically. [bleed] on a
+      section removes its margin for edge-to-edge content (tables, charts);
+      [padding] adds a canvas-scrim background for hero regions.
+    - >-
+      Footer with a [slot="description"] + [slot="action"] pair triggers
+      justify-content: space-between — useful for a "Last saved …" note on the left
+      and a Save/Cancel button group on the right.
+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: command-palette
+    description: Command palette card with search input and a list of command options.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "search"
+          ]
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Type a command or search...",
+          "icon": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "opt1",
+            "opt2",
+            "opt3",
+            "opt4",
+            "opt5"
+          ]
+        },
+        {
+          "id": "opt1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i1",
+            "l1"
+          ]
+        },
+        {
+          "id": "i1",
+          "component": "Icon",
+          "name": "file"
+        },
+        {
+          "id": "l1",
+          "component": "Text",
+          "textContent": "Open File"
+        },
+        {
+          "id": "opt2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i2",
+            "l2"
+          ]
+        },
+        {
+          "id": "i2",
+          "component": "Icon",
+          "name": "gear"
+        },
+        {
+          "id": "l2",
+          "component": "Text",
+          "textContent": "Settings"
+        },
+        {
+          "id": "opt3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i3",
+            "l3"
+          ]
+        },
+        {
+          "id": "i3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "l3",
+          "component": "Text",
+          "textContent": "Change Theme"
+        },
+        {
+          "id": "opt4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i4",
+            "l4"
+          ]
+        },
+        {
+          "id": "i4",
+          "component": "Icon",
+          "name": "users"
+        },
+        {
+          "id": "l4",
+          "component": "Text",
+          "textContent": "Manage Users"
+        },
+        {
+          "id": "opt5",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i5",
+            "l5"
+          ]
+        },
+        {
+          "id": "i5",
+          "component": "Icon",
+          "name": "sign-out"
+        },
+        {
+          "id": "l5",
+          "component": "Text",
+          "textContent": "Sign Out"
+        }
+      ]
+keywords:
+  - card
+  - ecommerce
+  - shop
+  - store
+  - marketplace
+  - catalog
+  - overview
+  - summary
+  - grid
+  - photos
+  - pictures
+  - gallery
+  - portfolio
+  - responsive
+synonyms:
+  catalog:
+    - product
+    - card
+    - image
+    - grid
+    - inventory
+  ecommerce:
+    - product
+    - pricing
+    - inventory
+    - card
+    - image
+    - grid
+  gallery:
+    - image
+    - gallery
+    - card
+    - grid
+  grid:
+    - table
+    - data
+    - card
+    - image
+    - feature
+    - grid
+  marketplace:
+    - product
+    - pricing
+    - card
+    - image
+    - grid
+    - search
+    - filter
+  overview:
+    - dashboard
+    - metric
+    - stat
+    - card
+  photos:
+    - image
+    - gallery
+    - card
+    - grid
+  pictures:
+    - image
+    - gallery
+    - card
+    - grid
+  portfolio:
+    - image
+    - gallery
+    - card
+    - grid
+    - feature
+  responsive:
+    - split
+    - sidebar
+    - grid
+    - card
+  shop:
+    - product
+    - pricing
+    - inventory
+    - card
+  store:
+    - product
+    - pricing
+    - inventory
+    - card
+    - image
+  summary:
+    - dashboard
+    - metric
+    - stat
+    - card
+related:
+  - avatar
+  - input
+  - button
+  - alert
+  - skeleton