@adukiorg/anza 0.2.0

package/src/elements/data/chart/index.js

@@ -0,0 +1,143 @@
+/**
+ * src/elements/data/chart/index.js
+ *
+ * Data Element: <ui-chart>
+ * Lightweight canvas-based declarative chart component supporting bar/line charts
+ * with automatic high-DPI scaling and responsive resizing.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-chart', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    type: { type: String, reflect: true },
+    data: { type: String, reflect: true }
+  },
+  mount({ el, tags, watch }) {
+    const canvas = tags.one('canvas');
+
+    // Track sizing changes to automatically redraw High-DPI canvas
+    const observer = new ResizeObserver(() => draw(el, tags));
+    observer.observe(canvas);
+    el.ctrl.signal.addEventListener('abort', () => observer.disconnect());
+
+    draw(el, tags);
+  },
+  unmount({ el }) {
+    // ResizeObserver is cleaned up via AbortSignal in mount
+  },
+  update({ el, tags }) {
+    draw(el, tags);
+  }
+}, import.meta.url);
+
+function draw(el, tags) {
+  const canvas = tags.one('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  // Get dimensions and scale for high-DPI retina displays
+  const rect = canvas.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  ctx.scale(dpr, dpr);
+
+  const width = rect.width;
+  const height = rect.height;
+
+  ctx.clearRect(0, 0, width, height);
+
+  // Parse data points
+  let data = [];
+  try {
+    data = el.data ? JSON.parse(el.data) : [10, 30, 20, 50, 40, 60];
+  } catch {
+    data = [10, 30, 20, 50, 40, 60];
+  }
+
+  const type = el.type || 'bar';
+  const maxVal = Math.max(...data, 1) * 1.1;
+
+  // Retrieve active token styles for canvas drawing
+  const style = getComputedStyle(el);
+  const colorInteractive = style.getPropertyValue('--color-interactive').trim() || '#3b82f6';
+  const colorBorder = style.getPropertyValue('--color-border-default').trim() || '#e5e7eb';
+  const colorText = style.getPropertyValue('--color-content-secondary').trim() || '#4b5563';
+
+  // Draw baseline grid lines
+  ctx.strokeStyle = colorBorder;
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 4; i++) {
+    const y = height - (i * (height - 30)) / 4 - 20;
+    ctx.beginPath();
+    ctx.moveTo(30, y);
+    ctx.lineTo(width - 10, y);
+    ctx.stroke();
+
+    // Axis labels text
+    ctx.fillStyle = colorText;
+    ctx.font = '10px sans-serif';
+    ctx.fillText(Math.round((maxVal * i) / 4).toString(), 5, y + 3);
+  }
+
+  const graphWidth = width - 40;
+  const graphHeight = height - 50;
+  const step = graphWidth / (data.length - 1 || 1);
+
+  if (type === 'line') {
+    ctx.strokeStyle = colorInteractive;
+    ctx.lineWidth = 3;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    data.forEach((val, idx) => {
+      const x = 30 + idx * step;
+      const y = height - 20 - (val / maxVal) * graphHeight;
+      if (idx === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.stroke();
+
+    // Draw standard line fill gradient
+    ctx.lineTo(30 + (data.length - 1) * step, height - 20);
+    ctx.lineTo(30, height - 20);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, 0, 0, height);
+    grad.addColorStop(0, colorInteractive + '33'); // Fade opacity overlay
+    grad.addColorStop(1, colorInteractive + '00');
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+  } else {
+    // Draw bar charts columns
+    const barWidth = Math.max(10, step * 0.6);
+    ctx.fillStyle = colorInteractive;
+
+    data.forEach((val, idx) => {
+      const x = 30 + idx * step - barWidth / 2;
+      const y = height - 20 - (val / maxVal) * graphHeight;
+      const barH = (val / maxVal) * graphHeight;
+
+      // Custom rounded top corners on charts bar rectangles
+      const radius = 4;
+      ctx.beginPath();
+      ctx.moveTo(x, y + barH);
+      ctx.lineTo(x, y + radius);
+      ctx.quadraticCurveTo(x, y, x + radius, y);
+      ctx.lineTo(x + barWidth - radius, y);
+      ctx.quadraticCurveTo(x + barWidth, y, x + barWidth, y + radius);
+      ctx.lineTo(x + barWidth, y + barH);
+      ctx.closePath();
+      ctx.fill();
+    });
+  }
+}

package/src/elements/data/chart/index.tags.json

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

package/src/elements/data/chart/style.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+  height: calc(var(--space-24) * 3);
+  position: relative;
+  font-family: var(--font-family-sans);
+}
+
+canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/elements/data/list/index.html

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

package/src/elements/data/list/index.js

@@ -0,0 +1,19 @@
+/**
+ * src/elements/data/list/index.js
+ *
+ * Data Element: <ui-list>
+ * Flexible list wrapper supplying clean spacer dividers, bordered panels,
+ * and semantic token alignments.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-list', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    bordered: { type: Boolean, reflect: true }
+  }
+}, import.meta.url);

package/src/elements/data/list/index.tags.json

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

package/src/elements/data/list/style.css

@@ -0,0 +1,39 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--font-family-sans);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:host([bordered]) .list {
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  overflow: hidden;
+}
+
+/* Target items slotted inside list */
+::slotted(ui-list-item), ::slotted(div[role="listitem"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--space-px) solid var(--color-border-default);
+  box-sizing: border-box;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+::slotted(ui-list-item:last-child), ::slotted(div[role="listitem"]:last-child) {
+  border-bottom: none;
+}
+
+::slotted(ui-list-item:hover), ::slotted(div[role="listitem"]:hover) {
+  background: var(--color-surface-page);
+}

package/src/elements/data/stat/index.html

@@ -0,0 +1,9 @@
+<div class="label" part="label">
+  <slot name="label"></slot>
+</div>
+<div class="value" part="value">
+  <slot></slot>
+</div>
+<div class="trend-box" part="trend">
+  <slot name="change"></slot>
+</div>

package/src/elements/data/stat/index.js

@@ -0,0 +1,19 @@
+/**
+ * src/elements/data/stat/index.js
+ *
+ * Data Element: <ui-stat>
+ * Standard KPI statistic display panel offering large numerical values,
+ * secondary descriptive labels, and styled positive/negative/neutral trend change metrics.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-stat', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    trend: { type: String, reflect: true, default: 'neutral' }
+  }
+}, import.meta.url);

package/src/elements/data/stat/index.tags.json

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["label","trend-box","value"],"tags":["div","slot"],"compound":["div.label","div.trend-box","div.value"],"attrs":["class","name","part"],"refTypes":{}}

package/src/elements/data/stat/style.css

@@ -0,0 +1,50 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface-elevated);
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-family-sans);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--space-0-5);
+  margin-bottom: var(--space-1);
+}
+
+.value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-content-primary);
+  line-height: var(--line-height-none);
+  margin-bottom: var(--space-2);
+}
+
+.trend-box {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Trend variance color configurations mapping only to semantic feedback tokens */
+:host([trend="positive"]) .trend-box {
+  color: var(--color-feedback-success);
+}
+
+:host([trend="negative"]) .trend-box {
+  color: var(--color-feedback-error);
+}
+
+:host([trend="neutral"]) .trend-box {
+  color: var(--color-content-secondary);
+}

package/src/elements/data/table/index.html

@@ -0,0 +1 @@
+<slot></slot>

package/src/elements/data/table/index.js

@@ -0,0 +1,16 @@
+/**
+ * src/elements/data/table/index.js
+ *
+ * Data Element: <ui-table>
+ * Responsive data table layout wrapping native standard <table> tags and attaching
+ * complete semantic design token styles using slotted tree CSS.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-table', {
+  style: './style.css',
+  template: './index.html'
+}, import.meta.url);

package/src/elements/data/table/index.tags.json

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

package/src/elements/data/table/style.css

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: var(--space-px) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+/* Target standard table tags distributed into slot */
+::slotted(table) {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  color: var(--color-content-primary);
+  text-align: left;
+}
+
+::slotted(thead) {
+  background: var(--color-surface-page);
+  border-bottom: var(--space-px) solid var(--color-border-default);
+}
+
+::slotted(th) {
+  padding: var(--space-3) var(--space-4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-content-secondary);
+  user-select: none;
+}
+
+::slotted(tr) {
+  border-bottom: var(--space-px) solid var(--color-border-default);
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+::slotted(tr:last-child) {
+  border-bottom: none;
+}
+
+::slotted(tbody tr:hover) {
+  background: var(--color-interactive-disabled);
+}
+
+::slotted(td) {
+  padding: var(--space-4);
+  vertical-align: middle;
+}

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

@@ -0,0 +1,11 @@
+<div class="alert" part="alert" role="alert">
+  <div class="body" part="body">
+    <slot></slot>
+  </div>
+  <button part="close-button" type="button" aria-label="Close alert">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  </button>
+</div>

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

@@ -0,0 +1,28 @@
+/**
+ * src/elements/feedback/alert/index.js
+ *
+ * Feedback Element: <ui-alert>
+ * Inline severity notifications (info, success, warning, error) incorporating WAI-ARIA
+ * role="alert" live regions and dismiss action controllers.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-alert', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    variant: { type: String, reflect: true },
+    dismissible: { type: Boolean, reflect: true }
+  },
+  mount({ el, tags, on }) {
+    const closeBtn = tags.one('button');
+
+    on.click(closeBtn, () => {
+      el.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+      el.remove();
+    });
+  }
+}, import.meta.url);

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":[],"classes":["alert","body"],"tags":["button","div","line","slot","svg"],"compound":["div.alert","div.body"],"attrs":["aria-label","class","fill","height","part","role","stroke","stroke-linecap","stroke-linejoin","stroke-width","type","viewBox","width","x1","x2","y1","y2"],"refTypes":{}}

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

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  font-family: var(--font-family-sans);
+  width: 100%;
+  /* Component Tokens — Semantic Reference Only */
+  --alert-radius: var(--radius-md);
+  --alert-bg:     var(--color-surface-elevated);
+  --alert-color:  var(--color-content-primary);
+  --alert-border: var(--color-border-default);
+}
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--alert-bg);
+  color: var(--alert-color);
+  border: var(--space-px) solid var(--alert-border);
+  border-radius: var(--alert-radius);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.body {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+button {
+  background: transparent;
+  border: none;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+button:hover {
+  opacity: 1;
+}
+
+:host([dismissible]) button {
+  display: inline-flex;
+}
+
+/* Variant mappings using semantic feedback tokens only */
+:host([variant="success"]) {
+  --alert-bg:     var(--color-surface-page);
+  --alert-border: var(--color-feedback-success);
+  --alert-color:  var(--color-content-primary);
+}
+
+:host([variant="warning"]) {
+  --alert-bg:     var(--color-surface-page);
+  --alert-border: var(--color-feedback-warning);
+  --alert-color:  var(--color-content-primary);
+}
+
+:host([variant="error"]) {
+  --alert-bg:     var(--color-surface-page);
+  --alert-border: var(--color-feedback-error);
+  --alert-color:  var(--color-content-primary);
+}
+
+:host([variant="info"]) {
+  --alert-bg:     var(--color-surface-page);
+  --alert-border: var(--color-feedback-info);
+  --alert-color:  var(--color-content-primary);
+}

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

@@ -0,0 +1,13 @@
+<div class="illustration" part="illustration">
+  <slot name="illustration">
+    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  </slot>
+</div>
+<h3 id="title-label" part="title"></h3>
+<p id="desc-label" part="description"></p>
+<div class="actions" part="actions">
+  <slot></slot>
+</div>

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

@@ -0,0 +1,34 @@
+/**
+ * src/elements/feedback/empty/index.js
+ *
+ * Feedback Element: <ui-empty>
+ * Informative empty state component supporting custom illustrations slots,
+ * titles, secondary paragraphs, and CTA actions triggers.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-empty', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    title: { type: String, reflect: true },
+    description: { type: String, reflect: true }
+  },
+  mount({ el, tags }) {
+    update(el, tags);
+  },
+  update({ el, tags }) {
+    update(el, tags);
+  }
+}, import.meta.url);
+
+function update(el, tags) {
+  const title = el.title || 'No records found';
+  const description = el.description || 'Try adjusting your search criteria or add new records.';
+
+  tags.one('#title-label').textContent = title;
+  tags.one('#desc-label').textContent = description;
+}

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":["desc-label","title-label"],"classes":["actions","illustration"],"tags":["circle","div","h3","line","p","slot","svg"],"compound":["div.actions","div.illustration"],"attrs":["class","cx","cy","fill","height","id","name","part","r","stroke","stroke-linecap","stroke-linejoin","stroke-width","viewBox","width","x1","x2","y1","y2"],"refTypes":{}}

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

@@ -0,0 +1,45 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-12) var(--space-6);
+  font-family: var(--font-family-sans);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.illustration {
+  margin-bottom: var(--space-4);
+  color: var(--color-content-secondary);
+  display: flex;
+  justify-content: center;
+}
+
+/* Slotted illustration size constraints */
+::slotted(svg), ::slotted(img) {
+  width: calc(var(--space-12) * 2);
+  height: calc(var(--space-12) * 2);
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-content-primary);
+  margin: 0 0 var(--space-2) 0;
+}
+
+p {
+  font-size: var(--font-size-sm);
+  color: var(--color-content-secondary);
+  max-width: calc(var(--space-32) * 3);
+  margin: 0 0 var(--space-6) 0;
+  line-height: var(--line-height-normal);
+}
+
+.actions {
+  display: flex;
+  gap: var(--space-3);
+  justify-content: center;
+}

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

@@ -0,0 +1,7 @@
+<div class="label-box" part="labels">
+  <slot name="label">Progress</slot>
+  <span id="percent-label">0%</span>
+</div>
+<div class="track" part="track">
+  <div class="fill" part="fill"></div>
+</div>

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

@@ -0,0 +1,46 @@
+/**
+ * src/elements/feedback/progress/index.js
+ *
+ * Feedback Element: <ui-progress>
+ * Premium progress indicator mapping directly to native progress states
+ * while incorporating smooth CSS animations and active percentage labels.
+ *
+ * Source: doc 04 — Web Components §3, doc 05 — Native UI Primitives §3
+ */
+
+import { ui } from '../../../core/ui/index.js';
+
+ui.element('ui-progress', {
+  style: './style.css',
+  template: './index.html',
+  props: {
+    value: { type: Number, reflect: true },
+    max: { type: Number, reflect: true }
+  },
+  mount({ el, tags }) {
+    // ARIA updates
+    if (!el.hasAttribute('role')) {
+      el.setAttribute('role', 'progressbar');
+    }
+    update(el, tags);
+  },
+  update({ el, tags }) {
+    update(el, tags);
+  }
+}, import.meta.url);
+
+function update(el, tags) {
+  const val = el.value || 0;
+  const max = el.max || 100;
+  const fill = tags.one('.fill');
+  const label = tags.one('#percent-label');
+
+  const pct = Math.min(100, Math.max(0, Math.round((val / max) * 100)));
+
+  fill.style.width = `${pct}%`;
+  label.textContent = `${pct}%`;
+
+  el.setAttribute('aria-valuenow', val);
+  el.setAttribute('aria-valuemin', 0);
+  el.setAttribute('aria-valuemax', max);
+}

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

@@ -0,0 +1 @@
+{"version":1,"refs":[],"ids":["percent-label"],"classes":["fill","label-box","track"],"tags":["div","slot","span"],"compound":["div.fill","div.label-box","div.track"],"attrs":["class","id","name","part"],"refTypes":{}}