@adia-ai/web-components 0.4.6 → 0.4.7

package/components/otp-input/otp-input.yaml

@@ -1,5 +1,3 @@
-# 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: UIOtpInput
 tag: otp-input-ui
@@ -11,7 +9,7 @@ props:
   name:
     description: Form field name
     type: string
-    default: ""
+    default: ''
   disabled:
     description: Disables interaction
     type: boolean
@@ -24,7 +22,7 @@ props:
   value:
     description: Current OTP value
     type: string
-    default: ""
+    default: ''
 events:
   complete:
     description: Fired when all digits are filled. Detail contains { code }.
@@ -34,181 +32,54 @@ slots:
   field:
     description: Container for the digit input boxes and optional separator
 states:
-  - name: idle
-    description: Default, ready for interaction.
-  - name: disabled
-    description: Non-interactive; dimmed.
-    attribute: disabled
+- name: idle
+  description: Default, ready for interaction.
+- name: disabled
+  description: Non-interactive; dimmed.
+  attribute: disabled
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: otp-form
-    description: OTP verification form with code input and submit button.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title",
-            "desc"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "textContent": "Verify Your Identity"
-        },
-        {
-          "id": "desc",
-          "component": "Text",
-          "slot": "description",
-          "textContent": "Enter the 6-digit code sent to your email."
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "col"
-          ]
-        },
-        {
-          "id": "col",
-          "component": "Column",
-          "children": [
-            "otp",
-            "btn"
-          ],
-          "gap": "4",
-          "align": "center"
-        },
-        {
-          "id": "otp",
-          "component": "OtpInput",
-          "length": 6
-        },
-        {
-          "id": "btn",
-          "component": "Button",
-          "text": "Verify",
-          "variant": "primary"
-        }
-      ]
-  - name: otp-verification
-    description: "OTP verification card with 6-digit code input, resend link, and a primary verify
-      button in the footer. Richer than otp-form: includes resend affordance and card footer."
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec",
-            "ftr"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title",
-            "desc"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "variant": "section",
-          "textContent": "Verify Your Identity"
-        },
-        {
-          "id": "desc",
-          "component": "Text",
-          "slot": "description",
-          "variant": "caption",
-          "textContent": "Enter the 6-digit code sent to your device"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "col"
-          ]
-        },
-        {
-          "id": "col",
-          "component": "Column",
-          "gap": "4",
-          "align": "center",
-          "children": [
-            "otp",
-            "resend-row"
-          ]
-        },
-        {
-          "id": "otp",
-          "component": "OtpInput",
-          "length": 6,
-          "name": "otp-code"
-        },
-        {
-          "id": "resend-row",
-          "component": "Row",
-          "gap": "1",
-          "align": "center",
-          "children": [
-            "resend-label",
-            "resend-btn"
-          ]
-        },
-        {
-          "id": "resend-label",
-          "component": "Text",
-          "variant": "caption",
-          "color": "muted",
-          "textContent": "Didn't receive a code?"
-        },
-        {
-          "id": "resend-btn",
-          "component": "Button",
-          "text": "Resend",
-          "variant": "ghost",
-          "size": "sm"
-        },
-        {
-          "id": "ftr",
-          "component": "Footer",
-          "children": [
-            "verify-btn"
-          ]
-        },
-        {
-          "id": "verify-btn",
-          "component": "Button",
-          "text": "Verify",
-          "variant": "primary",
-          "block": true
-        }
-      ]
+- name: otp-form
+  description: OTP verification form with code input and submit button.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n\
+    \    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n     \
+    \ \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"\
+    textContent\": \"Verify Your Identity\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\"\
+    : \"description\",\n    \"textContent\": \"Enter the 6-digit code sent to your email.\"\n  },\n  {\n    \"id\": \"sec\"\
+    ,\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"\
+    component\": \"Column\",\n    \"children\": [\n      \"otp\",\n      \"btn\"\n    ],\n    \"gap\": \"4\",\n    \"align\"\
+    : \"center\"\n  },\n  {\n    \"id\": \"otp\",\n    \"component\": \"OtpInput\",\n    \"length\": 6\n  },\n  {\n    \"\
+    id\": \"btn\",\n    \"component\": \"Button\",\n    \"text\": \"Verify\",\n    \"variant\": \"primary\"\n  }\n]"
+- name: otp-verification
+  description: 'OTP verification card with 6-digit code input, resend link, and a primary verify button in the footer. Richer
+    than otp-form: includes resend affordance and card footer.'
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n\
+    \      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"\
+    title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\"\
+    ,\n    \"variant\": \"section\",\n    \"textContent\": \"Verify Your Identity\"\n  },\n  {\n    \"id\": \"desc\",\n  \
+    \  \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Enter\
+    \ the 6-digit code sent to your device\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\"\
+    : [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"\
+    align\": \"center\",\n    \"children\": [\n      \"otp\",\n      \"resend-row\"\n    ]\n  },\n  {\n    \"id\": \"otp\"\
+    ,\n    \"component\": \"OtpInput\",\n    \"length\": 6,\n    \"name\": \"otp-code\"\n  },\n  {\n    \"id\": \"resend-row\"\
+    ,\n    \"component\": \"Row\",\n    \"gap\": \"1\",\n    \"align\": \"center\",\n    \"children\": [\n      \"resend-label\"\
+    ,\n      \"resend-btn\"\n    ]\n  },\n  {\n    \"id\": \"resend-label\",\n    \"component\": \"Text\",\n    \"variant\"\
+    : \"caption\",\n    \"color\": \"muted\",\n    \"textContent\": \"Didn't receive a code?\"\n  },\n  {\n    \"id\": \"\
+    resend-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Resend\",\n    \"variant\": \"ghost\",\n    \"size\": \"\
+    sm\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"verify-btn\"\n   \
+    \ ]\n  },\n  {\n    \"id\": \"verify-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Verify\",\n    \"variant\"\
+    : \"primary\",\n    \"block\": true\n  }\n]"
 keywords:
-  - otpinput
-  - otp-input
-  - otp
-  - input
-synonyms: {}
+- otpinput
+- otp-input
+- otp
+- input
+synonyms:
+  tags:
+  - OTP
 related:
-  - button
+- button

package/components/page/class.js

@@ -0,0 +1,97 @@
+/**
+ * Non-side-effect class export for `<page-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/page`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <page-ui> — Page container.
+ *
+ * Holds page-level chrome — header / content / footer — and manages
+ * max-width clamps, padding scale, optional scroll-container, and an
+ * optional sticky-header sentinel. Compose with the slot primitives
+ * (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's @scope
+ * rules style them.
+ *
+ * Authoring:
+ *   <page-ui sticky-header max-width="prose" padding="6">
+ *     <header-ui>...</header-ui>     <!-- page title + actions -->
+ *     <section-ui>...</section-ui>   <!-- main content -->
+ *     <footer-ui>...</footer-ui>     <!-- optional -->
+ *   </page-ui>
+ *
+ * Attributes:
+ *   scroll          — boolean. Page is the scroll container (overflow-y: auto).
+ *   max-width       — '' | 'prose' (65ch) | 'narrow' (80ch) | 'wide' (1080px) | 'full' (100%).
+ *   padding         — '' | '0'..'8' (mapped to --a-space-N).
+ *   sticky-header   — boolean. Installs IntersectionObserver sentinel before the
+ *                     first <header> / <header-ui> child; sets [data-header-stuck]
+ *                     on the page when the sentinel scrolls out of view.
+ *
+ * ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPage extends UIElement {
+  static properties = {
+    scroll:       { type: Boolean, default: false, reflect: true },
+    maxWidth:     { type: String,  default: '',    attribute: 'max-width', reflect: true },
+    padding:      { type: String,  default: '',    reflect: true },
+    stickyHeader: { type: Boolean, default: false, attribute: 'sticky-header', reflect: true },
+  };
+
+  static template = () => null;
+
+  #sentinel = null;
+  #observer = null;
+
+  connected() {
+    if (this.stickyHeader) this.#installSticky();
+  }
+
+  disconnected() {
+    this.#teardownSticky();
+  }
+
+  render() {
+    // Sticky-header attribute changes between renders → install / tear down.
+    if (this.stickyHeader && !this.#sentinel) this.#installSticky();
+    if (!this.stickyHeader && this.#sentinel) this.#teardownSticky();
+  }
+
+  #installSticky() {
+    const header = this.querySelector(':scope > :is(header, header-ui)');
+    if (!header) return;
+
+    if (!this.#sentinel) {
+      this.#sentinel = document.createElement('div');
+      this.#sentinel.setAttribute('data-page-sentinel', '');
+      this.#sentinel.style.cssText = 'height: 0; width: 0; pointer-events: none;';
+      header.insertAdjacentElement('beforebegin', this.#sentinel);
+    }
+
+    if (!this.#observer) {
+      this.#observer = new IntersectionObserver((entries) => {
+        this.toggleAttribute('data-header-stuck', !entries[0].isIntersecting);
+      }, { threshold: 0 });
+    }
+
+    this.#observer.observe(this.#sentinel);
+  }
+
+  #teardownSticky() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#sentinel?.remove();
+    this.#sentinel = null;
+    this.removeAttribute('data-header-stuck');
+  }
+}

package/components/page/page.d.ts

@@ -0,0 +1,46 @@
+/**
+ * `<page-ui>` — Page container. Holds page-level chrome — header / content / footer —
+and manages max-width clamps, padding scale, optional scroll-container,
+and an optional sticky-header sentinel. Compose with the slot
+primitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's
+@scope rules style them. Drop in directly, or nest inside an
+`<admin-shell>`'s main column.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/page
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPage extends UIElement {
+  /** Token-bound max-width clamp. `prose` (65ch) for reading pages,
+`narrow` (80ch) for tight forms, `wide` (1080px) for data-rich
+pages, `full` for unconstrained. Empty defers to parent / 100%.
+Centered horizontally via `margin-inline: auto`.
+ */
+  maxWidth: '' | 'prose' | 'narrow' | 'wide' | 'full';
+  /** Page-padding scale from the spacing system. Accepts `0`–`8`
+(mapped to `--a-space-N`). Empty (no value) applies the
+`--page-padding-default` token; `0` removes padding.
+ */
+  padding: string;
+  /** Sets the page as a scroll container. `overflow-y: auto`, full
+height, contained overscroll. Use when the page IS the scroll
+surface (standalone pages); leave off when nested inside a parent
+that already manages scroll (e.g. inside an `<admin-shell>`'s
+main `<section>`).
+ */
+  scroll: boolean;
+  /** Installs an IntersectionObserver sentinel before the first
+`<header>` / `<header-ui>` child. When the sentinel scrolls out
+of view the page gains `[data-header-stuck]`, which the CSS
+uses to add a border + shadow to the header. No-op when no
+header is present.
+ */
+  stickyHeader: boolean;
+}

package/components/page/page.js

@@ -1,88 +1,17 @@
 /**
- * <page-ui> — Page container.
+ * `<page-ui>` — auto-registers the tag on import.
  *
- * Holds page-level chrome — header / content / footer — and manages
- * max-width clamps, padding scale, optional scroll-container, and an
- * optional sticky-header sentinel. Compose with the slot primitives
- * (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's @scope
- * rules style them.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Authoring:
- *   <page-ui sticky-header max-width="prose" padding="6">
- *     <header-ui>...</header-ui>     <!-- page title + actions -->
- *     <section-ui>...</section-ui>   <!-- main content -->
- *     <footer-ui>...</footer-ui>     <!-- optional -->
- *   </page-ui>
+ *   import { UIPage } from '@adia-ai/web-components/components/page/class';
  *
- * Attributes:
- *   scroll          — boolean. Page is the scroll container (overflow-y: auto).
- *   max-width       — '' | 'prose' (65ch) | 'narrow' (80ch) | 'wide' (1080px) | 'full' (100%).
- *   padding         — '' | '0'..'8' (mapped to --a-space-N).
- *   sticky-header   — boolean. Installs IntersectionObserver sentinel before the
- *                     first <header> / <header-ui> child; sets [data-header-stuck]
- *                     on the page when the sentinel scrolls out of view.
- *
- * ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md.
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIPage extends UIElement {
-  static properties = {
-    scroll:       { type: Boolean, default: false, reflect: true },
-    maxWidth:     { type: String,  default: '',    attribute: 'max-width', reflect: true },
-    padding:      { type: String,  default: '',    reflect: true },
-    stickyHeader: { type: Boolean, default: false, attribute: 'sticky-header', reflect: true },
-  };
-
-  static template = () => null;
-
-  #sentinel = null;
-  #observer = null;
-
-  connected() {
-    if (this.stickyHeader) this.#installSticky();
-  }
-
-  disconnected() {
-    this.#teardownSticky();
-  }
-
-  render() {
-    // Sticky-header attribute changes between renders → install / tear down.
-    if (this.stickyHeader && !this.#sentinel) this.#installSticky();
-    if (!this.stickyHeader && this.#sentinel) this.#teardownSticky();
-  }
-
-  #installSticky() {
-    const header = this.querySelector(':scope > :is(header, header-ui)');
-    if (!header) return;
-
-    if (!this.#sentinel) {
-      this.#sentinel = document.createElement('div');
-      this.#sentinel.setAttribute('data-page-sentinel', '');
-      this.#sentinel.style.cssText = 'height: 0; width: 0; pointer-events: none;';
-      header.insertAdjacentElement('beforebegin', this.#sentinel);
-    }
-
-    if (!this.#observer) {
-      this.#observer = new IntersectionObserver((entries) => {
-        this.toggleAttribute('data-header-stuck', !entries[0].isIntersecting);
-      }, { threshold: 0 });
-    }
-
-    this.#observer.observe(this.#sentinel);
-  }
-
-  #teardownSticky() {
-    this.#observer?.disconnect();
-    this.#observer = null;
-    this.#sentinel?.remove();
-    this.#sentinel = null;
-    this.removeAttribute('data-header-stuck');
-  }
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIPage } from './class.js';
 
-customElements.define('page-ui', UIPage);
+defineIfFree('page-ui', UIPage);
 
 export { UIPage };

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 },
+    }));
+  };
+}