@adukiorg/anza 0.2.0

package/src/elements/feedback/progress/style.css

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-family: var(--font-family-sans);
+  width: 100%;
+  /* Component Tokens — Semantic Reference Only */
+  --progress-bg:    var(--color-border-default);
+  --progress-fill:  var(--color-interactive);
+  --progress-track: var(--space-2);
+  --progress-radius: var(--radius-full);
+}
+
+.track {
+  background: var(--progress-bg);
+  border-radius: var(--progress-radius);
+  height: var(--progress-track);
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.fill {
+  background: var(--progress-fill);
+  height: 100%;
+  width: 0%;
+  border-radius: var(--progress-radius);
+  transition: width var(--duration-medium) var(--ease-out);
+}
+
+.label-box {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-xs);
+  color: var(--color-content-secondary);
+}

package/src/elements/feedback/skeleton/index.html

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

package/src/elements/feedback/skeleton/index.js

@@ -0,0 +1,78 @@
+/**
+ * src/elements/feedback/skeleton/index.js
+ *
+ * Feedback Element: <ui-skeleton>
+ * Premium skeleton placeholder container utilizing the Web Animations API (WAAPI)
+ * for smooth off-thread opacity shimmers, respecting prefers-reduced-motion.
+ *
+ * Source: doc 04 — Web Components §3, doc 12 — Performance §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-skeleton', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    variant: { type: String, reflect: true },
+    width: { type: String, reflect: true },
+    height: { type: String, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const shimmer = tags.one('.shimmer');
+
+    // ARIA roles assignment
+    if (!el.hasAttribute('aria-hidden')) {
+      el.setAttribute('aria-hidden', 'true');
+    }
+
+    // High performance off-thread WAAPI shimmer animation
+    const animation = shimmer.animate(
+      [
+        { opacity: 0.4 },
+        { opacity: 0.85 },
+        { opacity: 0.4 }
+      ],
+      {
+        duration: 1500,
+        iterations: Infinity,
+        easing: 'ease-in-out'
+      }
+    );
+
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    handleMotion(animation, motionQuery);
+
+    motionQuery.addEventListener('change', (e) => handleMotion(animation, e), { signal: el.ctrl.signal });
+
+    syncAttributes(el);
+  },
+  unmount({ el }) {
+    // Animation is cleaned up via AbortSignal in mount
+  },
+  update({ el }) {
+    syncAttributes(el);
+  }
+}, import.meta.url);
+
+function syncAttributes(el) {
+  if (el.width) {
+    el.style.setProperty('--skeleton-width', el.width.includes('px') || el.width.includes('%') || el.width.includes('rem') ? el.width : `var(--space-${el.width})`);
+  } else {
+    el.style.removeProperty('--skeleton-width');
+  }
+
+  if (el.height) {
+    el.style.setProperty('--skeleton-height', el.height.includes('px') || el.height.includes('%') || el.height.includes('rem') ? el.height : `var(--space-${el.height})`);
+  } else {
+    el.style.removeProperty('--skeleton-height');
+  }
+}
+
+function handleMotion(animation, e) {
+  if (e.matches) {
+    animation.pause();
+  } else {
+    animation.play();
+  }
+}

package/src/elements/feedback/skeleton/index.tags.json

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

package/src/elements/feedback/skeleton/style.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  /* Component Tokens — Semantic Reference Only */
+  --skeleton-bg:     var(--color-interactive-disabled);
+  --skeleton-radius: var(--radius-md);
+  --skeleton-width:  100%;
+  --skeleton-height: var(--space-4);
+}
+
+.shimmer {
+  background: var(--skeleton-bg);
+  border-radius: var(--skeleton-radius);
+  width: var(--skeleton-width);
+  height: var(--skeleton-height);
+  box-sizing: border-box;
+}
+
+:host([variant="circle"]) {
+  --skeleton-radius: var(--radius-full);
+  --skeleton-width:  var(--space-12);
+  --skeleton-height: var(--space-12);
+  display: inline-block;
+}
+
+:host([variant="text"]) {
+  --skeleton-height: var(--space-3);
+  --skeleton-width:  75%;
+}

package/src/elements/feedback/toast/index.html

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

package/src/elements/feedback/toast/index.js

@@ -0,0 +1,65 @@
+/**
+ * src/elements/feedback/toast/index.js
+ *
+ * Feedback Element: <ui-toast>
+ * Dynamic toast notifications. Manages automated dismiss timeouts, top-layer
+ * popup placement overlays, and accessible WAI-ARIA role="status" regions.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+let container = null;
+
+function getContainer() {
+  if (container) return container;
+  container = document.createElement('div');
+  container.style.position = 'fixed';
+  container.style.bottom = 'var(--space-6)';
+  container.style.right = 'var(--space-6)';
+  container.style.display = 'flex';
+  container.style.flexDirection = 'column';
+  container.style.gap = 'var(--space-2)';
+  container.style.zIndex = '9999';
+  container.style.pointerEvents = 'none';
+  document.body.appendChild(container);
+  return container;
+}
+
+ui.element('ui-toast', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    duration: { type: Number, reflect: true }
+  },
+  mount({ el, tags }) {
+    const duration = el.duration || 3000;
+
+    // Auto-dismiss timeout setup
+    const timeoutId = setTimeout(() => dismiss(el, tags), duration);
+    el.ctrl.signal.addEventListener('abort', () => clearTimeout(timeoutId));
+  }
+}, import.meta.url);
+
+function dismiss(el, tags) {
+  const toast = tags.one('.toast');
+  toast.classList.add('fade-out');
+  // Delete after fade transition completes
+  setTimeout(() => el.remove(), 250);
+}
+
+/**
+ * Static convenience helper to easily trigger a Toast dynamic alert popup.
+ */
+export function show(message, options = {}) {
+  if (typeof window === 'undefined') return;
+  const parent = getContainer();
+  const el = document.createElement('ui-toast');
+  if (options.duration) {
+    el.duration = options.duration;
+  }
+  el.textContent = message;
+  parent.appendChild(el);
+  return el;
+}

package/src/elements/feedback/toast/index.tags.json

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

package/src/elements/feedback/toast/style.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  font-family: var(--font-family-sans);
+}
+
+.toast {
+  background: var(--color-surface-inverse);
+  color: var(--color-content-inverse);
+  padding: var(--space-3) var(--space-5);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  pointer-events: auto;
+  animation: slideIn var(--duration-medium) var(--ease-out);
+  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+}
+
+.toast.fade-out {
+  opacity: 0;
+  transform: translateY(var(--space-2));
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(var(--space-4));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/elements/forms/checkbox/index.html

@@ -0,0 +1,7 @@
+<div class="box" part="box" tabindex="0">
+  <svg viewBox="0 0 24 24">
+    <path d="M20 6L9 17l-5-5"/>
+  </svg>
+  <div class="dash"></div>
+</div>
+<slot></slot>

package/src/elements/forms/checkbox/index.js

@@ -0,0 +1,104 @@
+/**
+ * src/elements/forms/checkbox/index.js
+ *
+ * Form Control: <ui-checkbox>
+ * Accessible form-participating tri-state checkbox element utilizing ElementInternals
+ * states and beautiful semantic-bound SVGs indicators.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-checkbox', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    checked: { type: Boolean, reflect: true, state: true },
+    indeterminate: { type: Boolean, reflect: true, state: true },
+    disabled: { type: Boolean, reflect: true, state: true },
+    required: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true }
+  },
+  mount({ el, internals, on }) {
+    // Tabindex defaults
+    if (!el.hasAttribute('tabindex')) {
+      el.setAttribute('tabindex', '0');
+    }
+
+    on.click(el, (e) => {
+      if (el.disabled) return;
+      e.preventDefault();
+      el.checked = !el.checked;
+    });
+
+    on.keydown(el, (e) => {
+      if (el.disabled) return;
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        el.checked = !el.checked;
+      }
+    });
+
+    syncAttributes(el, internals);
+  },
+  update({ el, name, val, internals }) {
+    if (name === 'checked' || name === 'indeterminate' || name === 'disabled') {
+      syncAttributes(el, internals);
+    }
+  },
+  formResetCallback({ el, internals }) {
+    el.checked = el.hasAttribute('checked');
+    syncAttributes(el, internals);
+  },
+  formDisabledCallback({ el, internals, disabled }) {
+    if (disabled) {
+      el.removeAttribute('tabindex');
+    } else {
+      if (!el.hasAttribute('tabindex')) {
+        el.setAttribute('tabindex', '0');
+      }
+    }
+    syncAttributes(el, internals);
+  }
+}, import.meta.url);
+
+function syncAttributes(el, internals) {
+  const checked = el.checked;
+  const indeterminate = el.indeterminate;
+  const disabled = el.disabled;
+
+  if (checked) {
+    internals.states.add('checked');
+    internals.states.delete('indeterminate');
+  } else if (indeterminate) {
+    internals.states.add('indeterminate');
+    internals.states.delete('checked');
+  } else {
+    internals.states.delete('checked');
+    internals.states.delete('indeterminate');
+  }
+
+  if (disabled) {
+    internals.states.add('disabled');
+    el.removeAttribute('tabindex');
+  } else {
+    internals.states.delete('disabled');
+    if (!el.hasAttribute('tabindex')) {
+      el.setAttribute('tabindex', '0');
+    }
+  }
+
+  const subValue = checked ? (el.value || 'on') : null;
+  internals.setFormValue(subValue);
+  validate(el, internals);
+}
+
+function validate(el, internals) {
+  if (el.required && !el.checked) {
+    internals.setValidity({ valueMissing: true }, 'You must check this box.');
+  } else {
+    internals.setValidity({});
+  }
+}

package/src/elements/forms/checkbox/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["box","dash"],"tags":["div","path","slot","svg"],"compound":["div.box","div.dash"],"attrs":["class","d","part","tabindex","viewBox"],"refTypes":{}}

package/src/elements/forms/checkbox/style.css

@@ -0,0 +1,86 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-family-sans);
+  cursor: pointer;
+  user-select: none;
+  /* Component Tokens — Semantic Reference Only */
+  --check-bg:           var(--color-surface-page);
+  --check-bg-checked:   var(--color-interactive);
+  --check-border:       var(--color-border-default);
+  --check-border-focus: var(--color-border-focus);
+  --check-radius:       var(--radius-sm);
+  --check-size:         var(--space-5);
+  --check-color:        var(--color-content-inverse);
+}
+
+.box {
+  width: var(--check-size);
+  height: var(--check-size);
+  background: var(--check-bg);
+  border: var(--space-px) solid var(--check-border);
+  border-radius: var(--check-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  outline: none;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+:host(:focus-visible) .box {
+  border-color: var(--check-border-focus);
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+/* Checkmark indicators sizing */
+svg {
+  width: 80%;
+  height: 80%;
+  fill: none;
+  stroke: var(--check-color);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  display: none;
+}
+
+.dash {
+  width: 50%;
+  height: var(--space-0-5);
+  background: var(--check-color);
+  border-radius: var(--radius-none);
+  display: none;
+}
+
+:host(:state(checked)) .box {
+  background: var(--check-bg-checked);
+  border-color: transparent;
+}
+
+:host(:state(checked)) svg {
+  display: block;
+}
+
+:host(:state(indeterminate)) .box {
+  background: var(--check-bg-checked);
+  border-color: transparent;
+}
+
+:host(:state(indeterminate)) .dash {
+  display: block;
+}
+
+:host(:state(disabled)) {
+  cursor: not-allowed;
+  color: var(--color-content-disabled);
+}
+
+:host(:state(disabled)) .box {
+  background: var(--color-interactive-disabled);
+  border-color: var(--color-border-default);
+}

package/src/elements/forms/field/index.html

@@ -0,0 +1,13 @@
+<label part="label">
+  <slot name="label"></slot>
+  <span class="required-marker" aria-hidden="true">*</span>
+</label>
+<div class="hint-box" part="hint">
+  <slot name="hint"></slot>
+</div>
+<div class="control-box" part="control">
+  <slot></slot>
+</div>
+<div class="error-box" part="error">
+  <slot name="error"></slot>
+</div>

package/src/elements/forms/field/index.js

@@ -0,0 +1,42 @@
+/**
+ * src/elements/forms/field/index.js
+ *
+ * Form Control: <ui-field>
+ * Field wrapper layout. Coordinates labels, required indicators, hints,
+ * custom error message slots, and wraps any active form controls.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-field', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    label: { type: String, reflect: true },
+    required: { type: Boolean, reflect: true }
+  },
+  mount({ el, tags }) {
+    updateLabel(el, tags);
+  },
+  update({ el, name, tags }) {
+    if (name === 'label') {
+      updateLabel(el, tags);
+    }
+  }
+}, import.meta.url);
+
+function updateLabel(el, tags) {
+  const labelVal = el.label;
+  const labelSlot = tags.one('slot[name="label"]');
+
+  if (labelVal) {
+    // If a label attribute is provided and labelSlot has no customized children, stamp text
+    const hasChildren = labelSlot.assignedNodes().length > 0;
+    if (!hasChildren) {
+      const labelEl = tags.one('label');
+      labelEl.childNodes[0].textContent = labelVal;
+    }
+  }
+}

package/src/elements/forms/field/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["control-box","error-box","hint-box","required-marker"],"tags":["div","label","slot","span"],"compound":["div.control-box","div.error-box","div.hint-box","span.required-marker"],"attrs":["aria-hidden","class","name","part"],"refTypes":{}}

package/src/elements/forms/field/style.css

@@ -0,0 +1,42 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+  font-family: var(--font-family-sans);
+  width: 100%;
+}
+
+label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-0-5);
+}
+
+.required-marker {
+  color: var(--color-feedback-error);
+  font-weight: var(--font-weight-bold);
+  display: none;
+}
+
+:host([required]) .required-marker {
+  display: inline;
+}
+
+.hint-box {
+  font-size: var(--font-size-xs);
+  color: var(--color-content-secondary);
+}
+
+.control-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.error-box {
+  font-size: var(--font-size-xs);
+  color: var(--color-feedback-error);
+  min-height: var(--space-4);
+}

package/src/elements/forms/form/index.html

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