@diniz/webcomponents 1.1.5 → 1.1.7

package/dist/stepper-demo-page-BkcpKk_F.js

@@ -0,0 +1,312 @@
+var m = Object.defineProperty;
+var g = (n, r, e) => r in n ? m(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
+var c = (n, r, e) => g(n, typeof r != "symbol" ? r + "" : r, e);
+import { B as h } from "./index-DiYekJaQ.js";
+const u = `
+	<section class="stepper-hero">
+		<div>
+			<p class="eyebrow">Flow control</p>
+			<h1>Stepper</h1>
+			<p class="hero-subtitle">
+				Guide users across multi-step journeys with clear progress, states, and actions.
+			</p>
+		</div>		
+	</section>
+
+	<section class="stepper-section">
+		<div class="section-head">
+			<h2>Interactive progress</h2>
+			<p>Move between steps to preview states and content density.</p>
+		</div>
+		<div class="stepper-card">
+			<ui-stepper id="interactiveStepper" size="md"></ui-stepper>
+			<div class="stepper-preview" id="interactiveContent"></div>
+			<div class="stepper-controls">
+				<div class="status-pill" id="interactiveStatus">Step 2 of 5</div>
+				<div class="actions">
+					<ui-button id="prevStep" variant="secondary" size="sm">Previous</ui-button>
+					<ui-button id="nextStep" variant="primary" size="sm">Next</ui-button>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<section class="stepper-section grid">
+		<div class="stepper-card">
+			<div class="section-head">
+				<h2>Compact workflow</h2>
+				<p>Small size for tight layouts or onboarding drawers.</p>
+			</div>
+			<ui-stepper id="compactStepper" size="sm"></ui-stepper>
+		</div>
+		<div class="stepper-card">
+			<div class="section-head">
+				<h2>Vertical journey</h2>
+				<p>Perfect for forms, checklists, and long content.</p>
+			</div>
+			<ui-stepper id="verticalStepper" orientation="vertical" size="lg"></ui-stepper>
+		</div>
+	</section>
+
+	<section class="stepper-section">
+		<div class="section-head">
+			<h2>Status flavors</h2>
+			<p>Explicit states like warning and error bring clarity to complex flows.</p>
+		</div>
+		<div class="stepper-card">
+			<ui-stepper id="statusStepper" size="md"></ui-stepper>
+		</div>
+	</section>
+`, f = `
+	:host {
+		display: block;
+		color: var(--color-ink);
+	}
+
+	.stepper-hero {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 2rem;
+		border-radius: 20px;
+		background: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),
+			linear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.9));
+		border: 1px solid rgba(52, 168, 235, 0.2);
+		margin-bottom: 2rem;
+		gap: 1.5rem;
+		flex-wrap: wrap;
+	}
+
+	.eyebrow {
+		text-transform: uppercase;
+		letter-spacing: 0.2em;
+		font-size: 0.7rem;
+		color: rgba(15, 23, 42, 0.55);
+		margin: 0 0 0.75rem;
+		font-weight: 700;
+	}
+
+	h1 {
+		font-size: 2.4rem;
+		margin: 0 0 0.5rem;
+	}
+
+	.hero-subtitle {
+		max-width: 520px;
+		margin: 0;
+		color: rgba(15, 23, 42, 0.65);
+		font-size: 1rem;
+		line-height: 1.6;
+	}
+
+	.hero-badge {
+		padding: 0.4rem 0.9rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+		background: #0f172a;
+		color: #ffffff;
+		box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
+	}
+
+	.stepper-section {
+		margin-bottom: 2rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.stepper-section.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+	}
+
+	.section-head h2 {
+		margin: 0 0 0.35rem;
+		font-size: 1.4rem;
+	}
+
+	.section-head p {
+		margin: 0;
+		color: rgba(15, 23, 42, 0.6);
+		font-size: 0.95rem;
+	}
+
+	.stepper-card {
+		padding: 1.5rem;
+		border-radius: 16px;
+		border: 1px solid rgba(148, 163, 184, 0.3);
+		background: #ffffff;
+		box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.stepper-controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.stepper-preview {
+		border-radius: 14px;
+		padding: 1.25rem;
+		background: linear-gradient(135deg, rgba(36, 236, 113, 0.12), rgba(255, 255, 255, 0.9));
+		border: 1px solid rgba(36, 236, 113, 0.25);
+		display: flex;
+		flex-direction: column;
+		gap: 0.65rem;
+		min-height: 140px;
+		animation: fadeSlide 0.25s ease;
+	}
+
+	.stepper-preview h3 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
+
+	.stepper-preview p {
+		margin: 0;
+		color: rgba(15, 23, 42, 0.65);
+		font-size: 0.95rem;
+		line-height: 1.5;
+	}
+
+	.stepper-preview ul {
+		margin: 0;
+		padding-left: 1.2rem;
+		color: rgba(15, 23, 42, 0.65);
+		font-size: 0.9rem;
+		display: grid;
+		gap: 0.35rem;
+	}
+
+	.actions {
+		display: flex;
+		gap: 0.75rem;
+		align-items: center;
+	}
+
+	.status-pill {
+		padding: 0.35rem 0.9rem;
+		background: rgba(36, 236, 113, 0.15);
+		border-radius: 999px;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #166534;
+	}
+
+	@keyframes fadeSlide {
+		from {
+			opacity: 0;
+			transform: translateY(6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (max-width: 720px) {
+		.stepper-hero {
+			padding: 1.5rem;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+	}
+`, d = [
+  { title: "Project setup", description: "Name, team, and scope" },
+  { title: "Permissions", description: "Invite collaborators" },
+  { title: "Brand kit", description: "Logo and colors" },
+  { title: "Integrations", description: "Connect tools" },
+  { title: "Launch", description: "Review and publish" }
+], b = [
+  { title: "Connect" },
+  { title: "Customize" },
+  { title: "Publish" }
+], v = [
+  { title: "Account details", description: "Personal information" },
+  { title: "Billing", description: "Plan and payment method" },
+  { title: "Security", description: "Password and MFA" },
+  { title: "Preferences", description: "Notifications and access" }
+], y = [
+  { title: "Collect data", description: "Import the latest dataset", state: "complete" },
+  { title: "Validate", description: "Spot missing fields", state: "warning" },
+  { title: "Resolve issues", description: "Fix invalid entries", state: "error" },
+  { title: "Publish", description: "Share with the team", state: "upcoming" }
+], x = [
+  {
+    title: "Project setup",
+    copy: "Create the workspace, define the team, and lock in the scope.",
+    bullets: ["Workspace name + region", "Invite core collaborators", "Set the delivery timeline"]
+  },
+  {
+    title: "Permissions",
+    copy: "Assign roles and access boundaries for internal and external teams.",
+    bullets: ["Owner and editor roles", "Approval workflows", "Audit logging enabled"]
+  },
+  {
+    title: "Brand kit",
+    copy: "Upload logo assets and align the design system palette.",
+    bullets: ["Primary + accent colors", "Typography presets", "Asset library sync"]
+  },
+  {
+    title: "Integrations",
+    copy: "Connect your analytics, CRM, and deployment pipelines.",
+    bullets: ["Analytics provider", "CRM webhooks", "CI/CD automation"]
+  },
+  {
+    title: "Launch",
+    copy: "Finalize content and publish to production.",
+    bullets: ["Final review checklist", "Stakeholder sign-off", "Go-live switch"]
+  }
+];
+class w extends h {
+  constructor() {
+    super(...arguments);
+    c(this, "activeIndex", 2);
+  }
+  async connectedCallback() {
+    super.connectedCallback(), await customElements.whenDefined("ui-stepper"), this.render(), this.setupSteppers(), this.setupControls();
+  }
+  setupSteppers() {
+    const e = this.shadowRoot.getElementById("interactiveStepper"), s = this.shadowRoot.getElementById("compactStepper"), t = this.shadowRoot.getElementById("verticalStepper"), i = this.shadowRoot.getElementById("statusStepper");
+    e == null || e.setAttribute("steps", JSON.stringify(d)), e == null || e.setAttribute("active", String(this.activeIndex)), s == null || s.setAttribute("steps", JSON.stringify(b)), s == null || s.setAttribute("active", "2"), t == null || t.setAttribute("steps", JSON.stringify(v)), t == null || t.setAttribute("active", "3"), i == null || i.setAttribute("steps", JSON.stringify(y)), i == null || i.setAttribute("active", "2");
+  }
+  setupControls() {
+    const e = this.shadowRoot.getElementById("prevStep"), s = this.shadowRoot.getElementById("nextStep"), t = this.shadowRoot.getElementById("interactiveStepper"), i = () => {
+      const a = this.shadowRoot.getElementById("interactiveStatus"), o = this.shadowRoot.getElementById("interactiveContent");
+      if (a && (a.textContent = `Step ${this.activeIndex} of ${d.length}`), t && t.setAttribute("active", String(this.activeIndex)), o) {
+        const p = x[this.activeIndex - 1];
+        o.innerHTML = `
+					<h3>${p.title}</h3>
+					<p>${p.copy}</p>
+					<ul>${p.bullets.map((l) => `<li>${l}</li>`).join("")}</ul>
+				`;
+      }
+    };
+    e == null || e.addEventListener("click", () => {
+      this.activeIndex = Math.max(1, this.activeIndex - 1), i();
+    }), s == null || s.addEventListener("click", () => {
+      this.activeIndex = Math.min(d.length, this.activeIndex + 1), i();
+    }), t == null || t.addEventListener("step-change", (a) => {
+      const o = a.detail;
+      o != null && o.index && (this.activeIndex = o.index, i());
+    }), i();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			${u}
+		`;
+  }
+}
+customElements.define("stepper-demo-page", w);

package/dist/table-demo-x2ZD8cFh.js

@@ -0,0 +1,137 @@
+var u = Object.defineProperty;
+var p = (d, i, e) => i in d ? u(d, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[i] = e;
+var r = (d, i, e) => p(d, typeof i != "symbol" ? i + "" : i, e);
+import { B as b, h as f, q as y, a as k, b as w } from "./index-DiYekJaQ.js";
+const v = `<h1>Table Demo</h1>
+<p class="intro">Example of loading JSON data and rendering a table.</p>
+
+<div class="demo-section">
+	<div class="section-header">
+		<h2>Data Source</h2>
+		<span class="status" id="data-status">Loading...</span>
+	</div>
+	<div class="code-block">
+		<code>fetch('https://dummyjson.com/products')</code>
+	</div>
+</div>
+
+<div class="demo-section">
+	<h2>Table</h2>
+	<div class="action-message" id="action-message" style="display: none;"></div>
+	<ui-table id="demo-table"></ui-table>
+	<div class="meta" id="data-meta"></div>
+	<ui-pagination></ui-pagination>
+</div>
+
+
+<ui-modal id="confirmModal" title="Confirm Delete" size="sm">
+	<p>Are you sure you want to delete this item?</p>
+	<p style="color: #ef4444; font-size: 0.875rem;">This action cannot be undone.</p>
+	<div slot="footer">
+		<ui-button id="confirmCancel" variant="ghost">Cancel</ui-button>
+		<ui-button id="confirmDelete" variant="danger" icon="trash-2">Confirm</ui-button>
+	</div>
+</ui-modal>`, E = ":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";
+class x extends b {
+  constructor() {
+    super(...arguments);
+    r(this, "hasLoaded", !1);
+    r(this, "loading", !1);
+    r(this, "error", null);
+    r(this, "data", null);
+    r(this, "currentPage", 1);
+    r(this, "pageSize", 10);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasLoaded || (this.hasLoaded = !0, this.loadData());
+  }
+  async loadData() {
+    this.loading = !0, this.error = null, this.render();
+    try {
+      const e = (this.currentPage - 1) * this.pageSize, t = await f.get(
+        `https://dummyjson.com/products?limit=${this.pageSize}&skip=${e}`
+      ), s = [
+        { key: "id", label: "ID", align: "right", visible: !1 },
+        { key: "title", label: "Title" },
+        { key: "brand", label: "Brand" },
+        { key: "category", label: "Category" },
+        { key: "price", label: "Price", align: "right" },
+        { key: "rating", label: "Rating", align: "right" },
+        { key: "stock", label: "Stock", align: "right" },
+        {
+          key: "actions",
+          label: "Actions",
+          align: "center",
+          actions: {
+            edit: !0,
+            delete: !0
+          }
+        }
+      ], c = t.products.map((a) => ({
+        id: a.id,
+        title: a.title,
+        brand: a.brand,
+        category: a.category,
+        price: `$${a.price.toFixed(2)}`,
+        rating: a.rating.toFixed(1),
+        stock: a.stock
+      }));
+      this.data = {
+        columns: s,
+        rows: c,
+        meta: {
+          total: t.total,
+          limit: t.limit,
+          skip: t.skip
+        }
+      }, this.loading = !1, this.render();
+    } catch (e) {
+      this.loading = !1, this.error = e instanceof Error ? e.message : "Unknown error", this.render();
+    }
+  }
+  showActionMessage(e) {
+    const t = this.shadowRoot.querySelector("#action-message");
+    t && (t.textContent = e, t.style.display = "block", setTimeout(() => {
+      const s = this.shadowRoot.querySelector("#action-message");
+      s && (s.style.display = "none");
+    }, 5e3));
+  }
+  render() {
+    var g, h;
+    this.shadowRoot.innerHTML = `
+			<style>${E}</style>
+			${v}
+		`;
+    const e = this.shadowRoot.querySelector("#data-status"), t = y(this.shadowRoot, "#confirmModal"), s = this.shadowRoot.getElementById("confirmDelete"), c = this.shadowRoot.getElementById("confirmCancel");
+    c == null || c.addEventListener("click", () => {
+      t == null || t.close();
+    }), e && (e.textContent = this.loading ? "Loading..." : this.error ? "Error" : "Loaded", e.className = `status ${this.loading ? "loading" : this.error ? "error" : "success"}`);
+    const a = k(this.shadowRoot, "#demo-table");
+    a && this.data && (a.data = {
+      columns: this.data.columns,
+      rows: this.data.rows
+    });
+    const n = w(this.shadowRoot, "ui-pagination");
+    if (n && ((g = this.data) != null && g.meta)) {
+      n.total = this.data.meta.total, n.currentPage = this.currentPage, n.pageSize = this.pageSize;
+      const l = n.cloneNode(!0);
+      (h = n.parentNode) == null || h.replaceChild(l, n), l.addEventListener("page-change", (o) => {
+        this.currentPage = o.detail.page, this.loadData();
+      });
+    }
+    const m = this.shadowRoot.querySelector("#demo-table");
+    m && (m.addEventListener("edit-action", (l) => {
+      const { row: o } = l.detail;
+      this.showActionMessage(`EDIT clicked for "${o.id}: ${o.title}"`);
+    }), m.addEventListener("delete-action", (l) => {
+      const { row: o } = l.detail;
+      console.log(`DELETE clicked for "${o.id}: ${o.title}"`), t == null || t.open(), s == null || s.addEventListener("click", () => {
+        t == null || t.close(), this.showActionMessage(`DELETE confirmed for "${o.id}: ${o.title}"`);
+      });
+    }));
+  }
+}
+customElements.define("table-demo", x);
+export {
+  x as TableDemo
+};

package/dist/tabs-demo-BQBtZzw9.js

@@ -0,0 +1,76 @@
+import { B as i } from "./index-DiYekJaQ.js";
+const d = `<h1>Tabs Demo</h1>
+<p class="intro">A simple tabs component with slotted tabs and panels.</p>
+
+<div class="demo-section">
+	<h2>Basic Tabs</h2>
+	<ui-tabs id="basicTabs" active="overview">
+		<button slot="tab" data-tab="overview">Overview</button>
+		<button slot="tab" data-tab="usage">Usage</button>
+		<button slot="tab" data-tab="api">API</button>
+
+		<div slot="panel" data-tab="overview">
+			<p>Use tabs to group related content without navigating away.</p>
+			<ul>
+				<li>Accessible roles and ARIA labels</li>
+				<li>Slotted tabs and panels</li>
+				<li>Simple active state</li>
+			</ul>
+		</div>
+		<div slot="panel" data-tab="usage">
+			<p>Set the active tab by using the <code>active</code> attribute.</p>
+			<pre><code>&lt;ui-tabs active="overview"&gt;...&lt;/ui-tabs&gt;</code></pre>
+		</div>
+		<div slot="panel" data-tab="api">
+			<p>Listen for <code>tab-change</code> events to react to changes.</p>
+		</div>
+	</ui-tabs>
+</div>
+
+<div class="demo-section">
+	<h2>Product Tabs</h2>
+	<ui-tabs id="productTabs">
+		<button slot="tab" data-tab="details">Details</button>
+		<button slot="tab" data-tab="specs">Specs</button>
+		<button slot="tab" data-tab="shipping">Shipping</button>
+
+		<div slot="panel" data-tab="details">
+			<p><strong>Storm Speaker</strong> is built for portable, punchy sound.</p>
+		</div>
+		<div slot="panel" data-tab="specs">
+			<ul>
+				<li>Battery: 18 hours</li>
+				<li>Water resistance: IPX5</li>
+				<li>Bluetooth: 5.3</li>
+			</ul>
+		</div>
+		<div slot="panel" data-tab="shipping">
+			<p>Ships in 1-2 business days. Free returns within 30 days.</p>
+		</div>
+	</ui-tabs>
+	<div class="result" id="tab-result" style="display: none;">
+		Active tab: <span id="tab-value"></span>
+	</div>
+</div>
+`, r = ":host{display:block;padding:2rem;max-width:1100px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.result{margin-top:1rem;padding:.75rem 1rem;border-radius:10px;background:#f1f5f9;color:#1e293b;font-weight:600}pre{background:#0f172a;color:#e2e8f0;padding:.75rem 1rem;border-radius:10px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem}";
+class l extends i {
+  render() {
+    var e;
+    this.shadowRoot.innerHTML = `
+			<style>${r}</style>
+			${d}
+		`;
+    const t = this.shadowRoot.querySelector("#productTabs");
+    if (t) {
+      const a = t.cloneNode(!0);
+      (e = t.parentNode) == null || e.replaceChild(a, t), a.addEventListener("tab-change", (s) => {
+        const n = this.shadowRoot.getElementById("tab-result"), o = this.shadowRoot.getElementById("tab-value");
+        n && o && (n.style.display = "block", o.textContent = s.detail.id);
+      });
+    }
+  }
+}
+customElements.define("tabs-demo", l);
+export {
+  l as TabsDemo
+};