@adia-ai/web-components 0.4.6 → 0.4.8

package/components/pagination/class.js

@@ -0,0 +1,195 @@
+/**
+ * Non-side-effect class export for `<pagination-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/pagination`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <pagination-ui page="1" total="10" siblings="1"></pagination-ui>
+ *
+ * Page navigation with prev/next buttons, page numbers, and ellipsis.
+ * Shows: first, ..., siblings around current, ..., last.
+ *
+ * Events:
+ *   page-change — { detail: { page } }
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPagination extends UIElement {
+  static properties = {
+    page:     { type: Number, default: 1, reflect: true },
+    total:    { type: Number, default: 1, reflect: true },
+    siblings: { type: Number, default: 1, reflect: true },
+    variant:  { type: String, default: 'default', reflect: true },
+  };
+
+  static template = () => null;
+
+  #nav = null;
+  #bound = false;
+
+  connected() {
+    if (!this.#nav) {
+      this.#nav = document.createElement('nav');
+      this.#nav.setAttribute('slot', 'nav');
+      this.#nav.setAttribute('aria-label', 'Pagination');
+      this.appendChild(this.#nav);
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.#nav.addEventListener('click', this.#onClick);
+    }
+  }
+
+  disconnected() {
+    this.#nav?.removeEventListener('click', this.#onClick);
+    this.#nav = null;
+    this.#bound = false;
+  }
+
+  render() {
+    if (!this.#nav) return;
+
+    const page = Math.max(1, Math.min(this.page, this.total));
+    const total = Math.max(1, this.total);
+    const siblings = Math.max(0, this.siblings);
+
+    const range = this.#buildRange(page, total, siblings);
+
+    this.reconcile(
+      this.#nav,
+      range,
+      (item) => item.key,
+      (item, i, existing) => {
+        if (existing) {
+          this.#updateItem(existing, item, page);
+          return existing;
+        }
+        return this.#createItem(item, page);
+      },
+    );
+  }
+
+  #buildRange(page, total, siblings) {
+    const items = [];
+
+    // Prev button
+    items.push({ key: 'prev', type: 'prev', value: page - 1 });
+
+    // Always show first
+    items.push({ key: 'page-1', type: 'page', value: 1 });
+
+    const start = Math.max(2, page - siblings);
+    const end = Math.min(total - 1, page + siblings);
+
+    // Left ellipsis
+    if (start > 2) {
+      items.push({ key: 'ellipsis-start', type: 'ellipsis' });
+    }
+
+    // Sibling pages
+    for (let i = start; i <= end; i++) {
+      items.push({ key: `page-${i}`, type: 'page', value: i });
+    }
+
+    // Right ellipsis
+    if (end < total - 1) {
+      items.push({ key: 'ellipsis-end', type: 'ellipsis' });
+    }
+
+    // Always show last (if more than 1 page)
+    if (total > 1) {
+      items.push({ key: `page-${total}`, type: 'page', value: total });
+    }
+
+    // Next button
+    items.push({ key: 'next', type: 'next', value: page + 1 });
+
+    return items;
+  }
+
+  #createItem(item, page) {
+    if (item.type === 'ellipsis') {
+      const span = document.createElement('span');
+      span.setAttribute('data-ellipsis', '');
+      span.textContent = '\u2026';
+      return span;
+    }
+
+    const btn = document.createElement('button');
+    btn.setAttribute('type', 'button');
+
+    if (item.type === 'prev') {
+      btn.setAttribute('data-prev', '');
+      btn.setAttribute('aria-label', 'Previous page');
+      btn.textContent = '\u2039';
+    } else if (item.type === 'next') {
+      btn.setAttribute('data-next', '');
+      btn.setAttribute('aria-label', 'Next page');
+      btn.textContent = '\u203A';
+    } else {
+      btn.setAttribute('data-page', '');
+      btn.dataset.value = String(item.value);
+      btn.textContent = String(item.value);
+      btn.setAttribute('aria-label', `Page ${item.value}`);
+    }
+
+    this.#updateItem(btn, item, page);
+    return btn;
+  }
+
+  #updateItem(el, item, page) {
+    if (item.type === 'ellipsis') return;
+
+    if (item.type === 'prev') {
+      if (page <= 1) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
+      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
+    } else if (item.type === 'next') {
+      if (page >= this.total) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
+      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
+    } else {
+      el.dataset.value = String(item.value);
+      el.textContent = String(item.value);
+      el.setAttribute('aria-label', `Page ${item.value}`);
+      if (item.value === page) {
+        el.setAttribute('data-active', '');
+        el.setAttribute('aria-current', 'page');
+      } else {
+        el.removeAttribute('data-active');
+        el.removeAttribute('aria-current');
+      }
+    }
+  }
+
+  #onClick = (e) => {
+    const btn = e.target.closest('[data-prev], [data-next], [data-page]');
+    if (!btn || btn.hasAttribute('disabled') || !this.#nav.contains(btn)) return;
+
+    let newPage;
+
+    if (btn.hasAttribute('data-prev')) {
+      newPage = this.page - 1;
+    } else if (btn.hasAttribute('data-next')) {
+      newPage = this.page + 1;
+    } else if (btn.hasAttribute('data-page')) {
+      newPage = Number(btn.dataset.value);
+    }
+
+    if (newPage == null || newPage < 1 || newPage > this.total || newPage === this.page) return;
+
+    this.page = newPage;
+    this.dispatchEvent(new CustomEvent('page-change', {
+      bubbles: true,
+      detail: { page: this.page },
+    }));
+  };
+}

package/components/pagination/pagination.a2ui.json

@@ -44,6 +44,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "page-change": {
         "description": "Fired when a page button is clicked. detail contains { page }."

package/components/pagination/pagination.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `<pagination-ui>` — Page navigation with prev/next buttons, page numbers, and ellipsis.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/pagination
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type PaginationPageChangeEvent = CustomEvent<unknown>;
+
+export class UIPagination extends UIElement {
+  /** Current active page number. */
+  page: number;
+  /** Number of page buttons to show on each side of the current page. */
+  siblings: number;
+  /** Total number of pages. */
+  total: number;
+  /** Visual variant */
+  variant: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPagination, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'page-change', listener: (ev: PaginationPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/pagination/pagination.js

@@ -1,185 +1,17 @@
 /**
- * <pagination-ui page="1" total="10" siblings="1"></pagination-ui>
+ * `<pagination-ui>` — auto-registers the tag on import.
  *
- * Page navigation with prev/next buttons, page numbers, and ellipsis.
- * Shows: first, ..., siblings around current, ..., last.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Events:
- *   page-change — { detail: { page } }
+ *   import { UIPagination } from '@adia-ai/web-components/components/pagination/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIPagination extends UIElement {
-  static properties = {
-    page:     { type: Number, default: 1, reflect: true },
-    total:    { type: Number, default: 1, reflect: true },
-    siblings: { type: Number, default: 1, reflect: true },
-    variant:  { type: String, default: 'default', reflect: true },
-  };
-
-  static template = () => null;
-
-  #nav = null;
-  #bound = false;
-
-  connected() {
-    if (!this.#nav) {
-      this.#nav = document.createElement('nav');
-      this.#nav.setAttribute('slot', 'nav');
-      this.#nav.setAttribute('aria-label', 'Pagination');
-      this.appendChild(this.#nav);
-    }
-
-    if (!this.#bound) {
-      this.#bound = true;
-      this.#nav.addEventListener('click', this.#onClick);
-    }
-  }
-
-  disconnected() {
-    this.#nav?.removeEventListener('click', this.#onClick);
-    this.#nav = null;
-    this.#bound = false;
-  }
-
-  render() {
-    if (!this.#nav) return;
-
-    const page = Math.max(1, Math.min(this.page, this.total));
-    const total = Math.max(1, this.total);
-    const siblings = Math.max(0, this.siblings);
-
-    const range = this.#buildRange(page, total, siblings);
-
-    this.reconcile(
-      this.#nav,
-      range,
-      (item) => item.key,
-      (item, i, existing) => {
-        if (existing) {
-          this.#updateItem(existing, item, page);
-          return existing;
-        }
-        return this.#createItem(item, page);
-      },
-    );
-  }
-
-  #buildRange(page, total, siblings) {
-    const items = [];
-
-    // Prev button
-    items.push({ key: 'prev', type: 'prev', value: page - 1 });
-
-    // Always show first
-    items.push({ key: 'page-1', type: 'page', value: 1 });
-
-    const start = Math.max(2, page - siblings);
-    const end = Math.min(total - 1, page + siblings);
-
-    // Left ellipsis
-    if (start > 2) {
-      items.push({ key: 'ellipsis-start', type: 'ellipsis' });
-    }
-
-    // Sibling pages
-    for (let i = start; i <= end; i++) {
-      items.push({ key: `page-${i}`, type: 'page', value: i });
-    }
-
-    // Right ellipsis
-    if (end < total - 1) {
-      items.push({ key: 'ellipsis-end', type: 'ellipsis' });
-    }
-
-    // Always show last (if more than 1 page)
-    if (total > 1) {
-      items.push({ key: `page-${total}`, type: 'page', value: total });
-    }
-
-    // Next button
-    items.push({ key: 'next', type: 'next', value: page + 1 });
-
-    return items;
-  }
-
-  #createItem(item, page) {
-    if (item.type === 'ellipsis') {
-      const span = document.createElement('span');
-      span.setAttribute('data-ellipsis', '');
-      span.textContent = '\u2026';
-      return span;
-    }
-
-    const btn = document.createElement('button');
-    btn.setAttribute('type', 'button');
-
-    if (item.type === 'prev') {
-      btn.setAttribute('data-prev', '');
-      btn.setAttribute('aria-label', 'Previous page');
-      btn.textContent = '\u2039';
-    } else if (item.type === 'next') {
-      btn.setAttribute('data-next', '');
-      btn.setAttribute('aria-label', 'Next page');
-      btn.textContent = '\u203A';
-    } else {
-      btn.setAttribute('data-page', '');
-      btn.dataset.value = String(item.value);
-      btn.textContent = String(item.value);
-      btn.setAttribute('aria-label', `Page ${item.value}`);
-    }
-
-    this.#updateItem(btn, item, page);
-    return btn;
-  }
-
-  #updateItem(el, item, page) {
-    if (item.type === 'ellipsis') return;
-
-    if (item.type === 'prev') {
-      if (page <= 1) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
-    } else if (item.type === 'next') {
-      if (page >= this.total) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
-    } else {
-      el.dataset.value = String(item.value);
-      el.textContent = String(item.value);
-      el.setAttribute('aria-label', `Page ${item.value}`);
-      if (item.value === page) {
-        el.setAttribute('data-active', '');
-        el.setAttribute('aria-current', 'page');
-      } else {
-        el.removeAttribute('data-active');
-        el.removeAttribute('aria-current');
-      }
-    }
-  }
-
-  #onClick = (e) => {
-    const btn = e.target.closest('[data-prev], [data-next], [data-page]');
-    if (!btn || btn.hasAttribute('disabled') || !this.#nav.contains(btn)) return;
-
-    let newPage;
-
-    if (btn.hasAttribute('data-prev')) {
-      newPage = this.page - 1;
-    } else if (btn.hasAttribute('data-next')) {
-      newPage = this.page + 1;
-    } else if (btn.hasAttribute('data-page')) {
-      newPage = Number(btn.dataset.value);
-    }
-
-    if (newPage == null || newPage < 1 || newPage > this.total || newPage === this.page) return;
+import { defineIfFree } from '../../core/register.js';
+import { UIPagination } from './class.js';
 
-    this.page = newPage;
-    this.dispatchEvent(new CustomEvent('page-change', {
-      bubbles: true,
-      detail: { page: this.page },
-    }));
-  };
-}
-customElements.define('pagination-ui', UIPagination);
+defineIfFree('pagination-ui', UIPagination);
 
 export { UIPagination };

package/components/pane/class.js

@@ -0,0 +1,186 @@
+/**
+ * Non-side-effect class export for `<pane-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/pane`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <pane-ui> — Collapsible, resizable panel.
+ *
+ * Structure:
+ *   <pane-ui>
+ *     <header>Pane Title</header>
+ *     <section>
+ *       <header>Section Title</header>
+ *       <div data-col>
+ *         ...content...
+ *       </div>
+ *     </section>
+ *     <section>...</section>
+ *     <footer>...</footer>
+ *   </pane-ui>
+ *
+ * Attributes:
+ *   collapsed    — boolean, hides content and footer
+ *   resizable    — boolean, enables drag-to-resize (width)
+ *   min-width    — minimum width when resizing (default: 200)
+ *   max-width    — maximum width when resizing (default: 600)
+ *   side         — 'leading' | 'trailing' | '' (default). When set, the
+ *                  pane is treated as a horizontal sibling: the default
+ *                  four-sided border is suppressed, only the inner-edge
+ *                  border is drawn, the resize grabber moves to that
+ *                  inner edge, and the resize-drag direction flips so
+ *                  trailing panes grow when dragged leftward.
+ *
+ * JS API:
+ *   pane.collapsed = true/false
+ *   pane.toggle()
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPane extends UIElement {
+  static properties = {
+    collapsed:  { type: Boolean, default: false, reflect: true },
+    resizable:  { type: Boolean, default: false, reflect: true },
+    minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
+    maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
+    side:       { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #resizeEl = null;
+  #dragging = false;
+  #startX = 0;
+  #startW = 0;
+  #pointerId = null;
+  #prevDocCursor = '';
+  #bound = false;
+
+  connected() {
+    if (!this.#bound) {
+      this.#bound = true;
+
+      // Click on pane header toggles collapse
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+
+    // Stamp resize handle if resizable and not present
+    if (this.resizable && !this.querySelector('[slot="resize"]')) {
+      this.#resizeEl = document.createElement('div');
+      this.#resizeEl.setAttribute('slot', 'resize');
+      this.appendChild(this.#resizeEl);
+    }
+
+    if (this.#resizeEl || this.resizable) {
+      this.#resizeEl = this.#resizeEl || this.querySelector('[slot="resize"]');
+      this.#resizeEl?.addEventListener('pointerdown', this.#onResizeDown);
+    }
+  }
+
+  render() {
+    const header = this.querySelector(':scope > header');
+    if (header) {
+      header.setAttribute('role', 'button');
+      header.setAttribute('tabindex', '0');
+      header.setAttribute('aria-expanded', String(!this.collapsed));
+
+      // Stamp chevron icon if not present
+      if (!header.querySelector('[slot="chevron"]')) {
+        const chevron = document.createElement('icon-ui');
+        chevron.setAttribute('slot', 'chevron');
+        chevron.setAttribute('name', 'caret-right');
+        header.append(chevron);
+      }
+    }
+  }
+
+  toggle() {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new Event('toggle', { bubbles: true }));
+  }
+
+  #onClick = (e) => {
+    const header = this.querySelector(':scope > header');
+    if (header && (e.target === header || header.contains(e.target))) {
+      this.toggle();
+    }
+  };
+
+  #onKey = (e) => {
+    if (e.target !== this.querySelector(':scope > header')) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggle();
+    }
+  };
+
+  // ── Resize ──
+  //
+  // Pointer capture + handle-level listeners (not document-level): keeps
+  // pointer events flowing to the grabber even when the cursor races past
+  // it, and works under touch. Cursor is locked at the documentElement
+  // level so it stays `col-resize` across the whole viewport during drag,
+  // not just over the 4px handle. CSS bypasses any width transition while
+  // `[data-resizing]` is set, so resizes track the pointer 1:1.
+
+  #onResizeDown = (e) => {
+    if (!e.isPrimary) return;
+    e.preventDefault();
+    this.#dragging = true;
+    this.#startX = e.clientX;
+    this.#startW = this.getBoundingClientRect().width;
+    this.#pointerId = e.pointerId;
+    this.setAttribute('data-resizing', '');
+
+    try { this.#resizeEl.setPointerCapture(e.pointerId); } catch {}
+    this.#resizeEl.addEventListener('pointermove', this.#onResizeMove);
+    this.#resizeEl.addEventListener('pointerup', this.#onResizeUp, { once: true });
+    this.#resizeEl.addEventListener('pointercancel', this.#onResizeUp, { once: true });
+
+    this.#prevDocCursor = document.documentElement.style.cursor;
+    document.documentElement.style.cursor = 'col-resize';
+  };
+
+  #onResizeMove = (e) => {
+    if (!this.#dragging) return;
+    // For a trailing pane the grabber sits on the LEFT edge but the pane
+    // is anchored on the RIGHT side of its flex row — dragging leftward
+    // should GROW the pane (grabber moves further left = more width),
+    // not shrink it. Negate dx in that case.
+    const sign = this.side === 'trailing' ? -1 : 1;
+    const dx = (e.clientX - this.#startX) * sign;
+    const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
+    this.style.width = `${w}px`;
+  };
+
+  #onResizeUp = () => {
+    if (!this.#dragging) return;
+    this.#dragging = false;
+    this.removeAttribute('data-resizing');
+    try { this.#resizeEl?.releasePointerCapture(this.#pointerId); } catch {}
+    this.#pointerId = null;
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    document.documentElement.style.cursor = this.#prevDocCursor;
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    if (this.#dragging) {
+      document.documentElement.style.cursor = this.#prevDocCursor;
+    }
+    this.#bound = false;
+  }
+}

package/components/pane/pane.a2ui.json

@@ -54,7 +54,14 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
-    "events": {},
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {
+      "toggle": {
+        "description": "Fired when the pane's collapsed state flips (via button press, keyboard, or programmatic toggle()). Bubbles."
+      }
+    },
     "examples": [
       {
         "description": "Split pane with TextArea for editing markdown on the left and a preview card on the right.",
@@ -85,7 +92,18 @@
         "name": "idle"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "split-pane",
+        "side-panel",
+        "resizable-panel",
+        "detail-pane",
+        "list-pane",
+        "context-pane",
+        "Panel",
+        "Pane"
+      ]
+    },
     "tag": "pane-ui",
     "tokens": {},
     "traits": [],

package/components/pane/pane.d.ts

@@ -0,0 +1,41 @@
+/**
+ * `<pane-ui>` — Collapsible, resizable panel.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/pane
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type PaneToggleEvent = CustomEvent<unknown>;
+
+export class UIPane extends UIElement {
+  /** Component property: collapsed. */
+  collapsed: boolean;
+  /** Component property: maxWidth. */
+  maxWidth: number;
+  /** Component property: minWidth. */
+  minWidth: number;
+  /** Component property: resizable. */
+  resizable: boolean;
+  /** Opts a pane into horizontal-sibling chrome: suppresses the default
+four-sided border and moves the resize grabber to the inner edge
+(right edge for `leading`, left edge for `trailing`). Also flips the
+resize-drag direction so `trailing` panes grow when dragged leftward.
+Unset keeps the pane-intrinsic chrome (full border, right-edge
+grabber when resizable).
+ */
+  side: '' | 'leading' | 'trailing';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPane, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}