@adukiorg/anza 0.2.0

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

@@ -0,0 +1,67 @@
+/* src/elements/primitives/badge/style.css */
+
+:host {
+  display: inline-flex;
+  /* Component Tokens — Semantic Reference Only */
+  --badge-radius: var(--radius-full);
+  --badge-font:   var(--font-family-sans);
+  --badge-weight: var(--font-weight-semibold);
+  --badge-size:   var(--font-size-xs);
+  
+  /* Mapped theme defaults */
+  --badge-bg:     var(--color-surface-elevated);
+  --badge-color:  var(--color-content-secondary);
+  --badge-border: var(--color-border-default);
+}
+
+span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--badge-font);
+  font-size: var(--badge-size);
+  font-weight: var(--badge-weight);
+  background: var(--badge-bg);
+  color: var(--badge-color);
+  border: var(--space-px) solid var(--badge-border);
+  border-radius: var(--badge-radius);
+  padding: var(--badge-padding-y, var(--space-0-5)) var(--badge-padding-x, var(--space-2));
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Variant mappings using semantic tokens only */
+:host([variant="success"]) {
+  --badge-bg:     var(--color-feedback-success);
+  --badge-color:  var(--color-content-inverse);
+  --badge-border: transparent;
+}
+
+:host([variant="warning"]) {
+  --badge-bg:     var(--color-feedback-warning);
+  --badge-color:  var(--color-content-inverse);
+  --badge-border: transparent;
+}
+
+:host([variant="error"]) {
+  --badge-bg:     var(--color-feedback-error);
+  --badge-color:  var(--color-content-inverse);
+  --badge-border: transparent;
+}
+
+:host([variant="info"]) {
+  --badge-bg:     var(--color-feedback-info);
+  --badge-color:  var(--color-content-inverse);
+  --badge-border: transparent;
+}
+
+/* Size scaling custom offsets */
+:host([size="sm"]) span {
+  font-size: 0.65rem;
+  padding: var(--space-px) var(--space-1);
+}
+
+:host([size="lg"]) span {
+  font-size: var(--font-size-sm);
+  padding: var(--space-1) var(--space-3);
+}

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

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

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

@@ -0,0 +1,61 @@
+/**
+ * src/elements/primitives/button/index.js
+ *
+ * Primitive Element: <ui-button>
+ * FormAssociated button element featuring loading and disabled states,
+ * custom state pseudo-classes, and robust semantic tokens bindings.
+ *
+ * Source: doc 04 — Web Components §3, §6, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-button', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    disabled: { type: Boolean, reflect: true, state: true },
+    loading: { type: Boolean, reflect: true, state: true },
+    type: { type: String, reflect: true, default: 'button' },
+    value: { type: String, reflect: true }
+  },
+  mount({ el, internals, tags, on }) {
+    const btn = tags.one('button');
+
+    // Sync button attributes
+    btn.disabled = el.disabled;
+    btn.type = el.type;
+
+    on.click('button', (e) => {
+      if (el.disabled || el.loading) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      const type = el.type;
+      if (type === 'submit') {
+        const form = internals.form;
+        if (form) {
+          form.requestSubmit();
+        }
+      } else if (type === 'reset') {
+        const form = internals.form;
+        if (form) {
+          form.reset();
+        }
+      }
+
+      el.dispatchEvent(new CustomEvent('activate', { bubbles: true, composed: true }));
+    });
+  },
+  update({ el, name, val, tags }) {
+    const btn = tags.one('button');
+    if (name === 'disabled') {
+      btn.disabled = !!val;
+    } else if (name === 'type') {
+      btn.type = val || 'button';
+    }
+  }
+}, import.meta.url);

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

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

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

@@ -0,0 +1,66 @@
+/* src/elements/primitives/button/style.css */
+
+:host {
+  display: inline-flex;
+  outline: none;
+  /* Component Tokens — Semantic Reference Only */
+  --btn-bg:          var(--color-interactive);
+  --btn-bg-hover:    var(--color-interactive-hover);
+  --btn-bg-active:   var(--color-interactive-active);
+  --btn-bg-disabled: var(--color-interactive-disabled);
+  --btn-color:       var(--color-content-inverse);
+  --btn-radius:      var(--radius-md);
+  --btn-font:        var(--font-family-sans);
+  --btn-size:        var(--font-size-sm);
+  --btn-weight:      var(--font-weight-medium);
+  --btn-padding-y:   var(--space-2);
+  --btn-padding-x:   var(--space-4);
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  background: var(--btn-bg);
+  color: var(--btn-color);
+  border: none;
+  border-radius: var(--btn-radius);
+  font-family: var(--btn-font);
+  font-size: var(--btn-size);
+  font-weight: var(--btn-weight);
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: 
+    background-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+button:hover:not(:disabled) {
+  background: var(--btn-bg-hover);
+}
+
+button:active:not(:disabled) {
+  background: var(--btn-bg-active);
+  transform: scale(0.98);
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+:host(:state(loading)) button {
+  opacity: 0.65;
+  pointer-events: none;
+  cursor: wait;
+}
+
+:host(:state(disabled)) button {
+  background: var(--btn-bg-disabled);
+  color: var(--color-content-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -0,0 +1 @@
+<hr part="line" />

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

@@ -0,0 +1,43 @@
+/**
+ * src/elements/primitives/divider/index.js
+ *
+ * Primitive Element: <ui-divider>
+ * Flexible separating line component providing orientation selections
+ * and spacing token integrations.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-divider', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    orientation: { type: String, reflect: true, default: 'horizontal' },
+    spacing: { type: String, reflect: true }
+  },
+  mount({ el }) {
+    el._update();
+  },
+  update({ el }) {
+    el._update();
+  },
+  methods: {
+    _update() {
+      const orientation = this.orientation;
+      const spacing = this.spacing;
+
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'separator');
+      }
+
+      if (spacing) {
+        const spaceVal = spacing.includes('px') || spacing.includes('rem') ? spacing : `var(--space-${spacing})`;
+        this.style.setProperty('--divider-space', spaceVal);
+      } else {
+        this.style.removeProperty('--divider-space');
+      }
+    }
+  }
+}, import.meta.url);

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

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

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

@@ -0,0 +1,39 @@
+/* src/elements/primitives/divider/style.css */
+
+:host {
+  display: flex;
+  align-self: stretch;
+  /* Component Tokens — Semantic Reference Only */
+  --divider-color: var(--color-border-default);
+}
+
+hr {
+  border: none;
+  background-color: var(--divider-color);
+  margin: 0;
+  padding: 0;
+}
+
+:host([orientation="horizontal"]) {
+  width: 100%;
+  flex-direction: column;
+  padding-block: var(--divider-space, var(--space-2));
+}
+
+:host([orientation="horizontal"]) hr {
+  width: 100%;
+  height: var(--space-px);
+}
+
+:host([orientation="vertical"]) {
+  height: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  padding-inline: var(--divider-space, var(--space-2));
+}
+
+:host([orientation="vertical"]) hr {
+  height: 100%;
+  width: var(--space-px);
+  align-self: stretch;
+}

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

@@ -0,0 +1,3 @@
+<svg part="svg" aria-hidden="true" viewBox="0 0 24 24">
+  <use></use>
+</svg>

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

@@ -0,0 +1,66 @@
+/**
+ * src/elements/primitives/icon/index.js
+ *
+ * Primitive Element: <ui-icon>
+ * Renders an accessible SVG sprite reference, supporting size tokens,
+ * name/href targets, and proper ARIA decoration.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-icon', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    name: { type: String, reflect: true },
+    href: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    stroke: { type: String, reflect: true }
+  },
+  mount({ el }) {
+    el._update();
+  },
+  update({ el }) {
+    el._update();
+  },
+  methods: {
+    _update() {
+      const use = this.shadowRoot.querySelector('use');
+      const svg = this.shadowRoot.querySelector('svg');
+      const name = this.name;
+      const href = this.href;
+      const size = this.size;
+      const stroke = this.stroke;
+
+      // Resolve svg content target
+      if (href) {
+        use.setAttribute('href', href);
+      } else if (name) {
+        // Direct asset folder sprite fallback
+        use.setAttribute('href', `/assets/icons.svg#icon-${name}`);
+      }
+
+      // Apply custom inline sizing if size attribute is set
+      if (size) {
+        this.style.setProperty('--icon-size', size.includes('px') || size.includes('rem') ? size : `var(--space-${size})`);
+      } else {
+        this.style.removeProperty('--icon-size');
+      }
+
+      if (stroke) {
+        this.style.setProperty('--icon-stroke', stroke);
+      } else {
+        this.style.removeProperty('--icon-stroke');
+      }
+
+      // Accessible labeling
+      if (!this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby')) {
+        svg.setAttribute('aria-hidden', 'true');
+      } else {
+        svg.removeAttribute('aria-hidden');
+      }
+    }
+  }
+}, import.meta.url);

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":[],"tags":["svg","use"],"compound":[],"attrs":["aria-hidden","part","viewBox"],"refTypes":{}}

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

@@ -0,0 +1,20 @@
+/* src/elements/primitives/icon/style.css */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size, var(--space-4));
+  height: var(--icon-size, var(--space-4));
+  color: var(--icon-color, currentColor);
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--icon-stroke, 2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

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

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

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

@@ -0,0 +1,129 @@
+/**
+ * src/elements/primitives/link/index.js
+ *
+ * Primitive Element: <ui-link>
+ * Single-page router-aware anchor hyperlink element. Automatically intercepts
+ * standard clicks and navigates via the custom router, managing active states.
+ *
+ * Source: doc 04 — Web Components §3, doc 09 — Routing §8, §9
+ */
+
+import { ui } from '../../../core/ui/index.js';
+import { router } from '../../../core/router/index.js';
+
+ui.element('ui-link', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    href: { type: String, reflect: true },
+    target: { type: String, reflect: true },
+    current: { type: String, reflect: true },
+    external: { type: Boolean, reflect: true }
+  },
+  mount({ el, ctrl }) {
+    const a = el.shadowRoot.querySelector('a');
+    a.addEventListener('click', (e) => el._click(e), { signal: ctrl.signal });
+
+    // Track active matching events to dynamically refresh state
+    router.on('found', () => el._syncState(), ctrl.signal);
+
+    el._update();
+  },
+  update({ el }) {
+    el._update();
+  },
+  methods: {
+    _update() {
+      const a = this.shadowRoot.querySelector('a');
+      const href = this.href || '';
+      const target = this.target;
+      const external = this.external || href.startsWith('http://') || href.startsWith('https://');
+
+      a.href = href;
+      if (target) {
+        a.target = target;
+      } else {
+        a.removeAttribute('target');
+      }
+
+      // Handle external indicator icon overlay
+      const existingIcon = a.querySelector('.external-icon');
+      if (external && !existingIcon) {
+        const ns = 'http://www.w3.org/2000/svg';
+        const svg = document.createElementNS(ns, 'svg');
+        svg.setAttribute('class', 'external-icon');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('aria-hidden', 'true');
+        const html = '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m11-3H14m8 0v8m0-8L10 14"/>';
+        if (typeof svg.setHTMLUnsafe === "function") {
+          svg.setHTMLUnsafe(html);
+        } else {
+          svg.innerHTML = html;
+        }
+        a.appendChild(svg);
+      } else if (!external && existingIcon) {
+        existingIcon.remove();
+      }
+
+      this._syncState();
+    },
+    _syncState() {
+      const a = this.shadowRoot.querySelector('a');
+      const href = this.href;
+      
+      if (this.hasAttribute('current')) {
+        const currentVal = this.current;
+        a.setAttribute('aria-current', currentVal);
+      } else if (href && typeof window !== 'undefined') {
+        const currentUrl = new URL(window.navigation?.currentEntry?.url || window.location.href);
+        const linkUrl = new URL(href, currentUrl.origin);
+
+        if (currentUrl.pathname === linkUrl.pathname && currentUrl.search === linkUrl.search) {
+          a.setAttribute('aria-current', 'page');
+        } else {
+          a.removeAttribute('aria-current');
+        }
+      } else {
+        a.removeAttribute('aria-current');
+      }
+    },
+    _click(e) {
+      const href = this.href;
+      const target = this.target;
+      const external = this.external || href?.startsWith('http://') || href?.startsWith('https://');
+
+      // Dispatch cancelable 'external' event for external clicks
+      if (external) {
+        const event = new CustomEvent('external', {
+          detail: { href, target },
+          bubbles: true,
+          cancelable: true,
+          composed: true
+        });
+        this.dispatchEvent(event);
+        if (event.defaultPrevented) {
+          e.preventDefault();
+        }
+        return;
+      }
+
+      // Skip interception if clicking target blank, hash reference, or modified click
+      if (
+        !href ||
+        target === '_blank' ||
+        href.startsWith('#') ||
+        e.defaultPrevented ||
+        e.button !== 0 ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.shiftKey ||
+        e.altKey
+      ) {
+        return;
+      }
+
+      e.preventDefault();
+      router.navigate(href);
+    }
+  }
+}, import.meta.url);

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

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

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

@@ -0,0 +1,40 @@
+/* src/elements/primitives/link/style.css */
+
+:host {
+  display: inline-flex;
+}
+
+a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--link-color);
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+
+a:hover {
+  color: var(--link-color-hover);
+  text-decoration: underline;
+}
+
+a:active {
+  color: var(--link-color-active);
+}
+
+a:focus-visible {
+  outline: var(--space-0-5) solid var(--color-border-focus);
+  outline-offset: var(--space-0-5);
+  border-radius: var(--radius-sm);
+}
+
+/* External links indicator styling */
+.external-icon {
+  width: 0.85em;
+  height: 0.85em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+}

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

@@ -0,0 +1 @@
+<div class="ring" part="ring"></div>

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

@@ -0,0 +1,62 @@
+/**
+ * src/elements/primitives/spinner/index.js
+ *
+ * Primitive Element: <ui-spinner>
+ * Indeterminate progress spinner utilizing Web Animations API (WAAPI)
+ * for butter-smooth off-thread rotation, observing prefers-reduced-motion.
+ *
+ * Source: doc 04 — Web Components §3, doc 12 — Performance §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-spinner', {
+  style: './style.css',
+  template: './index.html',
+  mount({ el, ctrl }) {
+    const ring = el.shadowRoot.querySelector('.ring');
+
+    // ARIA tags enforcements
+    if (!el.hasAttribute('role')) {
+      el.setAttribute('role', 'progressbar');
+    }
+    if (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')) {
+      el.setAttribute('aria-label', 'Loading');
+    }
+
+    // Trigger high-performance hardware-accelerated infinite WAAPI spin
+    el._animation = ring.animate(
+      [
+        { transform: 'rotate(0deg)' },
+        { transform: 'rotate(360deg)' }
+      ],
+      {
+        duration: 800,
+        iterations: Infinity,
+        easing: 'linear'
+      }
+    );
+
+    // Dynamic prefers-reduced-motion adjustments
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    el._handleMotion(motionQuery);
+
+    motionQuery.addEventListener('change', (e) => el._handleMotion(e), { signal: ctrl.signal });
+  },
+  unmount({ el }) {
+    if (el._animation) {
+      el._animation.cancel();
+      el._animation = null;
+    }
+  },
+  methods: {
+    _handleMotion(e) {
+      if (!this._animation) return;
+      if (e.matches) {
+        this._animation.pause();
+      } else {
+        this._animation.play();
+      }
+    }
+  }
+}, import.meta.url);

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

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

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

@@ -0,0 +1,20 @@
+/* src/elements/primitives/spinner/style.css */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Component Tokens — Semantic Reference Only */
+  --spinner-size:  var(--space-6);
+  --spinner-color: var(--color-interactive);
+  --spinner-width: var(--space-0-5);
+}
+
+.ring {
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: var(--spinner-width) solid var(--color-border-default);
+  border-top-color: var(--spinner-color);
+  border-radius: var(--radius-full);
+  box-sizing: border-box;
+}

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

@@ -0,0 +1 @@
+<span id="root" part="text"><slot></slot></span>