@adia-ai/web-components 0.0.1

package/components/modal/modal.a2ui.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Modal.json",
+  "title": "Modal",
+  "description": "Centered dialog overlay using native <dialog>. Focus trapping, Escape key, backdrop.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "anchor": {
+      "description": "ID of the element to anchor to (popover mode only). Positions the surface below the anchor element.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Modal"
+    },
+    "mode": {
+      "description": "Surface type. Dialog uses showModal() with backdrop and focus trap. Popover uses the Popover API with light dismiss and optional anchor positioning.",
+      "type": "string",
+      "enum": [
+        "dialog",
+        "popover"
+      ],
+      "default": "dialog"
+    },
+    "open": {
+      "description": "Alias for show (backwards compatibility). Either property controls visibility.",
+      "type": "boolean",
+      "default": false
+    },
+    "permanent": {
+      "description": "When true, suppress backdrop click and Escape key dismissal of the overlay",
+      "type": "boolean",
+      "default": false
+    },
+    "show": {
+      "description": "Controls overlay visibility. Setting to true opens the surface with entry animation.",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "text": {
+      "description": "Aria label applied to the surface element for accessibility",
+      "type": "string",
+      "default": ""
+    },
+    "trigger": {
+      "description": "ID of the element that opens this modal (sets aria-controls + click handler).",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "close": {
+        "description": "Fired when the overlay is dismissed via backdrop click, Escape key, popover toggle, or programmatic hide(). Bubbles."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Modal 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\": \"Modal\",\n    \"text\": \"Example Modal\"\n  }\n]",
+        "name": "basic-modal"
+      }
+    ],
+    "keywords": [
+      "modal"
+    ],
+    "name": "AdiaModal",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Content placed inside the modal surface. Accepts any elements (card-ui, command-ui, custom markup)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "modal-ui",
+    "tokens": {
+      "--modal-backdrop": {
+        "description": "Override backdrop color (dialog mode)"
+      },
+      "--modal-background": {
+        "description": "Override surface background color"
+      },
+      "--modal-border-color": {
+        "description": "Override surface border color"
+      },
+      "--modal-duration": {
+        "description": "Override open/close animation duration"
+      },
+      "--modal-easing-in": {
+        "description": "Override entry animation easing curve"
+      },
+      "--modal-easing-out": {
+        "description": "Override exit animation easing curve"
+      },
+      "--modal-radius": {
+        "description": "Override surface border radius"
+      },
+      "--modal-shadow": {
+        "description": "Override surface box shadow"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/modal/modal.css

@@ -0,0 +1,153 @@
+/* ═══════════════════════════════════════════════════════════════
+   MODAL-N — Centered dialog overlay using native <dialog>.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (modal-ui) {
+  :where(:scope) {
+    --modal-width:          32rem;
+    --modal-radius:         var(--a-radius-lg);
+    --modal-bg:             var(--a-bg-subtle);
+    --modal-border:         var(--a-border-subtle);
+    --modal-shadow:         var(--a-shadow-lg);
+    --modal-backdrop:       var(--a-scrim-dialog);
+    --modal-duration:       var(--a-duration);
+    --modal-easing:         var(--a-easing-out);
+    --modal-heading-size:   var(--a-ui-lg);
+    --modal-heading-weight: var(--a-weight-semibold);
+    --modal-header-fg:      var(--a-fg);
+    --modal-close-fg:       var(--a-fg-muted);
+    --modal-close-hover:    var(--a-fg);
+    --modal-pad-header:     var(--a-space-3);
+    --modal-pad-body:       var(--a-space-4);
+    --modal-pad-footer:     var(--a-space-3);
+    --modal-font-family:    var(--a-font-family);
+    --modal-footer-gap:     var(--a-space-2);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: contents;
+  }
+
+  /* ── Size variants ── */
+  :scope[size="sm"] { --modal-width: min(24rem, 90vw); }
+  :scope[size="md"] { --modal-width: min(32rem, 90vw); }
+  :scope[size="lg"] { --modal-width: min(48rem, 90vw); }
+}
+
+/* ═══════ Closed ═══════ */
+
+modal-ui > [slot="dialog"]:not([open]) { display: none; }
+
+/* ═══════ Full-viewport dialog shell ═══════ */
+
+modal-ui > [slot="dialog"][open] {
+  box-sizing: border-box;
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  overflow: clip;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ═══════ Backdrop ═══════ */
+
+modal-ui > [slot="dialog"]::backdrop {
+  background: var(--modal-backdrop);
+  opacity: 0;
+  transition: opacity var(--modal-duration) var(--modal-easing);
+}
+modal-ui > [slot="dialog"][data-open]::backdrop { opacity: 1; }
+modal-ui > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
+
+/* ── Top-layer: cannot inherit component tokens ── */
+
+/* ═══════ Content panel ═══════ */
+
+modal-ui > [slot="dialog"] > [slot="panel"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: var(--modal-width);
+  max-height: 85vh;
+  background: var(--modal-bg);
+  color: var(--modal-header-fg);
+  font-family: var(--a-font-family); /* top-layer: --a-* required */
+  border: 1px solid var(--modal-border);
+  border-radius: var(--modal-radius);
+  box-shadow: var(--modal-shadow);
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* ═══════ Open animation ═══════ */
+
+modal-ui > [slot="dialog"][data-open] > [slot="panel"] {
+  transition: transform var(--modal-duration) var(--modal-easing),
+              opacity var(--modal-duration) var(--modal-easing);
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* ═══════ Close animation ═══════ */
+
+modal-ui > [slot="dialog"][data-closing] > [slot="panel"] {
+  transition: transform var(--modal-duration) var(--modal-easing),
+              opacity var(--modal-duration) var(--modal-easing);
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* ═══════ Header ═══════ */
+
+modal-ui [slot="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--modal-pad-header) var(--modal-pad-body);
+  border-bottom: 1px solid var(--modal-border);
+  font-size: var(--modal-heading-size);
+  font-weight: var(--modal-heading-weight);
+  color: var(--modal-header-fg);
+  flex-shrink: 0;
+}
+modal-ui [slot="header"]::before {
+  content: attr(text);
+  flex: 1;
+}
+
+/* ═══════ Close button (button-ui) ═══════ */
+
+modal-ui [slot="close"] {
+  flex-shrink: 0;
+}
+
+/* ═══════ Body ═══════ */
+
+modal-ui [slot="body"] {
+  padding: var(--modal-pad-body);
+  flex: 1;
+  overflow: auto;
+}
+
+/* ═══════ Footer ═══════ */
+
+modal-ui [slot="footer"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--a-space-2); /* top-layer: --a-* required */
+  padding: var(--modal-pad-footer) var(--modal-pad-body);
+  border-top: 1px solid var(--modal-border);
+  flex-shrink: 0;
+}

package/components/modal/modal.js

@@ -0,0 +1,181 @@
+/**
+ * <modal-ui> — Centered dialog overlay.
+ *
+ * Uses native <dialog> for focus trapping, Escape key, and ::backdrop.
+ * Content panel scales in/out with CSS transitions.
+ * Exit animation plays before dialog.close() via [data-closing].
+ *
+ * Structure (stamped automatically):
+ *   <modal-ui size="md">
+ *     <dialog slot="dialog">
+ *       <div slot="panel">
+ *         <div slot="header">Title × </div>
+ *         <div slot="body">...content...</div>
+ *         <div slot="footer">...actions...</div>
+ *       </div>
+ *     </dialog>
+ *   </modal-ui>
+ *
+ * Usage:
+ *   <modal-ui text="Confirm" size="md">
+ *     <section>Modal content here</section>
+ *   </modal-ui>
+ *
+ *   modal.show();
+ *   modal.hide();
+ *   modal.open = true;
+ *
+ * Events:
+ *   close — fired after the modal finishes closing
+ */
+
+import { AdiaElement, html } from '@core/element.js';
+
+class AdiaModal extends AdiaElement {
+  #bound = false;
+  #closing = false;
+  #previousFocus = null;
+  #closeTimer = null;
+  #openRaf = null;
+  #dialogRef = null;
+
+  static properties = {
+    text:      { type: String,  default: '', reflect: true },
+    size:      { type: String,  default: 'md', reflect: true },
+    permanent: { type: Boolean, default: false, reflect: true },
+    open:      { type: Boolean, default: false, reflect: true },
+  };
+
+  static parts = {
+    dialog: '<dialog slot="dialog"></dialog>',
+    panel:  '<div slot="panel"></div>',
+    header: '<header slot="header"></header>',
+    close:  '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Close"></button-ui>',
+    body:   '<section slot="body"></section>',
+    footer: '<footer slot="footer"></footer>',
+  };
+
+  static template = () => html``;
+
+  #onPress = (e) => {
+    if (e.target.closest('[slot="close"]')) this.open = false;
+  };
+
+  #onDialogCancel = (e) => {
+    e.preventDefault();
+    if (!this.permanent) this.open = false;
+  };
+
+  #onDialogClose = () => {
+    this.open = false;
+    this.#previousFocus?.focus();
+    this.#previousFocus = null;
+    this.dispatchEvent(new Event('close', { bubbles: true }));
+  };
+
+  #onDialogClick = (e) => {
+    if (e.target === this.#dialogRef && !this.permanent) this.open = false;
+  };
+
+  connected() {
+    this.addEventListener('press', this.#onPress);
+
+    // Bind dialog listeners as soon as the dialog part is available.
+    const dialog = this.ensure('dialog');
+    if (dialog && !this.#bound) {
+      this.#bound = true;
+      this.#dialogRef = dialog;
+      dialog.addEventListener('cancel', this.#onDialogCancel);
+      dialog.addEventListener('close', this.#onDialogClose);
+      dialog.addEventListener('click', this.#onDialogClick);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('press', this.#onPress);
+    if (this.#dialogRef) {
+      this.#dialogRef.removeEventListener('cancel', this.#onDialogCancel);
+      this.#dialogRef.removeEventListener('close', this.#onDialogClose);
+      this.#dialogRef.removeEventListener('click', this.#onDialogClick);
+    }
+    if (this.#openRaf != null) {
+      cancelAnimationFrame(this.#openRaf);
+      this.#openRaf = null;
+    }
+    if (this.#closeTimer != null) {
+      clearTimeout(this.#closeTimer);
+      this.#closeTimer = null;
+    }
+    this.#bound = false;
+    this.#dialogRef = null;
+  }
+
+  #getDuration() {
+    const raw = getComputedStyle(this).getPropertyValue('--modal-duration').trim();
+    return parseFloat(raw) || 200;
+  }
+
+  render() {
+    const dialog = this.ensure('dialog');
+
+    if (this.text) {
+      dialog.setAttribute('aria-label', this.text);
+      this.setAttribute('aria-label', this.text);
+    } else {
+      dialog.removeAttribute('aria-label');
+      this.removeAttribute('aria-label');
+    }
+
+    const panel = this.ensure('panel');
+    if (panel.parentElement !== dialog) dialog.appendChild(panel);
+
+    const header = this.ensure('header');
+    if (header.parentElement !== panel) panel.prepend(header);
+    header.setAttribute('text', this.text);
+
+    if (!this.permanent) {
+      const close = this.ensure('close');
+      if (close.parentElement !== header) header.appendChild(close);
+    } else {
+      this.drop('close');
+    }
+
+    const body = this.ensure('body');
+    if (body.parentElement !== panel) panel.appendChild(body);
+
+    const footer = this.ensure('footer');
+    if (footer.parentElement !== panel) panel.appendChild(footer);
+
+    // Sync open state
+    if (this.open && !dialog.open) {
+      this.#closing = false;
+      this.#previousFocus = document.activeElement;
+      dialog.showModal();
+      this.#openRaf = requestAnimationFrame(() => {
+        this.#openRaf = null;
+        dialog.setAttribute('data-open', '');
+      });
+    } else if (!this.open && dialog.open && !this.#closing) {
+      this.#animateClose(dialog);
+    }
+  }
+
+  #animateClose(dialog) {
+    this.#closing = true;
+    dialog.removeAttribute('data-open');
+    dialog.setAttribute('data-closing', '');
+
+    this.#closeTimer = setTimeout(() => {
+      this.#closeTimer = null;
+      this.#closing = false;
+      dialog.removeAttribute('data-closing');
+      if (dialog.open) dialog.close();
+    }, this.#getDuration());
+  }
+
+  show() { this.open = true; }
+  hide() { this.open = false; }
+}
+customElements.define('modal-ui', AdiaModal);
+
+export { AdiaModal };

package/components/modal/modal.yaml

@@ -0,0 +1,114 @@
+# 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: AdiaModal
+tag: modal-ui
+component: Modal
+category: container
+version: 1
+description: Centered dialog overlay using native <dialog>. Focus trapping, Escape key, backdrop.
+props:
+  anchor:
+    description: ID of the element to anchor to (popover mode only). Positions the surface below the
+      anchor element.
+    type: string
+    default: ""
+  trigger:
+    description: ID of the element that opens this modal (sets aria-controls + click handler).
+    type: string
+    default: ""
+  mode:
+    description: Surface type. Dialog uses showModal() with backdrop and focus trap. Popover uses the
+      Popover API with light dismiss and optional anchor positioning.
+    type: string
+    default: dialog
+    enum:
+      - dialog
+      - popover
+  open:
+    description: Alias for show (backwards compatibility). Either property controls visibility.
+    type: boolean
+    default: false
+    reflect: true
+  permanent:
+    description: When true, suppress backdrop click and Escape key dismissal of the overlay
+    type: boolean
+    default: false
+  show:
+    description: Controls overlay visibility. Setting to true opens the surface with entry animation.
+    type: boolean
+    default: false
+  size:
+    description: Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw.
+    type: string
+    default: md
+    enum:
+      - sm
+      - md
+      - lg
+      - xl
+  text:
+    description: Aria label applied to the surface element for accessibility
+    type: string
+    default: ""
+events:
+  close:
+    description: Fired when the overlay is dismissed via backdrop click, Escape key, popover toggle, or
+      programmatic hide(). Bubbles.
+slots:
+  default:
+    description: Content placed inside the modal surface. Accepts any elements (card-ui, command-ui,
+      custom markup).
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --modal-backdrop:
+    description: Override backdrop color (dialog mode)
+  --modal-background:
+    description: Override surface background color
+  --modal-border-color:
+    description: Override surface border color
+  --modal-duration:
+    description: Override open/close animation duration
+  --modal-easing-in:
+    description: Override entry animation easing curve
+  --modal-easing-out:
+    description: Override exit animation easing curve
+  --modal-radius:
+    description: Override surface border radius
+  --modal-shadow:
+    description: Override surface box shadow
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-modal
+    description: Basic Modal usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Modal",
+          "text": "Example Modal"
+        }
+      ]
+keywords:
+  - modal
+synonyms: {}
+related: []