@adia-ai/web-components 0.0.1

package/components/button/button.a2ui.json

@@ -0,0 +1,172 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Button.json",
+  "title": "Button",
+  "description": "Clickable button with text, icon, and variant support. Supports submit type for forms.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "type": {
+      "description": "HTML button type (button, submit, reset)",
+      "type": "string",
+      "default": "button"
+    },
+    "active": {
+      "description": "Indicates an active/pressed toggle state (for group-buttons and segmented controls).",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Button"
+    },
+    "disabled": {
+      "description": "Disables interaction and prevents click/press events",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Leading Phosphor icon name (rendered before text).",
+      "type": "string",
+      "default": ""
+    },
+    "iconRight": {
+      "description": "Trailing Phosphor icon name (rendered after text).",
+      "type": "string",
+      "default": ""
+    },
+    "size": {
+      "description": "Sizing scale (xs/sm/md/lg/xl).",
+      "type": "string",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "stretch": {
+      "description": "Makes the button stretch to fill the parent's width",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Button text, rendered via CSS attr(text) on ::after",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual style variant. `default` is the base style; `link` renders the button as underlined text for inline actions.",
+      "type": "string",
+      "enum": [
+        "default",
+        "solid",
+        "outline",
+        "outlined",
+        "ghost",
+        "danger",
+        "primary",
+        "secondary",
+        "soft",
+        "current",
+        "link"
+      ],
+      "default": "solid"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "action",
+    "events": {
+      "press": {
+        "description": "Fired on complete press (pointer up or Enter/Space)"
+      }
+    },
+    "examples": [],
+    "keywords": [],
+    "name": "AdiaButton",
+    "related": [],
+    "slots": {
+      "leading": {
+        "description": "Icon container (start), sized to --content-height"
+      },
+      "trailing": {
+        "description": "Icon container (end), sized to --content-height"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Keyboard focus ring.",
+        "name": "focused",
+        "selector": ":focus-visible"
+      },
+      {
+        "description": "Pointer over; affordance.",
+        "name": "hover",
+        "selector": ":hover"
+      },
+      {
+        "description": "Active pointer down.",
+        "name": "pressed",
+        "selector": ":active"
+      }
+    ],
+    "synonyms": {},
+    "tag": "button-ui",
+    "tokens": {
+      "--button-background": {
+        "description": "Override background color"
+      },
+      "--button-border-color": {
+        "description": "Override border color"
+      },
+      "--button-content-height": {
+        "description": "Override icon slot height"
+      },
+      "--button-font-size": {
+        "description": "Override font size"
+      },
+      "--button-font-weight": {
+        "description": "Override font weight"
+      },
+      "--button-foreground": {
+        "description": "Override text color"
+      },
+      "--button-padding": {
+        "description": "Override base padding"
+      },
+      "--button-radius": {
+        "description": "Override border radius"
+      },
+      "--density": {
+        "description": "Inherited multiplier for padding"
+      }
+    },
+    "traits": [
+      "pressable",
+      "focusable"
+    ],
+    "version": 1
+  }
+}

package/components/button/button.css

@@ -0,0 +1,168 @@
+@scope (button-ui) {
+  :where(:scope) {
+    --button-bg:               var(--a-ui-bg);
+    --button-fg:               var(--a-ui-text);
+    --button-border:           transparent;
+    --button-height:           var(--a-size);
+    --button-px:               var(--a-ui-px);
+    --button-radius:           var(--a-radius);
+    --button-font-size:        var(--a-ui-size);
+    --button-font-weight:      var(--a-ui-weight);
+    --button-gap:              var(--a-space-1);
+    --button-bg-hover:         var(--a-ui-bg-hover);
+    --button-fg-hover:         var(--a-ui-text-hover);
+    --button-border-hover:     transparent;
+    --button-bg-primary:       var(--a-primary);
+    --button-fg-primary:       white;
+    --button-bg-outline:       transparent;
+    --button-fg-outline:       var(--a-fg);
+    --button-border-outline:   var(--a-ui-border);
+    --button-bg-ghost:         transparent;
+    --button-fg-ghost:         var(--a-fg-subtle);
+    --button-fg-ghost-hover:   var(--a-fg-strong);
+    --button-bg-ghost-hover:   var(--a-bg-hover);
+    --button-border-ghost:     transparent;
+    --button-border-ghost-hover: transparent;
+    --button-bg-danger:        var(--a-danger);
+    --button-fg-danger:        var(--a-danger-fg);
+    --button-bg-hover-danger:  var(--a-danger);
+    --button-bg-disabled:      var(--a-ui-bg-disabled);
+    --button-fg-disabled:      var(--a-ui-text-disabled);
+    --button-border-disabled:  transparent;
+
+    /* ── Transition ── */
+    --button-duration:         var(--a-duration-fast);
+    --button-easing:           var(--a-easing);
+
+    /* ── State ── */
+    --button-focus-ring:       var(--a-focus-ring);
+
+    /* ── Trailing slot ── */
+    --button-trailing-font-size:  var(--a-ui-sm);
+    --button-trailing-fg:         var(--a-fg-muted);
+    --button-trailing-border:     var(--a-border-subtle);
+    --button-trailing-radius:     var(--a-radius-sm);
+    --button-trailing-px:         var(--a-space-0-5);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap);
+    min-width: var(--button-height);   /* keep button at least as wide as it is tall */
+    min-height: var(--button-height);
+    overflow: hidden;
+    padding-inline: var(--button-px);
+    border: 1px solid var(--button-border);
+    border-radius: var(--button-radius);
+    background: var(--button-bg);
+    color: var(--button-fg);
+    font: inherit;
+    font-size: var(--button-font-size);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--button-duration) var(--button-easing),
+      border-color var(--button-duration) var(--button-easing),
+      color var(--button-duration) var(--button-easing),
+      opacity var(--button-duration) var(--button-easing),
+      transform var(--button-duration) var(--button-easing);
+    white-space: nowrap;
+  }
+  :scope[text]::after {
+    content: attr(text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  /* Trailing slot */
+  [slot="trailing"] {
+    order: 99;
+    margin-inline-start: auto;
+    font-size: var(--button-trailing-font-size);
+    color: var(--button-trailing-fg);
+    font-family: inherit;
+    border: 1px solid var(--button-trailing-border);
+    border-radius: var(--button-trailing-radius);
+    padding: 0 var(--button-trailing-px);
+    line-height: 1;
+  }
+
+  :scope:active { transform: scale(0.97); }
+  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
+
+  /* ── Variants (rest state) ── */
+  :scope[variant="primary"] {
+    --button-bg: var(--button-bg-primary);
+    --button-fg: var(--button-fg-primary);
+  }
+
+  :scope[variant="outline"] {
+    --button-bg: var(--button-bg-outline);
+    --button-fg: var(--button-fg-outline);
+    --button-border: var(--button-border-outline);
+  }
+
+  :scope[variant="ghost"] {
+    --button-bg: var(--button-bg-ghost);
+    --button-fg: var(--button-fg-ghost);
+    --button-border: var(--button-border-ghost);
+  }
+
+  :scope[variant="danger"] {
+    --button-bg: var(--button-bg-danger);
+    --button-fg: var(--button-fg-danger);
+  }
+
+  /* ── Hover (after variants so it wins on specificity via :hover) ── */
+  :scope:not([disabled]):hover,
+  :scope[variant="primary"]:not([disabled]):hover {
+    --button-bg: var(--button-bg-hover);
+    --button-fg: var(--button-fg-hover);
+    --button-border: var(--button-border-hover);
+  }
+
+  :scope[variant="ghost"]:not([disabled]):hover {
+    --button-bg: var(--button-bg-ghost-hover);
+    --button-fg: var(--button-fg-ghost-hover);
+    --button-border: var(--button-border-ghost-hover);
+  }
+
+  :scope[variant="outline"]:not([disabled]):hover {
+    --button-fg: var(--button-fg-hover);
+    --button-border: var(--button-border-hover);
+  }
+
+  :scope[variant="danger"]:not([disabled]):hover {
+    --button-bg: var(--button-bg-hover);
+    --button-fg: var(--button-fg-hover);
+    --button-border: var(--button-border-hover);
+  }
+
+  /* Size is handled by the universal [size] attribute system
+     which sets --a-size, --a-ui-px, --a-ui-size.
+     Button reads these via its token defaults above. */
+
+  /* Stretch — full-width */
+  :scope[stretch] { width: stretch; }
+
+  /* Disabled */
+  :scope[disabled] {
+    --button-bg: var(--button-bg-disabled);
+    --button-fg: var(--button-fg-disabled);
+    --button-border: var(--button-border-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  /* Icon-only (no text) */
+  :scope:not([text]), :scope[text=""] {
+    --button-px: 0;
+    width: var(--button-height);
+  }
+}

package/components/button/button.js

@@ -0,0 +1,60 @@
+import { AdiaElement, signal, html } from '@core/element.js';
+import { getIcon } from '@core/icons.js';
+
+class AdiaButton extends AdiaElement {
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    variant:  { type: String,  default: 'solid', reflect: true },
+    size:     { type: String,  default: 'md', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+    stretch:  { type: Boolean, default: false, reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    type:     { type: String,  default: 'button', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'button');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    this.setAttribute('aria-label', this.text || '');
+    if (this.icon) {
+      const existing = this.querySelector('icon-ui');
+      if (!existing || existing.name !== this.icon) {
+        if (existing) existing.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        this.prepend(iconEl);
+      }
+    }
+  }
+
+  #onClick = (e) => {
+    if (this.disabled) { e.stopPropagation(); return; }
+    if (this.type === 'submit') {
+      const form = this.closest('form, form-container-n');
+      if (form?.requestSubmit) form.requestSubmit();
+    }
+    this.dispatchEvent(new Event('press', { bubbles: true }));
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.click();
+    }
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+customElements.define('button-ui', AdiaButton);
+
+export { AdiaButton };

package/components/button/button.yaml

@@ -0,0 +1,120 @@
+# 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: AdiaButton
+tag: button-ui
+component: Button
+category: action
+version: 1
+description: Clickable button with text, icon, and variant support. Supports submit type for forms.
+props:
+  type:
+    description: HTML button type (button, submit, reset)
+    type: string
+    default: button
+  active:
+    description: Indicates an active/pressed toggle state (for group-buttons and segmented controls).
+    type: boolean
+    default: false
+    reflect: true
+  stretch:
+    description: "Makes the button stretch to fill the parent's width"
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction and prevents click/press events
+    type: boolean
+    default: false
+    reflect: true
+  icon:
+    description: Leading Phosphor icon name (rendered before text).
+    type: string
+    default: ""
+  iconRight:
+    description: Trailing Phosphor icon name (rendered after text).
+    type: string
+    default: ""
+    attribute: icon-right
+  size:
+    description: "Sizing scale (xs/sm/md/lg/xl)."
+    type: string
+    default: md
+    enum:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+  text:
+    description: Button text, rendered via CSS attr(text) on ::after
+    type: string
+    default: ""
+  variant:
+    description: Visual style variant. `default` is the base style; `link` renders the button as underlined text for inline actions.
+    type: string
+    default: solid
+    enum:
+      - default
+      - solid
+      - outline
+      - outlined
+      - ghost
+      - danger
+      - primary
+      - secondary
+      - soft
+      - current
+      - link
+events:
+  press:
+    description: Fired on complete press (pointer up or Enter/Space)
+slots:
+  leading:
+    description: Icon container (start), sized to --content-height
+  trailing:
+    description: Icon container (end), sized to --content-height
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+  - name: focused
+    description: Keyboard focus ring.
+    selector: :focus-visible
+  - name: hover
+    description: Pointer over; affordance.
+    selector: :hover
+  - name: pressed
+    description: Active pointer down.
+    selector: :active
+traits:
+  - pressable
+  - focusable
+tokens:
+  --button-background:
+    description: Override background color
+  --button-border-color:
+    description: Override border color
+  --button-content-height:
+    description: Override icon slot height
+  --button-font-size:
+    description: Override font size
+  --button-font-weight:
+    description: Override font weight
+  --button-foreground:
+    description: Override text color
+  --button-padding:
+    description: Override base padding
+  --button-radius:
+    description: Override border radius
+  --density:
+    description: Inherited multiplier for padding
+a2ui:
+  rules: []
+anti_patterns: []
+examples: []
+keywords: []
+synonyms: {}
+related: []

package/components/calendar-picker/calendar-picker.a2ui.json

@@ -0,0 +1,139 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/CalendarPicker.json",
+  "title": "CalendarPicker",
+  "description": "Date picker with trigger button and popover calendar grid. Form-associated.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Required for validation",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "CalendarPicker"
+    },
+    "disabled": {
+      "description": "Disables interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "format": {
+      "description": "Display format for the selected date",
+      "type": "string",
+      "enum": [
+        "short",
+        "long",
+        "iso"
+      ],
+      "default": "short"
+    },
+    "label": {
+      "description": "Label text displayed above the trigger",
+      "type": "string",
+      "default": ""
+    },
+    "max": {
+      "description": "Maximum selectable date in ISO format (YYYY-MM-DD)",
+      "type": "string",
+      "default": ""
+    },
+    "min": {
+      "description": "Minimum selectable date in ISO format (YYYY-MM-DD)",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Whether the calendar popover is open",
+      "type": "boolean",
+      "default": false
+    },
+    "placeholder": {
+      "description": "Placeholder text when no date is selected",
+      "type": "string",
+      "default": "Select date..."
+    },
+    "value": {
+      "description": "Selected date (ISO string)",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when a date is selected"
+      }
+    },
+    "examples": [
+      {
+        "description": "Date and time picker form with calendar picker and time selects.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"name\",\n      \"cal\",\n      \"btn\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"name\",\n    \"component\": \"Input\",\n    \"label\": \"Event Name\"\n  },\n  {\n    \"id\": \"cal\",\n    \"component\": \"CalendarPicker\",\n    \"label\": \"Date\"\n  },\n  {\n    \"id\": \"btn\",\n    \"component\": \"Button\",\n    \"text\": \"Schedule\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "date-picker"
+      },
+      {
+        "description": "Date range selection form with start/end calendar pickers, quick-pick badges, and apply button.",
+        "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\": \"Select Dates\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"fields\"\n    ]\n  },\n  {\n    \"id\": \"fields\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"calendars-row\",\n      \"quick-picks\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"calendars-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"start-cal\",\n      \"end-cal\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"start-cal\",\n    \"component\": \"CalendarPicker\",\n    \"label\": \"Start Date\",\n    \"name\": \"startDate\"\n  },\n  {\n    \"id\": \"end-cal\",\n    \"component\": \"CalendarPicker\",\n    \"label\": \"End Date\",\n    \"name\": \"endDate\"\n  },\n  {\n    \"id\": \"quick-picks\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"pick-today\",\n      \"pick-week\",\n      \"pick-month\",\n      \"pick-quarter\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"pick-today\",\n    \"component\": \"Badge\",\n    \"textContent\": \"Today\"\n  },\n  {\n    \"id\": \"pick-week\",\n    \"component\": \"Badge\",\n    \"textContent\": \"This Week\"\n  },\n  {\n    \"id\": \"pick-month\",\n    \"component\": \"Badge\",\n    \"textContent\": \"This Month\"\n  },\n  {\n    \"id\": \"pick-quarter\",\n    \"component\": \"Badge\",\n    \"textContent\": \"This Quarter\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"apply-btn\"\n    ]\n  },\n  {\n    \"id\": \"apply-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Apply\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "date-range-picker"
+      }
+    ],
+    "keywords": [
+      "calendarpicker",
+      "calendar-picker",
+      "calendar",
+      "picker"
+    ],
+    "name": "AdiaCalendarPicker",
+    "related": [
+      "input",
+      "button",
+      "badge"
+    ],
+    "slots": {
+      "calendar": {
+        "description": "Popover container for the month grid"
+      },
+      "label": {
+        "description": "Label element above the trigger"
+      },
+      "trigger": {
+        "description": "Combobox button that opens the calendar popover"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "calendar-picker-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}