@adukiorg/anza 0.2.0

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

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

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

@@ -0,0 +1,115 @@
+/**
+ * src/elements/forms/textarea/index.js
+ *
+ * Form Control: <ui-textarea>
+ * Form-participating multi-line text area supporting validation,
+ * custom disabled states, and dynamic auto-resizing.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-textarea', {
+  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 },
+    minlength: { type: Number, reflect: true },
+    maxlength: { type: Number, reflect: true },
+    autoresize: { type: Boolean, reflect: true },
+    rows: { type: Number, reflect: true }
+  },
+  mount({ el, internals, tags, on, watch }) {
+    const area = tags.one('textarea');
+
+    on.input('textarea', () => {
+      el.value = area.value;
+      resize(el, area);
+      validate(el, internals, area);
+    });
+
+    on.change('textarea', () => {
+      el.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    });
+
+    // Auto-resizing ResizeObserver setup
+    const observer = new ResizeObserver(() => resize(el, area));
+    observer.observe(area);
+    el.ctrl.signal.addEventListener('abort', () => observer.disconnect());
+
+    syncAttributes(el, tags);
+  },
+  update({ el, name, val, tags, internals }) {
+    const area = tags.one('textarea');
+
+    if (name === 'disabled') {
+      area.disabled = !!val;
+    } else if (name === 'value') {
+      area.value = val || '';
+    } else if (['placeholder', 'required', 'minlength', 'maxlength', 'rows'].includes(name)) {
+      if (val !== null && val !== undefined) {
+        area.setAttribute(name, val);
+      } else {
+        area.removeAttribute(name);
+      }
+    }
+
+    resize(el, area);
+    validate(el, internals, area);
+  },
+  unmount({ el }) {
+    // ResizeObserver is cleaned up via AbortSignal in mount
+  },
+  formResetCallback({ el, tags }) {
+    el.value = el.getAttribute('value') || '';
+    const area = tags.one('textarea');
+    area.value = el.value;
+  },
+  formDisabledCallback({ el, tags, disabled }) {
+    const area = tags.one('textarea');
+    area.disabled = disabled;
+  }
+}, import.meta.url);
+
+function syncAttributes(el, tags) {
+  const area = tags.one('textarea');
+  const disabled = el.disabled;
+
+  const attrs = ['placeholder', 'required', 'minlength', 'maxlength', 'rows'];
+  for (const attr of attrs) {
+    const val = el[attr];
+    if (val !== null && val !== undefined) {
+      area.setAttribute(attr, val);
+    } else {
+      area.removeAttribute(attr);
+    }
+  }
+
+  area.disabled = disabled;
+  area.value = el.value || '';
+
+  resize(el, area);
+}
+
+function resize(el, area) {
+  if (!el.autoresize) return;
+  area.style.height = 'auto';
+  area.style.height = `${area.scrollHeight}px`;
+}
+
+function validate(el, internals, area) {
+  const val = area.value;
+
+  internals.setFormValue(val);
+
+  if (!area.validity.valid) {
+    internals.setValidity(area.validity, area.validationMessage, area);
+  } else {
+    internals.setValidity({});
+  }
+}

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

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

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

@@ -0,0 +1,46 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-family: var(--font-family-sans);
+}
+
+textarea {
+  background: var(--textarea-bg);
+  border: var(--space-px) solid var(--textarea-border);
+  border-radius: var(--textarea-radius);
+  font-size: var(--textarea-font-size);
+  font-family: inherit;
+  padding: var(--textarea-padding-y) var(--textarea-padding-x);
+  color: var(--textarea-text-color);
+  outline: none;
+  resize: vertical;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--space-12) * 2);
+}
+
+textarea:focus {
+  border-color: var(--textarea-border-focus);
+  box-shadow: 0 0 0 var(--space-0-5) var(--textarea-border-focus);
+}
+
+:host([autoresize]) textarea {
+  resize: none;
+  overflow-y: hidden;
+}
+
+:host(:state(disabled)) textarea {
+  background: var(--color-interactive-disabled);
+  color: var(--color-content-disabled);
+  cursor: not-allowed;
+}
+
+.error-container {
+  font-size: var(--font-size-xs);
+  color: var(--color-feedback-error);
+  min-height: var(--space-4);
+}

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

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

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

@@ -0,0 +1,89 @@
+/**
+ * src/elements/forms/toggle/index.js
+ *
+ * Form Control: <ui-toggle>
+ * Form-participating Switch toggle element. Features standard switch ARIA roles,
+ * custom :state(on) pseudo-classes, and beautiful slide animations.
+ *
+ * Source: doc 04 — Web Components §9, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-toggle', {
+  style: './style.css',
+  template: './index.html',
+  form: true,
+  props: {
+    checked: { type: Boolean, reflect: true, state: 'on' },
+    disabled: { type: Boolean, reflect: true, state: 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', 'switch');
+    }
+
+    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 === '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 {
+      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('on');
+    el.setAttribute('aria-checked', 'true');
+  } else {
+    internals.states.delete('on');
+    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);
+}

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

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

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

@@ -0,0 +1,63 @@
+: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 */
+  --switch-bg:           var(--color-border-strong);
+  --switch-bg-on:        var(--color-interactive);
+  --switch-thumb-color:  var(--color-content-inverse);
+  --switch-width:        var(--space-10);
+  --switch-height:       var(--space-6);
+  --switch-thumb-size:   calc(var(--switch-height) - var(--space-1));
+}
+
+.track {
+  width: var(--switch-width);
+  height: var(--switch-height);
+  background: var(--switch-bg);
+  border-radius: var(--radius-full);
+  position: relative;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+:host(:focus-visible) .track {
+  box-shadow: 0 0 0 var(--space-0-5) var(--color-border-focus);
+}
+
+/* Moving thumb circular handle design */
+.thumb {
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  background: var(--switch-thumb-color);
+  border-radius: var(--radius-full);
+  position: absolute;
+  top: var(--space-0-5);
+  left: var(--space-0-5);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+:host(:state(on)) .track {
+  background: var(--switch-bg-on);
+}
+
+:host(:state(on)) .thumb {
+  transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - var(--space-1)));
+}
+
+:host(:state(disabled)) {
+  cursor: not-allowed;
+  color: var(--color-content-disabled);
+}
+
+:host(:state(disabled)) .track {
+  background: var(--color-interactive-disabled);
+  opacity: 0.6;
+}

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

@@ -0,0 +1,13 @@
+<div class="dropzone" part="dropzone">
+  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+  </svg>
+  <div>
+    <span class="text-main">Click to upload</span> or drag and drop
+  </div>
+  <div style="font-size: var(--font-size-xs)">Select file to begin</div>
+  <input type="file" />
+  <div class="progress-bar" part="progress">
+    <div class="progress-fill" part="progress-fill"></div>
+  </div>
+</div>

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

@@ -0,0 +1,120 @@
+/**
+ * src/elements/forms/upload/index.js
+ *
+ * Form Control: <ui-upload>
+ * Highly interactive Drag-and-Drop file uploader primitive leveraging the
+ * standard core API progress-tracked upload wrapper.
+ *
+ * Source: doc 04 — Web Components §3, doc 11 — Networking §14
+ */
+
+import { ui } from '../../../core/ui/index.js';
+import { upload } from '../../../core/api/upload.js';
+
+ui.element('ui-upload', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    url: { type: String, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+    accept: { type: String, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const dropzone = tags.one('.dropzone');
+    const fileInput = tags.one('input[type="file"]');
+
+    // Click triggers hidden file selector picker
+    on.click(dropzone, () => fileInput.click());
+
+    // File selection changes
+    on.change(fileInput, (e) => {
+      const files = e.target.files;
+      if (files.length > 0) {
+        processFiles(el, tags, files);
+      }
+    });
+
+    // Drag-and-drop listener events
+    const prevent = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((event) => {
+      on[event](dropzone, prevent);
+    });
+
+    ['dragenter', 'dragover'].forEach((event) => {
+      on[event](dropzone, () => dropzone.classList.add('highlight'));
+    });
+
+    ['dragleave', 'drop'].forEach((event) => {
+      on[event](dropzone, () => dropzone.classList.remove('highlight'));
+    });
+
+    on.drop(dropzone, (e) => {
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFiles(el, tags, files);
+      }
+    });
+
+    syncAttributes(el, tags);
+  },
+  update({ el, name, tags }) {
+    if (name === 'multiple' || name === 'accept') {
+      syncAttributes(el, tags);
+    }
+  }
+}, import.meta.url);
+
+function syncAttributes(el, tags) {
+  const fileInput = tags.one('input[type="file"]');
+  if (el.multiple) {
+    fileInput.setAttribute('multiple', '');
+  } else {
+    fileInput.removeAttribute('multiple');
+  }
+
+  if (el.accept) {
+    fileInput.setAttribute('accept', el.accept);
+  } else {
+    fileInput.removeAttribute('accept');
+  }
+}
+
+async function processFiles(el, tags, files) {
+  const url = el.url;
+  if (!url) {
+    el.dispatchEvent(new CustomEvent('selected', { detail: { files }, bubbles: true, composed: true }));
+    return;
+  }
+
+  const progressBar = tags.one('.progress-bar');
+  const progressFill = tags.one('.progress-fill');
+  progressBar.style.display = 'block';
+
+  try {
+    const formData = new FormData();
+    for (const file of files) {
+      formData.append('files', file);
+    }
+
+    await upload(url, formData, {
+      onProgress: (p) => {
+        progressFill.style.width = `${p.percentage}%`;
+        el.dispatchEvent(new CustomEvent('progress', { detail: p, bubbles: true, composed: true }));
+      },
+      signal: el.ctrl.signal
+    });
+
+    progressFill.style.width = '100%';
+    el.dispatchEvent(new CustomEvent('success', { detail: { files }, bubbles: true, composed: true }));
+  } catch (err) {
+    el.dispatchEvent(new CustomEvent('error', { detail: err, bubbles: true, composed: true }));
+  } finally {
+    setTimeout(() => {
+      progressBar.style.display = 'none';
+      progressFill.style.width = '0%';
+    }, 1000);
+  }
+}

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["dropzone","progress-bar","progress-fill","text-main"],"tags":["div","input","path","span","svg"],"compound":["div.dropzone","div.progress-bar","div.progress-fill","span.text-main"],"attrs":["class","d","fill","height","part","stroke","stroke-linecap","stroke-linejoin","stroke-width","style","type","viewBox","width"],"refTypes":{}}

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

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+  font-family: var(--font-family-sans);
+  width: 100%;
+  /* Component Tokens — Semantic Reference Only */
+  --upload-bg:           var(--color-surface-page);
+  --upload-border:       var(--color-border-default);
+  --upload-border-focus: var(--color-border-focus);
+  --upload-radius:       var(--radius-lg);
+  --upload-padding:      var(--space-8);
+  --upload-color:        var(--color-content-secondary);
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  background: var(--upload-bg);
+  border: var(--space-0-5) dashed var(--upload-border);
+  border-radius: var(--upload-radius);
+  padding: var(--upload-padding);
+  text-align: center;
+  cursor: pointer;
+  color: var(--upload-color);
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.dropzone.highlight {
+  border-color: var(--upload-border-focus);
+  background: var(--color-interactive-disabled);
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.text-main {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-primary);
+}
+
+.progress-bar {
+  width: 100%;
+  height: var(--space-1-5);
+  background: var(--color-border-default);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  display: none;
+  margin-top: var(--space-4);
+}
+
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--color-interactive);
+  transition: width var(--duration-fast) var(--ease-out);
+}

package/src/elements/index.js

@@ -0,0 +1,71 @@
+/**
+ * src/elements/index.js
+ *
+ * Public Custom Elements barrel.
+ * Each `export ... from` re-export registers the element as a side-effect
+ * AND exports the class reference directly — no customElements.get() needed.
+ *
+ * Import the full kit:     import '@adukiorg/anza/elements';
+ * Import one element:      import '@adukiorg/anza/elements/button';
+ * Import specific class:   import { Button } from '@adukiorg/anza/elements';
+ */
+
+// 1. Primitives
+export { Button }   from './primitives/button/index.js';
+export { Icon }     from './primitives/icon/index.js';
+export { Badge }    from './primitives/badge/index.js';
+export { Avatar }   from './primitives/avatar/index.js';
+export { Divider }  from './primitives/divider/index.js';
+export { Text }     from './primitives/text/index.js';
+export { Link }     from './primitives/link/index.js';
+export { Spinner }  from './primitives/spinner/index.js';
+
+// 2. Forms
+export { Input }    from './forms/input/index.js';
+export { Textarea } from './forms/textarea/index.js';
+export { Select }   from './forms/select/index.js';
+export { Checkbox } from './forms/checkbox/index.js';
+export { Radio }    from './forms/radio/index.js';
+export { Toggle }   from './forms/toggle/index.js';
+export { Field }    from './forms/field/index.js';
+export { Upload }   from './forms/upload/index.js';
+export { Form }     from './forms/form/index.js';
+
+// 3. Overlay
+export { Dialog }   from './overlay/dialog/index.js';
+export { Popover }  from './overlay/popover/index.js';
+export { Tooltip }  from './overlay/tooltip/index.js';
+export { Menu }     from './overlay/menu/index.js';
+export { Drawer }   from './overlay/drawer/index.js';
+export { Sheet }    from './overlay/sheet/index.js';
+
+// 4. Feedback
+export { Alert }    from './feedback/alert/index.js';
+export { Toast, show as showToast } from './feedback/toast/index.js';
+export { Progress } from './feedback/progress/index.js';
+export { Skeleton } from './feedback/skeleton/index.js';
+export { Empty }    from './feedback/empty/index.js';
+
+// 5. Data
+export { Table }    from './data/table/index.js';
+export { List }     from './data/list/index.js';
+export { Card }     from './data/card/index.js';
+export { Chart }    from './data/chart/index.js';
+export { Stat }     from './data/stat/index.js';
+
+// 6. Navigation
+export { Nav }        from './navigation/nav/index.js';
+export { Tabs }       from './navigation/tabs/index.js';
+export { Breadcrumb } from './navigation/breadcrumb/index.js';
+export { Pagination } from './navigation/pagination/index.js';
+export { Steps }      from './navigation/steps/index.js';
+
+// 7. Layout
+export { App }     from './layout/app/index.js';
+export { Header }  from './layout/header/index.js';
+export { Sidebar } from './layout/sidebar/index.js';
+export { Stack }   from './layout/stack/index.js';
+export { Grid }    from './layout/grid/index.js';
+export { Split }   from './layout/split/index.js';
+export { Scroll }  from './layout/scroll/index.js';
+export { Surface } from './layout/surface/index.js';

package/src/elements/layout/app/index.html

@@ -0,0 +1,7 @@
+<slot name="header"></slot>
+<div class="app-frame" part="frame">
+  <slot name="sidebar"></slot>
+  <main class="main-content" part="main">
+    <slot></slot>
+  </main>
+</div>

package/src/elements/layout/app/index.js

@@ -0,0 +1,16 @@
+/**
+ * src/elements/layout/app/index.js
+ *
+ * Layout System: <ui-app>
+ * Global application frame shell providing side-by-side or stacked layouts
+ * matching modern responsive standards.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-app', {
+  style: './style.css',
+  template: './index.html'
+}, import.meta.url);

package/src/elements/layout/app/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["app-frame","main-content"],"tags":["div","main","slot"],"compound":["div.app-frame","main.main-content"],"attrs":["class","name","part"],"refTypes":{}}

package/src/elements/layout/app/style.css

@@ -0,0 +1,41 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  background: var(--color-surface-page);
+  color: var(--color-content-primary);
+  font-family: var(--font-family-sans);
+}
+
+.app-frame {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  flex-direction: row;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+/* Target nested headers, sidebars, and main content views */
+::slotted(ui-header) {
+  width: 100%;
+  z-index: 100;
+}
+
+::slotted(ui-sidebar) {
+  z-index: 90;
+}
+
+@media (max-width: 768px) {
+  .app-frame {
+    flex-direction: column;
+  }
+}

package/src/elements/layout/grid/index.html

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