@adia-ai/web-components 0.0.1

package/components/toast/toast.js

@@ -0,0 +1,146 @@
+/**
+ * <toast-ui> — Notification popup.
+ *
+ * Positioned fixed, auto-dismisses after a configurable duration.
+ * Animated enter/exit via translateY + opacity.
+ *
+ * Usage (declarative):
+ *   <toast-ui text="Saved!" variant="success"></toast-ui>
+ *
+ * Usage (imperative):
+ *   AdiaToast.show({ text: 'Saved!', variant: 'success', duration: 3000 });
+ *
+ * Events:
+ *   close — fired after the toast finishes its exit animation
+ */
+
+import { AdiaElement, html } from '@core/element.js';
+
+class AdiaToast extends AdiaElement {
+  #timer = null;
+  #removing = false;
+  #closeTimer = null;
+  #openRaf = null;
+
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    variant:  { type: String,  default: 'info', reflect: true },
+    duration: { type: Number,  default: 4000, reflect: true },
+    position: { type: String,  default: 'bottom-right', reflect: true },
+  };
+
+  static parts = {
+    message: '<div slot="message"></div>',
+    close:   '<span slot="close" role="button" tabindex="0" aria-label="Dismiss"></span>',
+  };
+
+  static template = () => html``;
+
+  #onClick = (e) => {
+    if (e.target.closest('[slot="close"]')) this.dismiss();
+  };
+
+  #onKeydown = (e) => {
+    if (e.target.closest('[slot="close"]') && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      this.dismiss();
+    }
+  };
+
+  connected() {
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeydown);
+  }
+
+  #getDuration() {
+    const raw = getComputedStyle(this).getPropertyValue('--toast-duration').trim();
+    return parseFloat(raw) || 200;
+  }
+
+  render() {
+    const message = this.ensure('message');
+    message.textContent = this.text;
+
+    const close = this.ensure('close');
+    if (close.parentElement !== this) this.appendChild(close);
+
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-live', 'polite');
+
+    // Schedule auto-open animation
+    if (!this.hasAttribute('data-open') && !this.#removing) {
+      this.#openRaf = requestAnimationFrame(() => {
+        this.#openRaf = null;
+        this.setAttribute('data-open', '');
+      });
+    }
+
+    // Schedule auto-dismiss
+    this.#scheduleAutoDismiss();
+  }
+
+  #scheduleAutoDismiss() {
+    if (this.#timer) clearTimeout(this.#timer);
+    if (this.duration > 0) {
+      this.#timer = setTimeout(() => this.dismiss(), this.duration);
+    }
+  }
+
+  dismiss() {
+    if (this.#removing) return;
+    this.#removing = true;
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+
+    this.removeAttribute('data-open');
+    this.setAttribute('data-closing', '');
+
+    this.#closeTimer = setTimeout(() => {
+      this.#closeTimer = null;
+      this.removeAttribute('data-closing');
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+      this.remove();
+    }, this.#getDuration());
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeydown);
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+    if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
+    if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
+  }
+
+  /**
+   * Static convenience — creates a toast, appends to body, auto-removes.
+   * @param {Object} opts
+   * @param {string} opts.text
+   * @param {string} [opts.variant='info']
+   * @param {number} [opts.duration=4000]
+   * @param {string} [opts.position='bottom-right']
+   * @returns {AdiaToast}
+   */
+  static #containers = new Map();
+
+  static #getContainer(position) {
+    if (AdiaToast.#containers.has(position)) return AdiaToast.#containers.get(position);
+    const el = document.createElement('div');
+    el.setAttribute('data-toast-container', position);
+    document.body.appendChild(el);
+    AdiaToast.#containers.set(position, el);
+    return el;
+  }
+
+  static show({ text, variant = 'info', duration = 4000, position = 'bottom-right' } = {}) {
+    const container = AdiaToast.#getContainer(position);
+    const toast = document.createElement('toast-ui');
+    toast.text = text;
+    toast.variant = variant;
+    toast.duration = duration;
+    toast.position = position;
+    container.appendChild(toast);
+    return toast;
+  }
+}
+customElements.define('toast-ui', AdiaToast);
+
+export { AdiaToast };

package/components/toast/toast.yaml

@@ -0,0 +1,184 @@
+# 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: AdiaToast
+tag: toast-ui
+component: Toast
+category: container
+version: 1
+description: Notification popup with auto-dismiss. Animated enter/exit.
+props:
+  icon:
+    description: Leading Phosphor icon name; when omitted, defaults from `variant` (success → check, danger → x, etc.).
+    type: string
+    default: ""
+  closable:
+    description: When true, renders a dismiss button.
+    type: boolean
+    default: true
+  duration:
+    description: Auto-dismiss time in milliseconds. 0 disables auto-dismiss.
+    type: number
+    default: 4000
+  open:
+    description: Controls visibility and triggers auto-dismiss timer
+    type: boolean
+    default: false
+    reflect: true
+  position:
+    description: Screen position
+    type: string
+    default: bottom-right
+    enum:
+      - top-left
+      - top-center
+      - top-right
+      - bottom-left
+      - bottom-center
+      - bottom-right
+  text:
+    description: Toast message text
+    type: string
+    default: ""
+  variant:
+    description: Color variant. `error` kept as alias for `danger`.
+    type: string
+    default: info
+    enum:
+      - default
+      - success
+      - warning
+      - error
+      - info
+      - danger
+      - primary
+      - muted
+      - neutral
+events:
+  close:
+    description: Fired when the toast is dismissed via click or auto-timeout
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --toast-background:
+    description: Override background color
+  --toast-border-color:
+    description: Override border color
+  --toast-foreground:
+    description: Override text color
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: toast-notification
+    description: Column of three toast notification components showing success, warning, and error variants.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "gap": "2",
+          "children": [
+            "t1",
+            "t2",
+            "t3"
+          ]
+        },
+        {
+          "id": "t1",
+          "component": "Toast",
+          "variant": "success",
+          "title": "Saved successfully",
+          "description": "Your changes have been saved.",
+          "dismissible": true
+        },
+        {
+          "id": "t2",
+          "component": "Toast",
+          "variant": "warning",
+          "title": "Storage almost full",
+          "description": "You are using 90% of your available storage.",
+          "dismissible": true
+        },
+        {
+          "id": "t3",
+          "component": "Toast",
+          "variant": "error",
+          "title": "Upload failed",
+          "description": "The file could not be uploaded. Please try again.",
+          "dismissible": true
+        }
+      ]
+keywords:
+  - toast
+  - inbox
+  - message
+  - snackbar
+  - popup
+  - warning
+  - error
+  - success
+  - info
+  - notification
+  - remind
+  - alert
+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
+related: []

package/components/toggle-group/toggle-group.a2ui.json

@@ -0,0 +1,126 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ToggleGroup.json",
+  "title": "ToggleGroup",
+  "description": "Multi-select button group (unlike segmented which is single-select).",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ToggleGroup"
+    },
+    "single": {
+      "description": "When true, restrict to one active option (single-select).",
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "description": "Comma-separated selected values",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {
+      "change": {
+        "description": "Fired when selection changes. detail: { value }"
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic ToggleGroup usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"ToggleGroup\",\n    \"value\": \"\"\n  }\n]",
+        "name": "basic-toggle-group"
+      }
+    ],
+    "keywords": [
+      "togglegroup",
+      "toggle-group",
+      "toggle",
+      "group"
+    ],
+    "name": "AdiaToggleGroup",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "toggle-group-ui",
+    "tokens": {
+      "--toggle-group-border": {
+        "description": "Border color of the group container"
+      },
+      "--toggle-group-height": {
+        "description": "Height of the group container"
+      },
+      "--toggle-group-radius": {
+        "description": "Border radius of the group container"
+      },
+      "--toggle-option-bg-hover": {
+        "description": "Background color on hover"
+      },
+      "--toggle-option-border": {
+        "description": "Border color between adjacent options"
+      },
+      "--toggle-option-duration": {
+        "description": "Transition duration"
+      },
+      "--toggle-option-easing": {
+        "description": "Transition easing function"
+      },
+      "--toggle-option-fg": {
+        "description": "Default text color"
+      },
+      "--toggle-option-fg-disabled": {
+        "description": "Text color when disabled"
+      },
+      "--toggle-option-fg-hover": {
+        "description": "Text color on hover"
+      },
+      "--toggle-option-focus-ring": {
+        "description": "Focus ring box-shadow"
+      },
+      "--toggle-option-font-size": {
+        "description": "Font size for option text and icons"
+      },
+      "--toggle-option-gap": {
+        "description": "Gap between icon and text within an option"
+      },
+      "--toggle-option-height": {
+        "description": "Min-height of each option"
+      },
+      "--toggle-option-px": {
+        "description": "Horizontal padding of each option"
+      },
+      "--toggle-option-selected-bg": {
+        "description": "Background color when selected"
+      },
+      "--toggle-option-selected-fg": {
+        "description": "Text color when selected"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/toggle-group/toggle-group.css

@@ -0,0 +1,102 @@
+@scope (toggle-group-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --toggle-group-border-width: 1px;
+    --toggle-group-border-color: var(--a-ui-border);
+    --toggle-group-radius:       var(--a-radius);
+    --toggle-group-height:       var(--a-size);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
+    border-radius: var(--toggle-group-radius);
+    overflow: hidden;
+  }
+}
+
+@scope (toggle-option-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --toggle-option-gap:          var(--a-space-1);
+    --toggle-option-height:       var(--a-size);
+    --toggle-option-px:           var(--a-ui-px);
+    --toggle-option-border-width: 1px;
+    --toggle-option-border-color: var(--a-ui-border);
+
+    /* ── Colors ── */
+    --toggle-option-bg:           transparent;
+    --toggle-option-fg:           var(--a-fg-muted);
+    --toggle-option-fg-hover:     var(--a-fg);
+    --toggle-option-bg-hover:     var(--a-bg-muted);
+    --toggle-option-selected-bg:  var(--a-accent-muted);
+    --toggle-option-selected-fg:  var(--a-accent-bg);
+    --toggle-option-fg-disabled:  var(--a-ui-text-disabled);
+
+    /* ── Typography ── */
+    --toggle-option-font-size:    var(--a-ui-size);
+
+    /* ── Transition ── */
+    --toggle-option-duration:     var(--a-duration-fast);
+    --toggle-option-easing:       var(--a-easing);
+
+    /* ── State ── */
+    --toggle-option-focus-ring:   var(--a-focus-ring);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--toggle-option-gap);
+    min-height: var(--toggle-option-height);
+    padding: 0 var(--toggle-option-px);
+    border: none;
+    background: var(--toggle-option-bg);
+    color: var(--toggle-option-fg);
+    font: inherit;
+    font-size: var(--toggle-option-font-size);
+    cursor: pointer;
+    transition:
+      background var(--toggle-option-duration) var(--toggle-option-easing),
+      color var(--toggle-option-duration) var(--toggle-option-easing);
+  }
+
+  /* Adjacent options share borders */
+  :scope + :scope {
+    border-inline-start: var(--toggle-option-border-width) solid var(--toggle-option-border-color);
+  }
+
+  :scope:not([disabled]):hover {
+    --toggle-option-bg: var(--toggle-option-bg-hover);
+    --toggle-option-fg: var(--toggle-option-fg-hover);
+  }
+
+  :scope:focus-visible {
+    outline: none;
+    box-shadow: var(--toggle-option-focus-ring);
+    z-index: 1;
+  }
+
+  :scope[data-selected] {
+    --toggle-option-bg: var(--toggle-option-selected-bg);
+    --toggle-option-fg: var(--toggle-option-selected-fg);
+  }
+
+  :scope[disabled] {
+    --toggle-option-fg: var(--toggle-option-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Icon sizing */
+  icon-ui {
+    --a-icon-size: var(--toggle-option-font-size);
+  }
+
+  [data-text] {
+    white-space: nowrap;
+  }
+}

package/components/toggle-group/toggle-group.js

@@ -0,0 +1,147 @@
+/**
+ * <toggle-group-ui value="bold,italic">
+ *   <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
+ *   <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
+ *   <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
+ * </toggle-group-ui>
+ *
+ * Multi-select button group (unlike segmented which is single-select).
+ *
+ * Properties:
+ *   value  — comma-separated selected values
+ *   single — restrict to one active option at a time (default false: multi-select)
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+// ── Toggle Option ──
+//
+// Parent-managed. Selection state flows through `toggle-group-ui`'s `value`
+// (and `single` mode flag). Items don't expose `checked` — parent applies
+// `data-selected` on the DOM element when the item's `value` is part of the
+// group's comma-separated `value` list. Consistent with native `<option>`
+// inside `<select>`.
+
+class AdiaToggleOption extends AdiaElement {
+  static properties = {
+    value:    { type: String,  default: '', reflect: true },
+    text:     { type: String,  default: '', reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #stamped = false;
+
+  connected() {
+    this.setAttribute('role', 'button');
+    this.setAttribute('tabindex', '0');
+  }
+
+  render() {
+    if (!this.#stamped) {
+      this.#stamped = true;
+      this.#stamp();
+    }
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+  }
+
+  #stamp() {
+    let inner = '';
+    if (this.icon) inner += `<icon-ui name="${this.icon}"></icon-ui>`;
+    if (this.text) inner += `<span data-text>${this.text}</span>`;
+    this.innerHTML = inner;
+  }
+
+  disconnected() {
+    this.#stamped = false;
+  }
+}
+customElements.define('toggle-option-ui', AdiaToggleOption);
+
+// ── Toggle Group ──
+
+class AdiaToggleGroup extends AdiaElement {
+  static properties = {
+    value:  { type: String,  default: '',    reflect: true },
+    single: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+
+  get #valueSet() {
+    return new Set(this.value ? this.value.split(',').map(v => v.trim()).filter(Boolean) : []);
+  }
+
+  connected() {
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+    this.setAttribute('role', 'group');
+  }
+
+  render() {
+    const selected = this.#valueSet;
+    for (const opt of this.querySelectorAll('toggle-option-ui')) {
+      const optVal = opt.value || opt.getAttribute('value') || '';
+      if (selected.has(optVal)) {
+        opt.setAttribute('data-selected', '');
+        opt.setAttribute('aria-pressed', 'true');
+      } else {
+        opt.removeAttribute('data-selected');
+        opt.setAttribute('aria-pressed', 'false');
+      }
+    }
+  }
+
+  #toggle(opt) {
+    if (opt.disabled) return;
+    const optVal = opt.value || opt.getAttribute('value') || '';
+    if (!optVal) return;
+
+    const selected = this.#valueSet;
+
+    if (this.single) {
+      if (selected.has(optVal)) {
+        selected.clear();
+      } else {
+        selected.clear();
+        selected.add(optVal);
+      }
+    } else {
+      if (selected.has(optVal)) selected.delete(optVal);
+      else selected.add(optVal);
+    }
+
+    this.value = [...selected].join(',');
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #onClick = (e) => {
+    const opt = e.target.closest('toggle-option-ui');
+    if (opt && this.contains(opt)) this.#toggle(opt);
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const opt = e.target.closest('toggle-option-ui');
+      if (opt && this.contains(opt)) this.#toggle(opt);
+    }
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#bound = false;
+  }
+}
+customElements.define('toggle-group-ui', AdiaToggleGroup);
+
+export { AdiaToggleGroup, AdiaToggleOption };