@adukiorg/anza 0.2.0

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

@@ -0,0 +1,39 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--font-family-sans);
+  width: 100%;
+}
+
+button {
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-primary);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+}
+
+button:hover:not(:disabled) {
+  background: var(--color-interactive-disabled);
+}
+
+button:disabled {
+  color: var(--color-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.page-indicator {
+  font-size: var(--font-size-sm);
+  color: var(--color-content-secondary);
+  user-select: none;
+}

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

@@ -0,0 +1,6 @@
+<div class="line" part="line">
+  <div class="line-fill" part="line-fill"></div>
+</div>
+<div class="container" part="container">
+  <slot></slot>
+</div>

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

@@ -0,0 +1,64 @@
+/**
+ * src/elements/navigation/steps/index.js
+ *
+ * Navigation System: <ui-steps>
+ * Linear step indicator tracking completed, active, and upcoming workflow steps.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-steps', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    active: { type: Number, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const slot = tags.one('slot');
+
+    on.slotchange(slot, () => {
+      const steps = getSteps(tags);
+      steps.forEach((step, index) => {
+        step.setAttribute('role', 'step');
+        // Set numeric step labels inside nodes
+        if (step.getAttribute('state') !== 'completed') {
+          step.style.setProperty('--step-num', `"${index + 1}"`);
+        }
+      });
+      update(el, tags);
+    });
+
+    update(el, tags);
+  },
+  update({ el, tags }) {
+    update(el, tags);
+  }
+}, import.meta.url);
+
+function getSteps(tags) {
+  const slot = tags.one('slot');
+  return slot.assignedElements();
+}
+
+function update(el, tags) {
+  const steps = getSteps(tags);
+  const active = el.active || 0;
+  const lineFill = tags.one('.line-fill');
+
+  if (steps.length === 0) return;
+
+  steps.forEach((step, index) => {
+    if (index < active) {
+      step.setAttribute('state', 'completed');
+    } else if (index === active) {
+      step.setAttribute('state', 'active');
+    } else {
+      step.removeAttribute('state');
+    }
+  });
+
+  const percent = steps.length > 1 ? (active / (steps.length - 1)) * 100 : 0;
+  lineFill.style.width = `${percent}%`;
+}

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

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

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

@@ -0,0 +1,78 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-family: var(--font-family-sans);
+  position: relative;
+}
+
+/* Connecting background progress line */
+.line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: var(--space-0-5);
+  background: var(--color-border-default);
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.line-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--color-interactive);
+  transition: width var(--duration-medium) var(--ease-out);
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+::slotted(ui-step), ::slotted(div[role="step"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* Step indicator node circles */
+::slotted(*)::before {
+  content: "";
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-full);
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-content-secondary);
+  transition:
+    background-color var(--duration-medium) var(--ease-out),
+    border-color var(--duration-medium) var(--ease-out),
+    color var(--duration-medium) var(--ease-out);
+  box-sizing: border-box;
+  margin-bottom: var(--space-2);
+}
+
+::slotted([state="active"])::before {
+  border-color: var(--color-interactive);
+  color: var(--color-interactive);
+  background: var(--color-surface-page);
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+::slotted([state="completed"])::before {
+  background: var(--color-interactive);
+  border-color: transparent;
+  color: var(--color-content-inverse);
+  content: "✓";
+}

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

@@ -0,0 +1,6 @@
+<div class="tablist" part="tablist" role="tablist">
+  <slot name="tab"></slot>
+</div>
+<div class="panels" part="panels">
+  <slot></slot>
+</div>

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

@@ -0,0 +1,132 @@
+/**
+ * src/elements/navigation/tabs/index.js
+ *
+ * Navigation System: <ui-tabs>
+ * Roving-tabindex, keyboard-accessible (Left/Right arrows, Home, End),
+ * and URL-sync capable tab container matching complete WAI-ARIA tablist structures.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-tabs', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    active: { type: String, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const tablist = tags.one('.tablist');
+    const tabSlot = tags.one('slot[name="tab"]');
+
+    on.slotchange(tabSlot, () => {
+      const tabs = getTabs(tags);
+      tabs.forEach((tab, index) => {
+        tab.setAttribute('role', 'tab');
+        tab.setAttribute('tabindex', index === 0 ? '0' : '-1');
+        on.click(tab, (e) => {
+          const tab = e.currentTarget;
+          const value = tab.getAttribute('value') || tab.textContent.trim();
+          el.active = value;
+        });
+      });
+      syncTabs(el, tags);
+    });
+
+    on.keydown(tablist, (e) => {
+      const tabs = getTabs(tags);
+      if (tabs.length === 0) return;
+
+      const focusedIndex = getFocusedIndex(el);
+
+      switch (e.key) {
+        case 'ArrowRight':
+          e.preventDefault();
+          focusTab(el, tags, focusedIndex + 1);
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          focusTab(el, tags, focusedIndex - 1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          focusTab(el, tags, 0);
+          break;
+        case 'End':
+          e.preventDefault();
+          focusTab(el, tags, tabs.length - 1);
+          break;
+      }
+    });
+
+    syncTabs(el, tags);
+  },
+  update({ el, tags }) {
+    syncTabs(el, tags);
+  }
+}, import.meta.url);
+
+function getTabs(tags) {
+  const slot = tags.one('slot[name="tab"]');
+  return slot.assignedElements();
+}
+
+function getPanels(tags) {
+  const slot = tags.one('slot:not([name])');
+  return slot.assignedElements().filter(el => el.getAttribute('role') === 'tabpanel' || el.tagName.toLowerCase() === 'ui-tab-panel');
+}
+
+function syncTabs(el, tags) {
+  const active = el.active;
+  const tabs = getTabs(tags);
+  const panels = getPanels(tags);
+
+  if (tabs.length === 0) return;
+
+  let activeIndex = 0;
+  tabs.forEach((tab, idx) => {
+    const tabVal = tab.getAttribute('value') || tab.textContent.trim();
+    const isSelected = active ? tabVal === active : idx === 0;
+
+    tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+    tab.setAttribute('tabindex', isSelected ? '0' : '-1');
+
+    if (isSelected) {
+      activeIndex = idx;
+    }
+  });
+
+  el.dataset.focusedIndex = activeIndex;
+
+  panels.forEach((panel, idx) => {
+    if (idx === activeIndex) {
+      panel.classList.add('active');
+      panel.setAttribute('aria-hidden', 'false');
+    } else {
+      panel.classList.remove('active');
+      panel.setAttribute('aria-hidden', 'true');
+    }
+  });
+}
+
+function getFocusedIndex(el) {
+  return parseInt(el.dataset.focusedIndex || '0', 10);
+}
+
+function focusTab(el, tags, index) {
+  const tabs = getTabs(tags);
+  if (tabs.length === 0) return;
+
+  const focusedIndex = (index + tabs.length) % tabs.length;
+  el.dataset.focusedIndex = focusedIndex;
+  const targetTab = tabs[focusedIndex];
+
+  tabs.forEach((tab, idx) => {
+    tab.setAttribute('tabindex', idx === focusedIndex ? '0' : '-1');
+  });
+
+  targetTab.focus();
+  const value = targetTab.getAttribute('value') || targetTab.textContent.trim();
+  el.active = value;
+}

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

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

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

@@ -0,0 +1,52 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--font-family-sans);
+}
+
+.tablist {
+  display: flex;
+  border-bottom: var(--space-px) solid var(--color-border-default);
+  gap: var(--space-4);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Slotted child headers styling */
+::slotted([role="tab"]) {
+  padding: var(--space-3) var(--space-1);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-secondary);
+  border-bottom: var(--space-0-5) solid transparent;
+  outline: none;
+  transition:
+    color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+  user-select: none;
+}
+
+::slotted([role="tab"]:hover) {
+  color: var(--color-content-primary);
+}
+
+::slotted([role="tab"][aria-selected="true"]) {
+  color: var(--color-interactive);
+  border-bottom-color: var(--color-interactive);
+}
+
+.panels {
+  padding-top: var(--space-4);
+}
+
+::slotted([role="tabpanel"]) {
+  display: none;
+}
+
+::slotted([role="tabpanel"].active) {
+  display: block;
+}

package/src/elements/overlay/dialog/index.html

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

package/src/elements/overlay/dialog/index.js

@@ -0,0 +1,57 @@
+/**
+ * src/elements/overlay/dialog/index.js
+ *
+ * Overlay System: <ui-dialog>
+ * Premium dialog overlay wrapping native browser <dialog> for zero-cost
+ * focus traps, light backdrops, Escape dismissals, and modal lifecycles.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-dialog', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    open: { type: Boolean, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const dialog = tags.one('dialog');
+
+    // Sync close and cancel events from native dialog
+    on.close(dialog, () => {
+      el.open = false;
+      el.dispatchEvent(new CustomEvent('close', {
+        detail: { returnValue: dialog.returnValue },
+        bubbles: true,
+        composed: true
+      }));
+    });
+
+    on.cancel(dialog, (e) => {
+      const cancelEvent = new CustomEvent('cancel', {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      el.dispatchEvent(cancelEvent);
+      if (cancelEvent.defaultPrevented) {
+        e.preventDefault();
+      }
+    });
+  },
+  methods: {
+    showModal({ el, tags }) {
+      const dialog = tags.one('dialog');
+      dialog.showModal();
+      el.open = true;
+      el.dispatchEvent(new CustomEvent('show', { bubbles: true, composed: true }));
+    },
+    close({ el, tags }, returnValue = '') {
+      const dialog = tags.one('dialog');
+      dialog.close(returnValue);
+      el.open = false;
+    }
+  }
+}, import.meta.url);

package/src/elements/overlay/dialog/index.tags.json

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

package/src/elements/overlay/dialog/style.css

@@ -0,0 +1,31 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+dialog {
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-2xl);
+  max-width: min(calc(var(--space-32) * 5), 90vw);
+  max-height: 85vh;
+  color: var(--color-content-primary);
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* Standard modal backdrop aesthetics */
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(var(--space-0-5));
+  transition: backdrop-filter var(--duration-fast) var(--ease-out);
+}
+
+/* Nested layouts wrappers */
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}

package/src/elements/overlay/drawer/index.html

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

package/src/elements/overlay/drawer/index.js

@@ -0,0 +1,56 @@
+/**
+ * src/elements/overlay/drawer/index.js
+ *
+ * Overlay System: <ui-drawer>
+ * side layout panel utilizing native <dialog> focus trapping features
+ * and beautiful off-thread slide transition capabilities.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-drawer', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true, default: 'right' }
+  },
+  mount({ el, tags, on }) {
+    const dialog = tags.one('dialog');
+
+    on.close(dialog, () => {
+      el.open = false;
+      el.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    });
+
+    syncAttributes(el, tags);
+  },
+  update({ el, tags }) {
+    syncAttributes(el, tags);
+  },
+  methods: {
+    show({ el, tags }) {
+      el.open = true;
+    },
+    hide({ el, tags }) {
+      el.open = false;
+    }
+  }
+}, import.meta.url);
+
+function syncAttributes(el, tags) {
+  const dialog = tags.one('dialog');
+  const open = el.open;
+
+  if (open && !dialog.open) {
+    dialog.showModal();
+    // Delay class toggle by a microtask to fire slide transitions
+    requestAnimationFrame(() => dialog.classList.add('open'));
+  } else if (!open && dialog.open) {
+    dialog.classList.remove('open');
+    // Wait for transform transitions to complete before closing modal
+    setTimeout(() => dialog.close(), 300);
+  }
+}

package/src/elements/overlay/drawer/index.tags.json

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

package/src/elements/overlay/drawer/style.css

@@ -0,0 +1,48 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+dialog {
+  background: var(--color-surface-elevated);
+  border: none;
+  box-shadow: var(--shadow-2xl);
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  box-sizing: border-box;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  width: min(calc(var(--space-32) * 3), 85vw);
+  transition: transform var(--duration-medium) var(--ease-out);
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(var(--space-0-5));
+  opacity: 0;
+  transition: opacity var(--duration-medium) var(--ease-out);
+}
+
+/* Placement styles with beautiful transform slide ins */
+:host([placement="left"]) dialog {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+:host([placement="right"]) dialog {
+  right: 0;
+  transform: translateX(100%);
+}
+
+/* Open anim trigger classes */
+dialog.open {
+  transform: translateX(0);
+}
+
+dialog.open::backdrop {
+  opacity: 1;
+}

package/src/elements/overlay/menu/index.html

@@ -0,0 +1,3 @@
+<div popover="auto" part="menu" role="menu">
+  <slot></slot>
+</div>