@adia-ai/web-components 0.0.1

package/components/pagination/pagination.css

@@ -0,0 +1,162 @@
+/* ═══════════════════════════════════════════════════════════════
+   PAGINATION-N — Page navigation with numbers and prev/next.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (pagination-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --pagination-gap:          var(--a-space-1);
+    --pagination-button-size:  var(--a-size-sm);
+    --pagination-button-px:    var(--a-space-1);
+    --pagination-radius:       var(--a-radius-sm);
+
+    /* ── Typography ── */
+    --pagination-font:         var(--a-ui-size);
+
+    /* ── Colors ── */
+    --pagination-fg:           var(--a-fg-subtle);
+    --pagination-fg-hover:     var(--a-fg);
+    --pagination-fg-active:    white;
+    --pagination-fg-muted:     var(--a-fg-muted);
+    --pagination-bg-hover:     var(--a-bg-muted);
+    --pagination-bg-active:    var(--a-accent);
+    --pagination-fg-disabled:  var(--a-ui-text-disabled);
+
+    /* ── Transition ── */
+    --pagination-duration:     var(--a-duration-fast);
+    --pagination-easing:       var(--a-easing);
+
+    /* ── State ── */
+    --pagination-focus-ring:   var(--a-focus-ring);
+
+    /* ── Nav (button variant chrome) ── */
+    --pagination-nav-bg:           transparent;
+    --pagination-nav-border:       transparent;
+    --pagination-nav-border-hover: transparent;
+    --pagination-nav-bg-disabled:  transparent;
+    --pagination-nav-border-disabled: transparent;
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+  }
+
+  /* ── Nav container ── */
+  [slot="nav"] {
+    display: flex;
+    align-items: center;
+    gap: var(--pagination-gap);
+  }
+
+  /* ── All buttons ── */
+  [slot="nav"] button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--pagination-button-size);
+    height: var(--pagination-button-size);
+    padding: 0 var(--pagination-button-px);
+    border: none;
+    background: none;
+    border-radius: var(--pagination-radius);
+    font: inherit;
+    font-size: var(--pagination-font);
+    color: var(--pagination-fg);
+    cursor: pointer;
+    user-select: none;
+    line-height: 1;
+    transition:
+      background var(--pagination-duration) var(--pagination-easing),
+      color var(--pagination-duration) var(--pagination-easing);
+  }
+
+  [slot="nav"] button:not([disabled]):hover {
+    background: var(--pagination-bg-hover);
+    color: var(--pagination-fg-hover);
+  }
+
+  /* ── Active page ── */
+  [slot="nav"] button[data-active] {
+    background: var(--pagination-bg-active);
+    color: var(--pagination-fg-active);
+  }
+
+  [slot="nav"] button[data-active]:hover {
+    background: var(--pagination-bg-active);
+    color: var(--pagination-fg-active);
+  }
+
+  /* ── Disabled (prev/next at boundaries) ── */
+  [slot="nav"] button[disabled] {
+    color: var(--pagination-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Ellipsis ── */
+  [slot="nav"] [data-ellipsis] {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--pagination-button-size);
+    height: var(--pagination-button-size);
+    color: var(--pagination-fg-muted);
+    font-size: var(--pagination-font);
+    pointer-events: none;
+    user-select: none;
+    line-height: 1;
+  }
+
+  /* ── Focus visible ── */
+  [slot="nav"] button:focus-visible {
+    outline: none;
+    box-shadow: var(--pagination-focus-ring);
+  }
+
+  /* ═══════════════════════════════════════════════════════════
+     VARIANT: button — square 1:1 aspect-ratio page buttons
+     ═══════════════════════════════════════════════════════════ */
+
+  :scope[variant="button"] {
+    --pagination-nav-bg:              var(--a-bg);
+    --pagination-nav-border:          var(--a-border-subtle);
+    --pagination-nav-border-hover:    var(--a-border);
+    --pagination-nav-bg-disabled:     var(--a-bg);
+    --pagination-nav-border-disabled: var(--a-border-subtle);
+  }
+
+  :scope[variant="button"] [slot="nav"] button {
+    width: var(--pagination-button-size);
+    min-width: var(--pagination-button-size);
+    height: var(--pagination-button-size);
+    padding: 0;
+    aspect-ratio: 1;
+    border: 1px solid var(--pagination-nav-border);
+    border-radius: var(--pagination-radius);
+    background: var(--pagination-nav-bg);
+  }
+
+  :scope[variant="button"] [slot="nav"] button:not([disabled]):hover {
+    border-color: var(--pagination-nav-border-hover);
+    background: var(--pagination-bg-hover);
+  }
+
+  :scope[variant="button"] [slot="nav"] button[data-active] {
+    border-color: transparent;
+    background: var(--pagination-bg-active);
+    color: var(--pagination-fg-active);
+  }
+
+  :scope[variant="button"] [slot="nav"] button[data-active]:hover {
+    background: var(--pagination-bg-active);
+  }
+
+  :scope[variant="button"] [slot="nav"] button[disabled] {
+    border-color: var(--pagination-nav-border-disabled);
+    background: var(--pagination-nav-bg-disabled);
+  }
+}

package/components/pagination/pagination.js

@@ -0,0 +1,185 @@
+/**
+ * <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 { AdiaElement } from '@core/element.js';
+
+class AdiaPagination extends AdiaElement {
+  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 },
+    }));
+  };
+}
+customElements.define('pagination-ui', AdiaPagination);
+
+export { AdiaPagination };

package/components/pagination/pagination.yaml

@@ -0,0 +1,165 @@
+# 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: AdiaPagination
+tag: pagination-ui
+component: Pagination
+category: navigation
+version: 1
+description: Page navigation with prev/next buttons, page numbers, and ellipsis.
+props:
+  page:
+    description: Current active page number.
+    type: number
+    default: 1
+  current:
+    description: Alias for `page` — accepted for back-compat.
+    type: number
+    default: 1
+  siblings:
+    description: Number of page buttons to show on each side of the current page.
+    type: number
+    default: 1
+  pageSize:
+    description: Items per page — drives the visible window and total-page math when combined with a total item count.
+    type: number
+    default: 10
+    attribute: page-size
+  total:
+    description: Total number of pages.
+    type: number
+    default: 1
+  variant:
+    description: Visual variant
+    type: string
+    default: ""
+events:
+  page-change:
+    description: Fired when a page button is clicked. detail contains { page }.
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: data-table-view
+    description: Card with header containing title and search input, table component, and pagination footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "size": "lg",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title-row"
+          ]
+        },
+        {
+          "id": "title-row",
+          "component": "Row",
+          "children": [
+            "title",
+            "search"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Data Table",
+          "variant": "section"
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Search...",
+          "type": "search",
+          "name": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "tbl"
+          ]
+        },
+        {
+          "id": "tbl",
+          "component": "Table",
+          "sortable": true
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "pager"
+          ]
+        },
+        {
+          "id": "pager",
+          "component": "Pagination",
+          "totalPages": 10,
+          "currentPage": 1
+        }
+      ]
+  - name: pagination-nav
+    description: Row with centered pagination component for navigating paged content.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Row",
+          "justify": "center",
+          "children": [
+            "pager"
+          ]
+        },
+        {
+          "id": "pager",
+          "component": "Pagination",
+          "totalPages": 10,
+          "currentPage": 1
+        }
+      ]
+keywords:
+  - pagination
+  - navigation
+  - back
+  - paginate
+  - paging
+synonyms:
+  back:
+    - breadcrumb
+    - nav
+    - pagination
+  navigation:
+    - nav
+    - sidebar
+    - breadcrumb
+    - tabs
+    - menu
+    - pagination
+  paginate:
+    - pagination
+    - nav
+    - table
+  paging:
+    - pagination
+    - nav
+related:
+  - input
+  - table

package/components/pane/pane.a2ui.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Pane.json",
+  "title": "Pane",
+  "description": "Collapsible, resizable panel.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "collapsed": {
+      "description": "Component property: collapsed.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Pane"
+    },
+    "maxWidth": {
+      "description": "Component property: maxWidth.",
+      "type": "number",
+      "default": 9999
+    },
+    "minWidth": {
+      "description": "Component property: minWidth.",
+      "type": "number",
+      "default": 200
+    },
+    "open": {
+      "description": "Controls whether the panel content is visible",
+      "type": "boolean",
+      "default": false
+    },
+    "resizable": {
+      "description": "Component property: resizable.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Text displayed in the header",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "description": "Split pane with TextArea for editing markdown on the left and a preview card on the right.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"left\",\n      \"right\"\n    ]\n  },\n  {\n    \"id\": \"left\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"editor-card\"\n    ]\n  },\n  {\n    \"id\": \"editor-card\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"ed-hdr\",\n      \"ed-sec\"\n    ]\n  },\n  {\n    \"id\": \"ed-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"ed-title\"\n    ]\n  },\n  {\n    \"id\": \"ed-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Editor\"\n  },\n  {\n    \"id\": \"ed-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"textarea\"\n    ]\n  },\n  {\n    \"id\": \"textarea\",\n    \"component\": \"TextArea\",\n    \"placeholder\": \"Write your markdown here...\",\n    \"rows\": 20\n  },\n  {\n    \"id\": \"right\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"preview-card\"\n    ]\n  },\n  {\n    \"id\": \"preview-card\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"pv-hdr\",\n      \"pv-sec\"\n    ]\n  },\n  {\n    \"id\": \"pv-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"pv-title\"\n    ]\n  },\n  {\n    \"id\": \"pv-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Preview\"\n  },\n  {\n    \"id\": \"pv-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"preview-text\"\n    ]\n  },\n  {\n    \"id\": \"preview-text\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Rendered markdown will appear here...\"\n  }\n]",
+        "name": "markdown-editor"
+      },
+      {
+        "description": "Row with two resizable Pane components for left/right panel layout.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"left\",\n      \"right\"\n    ]\n  },\n  {\n    \"id\": \"left\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"ltxt\"\n    ]\n  },\n  {\n    \"id\": \"ltxt\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Left panel content\"\n  },\n  {\n    \"id\": \"right\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"rtxt\"\n    ]\n  },\n  {\n    \"id\": \"rtxt\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Right panel content\"\n  }\n]",
+        "name": "split-pane"
+      }
+    ],
+    "keywords": [
+      "pane"
+    ],
+    "name": "AdiaPane",
+    "related": [
+      "text-area"
+    ],
+    "slots": {
+      "header": {
+        "description": "Auto-created header element with label text and toggle arrow"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "pane-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}