@adukiorg/anza 0.2.0

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

@@ -0,0 +1,122 @@
+/**
+ * src/elements/forms/form/index.js
+ *
+ * Form Orchestrator: <ui-form>
+ * Wraps form controls and handles accessible native form submission,
+ * validation tracking, and automatic offline background sync queue buffering.
+ *
+ * Source: doc 04 — Web Components §9, doc 13 — Offline and Background §5
+ */
+
+import { ui } from '../../../core/ui/index.js';
+import { check } from '../../../core/offline/connectivity.js';
+import { queue } from '../../../core/offline/queue.js';
+import { pipeline } from '../../../core/api/pipeline.js';
+
+ui.element('ui-form', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    action: { type: String, reflect: true },
+    method: { type: String, reflect: true },
+    offline: { type: Boolean, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const form = tags.one('form');
+
+    on.submit(form, async (e) => {
+      e.preventDefault();
+
+      const action = el.action || window.location.href;
+      const method = (el.method || 'POST').toUpperCase();
+
+      // 1. Gather all form-associated inputs under this form subtree
+      const controls = Array.from(el.querySelectorAll('*')).filter(
+        (ctrl) => ctrl.constructor.formAssociated
+      );
+
+      // 2. Validate all active elements using standard validation routines
+      let isValid = true;
+      for (const ctrl of controls) {
+        if (typeof ctrl.reportValidity === 'function' && !ctrl.reportValidity()) {
+          isValid = false;
+        }
+      }
+
+      if (!isValid) {
+        el.dispatchEvent(new CustomEvent('invalid', { bubbles: true, composed: true }));
+        return;
+      }
+
+      // 3. Serialize all elements values into form data
+      const payload = {};
+      for (const ctrl of controls) {
+        const name = ctrl.getAttribute('name');
+        if (name) {
+          payload[name] = ctrl.value;
+        }
+      }
+
+      el.dispatchEvent(new CustomEvent('submit-start', { detail: { payload }, bubbles: true, composed: true }));
+
+      // 4. Verify connectivity using network connectivity HEAD probes
+      const online = await check();
+
+      if (!online && el.offline) {
+        // Offline mode: push into background sync queue
+        try {
+          const syncId = await queue.push('offline-form-submit', {
+            url: action,
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: payload
+          });
+
+          // Register standard browser SyncManager tag if available
+          if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+            const reg = await navigator.serviceWorker.ready;
+            if (reg.sync) {
+              await reg.sync.register('pending');
+            }
+          }
+
+          el.dispatchEvent(new CustomEvent('offline-queued', { detail: { syncId, payload }, bubbles: true, composed: true }));
+        } catch (err) {
+          el.dispatchEvent(new CustomEvent('submit-error', { detail: err, bubbles: true, composed: true }));
+        }
+        return;
+      }
+
+      // Online mode: submit directly via our fetch API networking clients pipelines
+      try {
+        const res = await pipeline(action, {
+          method,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+          signal: el.ctrl.signal
+        });
+
+        el.dispatchEvent(new CustomEvent('success', { detail: res, bubbles: true, composed: true }));
+      } catch (err) {
+        el.dispatchEvent(new CustomEvent('submit-error', { detail: err, bubbles: true, composed: true }));
+      }
+    });
+
+    syncAttributes(el, tags);
+  },
+  update({ el, name, tags }) {
+    if (name === 'action' || name === 'method') {
+      syncAttributes(el, tags);
+    }
+  }
+}, import.meta.url);
+
+function syncAttributes(el, tags) {
+  const form = tags.one('form');
+  if (el.action) {
+    form.setAttribute('action', el.action);
+  }
+  if (el.method) {
+    form.setAttribute('method', el.method);
+  }
+}

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

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

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

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+}

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

@@ -0,0 +1,4 @@
+<input part="input" />
+<div class="error-container" part="error-box">
+  <slot name="error"></slot>
+</div>

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

@@ -0,0 +1,103 @@
+/**
+ * src/elements/forms/input/index.js
+ *
+ * Form Control: <ui-input>
+ * Form-participating text/number/email/password input control using ElementInternals
+ * for seamless integration with native form submission and validation.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-input', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    type: { type: String, reflect: true, default: 'text' },
+    value: { type: String, reflect: true },
+    placeholder: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true, state: true },
+    required: { type: Boolean, reflect: true },
+    minlength: { type: Number, reflect: true },
+    maxlength: { type: Number, reflect: true },
+    min: { type: Number, reflect: true },
+    max: { type: Number, reflect: true },
+    pattern: { type: String, reflect: true }
+  },
+  mount({ el, internals, tags, on }) {
+    const input = tags.one('input');
+
+    // Bind change and input event listeners
+    on.input('input', () => {
+      el.value = input.value;
+      validate(el, internals, input);
+    });
+
+    on.change('input', () => {
+      el.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    });
+
+    syncAttributes(el, tags);
+  },
+  update({ el, name, val, tags, internals }) {
+    const input = tags.one('input');
+
+    if (name === 'disabled') {
+      input.disabled = !!val;
+    } else if (name === 'value') {
+      input.value = val || '';
+    } else if (['type', 'placeholder', 'required', 'minlength', 'maxlength', 'min', 'max', 'pattern'].includes(name)) {
+      if (val !== null && val !== undefined) {
+        input.setAttribute(name, val);
+      } else {
+        input.removeAttribute(name);
+      }
+    }
+
+    validate(el, internals, input);
+  },
+  formResetCallback({ el, tags }) {
+    el.value = el.getAttribute('value') || '';
+    const input = tags.one('input');
+    input.value = el.value;
+  },
+  formDisabledCallback({ el, tags, disabled }) {
+    const input = tags.one('input');
+    input.disabled = disabled;
+  }
+};
+
+function syncAttributes(el, tags) {
+  const input = tags.one('input');
+  const disabled = el.disabled;
+
+  // Proxy observed attributes down to native input inside Shadow DOM
+  const attrs = ['type', 'placeholder', 'required', 'minlength', 'maxlength', 'min', 'max', 'pattern'];
+  for (const attr of attrs) {
+    const val = el[attr];
+    if (val !== null && val !== undefined) {
+      input.setAttribute(attr, val);
+    } else {
+      input.removeAttribute(attr);
+    }
+  }
+
+  input.disabled = disabled;
+  input.value = el.value || '';
+}
+
+function validate(el, internals, input) {
+  const val = input.value;
+
+  internals.setFormValue(val);
+
+  // Check validation and delegate state to ElementInternals
+  if (!input.validity.valid) {
+    internals.setValidity(input.validity, input.validationMessage, input);
+  } else {
+    internals.setValidity({});
+  }
+}
+}, import.meta.url);

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

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

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

@@ -0,0 +1,39 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-family: var(--font-family-sans);
+}
+
+input {
+  background: var(--input-bg);
+  border: var(--space-px) solid var(--input-border);
+  border-radius: var(--input-radius);
+  font-size: var(--input-font-size);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  color: var(--input-text-color);
+  outline: none;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+input:focus {
+  border-color: var(--input-border-focus);
+  box-shadow: 0 0 0 var(--space-0-5) var(--input-border-focus);
+}
+
+:host(:state(disabled)) input {
+  background: var(--color-interactive-disabled);
+  color: var(--color-content-disabled);
+  cursor: not-allowed;
+}
+
+/* Error indicator slots styling */
+.error-container {
+  font-size: var(--font-size-xs);
+  color: var(--color-feedback-error);
+  min-height: var(--space-4);
+}

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

@@ -0,0 +1,4 @@
+<div class="circle" part="circle" tabindex="0">
+  <div class="dot"></div>
+</div>
+<slot></slot>

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

@@ -0,0 +1,109 @@
+/**
+ * src/elements/forms/radio/index.js
+ *
+ * Form Control: <ui-radio>
+ * Standard-compliant form-participating radio selection element. Cooperatively
+ * coordinates selections within scopes sharing a `name` attribute.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-radio', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    checked: { type: Boolean, reflect: true, state: true },
+    disabled: { type: Boolean, reflect: true, state: true },
+    name: { type: String, reflect: true },
+    value: { type: String, reflect: true }
+  },
+  mount({ el, internals, on }) {
+    if (!el.hasAttribute('tabindex')) {
+      el.setAttribute('tabindex', '0');
+    }
+    if (!el.hasAttribute('role')) {
+      el.setAttribute('role', 'radio');
+    }
+
+    on.click(el, (e) => {
+      if (el.disabled || el.checked) return;
+      e.preventDefault();
+      el.checked = true;
+    });
+
+    on.keydown(el, (e) => {
+      if (el.disabled || el.checked) return;
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        el.checked = true;
+      }
+    });
+
+    syncAttributes(el, internals);
+  },
+  update({ el, name, val, internals }) {
+    if (name === 'checked' || name === 'disabled') {
+      syncAttributes(el, internals);
+      if (name === 'checked' && el.checked) {
+        uncheckOthers(el);
+      }
+    }
+  },
+  formResetCallback({ el, internals }) {
+    el.checked = el.hasAttribute('checked');
+    syncAttributes(el, internals);
+  },
+  formDisabledCallback({ el, internals, disabled }) {
+    if (disabled) {
+      el.removeAttribute('tabindex');
+    } else {
+      el.setAttribute('tabindex', '0');
+    }
+    syncAttributes(el, internals);
+  }
+}, import.meta.url);
+
+function syncAttributes(el, internals) {
+  const checked = el.checked;
+  const disabled = el.disabled;
+
+  if (checked) {
+    internals.states.add('checked');
+    el.setAttribute('aria-checked', 'true');
+  } else {
+    internals.states.delete('checked');
+    el.setAttribute('aria-checked', 'false');
+  }
+
+  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);
+}
+
+function uncheckOthers(el) {
+  const name = el.name;
+  if (!name) return;
+
+  // Find and query all other radio components in the same root node sharing the same name
+  const root = el.getRootNode();
+  const radios = Array.from(root.querySelectorAll(`ui-radio[name="${name}"]`));
+
+  for (const radio of radios) {
+    if (radio !== el && radio.checked) {
+      radio.checked = false;
+      radio.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+  }
+}

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

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

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

@@ -0,0 +1,65 @@
+: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 */
+  --radio-bg:           var(--color-surface-page);
+  --radio-bg-checked:   var(--color-interactive);
+  --radio-border:       var(--color-border-default);
+  --radio-border-focus: var(--color-border-focus);
+  --radio-radius:       var(--radius-full);
+  --radio-size:         var(--space-5);
+  --radio-color:        var(--color-content-inverse);
+}
+
+.circle {
+  width: var(--radio-size);
+  height: var(--radio-size);
+  background: var(--radio-bg);
+  border: var(--space-px) solid var(--radio-border);
+  border-radius: var(--radio-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) .circle {
+  border-color: var(--radio-border-focus);
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+.dot {
+  width: 40%;
+  height: 40%;
+  background: var(--radio-color);
+  border-radius: var(--radius-full);
+  display: none;
+}
+
+:host(:state(checked)) .circle {
+  background: var(--radio-bg-checked);
+  border-color: transparent;
+}
+
+:host(:state(checked)) .dot {
+  display: block;
+}
+
+:host(:state(disabled)) {
+  cursor: not-allowed;
+  color: var(--color-content-disabled);
+}
+
+:host(:state(disabled)) .circle {
+  background: var(--color-interactive-disabled);
+  border-color: var(--color-border-default);
+}

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

@@ -0,0 +1,9 @@
+<button id="trigger" popovertarget="dropdown" type="button" part="button">
+  <span id="selected-label">Select option...</span>
+  <svg class="chevron" viewBox="0 0 24 24">
+    <path d="M6 9l6 6 6-6"/>
+  </svg>
+</button>
+<div id="dropdown" popover part="popover">
+  <slot></slot>
+</div>

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

@@ -0,0 +1,114 @@
+/**
+ * src/elements/forms/select/index.js
+ *
+ * Form Control: <ui-select>
+ * Form-participating dropdown selector utilizing the native Popover API
+ * and Anchor Positioning for premium overlay layout.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-select', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    value: { type: String, reflect: true },
+    placeholder: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true, state: true },
+    required: { type: Boolean, reflect: true }
+  },
+  mount({ el, internals, tags, on, watch }) {
+    const slot = tags.one('slot');
+    const trigger = tags.one('#trigger');
+    const popover = tags.one('#dropdown');
+
+    on.slotchange(slot, () => {
+      const nodes = slot.assignedElements();
+      for (const node of nodes) {
+        on.click(node, (e) => {
+          const target = e.currentTarget;
+          const val = target.getAttribute('value') || target.textContent.trim();
+          el.value = val;
+          popover.hidePopover();
+        });
+      }
+      syncValue(el, tags, internals);
+    });
+
+    // Anchor positioning polyfill fallback where needed
+    if (!('anchorName' in document.documentElement.style)) {
+      on.toggle(popover, (e) => {
+        if (e.newState === 'open') {
+          const rect = trigger.getBoundingClientRect();
+          popover.style.top = `${rect.bottom + window.scrollY}px`;
+          popover.style.left = `${rect.left + window.scrollX}px`;
+          popover.style.width = `${rect.width}px`;
+        }
+      });
+    }
+
+    syncAttributes(el, tags, internals);
+  },
+  update({ el, name, val, tags, internals }) {
+    if (name === 'disabled' || name === 'value' || name === 'placeholder') {
+      syncAttributes(el, tags, internals);
+    }
+  },
+  formResetCallback({ el, tags, internals }) {
+    el.value = el.getAttribute('value') || '';
+    syncAttributes(el, tags, internals);
+  },
+  formDisabledCallback({ el, tags, internals, disabled }) {
+    const trigger = tags.one('#trigger');
+    trigger.disabled = disabled;
+    syncAttributes(el, tags, internals);
+  }
+}, import.meta.url);
+
+function syncAttributes(el, tags, internals) {
+  const trigger = tags.one('#trigger');
+  const disabled = el.disabled;
+
+  trigger.disabled = disabled;
+
+  syncValue(el, tags, internals);
+}
+
+function syncValue(el, tags, internals) {
+  const slot = tags.one('slot');
+  const nodes = slot.assignedElements();
+  const val = el.value;
+  const label = tags.one('#selected-label');
+
+  let selectedNode = null;
+  for (const node of nodes) {
+    const nodeVal = node.getAttribute('value') || node.textContent.trim();
+    if (nodeVal === val) {
+      node.setAttribute('selected', '');
+      selectedNode = node;
+    } else {
+      node.removeAttribute('selected');
+    }
+  }
+
+  if (selectedNode) {
+    label.textContent = selectedNode.textContent.trim();
+  } else {
+    label.textContent = el.placeholder || 'Select option...';
+  }
+
+  internals.setFormValue(val || '');
+  validate(el, internals);
+}
+
+function validate(el, internals) {
+  const val = el.value;
+  if (el.required && !val) {
+    internals.setValidity({ valueMissing: true }, 'Please select an option.');
+  } else {
+    internals.setValidity({});
+  }
+}

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":["dropdown","selected-label","trigger"],"classes":["chevron"],"tags":["button","div","path","slot","span","svg"],"compound":["svg.chevron"],"attrs":["class","d","id","part","popover","popovertarget","type","viewBox"],"refTypes":{}}

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

@@ -0,0 +1,95 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-family: var(--font-family-sans);
+  position: relative;
+  /* Component Tokens — Semantic Reference Only */
+  --select-bg:           var(--color-surface-page);
+  --select-border:       var(--color-border-default);
+  --select-border-focus: var(--color-border-focus);
+  --select-radius:       var(--radius-md);
+  --select-font-size:    var(--font-size-base);
+  --select-padding-y:    var(--space-2);
+  --select-padding-x:    var(--space-3);
+  --select-text-color:   var(--color-content-primary);
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--select-bg);
+  border: var(--space-px) solid var(--select-border);
+  border-radius: var(--select-radius);
+  font-size: var(--select-font-size);
+  padding: var(--select-padding-y) var(--select-padding-x);
+  color: var(--select-text-color);
+  cursor: pointer;
+  outline: none;
+  width: 100%;
+  text-align: left;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+  anchor-name: --select-trigger;
+}
+
+button:focus-visible {
+  border-color: var(--select-border-focus);
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+/* Chevron indicators overlay */
+.chevron {
+  width: var(--space-4);
+  height: var(--space-4);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  opacity: 0.7;
+}
+
+/* Native popover style definitions */
+[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(--select-radius);
+  box-shadow: var(--shadow-lg);
+  width: anchor-size(width);
+  position: absolute;
+  top: anchor(bottom);
+  left: anchor(left);
+  box-sizing: border-box;
+  max-height: calc(var(--space-20) * 2);
+  overflow-y: auto;
+  outline: none;
+}
+
+/* Slotted styling overrides for option item tags */
+::slotted(option), ::slotted(div) {
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  font-size: var(--select-font-size);
+  color: var(--select-text-color);
+  user-select: none;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+::slotted(option:hover), ::slotted(div:hover) {
+  background: var(--color-surface-page);
+}
+
+::slotted([selected]) {
+  background: var(--color-interactive-disabled);
+  color: var(--color-interactive);
+  font-weight: var(--font-weight-semibold);
+}
+
+:host(:state(disabled)) button {
+  background: var(--color-interactive-disabled);
+  color: var(--color-content-disabled);
+  cursor: not-allowed;
+}