@adukiorg/anza 0.2.0

package/src/elements/layout/grid/index.js

@@ -0,0 +1,41 @@
+/**
+ * src/elements/layout/grid/index.js
+ *
+ * Layout System: <ui-grid>
+ * Multi-column responsive layout grid offering automated columns mapping
+ * and standard spacing gaps.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-grid', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    cols: { type: String, reflect: true },
+    gap: { type: String, reflect: true }
+  },
+  mount({ el }) {
+    update(el);
+  },
+  update({ el }) {
+    update(el);
+  }
+}, import.meta.url);
+
+function update(el) {
+  if (el.cols) {
+    if (!isNaN(el.cols)) {
+      el.style.setProperty('--grid-cols', `repeat(${el.cols}, minmax(0, 1fr))`);
+    } else {
+      el.style.setProperty('--grid-cols', el.cols);
+    }
+  }
+
+  if (el.gap) {
+    const gapVal = el.gap.includes('px') || el.gap.includes('rem') ? el.gap : `var(--space-${el.gap})`;
+    el.style.setProperty('--grid-gap', gapVal);
+  }
+}

package/src/elements/layout/grid/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["grid"],"tags":["div","slot"],"compound":["div.grid"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/grid/style.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: var(--grid-cols);
+  gap: var(--grid-gap);
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/elements/layout/header/index.html

@@ -0,0 +1,8 @@
+<header part="header">
+  <div class="brand" part="brand">
+    <slot name="brand"></slot>
+  </div>
+  <div class="actions" part="actions">
+    <slot></slot>
+  </div>
+</header>

package/src/elements/layout/header/index.js

@@ -0,0 +1,16 @@
+/**
+ * src/elements/layout/header/index.js
+ *
+ * Layout System: <ui-header>
+ * Top navigation header component displaying logo/branding sections,
+ * action slots, and matching premium bordered surfaces.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-header', {
+  style: './style.css',
+  template: './index.html'
+}, import.meta.url);

package/src/elements/layout/header/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["actions","brand"],"tags":["div","header","slot"],"compound":["div.actions","div.brand"],"attrs":["class","name","part"],"refTypes":{}}

package/src/elements/layout/header/style.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--space-px) solid var(--color-border-default);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--space-16);
+  padding: 0 var(--space-6);
+  box-sizing: border-box;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}

package/src/elements/layout/scroll/index.html

@@ -0,0 +1,3 @@
+<div class="viewport" part="viewport">
+  <slot></slot>
+</div>

package/src/elements/layout/scroll/index.js

@@ -0,0 +1,19 @@
+/**
+ * src/elements/layout/scroll/index.js
+ *
+ * Layout System: <ui-scroll>
+ * Custom scroll containment container offering momentum scrolling
+ * and layout scroll-snap coordination.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-scroll', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    snap: { type: Boolean, reflect: true }
+  }
+}, import.meta.url);

package/src/elements/layout/scroll/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["viewport"],"tags":["div","slot"],"compound":["div.viewport"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/scroll/style.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.viewport {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
+}
+
+/* Scroll snapping implementations */
+:host([snap]) .viewport {
+  scroll-snap-type: y mandatory;
+}
+
+::slotted(*) {
+  scroll-snap-align: start;
+}

package/src/elements/layout/sidebar/index.html

@@ -0,0 +1,3 @@
+<div class="wrapper" part="wrapper">
+  <slot></slot>
+</div>

package/src/elements/layout/sidebar/index.js

@@ -0,0 +1,24 @@
+/**
+ * src/elements/layout/sidebar/index.js
+ *
+ * Layout System: <ui-sidebar>
+ * Collapsible side-panel layout displaying navigation bars, action links,
+ * and supporting collapsible layouts.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-sidebar', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    collapsed: { type: Boolean, reflect: true }
+  },
+  methods: {
+    toggle({ el }) {
+      el.collapsed = !el.collapsed;
+    }
+  }
+}, import.meta.url);

package/src/elements/layout/sidebar/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["wrapper"],"tags":["div","slot"],"compound":["div.wrapper"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/sidebar/style.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  background: var(--color-surface-elevated);
+  border-right: var(--space-px) solid var(--color-border-default);
+  height: calc(100vh - var(--space-16));
+  box-sizing: border-box;
+  width: calc(var(--space-16) * 4);
+  transition: width var(--duration-medium) var(--ease-out);
+  position: sticky;
+  top: var(--space-16);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--space-6) var(--space-4);
+  box-sizing: border-box;
+  overflow-y: auto;
+  gap: var(--space-6);
+}
+
+/* Collapse styling transformations */
+:host([collapsed]) {
+  width: var(--space-16);
+}
+
+:host([collapsed]) ::slotted(*) {
+  display: none;
+}

package/src/elements/layout/split/index.html

@@ -0,0 +1,3 @@
+<div class="split" part="split">
+  <slot></slot>
+</div>

package/src/elements/layout/split/index.js

@@ -0,0 +1,18 @@
+/**
+ * src/elements/layout/split/index.js
+ *
+ * Layout System: <ui-split>
+ * Flexible two-pane responsive split layout divider.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-split', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    ratio: { type: String, reflect: true, default: '1-1' }
+  }
+}, import.meta.url);

package/src/elements/layout/split/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["split"],"tags":["div","slot"],"compound":["div.split"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/split/style.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.split {
+  display: flex;
+  gap: var(--space-6);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ratio configurations mapping to pane sizes */
+:host([ratio="1-1"]) .split ::slotted(*:first-child) { flex: 1; }
+:host([ratio="1-1"]) .split ::slotted(*:last-child) { flex: 1; }
+
+:host([ratio="1-2"]) .split ::slotted(*:first-child) { flex: 1; }
+:host([ratio="1-2"]) .split ::slotted(*:last-child) { flex: 2; }
+
+:host([ratio="2-1"]) .split ::slotted(*:first-child) { flex: 2; }
+:host([ratio="2-1"]) .split ::slotted(*:last-child) { flex: 1; }
+
+@media (max-width: 768px) {
+  .split {
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+}

package/src/elements/layout/stack/index.html

@@ -0,0 +1,3 @@
+<div class="stack" part="stack">
+  <slot></slot>
+</div>

package/src/elements/layout/stack/index.js

@@ -0,0 +1,31 @@
+/**
+ * src/elements/layout/stack/index.js
+ *
+ * Layout System: <ui-stack>
+ * Vertical stack container applying standardized layout gap spacers.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-stack', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    gap: { type: String, reflect: true }
+  },
+  mount({ el }) {
+    update(el);
+  },
+  update({ el }) {
+    update(el);
+  }
+}, import.meta.url);
+
+function update(el) {
+  if (el.gap) {
+    const gapVal = el.gap.includes('px') || el.gap.includes('rem') ? el.gap : `var(--space-${el.gap})`;
+    el.style.setProperty('--stack-gap', gapVal);
+  }
+}

package/src/elements/layout/stack/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["stack"],"tags":["div","slot"],"compound":["div.stack"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/stack/style.css

@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stack-gap);
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/elements/layout/surface/index.html

@@ -0,0 +1,3 @@
+<div class="surface" part="surface">
+  <slot></slot>
+</div>

package/src/elements/layout/surface/index.js

@@ -0,0 +1,19 @@
+/**
+ * src/elements/layout/surface/index.js
+ *
+ * Layout System: <ui-surface>
+ * Standard styling layer wrapping semantic backdrop surfaces, elevated shadow levels,
+ * and borders.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-surface', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    variant: { type: String, reflect: true, default: 'flat' }
+  }
+}, import.meta.url);

package/src/elements/layout/surface/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["surface"],"tags":["div","slot"],"compound":["div.surface"],"attrs":["class","part"],"refTypes":{}}

package/src/elements/layout/surface/style.css

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.surface {
+  background: var(--surface-bg);
+  border: var(--space-px) solid var(--surface-border);
+  box-shadow: var(--surface-shadow);
+  border-radius: var(--surface-radius);
+  padding: var(--space-6);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Surface variants mapping to light/dark semantic tokens */
+:host([variant="elevated"]) {
+  --surface-bg:     var(--color-surface-elevated);
+  --surface-border: var(--color-border-default);
+  --surface-shadow: var(--shadow-md);
+  --surface-radius: var(--radius-lg);
+}
+
+:host([variant="flat"]) {
+  --surface-bg:     var(--color-surface-page);
+  --surface-border: var(--color-border-default);
+  --surface-radius: var(--radius-md);
+}

package/src/elements/navigation/breadcrumb/index.html

@@ -0,0 +1,5 @@
+<nav part="nav" aria-label="Breadcrumb">
+  <ol part="list">
+    <slot></slot>
+  </ol>
+</nav>

package/src/elements/navigation/breadcrumb/index.js

@@ -0,0 +1,16 @@
+/**
+ * src/elements/navigation/breadcrumb/index.js
+ *
+ * Navigation System: <ui-breadcrumb>
+ * Standard-compliant accessible navigation trails trails. Injects design spacing
+ * dividers between items using CSS pseudoselectors.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-breadcrumb', {
+  style: './style.css',
+  template: './index.html'
+}, import.meta.url);

package/src/elements/navigation/breadcrumb/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":[],"tags":["nav","ol","slot"],"compound":[],"attrs":["aria-label","part"],"refTypes":{}}

package/src/elements/navigation/breadcrumb/style.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  font-family: var(--font-family-sans);
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-2);
+}
+
+::slotted(ui-link), ::slotted(span), ::slotted(a) {
+  font-size: var(--font-size-sm);
+  color: var(--color-content-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+::slotted(ui-link:last-child), ::slotted(span:last-child), ::slotted(a:last-child) {
+  color: var(--color-content-primary);
+  font-weight: var(--font-weight-medium);
+  pointer-events: none;
+}
+
+/* dynamic separator overlays using CSS content styles */
+::slotted(*:not(:last-child))::after {
+  content: "/";
+  color: var(--color-border-strong);
+  font-weight: var(--font-weight-regular);
+  margin-left: var(--space-2);
+}

package/src/elements/navigation/nav/index.html

@@ -0,0 +1,3 @@
+<nav part="nav">
+  <slot></slot>
+</nav>

package/src/elements/navigation/nav/index.js

@@ -0,0 +1,24 @@
+/**
+ * src/elements/navigation/nav/index.js
+ *
+ * Navigation System: <ui-nav>
+ * Flexible routing navigation wrapper offering horizontal/vertical orientation
+ * and standard accessible semantic lists markup.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-nav', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    orientation: { type: String, reflect: true, default: 'horizontal' }
+  },
+  mount({ el }) {
+    if (!el.hasAttribute('role')) {
+      el.setAttribute('role', 'navigation');
+    }
+  }
+}, import.meta.url);

package/src/elements/navigation/nav/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":[],"tags":["nav","slot"],"compound":[],"attrs":["part"],"refTypes":{}}

package/src/elements/navigation/nav/style.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  font-family: var(--font-family-sans);
+}
+
+nav {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:host([orientation="vertical"]) nav {
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+:host([orientation="horizontal"]) nav {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/* Distribute styles downwards to child link elements */
+::slotted(ui-link) {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+::slotted(ui-link:hover) {
+  background: var(--color-interactive-disabled);
+}
+
+::slotted(ui-link[aria-current="page"]) {
+  background: var(--color-interactive-disabled);
+  color: var(--color-interactive);
+  font-weight: var(--font-weight-semibold);
+}

package/src/elements/navigation/pagination/index.html

@@ -0,0 +1,3 @@
+<button id="prev-btn" part="button prev" type="button">Previous</button>
+<span class="page-indicator" part="indicator">Page 1 of 1</span>
+<button id="next-btn" part="button next" type="button">Next</button>

package/src/elements/navigation/pagination/index.js

@@ -0,0 +1,94 @@
+/**
+ * src/elements/navigation/pagination/index.js
+ *
+ * Navigation System: <ui-pagination>
+ * URL query-state aware pagination component. Synchronously updates page variables
+ * in a bookmarkable fashion via the client router.
+ *
+ * Source: doc 04 — Web Components §3, doc 08 — State Management §3, doc 09 — Routing §8
+ */
+
+import { ui } from '../../../core/ui/index.js';
+import { navigate } from '../../../core/router/index.js';
+
+ui.element('ui-pagination', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    page: { type: Number, reflect: true },
+    total: { type: Number, reflect: true },
+    limit: { type: Number, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const prev = tags.one('#prev-btn');
+    const next = tags.one('#next-btn');
+
+    on.click(prev, () => changePage(el, -1));
+    on.click(next, () => changePage(el, 1));
+
+    // Sync pagination state with navigation changes
+    if (typeof window !== 'undefined' && window.navigation) {
+      window.navigation.addEventListener('navigate', () => syncState(el, tags), { signal: el.ctrl.signal });
+    }
+
+    syncState(el, tags);
+  },
+  update({ el, tags }) {
+    syncState(el, tags);
+  }
+}, import.meta.url);
+
+function syncState(el, tags) {
+  const prev = tags.one('#prev-btn');
+  const next = tags.one('#next-btn');
+  const indicator = tags.one('.page-indicator');
+
+  // Parse attributes safely using read-site coercion logic
+  const total = Math.max(0, el.total || 0);
+  const limit = Math.max(1, el.limit || 10);
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  let page = 1;
+  if (el.page) {
+    page = el.page || 1;
+  } else if (typeof window !== 'undefined') {
+    const url = new URL(window.navigation?.currentEntry?.url || window.location.href);
+    page = Number(url.searchParams.get('page')) || 1;
+  }
+
+  page = Math.min(totalPages, Math.max(1, page));
+
+  indicator.textContent = `Page ${page} of ${totalPages}`;
+  prev.disabled = page <= 1;
+  next.disabled = page >= totalPages;
+}
+
+function changePage(el, delta) {
+  const total = Math.max(0, el.total || 0);
+  const limit = Math.max(1, el.limit || 10);
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  let page = 1;
+  if (el.page) {
+    page = el.page || 1;
+  } else if (typeof window !== 'undefined') {
+    const url = new URL(window.navigation?.currentEntry?.url || window.location.href);
+    page = Number(url.searchParams.get('page')) || 1;
+  }
+
+  const nextPage = Math.min(totalPages, Math.max(1, page + delta));
+
+  if (el.page) {
+    el.page = nextPage;
+  } else if (typeof window !== 'undefined') {
+    const url = new URL(window.navigation?.currentEntry?.url || window.location.href);
+    url.searchParams.set('page', nextPage);
+    navigate(url.pathname + url.search);
+  }
+
+  el.dispatchEvent(new CustomEvent('page-change', {
+    detail: { page: nextPage },
+    bubbles: true,
+    composed: true
+  }));
+}

package/src/elements/navigation/pagination/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":["next-btn","prev-btn"],"classes":["page-indicator"],"tags":["button","span"],"compound":["span.page-indicator"],"attrs":["class","id","part","type"],"refTypes":{}}