@adukiorg/anza 0.2.0

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

@@ -0,0 +1,107 @@
+/**
+ * src/elements/overlay/menu/index.js
+ *
+ * Overlay System: <ui-menu>
+ * Anchor-able popover menu container implementing roving tabindex,
+ * full keyboard menu navigation (arrows, Home, End), and WAI-ARIA role="menu" specifications.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-menu', {
+  style: './style.css',
+  template: './index.html',
+  mount({ el, tags, on }) {
+    const popover = tags.one('[popover]');
+    const slot = tags.one('slot');
+
+    on.slotchange(slot, () => {
+      const items = getItems(tags);
+      items.forEach((item, index) => {
+        if (!item.hasAttribute('role')) {
+          item.setAttribute('role', 'menuitem');
+        }
+        item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+      });
+    });
+
+    on.keydown(popover, (e) => {
+      const items = getItems(tags);
+      if (items.length === 0) return;
+
+      const focusedIndex = parseInt(el.dataset.focusedIndex || '0', 10);
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          focusItem(el, tags, focusedIndex + 1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          focusItem(el, tags, focusedIndex - 1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          focusItem(el, tags, 0);
+          break;
+        case 'End':
+          e.preventDefault();
+          focusItem(el, tags, items.length - 1);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          hide(el, tags);
+          break;
+      }
+    });
+  },
+  methods: {
+    show({ el, tags }) {
+      tags.one('[popover]').showPopover();
+      focusItem(el, tags, 0);
+    },
+    hide({ tags }) {
+      tags.one('[popover]').hidePopover();
+    },
+    toggle({ el, tags }) {
+      const popover = tags.one('[popover]');
+      if (popover.matches(':popover-open')) {
+        hide(el, tags);
+      } else {
+        this.show({ el, tags });
+      }
+    }
+  }
+}, import.meta.url);
+
+function getItems(tags) {
+  const slot = tags.one('slot');
+  return slot.assignedElements().filter((el) => {
+    const tag = el.tagName.toLowerCase();
+    return tag === 'ui-button' || tag === 'button' || el.getAttribute('role') === 'menuitem';
+  });
+}
+
+function focusItem(el, tags, index) {
+  const items = getItems(tags);
+  if (items.length === 0) return;
+
+  // Boundary wrap protection
+  const focusedIndex = (index + items.length) % items.length;
+  el.dataset.focusedIndex = focusedIndex;
+
+  items.forEach((item, idx) => {
+    if (idx === focusedIndex) {
+      item.setAttribute('tabindex', '0');
+      item.focus();
+    } else {
+      item.setAttribute('tabindex', '-1');
+    }
+  });
+}
+
+function hide(el, tags) {
+  tags.one('[popover]').hidePopover();
+}

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

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

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

@@ -0,0 +1,43 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+[popover] {
+  margin: 0;
+  padding: var(--space-1) var(--space-0);
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  box-sizing: border-box;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  min-width: calc(var(--space-12) * 3);
+}
+
+::slotted(ui-button), ::slotted(div[role="menuitem"]), ::slotted(button) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-content-primary);
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+::slotted(ui-button:hover), ::slotted(div[role="menuitem"]:hover), ::slotted(button:hover) {
+  background: var(--color-surface-page);
+}
+
+::slotted(:focus-visible) {
+  background: var(--color-surface-page);
+  outline: none;
+}

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

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

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

@@ -0,0 +1,44 @@
+/**
+ * src/elements/overlay/popover/index.js
+ *
+ * Overlay System: <ui-popover>
+ * Lightweight contextual overlay container utilizing the native Popover API
+ * for top-layer rendering and automatic light dismiss.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-popover', {
+  style: './style.css',
+  template: './index.html',
+  mount({ el, tags, on }) {
+    const popover = tags.one('[popover]');
+
+    // Expose toggle events to parent elements
+    on.toggle(popover, (e) => {
+      el.dispatchEvent(new CustomEvent('toggle', {
+        detail: { newState: e.newState },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  },
+  methods: {
+    show({ tags }) {
+      tags.one('[popover]').showPopover();
+    },
+    hide({ tags }) {
+      tags.one('[popover]').hidePopover();
+    },
+    toggle({ tags }) {
+      const popover = tags.one('[popover]');
+      if (popover.matches(':popover-open')) {
+        popover.hidePopover();
+      } else {
+        popover.showPopover();
+      }
+    }
+  }
+}, import.meta.url);

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

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

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

@@ -0,0 +1,21 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+[popover] {
+  margin: 0;
+  padding: var(--space-4);
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
+  color: var(--color-content-primary);
+  box-sizing: border-box;
+  outline: none;
+}
+
+/* Popover backdrop overlay styles */
+[popover]::backdrop {
+  background: transparent;
+}

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

@@ -0,0 +1,8 @@
+<dialog part="dialog">
+  <div class="handle-bar" part="handle">
+    <div class="handle-line"></div>
+  </div>
+  <div class="content" part="content">
+    <slot></slot>
+  </div>
+</dialog>

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

@@ -0,0 +1,105 @@
+/**
+ * src/elements/overlay/sheet/index.js
+ *
+ * Overlay System: <ui-sheet>
+ * Bottom Sheet container rendering in the top-layer backed by native <dialog>,
+ * and implementing highly interactive pointer-driven drag-to-dismiss gesture controls.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-sheet', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    open: { type: Boolean, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const dialog = tags.one('dialog');
+    const handle = tags.one('.handle-bar');
+
+    on.close(dialog, () => {
+      el.open = false;
+      el.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    });
+
+    // Pointer event bindings for drag gesture handling
+    on.pointerdown(handle, (e) => {
+      e.preventDefault();
+      el.dataset.startY = e.clientY;
+      el.dataset.dragging = 'true';
+      dialog.style.transition = 'none';
+      handle.style.cursor = 'grabbing';
+    });
+
+    on.pointermove(el, (e) => {
+      if (el.dataset.dragging !== 'true') return;
+      const deltaY = e.clientY - parseInt(el.dataset.startY || '0', 10);
+
+      // Only allow dragging downwards (positive delta Y)
+      if (deltaY > 0) {
+        dialog.style.transform = `translateY(${deltaY}px)`;
+        el.dataset.currentY = deltaY;
+      }
+    });
+
+    on.pointerup(el, () => {
+      if (el.dataset.dragging !== 'true') return;
+      el.dataset.dragging = 'false';
+
+      dialog.style.transition = '';
+      handle.style.cursor = 'grab';
+
+      // If dragged Y exceeds 120px threshold, dismiss the sheet. Else restore position.
+      const currentY = parseInt(el.dataset.currentY || '0', 10);
+      if (currentY > 120) {
+        hide(el, tags);
+      } else {
+        dialog.style.transform = '';
+      }
+
+      el.dataset.currentY = '0';
+    });
+
+    on.pointercancel(el, () => {
+      if (el.dataset.dragging !== 'true') return;
+      el.dataset.dragging = 'false';
+      dialog.style.transition = '';
+      handle.style.cursor = 'grab';
+      dialog.style.transform = '';
+      el.dataset.currentY = '0';
+    });
+
+    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();
+    requestAnimationFrame(() => dialog.classList.add('open'));
+  } else if (!open && dialog.open) {
+    dialog.classList.remove('open');
+    setTimeout(() => dialog.close(), 300);
+  }
+}
+
+function hide(el, tags) {
+  el.open = false;
+}

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

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

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

@@ -0,0 +1,64 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+dialog {
+  background: var(--color-surface-elevated);
+  border: none;
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-none) var(--radius-none);
+  box-shadow: var(--shadow-2xl);
+  width: 100%;
+  max-width: min(calc(var(--space-32) * 6), 100vw);
+  margin: 0 auto;
+  position: fixed;
+  bottom: 0;
+  box-sizing: border-box;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  transform: translateY(100%);
+  transition: transform var(--duration-medium) var(--ease-out);
+  padding: var(--space-0) var(--space-4) var(--space-4) var(--space-4);
+}
+
+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);
+}
+
+/* Drag handle indicator overlays */
+.handle-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--space-6);
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+.handle-line {
+  width: calc(var(--space-8) * 1.5);
+  height: var(--space-1);
+  background: var(--color-border-strong);
+  border-radius: var(--radius-full);
+  opacity: 0.5;
+}
+
+/* Open anim trigger classes */
+dialog.open {
+  transform: translateY(0);
+}
+
+dialog.open::backdrop {
+  opacity: 1;
+}
+
+.content {
+  overflow-y: auto;
+  flex: 1;
+}

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

@@ -0,0 +1,6 @@
+<div class="wrapper" part="wrapper" tabindex="0">
+  <slot></slot>
+  <div class="tooltip" part="tooltip" role="tooltip">
+    <slot name="content"></slot>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+/**
+ * src/elements/overlay/tooltip/index.js
+ *
+ * Overlay System: <ui-tooltip>
+ * Accessible CSS-driven tooltip indicator. Wraps content and displays a popup hint
+ * on hover and focus-within without requiring JS positioning computations.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-tooltip', {
+  style: './style.css',
+  template: './index.html'
+}, import.meta.url);

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

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

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

@@ -0,0 +1,41 @@
+:host {
+  display: inline-flex;
+  position: relative;
+}
+
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, var(--space-0));
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  background: var(--color-surface-inverse);
+  color: var(--color-content-inverse);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-sans);
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    visibility var(--duration-fast) var(--ease-out);
+  z-index: 1000;
+}
+
+/* Hover and focus triggers */
+.wrapper:hover .tooltip,
+.wrapper:focus-within .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, calc(-1 * var(--space-2)));
+}

package/src/elements/primitives/avatar/index.html

@@ -0,0 +1,2 @@
+<img part="image" />
+<span part="initials"></span>

package/src/elements/primitives/avatar/index.js

@@ -0,0 +1,79 @@
+/**
+ * src/elements/primitives/avatar/index.js
+ *
+ * Primitive Element: <ui-avatar>
+ * Accessible profile picture avatar. Renders a user image or falls back to
+ * name initials, enforcing an explicit aria-label description.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-avatar', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    src: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    size: { type: String, reflect: true }
+  },
+  mount({ el }) {
+    el._update();
+  },
+  update({ el }) {
+    el._update();
+  },
+  methods: {
+    _update() {
+      const img = this.shadowRoot.querySelector('img');
+      const span = this.shadowRoot.querySelector('span');
+
+      const src = this.src;
+      const name = this.name || '';
+      const size = this.size;
+
+      // Accessibility enforcement
+      if (!this.hasAttribute('aria-label') && name) {
+        this.setAttribute('aria-label', `Avatar of ${name}`);
+      } else if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'img');
+      }
+
+      // Initials generation
+      const parts = name.split(/\s+/).filter(Boolean);
+      let initials = '';
+      if (parts.length > 0) {
+        initials = parts[0][0];
+        if (parts.length > 1) {
+          initials += parts[parts.length - 1][0];
+        }
+      }
+      span.textContent = initials.slice(0, 2);
+
+      // Apply custom sizing if requested
+      if (size) {
+        const sizeVal = size.includes('px') || size.includes('rem') ? size : `var(--space-${size})`;
+        this.style.setProperty('--avatar-custom-size', sizeVal);
+      } else {
+        this.style.removeProperty('--avatar-custom-size');
+      }
+
+      // Image loading
+      if (src) {
+        img.src = src;
+        img.onload = () => {
+          img.style.display = 'block';
+          span.style.display = 'none';
+        };
+        img.onerror = () => {
+          img.style.display = 'none';
+          span.style.display = 'block';
+        };
+      } else {
+        img.style.display = 'none';
+        span.style.display = 'block';
+      }
+    }
+  }
+}, import.meta.url);

package/src/elements/primitives/avatar/index.tags.json

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

package/src/elements/primitives/avatar/style.css

@@ -0,0 +1,36 @@
+/* src/elements/primitives/avatar/style.css */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size, var(--space-8));
+  height: var(--avatar-size, var(--space-8));
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background: var(--color-interactive-disabled);
+  color: var(--color-content-secondary);
+  font-family: var(--font-family-sans);
+  font-size: calc(var(--avatar-size, var(--space-8)) * 0.4);
+  font-weight: var(--font-weight-medium);
+  user-select: none;
+  border: var(--space-px) solid var(--color-border-default);
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: none;
+}
+
+:host([size]) {
+  width: var(--avatar-custom-size);
+  height: var(--avatar-custom-size);
+  font-size: calc(var(--avatar-custom-size) * 0.4);
+}
+
+span {
+  display: inline-block;
+  text-transform: uppercase;
+}

package/src/elements/primitives/badge/index.html

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

package/src/elements/primitives/badge/index.js

@@ -0,0 +1,20 @@
+/**
+ * src/elements/primitives/badge/index.js
+ *
+ * Primitive Element: <ui-badge>
+ * Label indicator with variant mapping (info, success, warning, error)
+ * and accessible layout size scaling.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-badge', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true }
+  }
+}, import.meta.url);

package/src/elements/primitives/badge/index.tags.json

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