@adia-ai/web-components 0.4.5 → 0.4.7

package/components/embed/class.js

@@ -0,0 +1,73 @@
+/**
+ * Non-side-effect class export for `<embed-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/embed`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <embed-ui src="https://example.com" height="400" aspect="16/9"></embed-ui>
+ *
+ * Responsive sandboxed iframe wrapper.
+ *
+ * Properties:
+ *   src    — iframe URL
+ *   height — iframe height (default '400')
+ *   width  — iframe width (default '100%')
+ *   aspect — optional CSS aspect-ratio (e.g. '16/9')
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIEmbed extends UIElement {
+  static properties = {
+    src:    { type: String,  default: '', reflect: true },
+    height: { type: String,  default: '400', reflect: true },
+    width:  { type: String,  default: '100%', reflect: true },
+    aspect: { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #iframe = null;
+
+  connected() {
+    if (!this.#iframe) {
+      this.#iframe = document.createElement('iframe');
+      this.#iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+      this.#iframe.setAttribute('loading', 'lazy');
+      this.#iframe.setAttribute('allowfullscreen', '');
+      this.appendChild(this.#iframe);
+    }
+  }
+
+  render() {
+    if (!this.#iframe) return;
+
+    if (this.src) this.#iframe.src = this.src;
+
+    if (this.aspect) {
+      this.style.aspectRatio = this.aspect;
+      this.#iframe.style.width = '100%';
+      this.#iframe.style.height = '100%';
+      this.style.width = this.width;
+      this.style.height = '';
+    } else {
+      this.style.aspectRatio = '';
+      this.#iframe.style.width = '100%';
+      this.#iframe.style.height = this.height.match(/^\d+$/) ? `${this.height}px` : this.height;
+      this.style.width = this.width;
+      this.style.height = '';
+    }
+  }
+
+  disconnected() {
+    this.#iframe = null;
+  }
+}

package/components/embed/embed.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<embed-ui>` — Responsive sandboxed iframe wrapper.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/embed
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIEmbed extends UIElement {
+  /** CSS aspect-ratio (e.g. 16/9) */
+  aspect: string;
+  /** Iframe height. Plain numbers treated as pixels. */
+  height: string;
+  /** URL to load in the iframe */
+  src: string;
+  /** Iframe width. Any CSS width value. */
+  width: string;
+}

package/components/embed/embed.js

@@ -1,63 +1,17 @@
 /**
- * <embed-ui src="https://example.com" height="400" aspect="16/9"></embed-ui>
+ * `<embed-ui>` — auto-registers the tag on import.
  *
- * Responsive sandboxed iframe wrapper.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Properties:
- *   src    — iframe URL
- *   height — iframe height (default '400')
- *   width  — iframe width (default '100%')
- *   aspect — optional CSS aspect-ratio (e.g. '16/9')
+ *   import { UIEmbed } from '@adia-ai/web-components/components/embed/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIEmbed extends UIElement {
-  static properties = {
-    src:    { type: String,  default: '', reflect: true },
-    height: { type: String,  default: '400', reflect: true },
-    width:  { type: String,  default: '100%', reflect: true },
-    aspect: { type: String,  default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #iframe = null;
-
-  connected() {
-    if (!this.#iframe) {
-      this.#iframe = document.createElement('iframe');
-      this.#iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
-      this.#iframe.setAttribute('loading', 'lazy');
-      this.#iframe.setAttribute('allowfullscreen', '');
-      this.appendChild(this.#iframe);
-    }
-  }
-
-  render() {
-    if (!this.#iframe) return;
-
-    if (this.src) this.#iframe.src = this.src;
-
-    if (this.aspect) {
-      this.style.aspectRatio = this.aspect;
-      this.#iframe.style.width = '100%';
-      this.#iframe.style.height = '100%';
-      this.style.width = this.width;
-      this.style.height = '';
-    } else {
-      this.style.aspectRatio = '';
-      this.#iframe.style.width = '100%';
-      this.#iframe.style.height = this.height.match(/^\d+$/) ? `${this.height}px` : this.height;
-      this.style.width = this.width;
-      this.style.height = '';
-    }
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIEmbed } from './class.js';
 
-  disconnected() {
-    this.#iframe = null;
-  }
-}
-customElements.define('embed-ui', UIEmbed);
+defineIfFree('embed-ui', UIEmbed);
 
 export { UIEmbed };

package/components/empty-state/class.js

@@ -0,0 +1,108 @@
+/**
+ * Non-side-effect class export for `<empty-state-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/empty-state`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <empty-state-ui icon="magnifying-glass" heading="No results" description="Try adjusting your search.">
+ *   <button-ui slot="action" text="Clear filters" variant="outline"></button-ui>
+ * </empty-state-ui>
+ *
+ * Placeholder for empty views — icon, heading, description, and action slot.
+ * The action slot is user-provided (not stamped by the component).
+ *
+ * Note: Uses 'heading' attribute instead of 'title' to avoid native tooltip.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIEmptyState extends UIElement {
+  static properties = {
+    icon:        { type: String, default: '', reflect: true },
+    heading:     { type: String, default: '', reflect: true },
+    description: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #iconEl = null;
+  #headingEl = null;
+  #descEl = null;
+
+  // Mark slot elements we create so render() never overrides consumer-provided ones.
+  // See ADR-0010 (slot content is source of truth).
+  #stampMark(el) { el.dataset.emptyStateStamped = '1'; return el; }
+  #wasStamped(el) { return el?.dataset?.emptyStateStamped === '1'; }
+
+  connected() {
+    this.#iconEl = this.querySelector(':scope > [slot="icon"]');
+    if (!this.#iconEl) {
+      this.#iconEl = this.#stampMark(document.createElement('icon-ui'));
+      this.#iconEl.setAttribute('slot', 'icon');
+      this.#iconEl.setAttribute('size', 'lg');
+      this.insertBefore(this.#iconEl, this.firstChild);
+    }
+
+    this.#headingEl = this.querySelector(':scope > [slot="heading"]');
+    if (!this.#headingEl) {
+      this.#headingEl = this.#stampMark(document.createElement('span'));
+      this.#headingEl.setAttribute('slot', 'heading');
+      this.insertBefore(this.#headingEl, this.querySelector('[slot="action"]'));
+    }
+
+    this.#descEl = this.querySelector(':scope > [slot="description"]');
+    if (!this.#descEl) {
+      this.#descEl = this.#stampMark(document.createElement('span'));
+      this.#descEl.setAttribute('slot', 'description');
+      this.insertBefore(this.#descEl, this.querySelector('[slot="action"]'));
+    }
+  }
+
+  render() {
+    if (!this.#iconEl) return;
+
+    // Icon — only mutate stamped elements; visibility follows the source of truth.
+    if (this.#wasStamped(this.#iconEl)) {
+      if (this.icon) {
+        this.#iconEl.setAttribute('name', this.icon);
+        this.#iconEl.hidden = false;
+      } else {
+        this.#iconEl.hidden = true;
+      }
+    }
+
+    // Heading — same policy.
+    if (this.#wasStamped(this.#headingEl)) {
+      if (this.heading) {
+        this.#headingEl.textContent = this.heading;
+        this.#headingEl.hidden = false;
+      } else {
+        this.#headingEl.hidden = true;
+      }
+    }
+
+    // Description — same policy.
+    if (this.#wasStamped(this.#descEl)) {
+      if (this.description) {
+        this.#descEl.textContent = this.description;
+        this.#descEl.hidden = false;
+      } else {
+        this.#descEl.hidden = true;
+      }
+    }
+  }
+
+  disconnected() {
+    this.#iconEl = null;
+    this.#headingEl = null;
+    this.#descEl = null;
+  }
+}

package/components/empty-state/empty-state.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<empty-state-ui>` — Placeholder for empty views with icon, heading, description, and action slot.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/empty-state
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIEmptyState extends UIElement {
+  /** Secondary descriptive text below the heading */
+  description: string;
+  /** Primary heading text. Uses 'heading' instead of 'title' to avoid native tooltip. */
+  heading: string;
+  /** Icon name displayed above the heading */
+  icon: string;
+}

package/components/empty-state/empty-state.js

@@ -1,98 +1,17 @@
 /**
- * <empty-state-ui icon="magnifying-glass" heading="No results" description="Try adjusting your search.">
- *   <button-ui slot="action" text="Clear filters" variant="outline"></button-ui>
- * </empty-state-ui>
+ * `<empty-state-ui>` — auto-registers the tag on import.
  *
- * Placeholder for empty views — icon, heading, description, and action slot.
- * The action slot is user-provided (not stamped by the component).
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Note: Uses 'heading' attribute instead of 'title' to avoid native tooltip.
+ *   import { UIEmptyState } from '@adia-ai/web-components/components/empty-state/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIEmptyState extends UIElement {
-  static properties = {
-    icon:        { type: String, default: '', reflect: true },
-    heading:     { type: String, default: '', reflect: true },
-    description: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #iconEl = null;
-  #headingEl = null;
-  #descEl = null;
-
-  // Mark slot elements we create so render() never overrides consumer-provided ones.
-  // See ADR-0010 (slot content is source of truth).
-  #stampMark(el) { el.dataset.emptyStateStamped = '1'; return el; }
-  #wasStamped(el) { return el?.dataset?.emptyStateStamped === '1'; }
-
-  connected() {
-    this.#iconEl = this.querySelector(':scope > [slot="icon"]');
-    if (!this.#iconEl) {
-      this.#iconEl = this.#stampMark(document.createElement('icon-ui'));
-      this.#iconEl.setAttribute('slot', 'icon');
-      this.#iconEl.setAttribute('size', 'lg');
-      this.insertBefore(this.#iconEl, this.firstChild);
-    }
-
-    this.#headingEl = this.querySelector(':scope > [slot="heading"]');
-    if (!this.#headingEl) {
-      this.#headingEl = this.#stampMark(document.createElement('span'));
-      this.#headingEl.setAttribute('slot', 'heading');
-      this.insertBefore(this.#headingEl, this.querySelector('[slot="action"]'));
-    }
-
-    this.#descEl = this.querySelector(':scope > [slot="description"]');
-    if (!this.#descEl) {
-      this.#descEl = this.#stampMark(document.createElement('span'));
-      this.#descEl.setAttribute('slot', 'description');
-      this.insertBefore(this.#descEl, this.querySelector('[slot="action"]'));
-    }
-  }
-
-  render() {
-    if (!this.#iconEl) return;
-
-    // Icon — only mutate stamped elements; visibility follows the source of truth.
-    if (this.#wasStamped(this.#iconEl)) {
-      if (this.icon) {
-        this.#iconEl.setAttribute('name', this.icon);
-        this.#iconEl.hidden = false;
-      } else {
-        this.#iconEl.hidden = true;
-      }
-    }
-
-    // Heading — same policy.
-    if (this.#wasStamped(this.#headingEl)) {
-      if (this.heading) {
-        this.#headingEl.textContent = this.heading;
-        this.#headingEl.hidden = false;
-      } else {
-        this.#headingEl.hidden = true;
-      }
-    }
-
-    // Description — same policy.
-    if (this.#wasStamped(this.#descEl)) {
-      if (this.description) {
-        this.#descEl.textContent = this.description;
-        this.#descEl.hidden = false;
-      } else {
-        this.#descEl.hidden = true;
-      }
-    }
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIEmptyState } from './class.js';
 
-  disconnected() {
-    this.#iconEl = null;
-    this.#headingEl = null;
-    this.#descEl = null;
-  }
-}
-customElements.define('empty-state-ui', UIEmptyState);
+defineIfFree('empty-state-ui', UIEmptyState);
 
 export { UIEmptyState };