@diniz/webcomponents 1.1.5 → 1.1.7

package/dist/layout-demo-CJsZ6DI5.js

@@ -0,0 +1,289 @@
+import { B as c } from "./index-DiYekJaQ.js";
+const u = `<h1>🎨 Layout Component Demo</h1>
+
+<div class="demo-intro">
+	<p>Create flexible page layouts with header, footer, sidebar, and content areas.</p>
+</div>
+
+<div class="demo-section">
+	<h2>Basic Layout (Header + Content + Footer)</h2>
+	<div class="layout-example">
+		<ui-layout>
+			<ui-layout-header>
+				<div style="font-weight: 600;">Header</div>
+				<div style="font-size: 0.9rem; color: rgba(15, 23, 42, 0.6);">Navigation &amp; Logo</div>
+			</ui-layout-header>
+			<ui-layout-content>
+				<div class="content-placeholder">Content Area</div>
+			</ui-layout-content>
+			<ui-layout-footer>
+				<div style="font-size: 0.9rem;">© 2026 Your Company</div>
+			</ui-layout-footer>
+		</ui-layout>
+	</div>
+</div>
+
+<div class="demo-section">
+	<h2>Layout with Sidebar</h2>
+	<div class="layout-example">
+		<ui-layout direction="horizontal">
+			<ui-layout-sidebar collapsible width="220" collapsed-width="60">
+				<div class="sidebar-section">
+					<div class="sidebar-label">Menu</div>
+					<div class="sidebar-item">Dashboard</div>
+					<div class="sidebar-item">Users</div>
+					<div class="sidebar-item">Settings</div>
+					<div class="sidebar-item">Analytics</div>
+				</div>
+			</ui-layout-sidebar>
+			<ui-layout-content>
+				<div class="content-placeholder">Main Content</div>
+			</ui-layout-content>
+		</ui-layout>
+	</div>
+</div>
+
+<div class="demo-section">
+	<h2>Full Layout (Header + Sidebar + Content + Footer)</h2>
+	<div class="layout-example full-height">
+		<ui-layout direction="vertical">
+			<ui-layout-header height="60">
+				<div style="font-weight: 600; font-size: 1.1rem;">App Header</div>
+				<div style="display: flex; gap: 1rem;">
+					<button style="padding: 0.5rem 1rem; background: var(--color-primary); color: white; border: none; border-radius: 6px; cursor: pointer;">Login</button>
+				</div>
+			</ui-layout-header>
+
+			<ui-layout direction="horizontal" style="flex: 1;">
+				<ui-layout-sidebar collapsible width="200" collapsed-width="60">
+					<div class="sidebar-section">
+						<div class="sidebar-item">📊 Dashboard</div>
+						<div class="sidebar-item">👥 Users</div>
+						<div class="sidebar-item">📝 Projects</div>
+						<div class="sidebar-item">⚙️ Settings</div>
+					</div>
+				</ui-layout-sidebar>
+				<ui-layout-content>
+					<div style="padding: 2rem;">
+						<h3>Welcome to the Dashboard</h3>
+						<p style="color: rgba(15, 23, 42, 0.6);">Try clicking the sidebar toggle button to collapse/expand the sidebar.</p>
+						<div style="margin-top: 2rem; padding: 1.5rem; background: var(--color-muted); border-radius: 8px;">
+							<p style="margin: 0; font-size: 0.95rem;">This is a full-featured layout with header, sidebar, content, and footer.</p>
+						</div>
+					</div>
+				</ui-layout-content>
+			</ui-layout>
+
+			<ui-layout-footer height="50">
+				<div style="font-size: 0.9rem;">© 2026 Dashboard App</div>
+				<div style="font-size: 0.85rem; color: rgba(15, 23, 42, 0.6);">v1.0.0</div>
+			</ui-layout-footer>
+		</ui-layout>
+	</div>
+</div>
+
+<div class="demo-section">
+	<h2>Sidebar Collapse Event</h2>
+	<div class="demo-info">
+		<p>Listen to <code>collapsed-change</code> event to react to sidebar state changes.</p>
+		<div class="event-output" id="eventOutput">Click the sidebar toggle to see events...</div>
+	</div>
+	<div class="layout-example" style="height: 300px;">
+		<ui-layout direction="horizontal">
+			<ui-layout-sidebar id="eventSidebar" collapsible width="220">
+				<div class="sidebar-item">Item 1</div>
+				<div class="sidebar-item">Item 2</div>
+				<div class="sidebar-item">Item 3</div>
+			</ui-layout-sidebar>
+			<ui-layout-content>
+				<div class="content-placeholder">Content</div>
+			</ui-layout-content>
+		</ui-layout>
+	</div>
+</div>
+`, m = `
+  :host {
+    display: block;
+    color: var(--color-ink);
+  }
+
+  h1 {
+    font-size: 2.2rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+    margin: 2rem 0 1rem;
+    font-weight: 600;
+    border-bottom: 2px solid var(--color-primary);
+    padding-bottom: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+    margin: 0 0 0.75rem;
+    font-weight: 600;
+  }
+
+  p {
+    line-height: 1.6;
+    color: rgba(15, 23, 42, 0.75);
+    margin: 0 0 1rem;
+  }
+
+  code {
+    background: var(--color-muted);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-family: "Cascadia Mono", "Fira Code", monospace;
+    font-size: 0.9rem;
+    color: var(--color-primary);
+  }
+
+  .demo-intro {
+    background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border-left: 4px solid var(--color-primary);
+    margin-bottom: 2rem;
+  }
+
+  .demo-section {
+    margin-bottom: 3rem;
+  }
+
+  .layout-example {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    overflow: hidden;
+    height: 400px;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+    margin-top: 1rem;
+  }
+
+  .layout-example.full-height {
+    height: 550px;
+  }
+
+  .content-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg);
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: rgba(15, 23, 42, 0.5);
+  }
+
+  .sidebar-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: rgba(15, 23, 42, 0.5);
+    padding: 0.75rem 1rem 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .sidebar-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.95rem;
+    color: var(--color-ink);
+    user-select: none;
+  }
+
+  .sidebar-item:hover {
+    background: var(--color-muted);
+    color: var(--color-primary);
+  }
+
+  .sidebar-section {
+    padding: 0.5rem 0;
+  }
+
+  .demo-info {
+    background: var(--color-muted);
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+  }
+
+  .event-output {
+    background: #0f172a;
+    color: #f8fafc;
+    padding: 1rem;
+    border-radius: 6px;
+    font-family: "Cascadia Mono", "Fira Code", monospace;
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+    line-height: 1.5;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .event-output.empty {
+    opacity: 0.6;
+  }
+
+  /* Custom scrollbar */
+  .event-output::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .event-output::-webkit-scrollbar-track {
+    background: rgba(248, 250, 252, 0.1);
+    border-radius: 3px;
+  }
+
+  .event-output::-webkit-scrollbar-thumb {
+    background: rgba(248, 250, 252, 0.3);
+    border-radius: 3px;
+  }
+
+  .event-output::-webkit-scrollbar-thumb:hover {
+    background: rgba(248, 250, 252, 0.5);
+  }
+`;
+class p extends c {
+  async connectedCallback() {
+    super.connectedCallback(), await new Promise((t) => requestAnimationFrame(t)), await customElements.whenDefined("ui-layout-sidebar"), await new Promise((t) => setTimeout(t, 50)), this.setupEventListeners();
+  }
+  setupEventListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(
+      "#eventSidebar"
+    );
+    if (t) {
+      const n = (a) => {
+        var i;
+        const r = a, e = this.shadowRoot.querySelector(
+          "#eventOutput"
+        );
+        if (e) {
+          const d = r.detail.collapsed, s = `[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}] Sidebar ${d ? "collapsed" : "expanded"}`, o = ((i = e.textContent) == null ? void 0 : i.split(`
+`).filter((l) => l.trim())) || [];
+          o.length >= 5 && o.shift(), o.push(s), e.textContent = o.join(`
+`), e.classList.remove("empty"), e.scrollTop = e.scrollHeight;
+        }
+      };
+      t.addEventListener("collapsed-change", n);
+    }
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${m}</style>
+			${u}
+		`;
+  }
+}
+customElements.define("layout-demo", p);
+export {
+  p as LayoutDemo
+};

package/dist/modal-demo-page-YN2KgJ31.js

@@ -0,0 +1,195 @@
+import { B as w } from "./index-DiYekJaQ.js";
+const B = `
+	<div class="demo-container">
+		<h1>Modal Component Demo</h1>
+		<p>Interactive modals with various sizes and configurations.</p>
+
+		<div class="demo-section">
+			<h2>Basic Modals</h2>
+			<div class="demo-controls">
+				<ui-button id="openBasicModal" variant="primary" icon="maximize-2">
+					Open Basic Modal
+				</ui-button>
+				<ui-button id="openSmallModal" variant="secondary">
+					Small Modal
+				</ui-button>
+				<ui-button id="openLargeModal" variant="secondary">
+					Large Modal
+				</ui-button>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Modal Behaviors</h2>
+			<div class="demo-controls">
+				<ui-button id="openNoEscapeModal" variant="ghost">
+					No Close on Escape
+				</ui-button>
+				<ui-button id="openNoBackdropModal" variant="ghost">
+					No Close on Backdrop
+				</ui-button>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Confirmation Modal</h2>
+			<div class="demo-controls">
+				<ui-button id="openConfirmModal" variant="primary" icon="alert-circle">
+					Delete Item
+				</ui-button>
+			</div>
+			<div id="confirmResult" class="result-display" style="display: none;">
+				<strong>Result:</strong> <span id="confirmText"></span>
+			</div>
+		</div>
+
+		<!-- Modals -->
+		<ui-modal id="basicModal" title="Welcome!" size="md">
+			<p>This is a basic modal with a title and content.</p>
+			<p>You can close it by:</p>
+			<ul>
+				<li>Clicking the X button</li>
+				<li>Pressing the Escape key</li>
+				<li>Clicking outside the modal</li>
+			</ul>
+			<div slot="footer">
+				<ui-button id="basicModalClose" variant="secondary">Close</ui-button>
+				<ui-button id="basicModalOk" variant="primary">Got it!</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="smallModal" title="Small Modal" size="sm">
+			<p>This is a small modal perfect for quick messages or confirmations.</p>
+			<div slot="footer">
+				<ui-button id="smallModalClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="largeModal" title="Large Modal" size="lg">
+			<p>This is a large modal that can contain more content.</p>
+			<div style="height: 400px; background: #f1f5f9; border-radius: 8px; padding: 1rem; margin: 1rem 0;">
+				<p><strong>Scrollable Content Area</strong></p>
+				<p>When content exceeds the modal height, it automatically becomes scrollable.</p>
+				${Array(20).fill("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>").join("")}
+			</div>
+			<div slot="footer">
+				<ui-button id="largeModalClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="noEscapeModal" title="No Escape Close" size="md" no-close-on-escape>
+			<p>This modal cannot be closed by pressing the Escape key.</p>
+			<p>You must click the close button or click outside.</p>
+			<div slot="footer">
+				<ui-button id="noEscapeClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="noBackdropModal" title="No Backdrop Close" size="md" no-close-on-backdrop>
+			<p>This modal cannot be closed by clicking the backdrop.</p>
+			<p>You must use the close button or press Escape.</p>
+			<div slot="footer">
+				<ui-button id="noBackdropClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<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="primary" icon="trash-2">Delete</ui-button>
+			</div>
+		</ui-modal>
+	</div>
+`, C = `
+	.demo-container {
+		padding: 2rem;
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.demo-container h1 {
+		font-size: 2rem;
+		margin-bottom: 0.5rem;
+		color: var(--color-ink);
+	}
+
+	.demo-container > p {
+		color: var(--color-text-muted);
+		margin-bottom: 2rem;
+	}
+
+	.demo-section {
+		margin-bottom: 3rem;
+		padding-bottom: 2rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.demo-section:last-child {
+		border-bottom: none;
+	}
+
+	.demo-section h2 {
+		font-size: 1.5rem;
+		margin-bottom: 1rem;
+		color: var(--color-ink);
+	}
+
+	.demo-controls {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+		margin-top: 1rem;
+	}
+
+	.result-display {
+		margin-top: 1rem;
+		padding: 1rem;
+		background: var(--color-muted);
+		border-radius: var(--radius-md);
+		border-left: 4px solid var(--color-primary);
+	}
+
+	ul {
+		margin: 1rem 0;
+		padding-left: 1.5rem;
+	}
+
+	li {
+		margin: 0.5rem 0;
+	}
+`;
+class R extends w {
+  async connectedCallback() {
+    super.connectedCallback(), await Promise.all([
+      customElements.whenDefined("ui-modal"),
+      customElements.whenDefined("ui-button")
+    ]), await new Promise((a) => setTimeout(a, 10)), this.setupEventListeners();
+  }
+  setupEventListeners() {
+    const a = this.shadowRoot.getElementById("openBasicModal"), o = this.shadowRoot.getElementById("basicModal"), r = this.shadowRoot.getElementById("basicModalClose"), c = this.shadowRoot.getElementById("basicModalOk");
+    a == null || a.addEventListener("click", () => o == null ? void 0 : o.open()), r == null || r.addEventListener("click", () => o == null ? void 0 : o.close()), c == null || c.addEventListener("click", () => o == null ? void 0 : o.close());
+    const m = this.shadowRoot.getElementById("openSmallModal"), e = this.shadowRoot.getElementById("smallModal"), u = this.shadowRoot.getElementById("smallModalClose");
+    m == null || m.addEventListener("click", () => e == null ? void 0 : e.open()), u == null || u.addEventListener("click", () => e == null ? void 0 : e.close());
+    const p = this.shadowRoot.getElementById("openLargeModal"), i = this.shadowRoot.getElementById("largeModal"), h = this.shadowRoot.getElementById("largeModalClose");
+    p == null || p.addEventListener("click", () => i == null ? void 0 : i.open()), h == null || h.addEventListener("click", () => i == null ? void 0 : i.close());
+    const v = this.shadowRoot.getElementById("openNoEscapeModal"), n = this.shadowRoot.getElementById("noEscapeModal"), g = this.shadowRoot.getElementById("noEscapeClose");
+    v == null || v.addEventListener("click", () => n == null ? void 0 : n.open()), g == null || g.addEventListener("click", () => n == null ? void 0 : n.close());
+    const b = this.shadowRoot.getElementById("openNoBackdropModal"), s = this.shadowRoot.getElementById("noBackdropModal"), y = this.shadowRoot.getElementById("noBackdropClose");
+    b == null || b.addEventListener("click", () => s == null ? void 0 : s.open()), y == null || y.addEventListener("click", () => s == null ? void 0 : s.close());
+    const E = this.shadowRoot.getElementById("openConfirmModal"), t = this.shadowRoot.getElementById("confirmModal"), f = this.shadowRoot.getElementById("confirmCancel"), k = this.shadowRoot.getElementById("confirmDelete"), l = this.shadowRoot.getElementById("confirmResult"), d = this.shadowRoot.getElementById("confirmText");
+    E == null || E.addEventListener("click", () => t == null ? void 0 : t.open()), f == null || f.addEventListener("click", () => {
+      t == null || t.close(), l && d && (l.style.display = "block", d.textContent = "Cancelled", d.style.color = "#64748b");
+    }), k == null || k.addEventListener("click", () => {
+      t == null || t.close(), l && d && (l.style.display = "block", d.textContent = "Item deleted!", d.style.color = "#ef4444");
+    });
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${C}</style>
+			${B}
+		`;
+  }
+}
+customElements.define("modal-demo-page", R);