@adia-ai/web-components 0.0.1

package/components/drawer/drawer.css

@@ -0,0 +1,342 @@
+/* ═══════════════════════════════════════════════════════════════
+   DRAWER-N — Slide-out panel using native <dialog>.
+
+   Layout aligns with card-ui: header uses a 3-column grid
+   (icon | heading+description | action+close), footer uses a
+   flex row with [slot="description"] + [slot="action"] semantics.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (drawer-ui) {
+  :where(:scope) {
+    /* ── Geometry ── */
+    --drawer-width:       24rem;
+    --drawer-height:      24rem;
+    --drawer-inset:       var(--a-space-4);
+    --drawer-header-pad:  var(--drawer-inset);
+    --drawer-footer-pad:  var(--drawer-inset);
+    --drawer-header-gap:  var(--a-space-2);
+    --drawer-footer-gap:  var(--a-space-2);
+
+    /* ── Motion ── */
+    --drawer-duration:    var(--a-duration);
+    --drawer-easing:      var(--a-easing-out);
+
+    /* ── Colors ── */
+    --drawer-bg:          var(--a-canvas-1);
+    --drawer-border:      var(--a-border-subtle);
+    --drawer-divider:     var(--a-border-subtle);
+    --drawer-shadow:      var(--a-shadow-lg);
+    --drawer-backdrop:    var(--a-scrim-dialog);
+    --drawer-fg:          var(--a-fg);
+    --drawer-heading-fg:  var(--a-fg-strong);
+    --drawer-description-fg: var(--a-fg-subtle);
+
+    /* ── Typography ── */
+    --drawer-font-family:      var(--a-font-family);
+    --drawer-heading-size:     var(--a-ui-lg);
+    --drawer-heading-weight:   var(--a-weight-semibold);
+    --drawer-description-size: var(--a-caption-size);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: contents;
+  }
+
+  /* ── Size variants ── */
+  :scope[size="sm"] { --drawer-width: min(18rem, 90vw); }
+  :scope[size="md"] { --drawer-width: min(24rem, 90vw); }
+  :scope[size="lg"] { --drawer-width: min(36rem, 90vw); }
+
+  /* ═══════ Dialog shell ═══════ */
+
+  > [slot="dialog"]:not([open]) { display: none; }
+
+  > [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;
+  }
+
+  > [slot="dialog"]::backdrop {
+    background: var(--drawer-backdrop);
+    opacity: 0;
+    transition: opacity var(--drawer-duration) var(--drawer-easing);
+  }
+  > [slot="dialog"][data-open]::backdrop    { opacity: 1; }
+  > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
+
+  /* ═══════ Panel ═══════ */
+
+  > [slot="dialog"] > [slot="panel"] {
+    box-sizing: border-box;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background: var(--drawer-bg);
+    color: var(--drawer-fg);
+    font-family: var(--drawer-font-family);
+    box-shadow: var(--drawer-shadow);
+    overflow-y: auto;
+    opacity: 0;
+  }
+
+  /* ── Side: right (default) ── */
+  :scope:not([side]) > [slot="dialog"] > [slot="panel"],
+  :scope[side="right"] > [slot="dialog"] > [slot="panel"] {
+    top: 0; right: 0; bottom: 0;
+    width: var(--drawer-width);
+    border-left: 1px solid var(--drawer-border);
+    transform: translateX(100%);
+  }
+  :scope:not([side]) > [slot="dialog"][data-open] > [slot="panel"],
+  :scope[side="right"] > [slot="dialog"][data-open] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateX(0);
+    opacity: 1;
+  }
+  :scope:not([side]) > [slot="dialog"][data-closing] > [slot="panel"],
+  :scope[side="right"] > [slot="dialog"][data-closing] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  /* ── Side: left ── */
+  :scope[side="left"] > [slot="dialog"] > [slot="panel"] {
+    top: 0; left: 0; bottom: 0;
+    width: var(--drawer-width);
+    border-right: 1px solid var(--drawer-border);
+    transform: translateX(-100%);
+  }
+  :scope[side="left"] > [slot="dialog"][data-open] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateX(0); opacity: 1;
+  }
+  :scope[side="left"] > [slot="dialog"][data-closing] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateX(-100%); opacity: 0;
+  }
+
+  /* ── Side: bottom ── */
+  :scope[side="bottom"] > [slot="dialog"] > [slot="panel"] {
+    bottom: 0; left: 0; right: 0;
+    height: var(--drawer-height);
+    border-top: 1px solid var(--drawer-border);
+    transform: translateY(100%);
+  }
+  :scope[side="bottom"] > [slot="dialog"][data-open] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateY(0); opacity: 1;
+  }
+  :scope[side="bottom"] > [slot="dialog"][data-closing] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateY(100%); opacity: 0;
+  }
+
+  /* ── Side: top ── */
+  :scope[side="top"] > [slot="dialog"] > [slot="panel"] {
+    top: 0; left: 0; right: 0;
+    height: var(--drawer-height);
+    border-bottom: 1px solid var(--drawer-border);
+    transform: translateY(-100%);
+  }
+  :scope[side="top"] > [slot="dialog"][data-open] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateY(0); opacity: 1;
+  }
+  :scope[side="top"] > [slot="dialog"][data-closing] > [slot="panel"] {
+    transition: transform var(--drawer-duration) var(--drawer-easing),
+                opacity   var(--drawer-duration) var(--drawer-easing);
+    transform: translateY(-100%); opacity: 0;
+  }
+
+  /* ═══════ Header — card-n-aligned grid ═══════
+     Block by default (fallback for empty/free-form content).
+     Grid activates when any slotted child is present. Column template
+     adapts to the presence of [slot="icon"] and [slot="action"|"close"]. */
+
+  [slot="panel"] > [slot="header"] {
+    display: block;
+    padding: var(--drawer-header-pad);
+    border-bottom: 1px solid var(--drawer-divider);
+    color: var(--drawer-heading-fg);
+    flex-shrink: 0;
+    /* Sticky so that with multiple <section> siblings scrolling below,
+       the header stays pinned to the top of the panel. */
+    position: sticky;
+    top: 0;
+    background: var(--drawer-bg);
+    z-index: 1;
+  }
+
+  [slot="panel"] > [slot="header"]:has(> [slot]) {
+    display: grid;
+    gap: var(--drawer-header-gap);
+    align-items: center;
+  }
+
+  [slot="panel"] > [slot="header"][padding] {
+    background: var(--a-canvas-0-scrim);
+  }
+
+  [slot="panel"] > [slot="header"][center] {
+    text-align: center;
+    justify-items: center;
+  }
+
+  /* Column templates — mirror card-ui. `:has(> …)` restricts to direct
+     children so that nested slot="icon" (e.g. inside an <avatar-ui>) doesn't
+     accidentally activate the icon column. Treat [slot="close"] as an
+     action-column occupant. */
+  [slot="panel"] > [slot="header"]:has(> [slot="icon"]):has(> :is([slot="action"], [slot="close"])) {
+    grid-template-columns: max-content 1fr max-content;
+  }
+  [slot="panel"] > [slot="header"]:has(> [slot="icon"]):not(:has(> :is([slot="action"], [slot="close"]))) {
+    grid-template-columns: max-content 1fr;
+  }
+  [slot="panel"] > [slot="header"]:not(:has(> [slot="icon"])):has(> :is([slot="action"], [slot="close"])) {
+    grid-template-columns: 1fr max-content;
+  }
+  [slot="panel"] > [slot="header"]:not(:has(> [slot="icon"])):not(:has(> :is([slot="action"], [slot="close"]))) {
+    grid-template-columns: 1fr;
+  }
+
+  /* Icon — first column */
+  [slot="panel"] > [slot="header"] > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  [slot="panel"] > [slot="header"]:has(> :is([slot="description"], p, small)) > [slot="icon"] {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+
+  /* Heading — row 1 */
+  [slot="panel"] > [slot="header"] > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
+  [slot="panel"] > [slot="header"] > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
+    grid-row: 1;
+    line-height: 1.3;
+    margin: 0;
+    font-size: var(--drawer-heading-size);
+    font-weight: var(--drawer-heading-weight);
+    color: var(--drawer-heading-fg);
+  }
+  [slot="panel"] > [slot="header"] > [slot="heading"] {
+    display: flex;
+    align-items: center;
+    gap: var(--drawer-header-gap);
+  }
+  [slot="panel"] > [slot="header"]:has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) {
+    grid-column: 2;
+  }
+  [slot="panel"] > [slot="header"]:not(:has(> [slot="icon"])) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) {
+    grid-column: 1;
+  }
+
+  /* Description — row 2 */
+  [slot="panel"] > [slot="header"] > :is([slot="description"], p, small) {
+    grid-row: 2;
+    grid-column: 1 / -1;
+    line-height: 1.4;
+    margin: 0;
+    font-size: var(--drawer-description-size);
+    color: var(--drawer-description-fg);
+  }
+  [slot="panel"] > [slot="header"]:has(> [slot="icon"]) > :is([slot="description"], p, small) {
+    grid-column: 2 / -1;
+  }
+
+  /* Action + close — row 1, last column */
+  [slot="panel"] > [slot="header"] > :is([slot="action"], [slot="close"]) {
+    justify-self: end;
+    align-self: center;
+    grid-row: 1;
+    grid-column: -2 / -1;
+    display: flex;
+    align-items: center;
+    gap: var(--drawer-header-gap);
+  }
+
+  /* ═══════ Body (section) ═══════
+     Padded by default. Multiple <section> siblings are allowed — they stack
+     inside the panel's own scroll region (see panel's overflow-y + sticky
+     header/footer above). [bleed] removes padding; [padding] adds a canvas
+     scrim background (card-ui parity). */
+
+  [slot="panel"] > [slot="body"] {
+    padding: var(--drawer-inset);
+    /* Last body takes any remaining vertical slack so the footer hugs the
+       bottom even when content is shorter than the viewport. */
+    flex: 0 0 auto;
+  }
+  [slot="panel"] > [slot="body"]:last-of-type { flex: 1 0 auto; }
+  [slot="panel"] > [slot="body"] + [slot="body"] { padding-top: 0; }
+  [slot="panel"] > [slot="body"][bleed]   { padding: 0; }
+  [slot="panel"] > [slot="body"][padding] { background: var(--a-canvas-0-scrim); }
+
+  /* ═══════ Footer ═══════
+     Flex row for actions. [slot="description"] + [slot="action"] = space-between.
+     Mirrors card-ui footer semantics. */
+
+  [slot="panel"] > [slot="footer"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--drawer-footer-gap);
+    padding: var(--drawer-footer-pad);
+    border-top: 1px solid var(--drawer-divider);
+    flex-shrink: 0;
+    /* Sticky to the bottom so action buttons stay visible during scroll. */
+    position: sticky;
+    bottom: 0;
+    background: var(--drawer-bg);
+    z-index: 1;
+  }
+
+  [slot="panel"] > [slot="footer"][justify="end"] {
+    justify-content: flex-end;
+  }
+
+  [slot="panel"] > [slot="footer"]:has(> :is([slot="description"], p, small)):has(> [slot="action"]) {
+    justify-content: space-between;
+  }
+
+  [slot="panel"] > [slot="footer"] :is([slot="description"], p, small) {
+    font-size: var(--drawer-description-size);
+    color: var(--drawer-description-fg);
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+  }
+
+  [slot="panel"] > [slot="footer"] [slot="action"] {
+    margin-inline-start: auto;
+    display: flex;
+    gap: var(--drawer-footer-gap);
+  }
+
+  [slot="panel"] > [slot="footer"] > [slot="action"] ~ [slot="action"] {
+    margin-inline-start: 0;
+  }
+}

package/components/drawer/drawer.js

@@ -0,0 +1,263 @@
+/**
+ * <drawer-ui> — Slide-out panel anchored to a viewport edge.
+ *
+ * Uses native <dialog> for focus trapping, Escape key, and ::backdrop.
+ * Content panel slides in/out with CSS transitions.
+ * Exit animation plays before dialog.close() via [data-closing].
+ *
+ * Authoring — card-n-style tags (recommended):
+ *   <drawer-ui side="right" size="md">
+ *     <header>Title block</header>
+ *     <section>Body content</section>
+ *     <footer>Action buttons</footer>
+ *   </drawer-ui>
+ *
+ * Authoring — explicit slots (also supported):
+ *   <drawer-ui>
+ *     <header slot="header">…</header>
+ *     <section slot="body">…</section>
+ *     <footer slot="footer">…</footer>
+ *   </drawer-ui>
+ *
+ * Title-only (stamps an empty header with a close button):
+ *   <drawer-ui text="Settings" side="right"></drawer-ui>
+ *
+ * API:
+ *   drawer.show() · drawer.hide() · drawer.open = true|false
+ *
+ * Events:
+ *   close — fired after the drawer finishes closing
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaDrawer extends AdiaElement {
+  #bound = false;
+  #closing = false;
+  #previousFocus = null;
+  #closeTimer = null;
+  #openRaf = null;
+  #dialogRef = null;
+
+  static properties = {
+    text:      { type: String,  default: '', reflect: true },
+    side:      { type: String,  default: 'right', 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>',
+  };
+
+  // No template — drawer composes from authored light-DOM children. An empty
+  // html`` result would trigger stamp() → replaceChildren(), wiping authored
+  // [slot=header|body|footer] before render() can migrate them into the panel.
+
+  #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('--drawer-duration').trim();
+    return parseFloat(raw) || 200;
+  }
+
+  /**
+   * Adopt a slotted part into the panel. Accepts either an explicit
+   * [slot="X"] element OR a bare tag matching the card-ui convention
+   * (<header> → header, <section> → body, <footer> → footer). The tag is only
+   * adopted when no slot attribute is set, so authors can still opt into
+   * explicit slotting. The slot attribute is normalized onto the adopted
+   * element so downstream CSS selectors (`[slot="header"]`) match in both
+   * cases.
+   */
+  #adoptSlot(slot, panel, mode = 'append') {
+    const fallbackTag = { header: 'header', body: 'section', footer: 'footer' }[slot];
+    const isMatch = (c) => c.getAttribute('slot') === slot
+      || (fallbackTag && !c.getAttribute('slot') && c.localName === fallbackTag);
+
+    const inDirect = [...this.children].find(isMatch);
+    const inPanel  = [...panel.children].find(c => c.getAttribute('slot') === slot);
+
+    if (inDirect && inPanel && inDirect !== inPanel) {
+      // User provided their own after we stamped a default — drop the stamp.
+      inPanel.remove();
+    }
+
+    const el = inDirect || inPanel || (() => {
+      const blueprint = this.constructor._pp?.[slot];
+      if (!blueprint) return null;
+      const clone = blueprint.cloneNode(true);
+      clone.setAttribute('data-stamped', '');
+      return clone;
+    })();
+    if (!el) return null;
+
+    if (el.getAttribute('slot') !== slot) el.setAttribute('slot', slot);
+
+    if (el.parentElement !== panel) {
+      if (mode === 'prepend') panel.prepend(el);
+      else panel.appendChild(el);
+    }
+    return el;
+  }
+
+  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.#adoptSlot('header', panel, 'prepend');
+
+    // text="…" shorthand: stamp a [slot="heading"] into the header so the
+    // card-ui grid picks it up. Any author-supplied heading wins.
+    if (header) {
+      let stampedHeading = header.querySelector(':scope > [slot="heading"][data-stamped]');
+      const hasAuthorHeading = [...header.children].some(c =>
+        !c.hasAttribute('data-stamped') &&
+        (c.getAttribute('slot') === 'heading' || /^h[1-6]$/.test(c.localName))
+      );
+      if (this.text && !hasAuthorHeading) {
+        if (!stampedHeading) {
+          stampedHeading = document.createElement('span');
+          stampedHeading.setAttribute('slot', 'heading');
+          stampedHeading.setAttribute('data-stamped', '');
+          header.prepend(stampedHeading);
+        }
+        if (stampedHeading.textContent !== this.text) stampedHeading.textContent = this.text;
+      } else if (stampedHeading) {
+        stampedHeading.remove();
+      }
+    }
+
+    if (!this.permanent) {
+      const close = this.ensure('close');
+      if (header && close.parentElement !== header) header.appendChild(close);
+    } else {
+      this.drop('close');
+    }
+
+    // Body — multiple sections allowed (card-ui parity). Accepts either
+    // bare <section> tags or explicit [slot="body"]. If the author provides
+    // none, stamp an empty default so title-only drawers still lay out.
+    const authorSections = [...this.children].filter(c =>
+      c.getAttribute('slot') === 'body'
+      || (c.localName === 'section' && !c.getAttribute('slot'))
+    );
+    if (authorSections.length === 0) {
+      this.#adoptSlot('body', panel, 'append');
+    } else {
+      for (const s of authorSections) {
+        if (s.getAttribute('slot') !== 'body') s.setAttribute('slot', 'body');
+        if (s.parentElement !== panel) panel.appendChild(s);
+      }
+    }
+
+    // Footer is opt-in — only mounted if the author supplied one (either
+    // [slot="footer"] or a bare <footer> tag, card-ui style).
+    const userFooter = [...this.children].find(c =>
+      c.getAttribute('slot') === 'footer' || (!c.getAttribute('slot') && c.localName === 'footer')
+    );
+    if (userFooter) {
+      if (userFooter.getAttribute('slot') !== 'footer') userFooter.setAttribute('slot', 'footer');
+      if (userFooter.parentElement !== panel) panel.appendChild(userFooter);
+    }
+
+    // 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('drawer-ui', AdiaDrawer);
+
+export { AdiaDrawer };