@diniz/webcomponents 1.1.5 → 1.1.7

package/dist/index-DiYekJaQ.js

@@ -0,0 +1,2424 @@
+var C = Object.defineProperty;
+var E = (l, s, t) => s in l ? C(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
+var p = (l, s, t) => E(l, typeof s != "symbol" ? s + "" : s, t);
+import y from "feather-icons";
+function w(l) {
+  let s = l;
+  const t = /* @__PURE__ */ new Set();
+  return {
+    get: () => s,
+    set: (e) => {
+      Object.is(s, e) || (s = e, t.forEach((a) => a(s)));
+    },
+    subscribe: (e) => (t.add(e), () => t.delete(e))
+  };
+}
+class g extends HTMLElement {
+  constructor() {
+    super();
+    p(this, "state");
+    p(this, "signalUnsubs");
+    this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
+  }
+  useSignal(t) {
+    const e = w(t), a = e.subscribe(() => this.render());
+    return this.signalUnsubs.add(a), e;
+  }
+  /**
+   * Create a signal bound to a specific HTML element
+   * Automatically updates the element's textContent when the signal value changes
+   * @param elementId - The ID of the HTML element to bind to
+   * @param initial - The initial value
+   * @returns A signal that auto-updates the element
+   * 
+   * @example
+   * ```typescript
+   * private count = this.useSignalHtml('countValue', 0);
+   * 
+   * private increment() {
+   *   this.count.set(this.count.get() + 1);
+   *   // Element with id="countValue" automatically updates
+   * }
+   * ```
+   */
+  useSignalHtml(t, e) {
+    const a = w(e), i = a.subscribe((r) => {
+      var n;
+      const o = (n = this.shadowRoot) == null ? void 0 : n.getElementById(t);
+      o && (o.textContent = String(r));
+    });
+    return this.signalUnsubs.add(i), requestAnimationFrame(() => {
+      var o;
+      const r = (o = this.shadowRoot) == null ? void 0 : o.getElementById(t);
+      r && (r.textContent = String(e));
+    }), a;
+  }
+  setState(t) {
+    this.state = { ...this.state, ...t }, this.render();
+  }
+  connectedCallback() {
+    this.render();
+  }
+  disconnectedCallback() {
+    this.signalUnsubs.forEach((t) => t()), this.signalUnsubs.clear();
+  }
+  render() {
+  }
+}
+const f = ':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #34a8eb;--color-border: #f3f5f7;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="upload"]){display:block;width:100%}.upload{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.9rem;font-weight:700;color:var(--color-ink)}.upload-drop{border:1.5px dashed rgba(36,236,113,.55);border-radius:16px;background:linear-gradient(135deg,#24ec7114,#34a8eb14);padding:1.25rem 1.5rem;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.upload-drop.dragging{border-color:var(--color-primary);box-shadow:0 16px 30px #24ec712e;transform:translateY(-2px)}.upload-drop.disabled{opacity:.6;cursor:not-allowed}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-content{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.upload-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;box-shadow:0 12px 20px #0f172a2e}.upload-icon svg{width:20px;height:20px}.upload-title{font-weight:700;color:var(--color-ink)}.upload-sub{font-size:.85rem;color:var(--color-text-muted, #64748b);margin-top:.2rem}.upload-btn{border:none;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;background:#0f172a;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 16px #0f172a2e}.upload-btn:disabled{cursor:not-allowed;opacity:.5}.upload-helper{font-size:.85rem;color:var(--color-text-muted, #64748b)}.upload-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.upload-list li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:12px;background:#fff;border:1px solid rgba(148,163,184,.35);font-size:.9rem;color:var(--color-ink)}.upload-meta{font-size:.78rem;color:var(--color-text-muted, #64748b)}.upload-remove{border:none;background:#ef44441a;color:#b91c1c;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer}.upload-remove:hover{background:#ef444433}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="stepper"]){display:block}.stepper-wrap{width:100%}.stepper-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted, #64748b);text-align:center;font-size:.9rem}.stepper{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.25rem}.stepper.vertical{flex-direction:column;gap:1rem}.step{display:flex;align-items:center;position:relative}.stepper.vertical .step{flex-direction:column;align-items:flex-start}.step-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--color-ink)}.step-trigger:disabled{cursor:not-allowed;opacity:.5}.step-node{width:2.1rem;height:2.1rem;border-radius:12px;background:var(--color-muted);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--color-ink);box-shadow:inset 0 0 0 1px #fff9}.step-text{display:flex;flex-direction:column;gap:.2rem}.step-title{font-weight:700;letter-spacing:.2px;font-size:.98rem}.step-desc{font-size:.85rem;color:var(--color-text-muted, #64748b)}.step-connector{width:48px;height:2px;margin:0 .65rem;background:linear-gradient(90deg,var(--color-border),rgba(255,255,255,0));flex-shrink:0}.stepper.vertical .step-connector{width:2px;height:28px;margin:.65rem 0 .25rem 1.05rem;background:linear-gradient(180deg,var(--color-border),rgba(255,255,255,0))}.step.complete .step-node{background:linear-gradient(135deg,#24ec71,#34a8eb);color:#0f172a;border-color:transparent;box-shadow:0 8px 18px #24ec7140}.step.complete .step-connector{background:linear-gradient(90deg,#24ec71,#34a8eb)}.stepper.vertical .step.complete .step-connector{background:linear-gradient(180deg,#24ec71,#34a8eb)}.step.active .step-node{background:#fff;color:var(--color-ink);border-color:var(--color-primary);box-shadow:0 0 0 4px #24ec712e,0 12px 20px #24ec7138;animation:stepGlow 1.6s ease-in-out infinite}.step.active .step-title{color:var(--color-ink)}.step.upcoming .step-title{color:var(--color-ink);opacity:.7}.step.error .step-node{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 8px 16px #ef444433}.step.warning .step-node{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 8px 16px #f59e0b33}.stepper.sm .step-node{width:1.65rem;height:1.65rem;font-size:.75rem;border-radius:10px}.stepper.sm .step-title{font-size:.9rem}.stepper.sm .step-desc{font-size:.78rem}.stepper.lg .step-node{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:14px}.stepper.lg .step-title{font-size:1.1rem}.stepper.lg .step-desc{font-size:.92rem}@keyframes stepGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}:host([data-ui="date-picker"]){display:block;width:100%}.date-picker-label{display:block;font-size:.9rem;font-weight:500;color:var(--color-ink);margin-bottom:.5rem}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;pointer-events:none;cursor:pointer}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}:host([data-ui="layout"]){display:block;width:100%;height:100%}.layout-container{display:flex;width:100%;height:100%;background:var(--color-bg);position:relative}:host([data-ui="layout-header"]){display:block;width:100%;flex-shrink:0}.layout-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 1px 3px #0f172a0f}:host([data-ui="layout-footer"]){display:block;width:100%;flex-shrink:0}.layout-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -1px 3px #0f172a0f}:host([data-ui="layout-content"]){display:block;flex:1;overflow:auto;min-width:0}.layout-content{display:flex;flex-direction:column;width:100%;height:100%;position:relative}:host([data-ui="layout-sidebar"]){display:block;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);position:relative;overflow:hidden;height:100%}.layout-sidebar{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);height:100%;background:var(--color-surface);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;border-right:1px solid var(--color-border);overflow:hidden}.layout-sidebar.collapsed{width:var(--sidebar-collapsed-width, 64px)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 0}.sidebar-toggle{position:absolute;bottom:1rem;right:0;width:40px;height:40px;padding:0;margin-right:.7rem;background:transparent;border:1px solid var(--color-border);border-radius:8px;color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.sidebar-toggle:hover{background:var(--color-muted);border-color:var(--color-border-strong)}.sidebar-toggle:active{transform:scale(.95)}.toggle-icon{width:18px;height:18px;transition:transform .3s ease}.layout-sidebar.collapsed .toggle-icon{transform:rotate(180deg)}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--color-ink);opacity:.6}@media (max-width: 768px){.layout-header,.layout-footer{padding:0 1rem}.layout-sidebar{position:absolute;left:0;top:0;height:100%;z-index:1000;box-shadow:2px 0 8px #0f172a26;transition:transform .3s cubic-bezier(.4,0,.2,1)}.layout-sidebar.collapsed{transform:translate(calc(-1 * var(--sidebar-width, 240px)))}}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';
+class S extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "button"), super.connectedCallback(), this.attachClickHandler();
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "type", "icon", "icon-position"];
+  }
+  attributeChangedCallback() {
+    this.render(), this.attachClickHandler();
+  }
+  attachClickHandler() {
+    if (!this.shadowRoot) return;
+    const s = this.shadowRoot.querySelector("button");
+    if (!s) return;
+    const t = s._clickHandler;
+    t && s.removeEventListener("click", t);
+    const e = (a) => {
+      const i = this.getType();
+      if (this.hasAttribute("disabled")) {
+        a.preventDefault(), a.stopPropagation();
+        return;
+      }
+      if (i === "submit") {
+        a.preventDefault(), a.stopPropagation();
+        let o = this.closest("form");
+        if (!o) {
+          let n = this.parentElement;
+          for (; n; ) {
+            if (n.tagName === "FORM") {
+              o = n;
+              break;
+            }
+            n = n.parentElement;
+          }
+        }
+        if (o) {
+          const n = new Event("submit", {
+            bubbles: !0,
+            cancelable: !0
+          });
+          o.dispatchEvent(n);
+        }
+      }
+    };
+    s._clickHandler = e, s.addEventListener("click", e);
+  }
+  getVariant() {
+    const s = this.getAttribute("variant");
+    return s === "secondary" || s === "ghost" || s === "danger" ? s : "primary";
+  }
+  getSize() {
+    const s = this.getAttribute("size");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  getType() {
+    return this.getAttribute("type") ?? "button";
+  }
+  getIcon() {
+    var a;
+    const s = this.getAttribute("icon");
+    if (!s) return null;
+    const t = s.trim();
+    return { html: `<span class="btn-icon">${((a = y.icons[t]) == null ? void 0 : a.toSvg()) || ""}</span>`, name: t };
+  }
+  getIconPosition() {
+    return this.getAttribute("icon-position") === "right" ? "right" : "left";
+  }
+  render() {
+    const s = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), a = this.getType(), i = this.getIcon(), r = this.getIconPosition(), o = i !== null, n = i ? i.html : "", d = this.innerHTML.trim(), c = o && !d;
+    let h;
+    o && d ? h = r === "left" ? `${n}<span>${d}</span>` : `<span>${d}</span>${n}` : o ? h = n : h = d, this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<button
+				part="button"
+				class="btn ${s} ${t}${o ? " has-icon" : ""}${c ? " icon-only" : ""}"
+				type="${a}"
+				${e ? "disabled" : ""}
+			>
+				${h}
+		</button>
+	`;
+  }
+}
+customElements.define("ui-button", S);
+class L extends g {
+  constructor() {
+    super();
+    p(this, "inputEl", null);
+    p(this, "customValidator", null);
+    p(this, "validationRule", null);
+    this.state = {
+      value: "",
+      valid: !0,
+      touched: !1,
+      error: ""
+    };
+  }
+  static get observedAttributes() {
+    return ["type", "label", "placeholder", "required", "pattern", "minlength", "maxlength", "min", "max", "error-message", "custom-error", "disabled", "name", "validate"];
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "input"), super.connectedCallback();
+  }
+  attributeChangedCallback(t, e, a) {
+    e !== a && t !== "value" && this.render();
+  }
+  setCustomValidator(t) {
+    this.customValidator = t, this.validate();
+  }
+  get value() {
+    return this.state.value;
+  }
+  set value(t) {
+    this.state.value = t, this.inputEl && this.inputEl.value !== t && (this.inputEl.value = t), this.validate();
+  }
+  get isValid() {
+    return this.state.valid;
+  }
+  checkValidity() {
+    return this.state.touched = !0, this.validate();
+  }
+  reportValidity() {
+    this.state.touched = !0;
+    const t = this.validate();
+    return this.updateErrorDisplay(), !t && this.inputEl && this.inputEl.focus(), t;
+  }
+  getType() {
+    const t = this.getAttribute("type");
+    return ["text", "email", "password", "number", "tel", "url"].includes(t || "") ? t : "text";
+  }
+  getLabel() {
+    return this.getAttribute("label") || "";
+  }
+  getPlaceholder() {
+    return this.getAttribute("placeholder") || "";
+  }
+  getName() {
+    return this.getAttribute("name") || "";
+  }
+  getErrorMessage() {
+    return this.state.error ? this.state.error : this.getAttribute("error-message") || this.getAttribute("custom-error") || "";
+  }
+  getCustomError() {
+    return this.getAttribute("custom-error") || "";
+  }
+  parseValidationRule(t) {
+    return t.startsWith("email:") ? { type: "emailDomain", domain: t.slice(6) } : t.startsWith("match:") ? { type: "match", selector: t.slice(6) } : t.startsWith("min:") ? { type: "minLength", length: parseInt(t.slice(4), 10) } : t.startsWith("max:") ? { type: "maxLength", length: parseInt(t.slice(4), 10) } : t.startsWith("regex:") ? { type: "regex", pattern: t.slice(6) } : null;
+  }
+  applyValidationRule(t) {
+    const e = this.state.value;
+    switch (t.type) {
+      case "emailDomain":
+        if (!e.endsWith(`@${t.domain}`))
+          return { valid: !1, message: `Must end with @${t.domain}` };
+        break;
+      case "match":
+        const a = document.querySelector(t.selector);
+        if (a && e !== a.value)
+          return { valid: !1, message: "Values do not match" };
+        break;
+      case "minLength":
+        if (e.length < t.length)
+          return { valid: !1, message: `Must be at least ${t.length} characters` };
+        break;
+      case "maxLength":
+        if (e.length > t.length)
+          return { valid: !1, message: `Must be no more than ${t.length} characters` };
+        break;
+      case "regex":
+        try {
+          if (!new RegExp(t.pattern).test(e))
+            return { valid: !1, message: "Invalid format" };
+        } catch {
+          return { valid: !1, message: "Invalid validation pattern" };
+        }
+        break;
+    }
+    return { valid: !0 };
+  }
+  validate() {
+    if (!this.inputEl) return !0;
+    const t = this.getAttribute("validate");
+    if (t && (this.validationRule || (this.validationRule = this.parseValidationRule(t)), this.validationRule)) {
+      const e = this.applyValidationRule(this.validationRule);
+      return this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message), this.state.valid;
+    }
+    if (this.customValidator) {
+      const e = this.customValidator(this.state.value, this.inputEl);
+      this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message);
+    } else {
+      const e = this.inputEl.checkValidity();
+      this.state.valid = e, !e && this.state.touched && (this.state.error = this.inputEl.validationMessage || this.getErrorMessage()), e && (this.state.error = "");
+    }
+    return this.state.valid;
+  }
+  handleInput(t) {
+    const e = t.target;
+    this.state.value = e.value, this.state.touched = !0, this.validate(), this.updateErrorDisplay();
+  }
+  handleBlur() {
+    this.state.touched = !0, this.validate(), this.updateErrorDisplay();
+  }
+  updateErrorDisplay() {
+    if (!this.inputEl) return;
+    const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), a = this.getName();
+    e && e.classList.toggle("invalid", !this.state.valid && this.state.touched), t && (!this.state.valid && this.state.touched && this.state.error ? (t.textContent = this.state.error, t.classList.remove("hidden")) : t.classList.add("hidden")), this.inputEl.setAttribute("aria-invalid", String(!this.state.valid && this.state.touched)), a && this.inputEl.setAttribute("aria-describedby", `${a}-error`);
+  }
+  needsRender() {
+    return this.hasAttribute("type") || this.hasAttribute("label") || this.hasAttribute("placeholder") || this.hasAttribute("required") || this.hasAttribute("pattern") || this.hasAttribute("disabled") || this.hasAttribute("name") || this.hasAttribute("minlength") || this.hasAttribute("maxlength") || this.hasAttribute("min") || this.hasAttribute("max") || this.hasAttribute("error-message") || this.hasAttribute("custom-error") || this.hasAttribute("validate");
+  }
+  render() {
+    const t = this.getType(), e = this.getLabel(), a = this.getPlaceholder(), i = this.getName(), r = this.getErrorMessage(), o = this.hasAttribute("required"), n = this.getAttribute("pattern"), d = this.getAttribute("minlength"), c = this.getAttribute("maxlength"), h = this.getAttribute("min"), u = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
+				${v ? `<label class="input-label">${e}${o ? " *" : ""}</label>` : ""}
+				<input
+					part="input"
+					class="input-field"
+					type="${t}"
+					placeholder="${a}"
+					name="${i}"
+					.value="${this.state.value}"
+					${o ? "required" : ""}
+					${n ? `pattern="${n}"` : ""}
+					${d ? `minlength="${d}"` : ""}
+					${c ? `maxlength="${c}"` : ""}
+					${h ? `min="${h}"` : ""}
+					${u ? `max="${u}"` : ""}
+					${b ? "disabled" : ""}
+					aria-invalid="${m}"
+					aria-describedby="${i}-error"
+				/>
+				<span class="input-error${m && r ? "" : " hidden"}" id="${i}-error" role="alert">${r}</span>
+			</div>
+		`, this.inputEl = this.shadowRoot.querySelector(".input-field"), this.inputEl && (this.inputEl.addEventListener("input", this.handleInput.bind(this)), this.inputEl.addEventListener("blur", this.handleBlur.bind(this)));
+  }
+}
+customElements.define("ui-input", L);
+class z extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "columns", []);
+    p(this, "rows", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "table"), super.connectedCallback();
+  }
+  set data(t) {
+    this.columns = t.columns, this.rows = t.rows, this.render();
+  }
+  get data() {
+    return { columns: this.columns, rows: this.rows };
+  }
+  render() {
+    const t = this.columns.filter((i) => i.visible !== !1), e = t.map(
+      (i) => `<th class="align-${i.align ?? "left"}">${i.label}</th>`
+    ).join(""), a = this.rows.map(
+      (i, r) => `<tr data-row-index="${r}">${t.map(
+        (o) => o.actions ? `<td class="align-center actions-cell">
+										${o.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${r}">Edit</ui-button>` : ""}
+										${o.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${r}">Delete</ui-button>` : ""}
+									</td>` : `<td class="align-${o.align ?? "left"}">${String(
+          i[o.key] ?? ""
+        )}</td>`
+      ).join("")}</tr>`
+    ).join("");
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="table-wrap">
+				<table>
+					<thead><tr>${e}</tr></thead>
+					<tbody>${a}</tbody>
+				</table>
+			</div>
+		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((i) => {
+      i.addEventListener("click", (r) => {
+        const o = r.currentTarget, n = o.dataset.action, d = parseInt(o.dataset.rowIndex || "0", 10), c = n === "edit" ? "edit-action" : "delete-action";
+        this.dispatchEvent(new CustomEvent(c, {
+          bubbles: !0,
+          composed: !0,
+          detail: { row: this.rows[d], rowIndex: d }
+        }));
+      });
+    });
+  }
+}
+customElements.define("ui-table", z);
+class I extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "inputElement", null);
+    p(this, "isConnected", !1);
+    p(this, "isInternalUpdate", !1);
+    p(this, "hasRendered", !1);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
+  }
+  static get observedAttributes() {
+    return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
+  }
+  attributeChangedCallback(t, e, a) {
+    if (!(!this.isConnected || e === a)) {
+      if (this.isInternalUpdate && t === "value") {
+        this.isInternalUpdate = !1;
+        return;
+      }
+      t === "value" ? this.updateInputValues() : this.render();
+    }
+  }
+  updateInputValues() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
+    if (t && e) {
+      const a = this.getValue(), i = this.getFormat(), r = this.formatDate(a, i);
+      t.value = r, e.value = a;
+    }
+  }
+  getFormat() {
+    const t = this.getAttribute("format");
+    return t === "DD/MM/YYYY" || t === "MM/DD/YYYY" || t === "DD-MM-YYYY" || t === "MM-DD-YYYY" ? t : "YYYY-MM-DD";
+  }
+  getValue() {
+    return this.getAttribute("value") || "";
+  }
+  getMin() {
+    return this.getAttribute("min") || "";
+  }
+  getMax() {
+    return this.getAttribute("max") || "";
+  }
+  getPlaceholder() {
+    return this.getAttribute("placeholder") || this.getFormat();
+  }
+  getLabel() {
+    return this.getAttribute("label") || "";
+  }
+  isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Convert date from ISO format (YYYY-MM-DD) to specified format
+   */
+  formatDate(t, e) {
+    if (!t) return "";
+    const a = t.split("-");
+    if (a.length !== 3) return t;
+    const [i, r, o] = a;
+    switch (e) {
+      case "DD/MM/YYYY":
+        return `${o}/${r}/${i}`;
+      case "MM/DD/YYYY":
+        return `${r}/${o}/${i}`;
+      case "DD-MM-YYYY":
+        return `${o}-${r}-${i}`;
+      case "MM-DD-YYYY":
+        return `${r}-${o}-${i}`;
+      case "YYYY-MM-DD":
+      default:
+        return t;
+    }
+  }
+  /**
+   * Convert date from specified format to ISO format (YYYY-MM-DD)
+   */
+  parseDate(t, e) {
+    if (!t) return "";
+    let a, i, r, o;
+    switch (e) {
+      case "DD/MM/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [o, r, i] = a;
+        break;
+      case "MM/DD/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [r, o, i] = a;
+        break;
+      case "DD-MM-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [o, r, i] = a;
+        break;
+      case "MM-DD-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [r, o, i] = a;
+        break;
+      case "YYYY-MM-DD":
+      default:
+        return t;
+    }
+    return r = r.padStart(2, "0"), o = o.padStart(2, "0"), `${i}-${r}-${o}`;
+  }
+  attachEventListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), a = this.shadowRoot.querySelector(".calendar-btn");
+    if (!t || !e) return;
+    const i = () => {
+      const r = t.value, o = this.getFormat(), n = this.parseDate(r, o);
+      this.isValidDate(n) ? (e.value = n, t.classList.remove("invalid"), this.dispatchDateChange(n)) : r === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
+    };
+    t.addEventListener("blur", i), t.addEventListener("keydown", (r) => {
+      r.key === "Enter" && (i(), t.blur());
+    }), e.addEventListener("change", (r) => {
+      const n = r.target.value, d = this.getFormat(), c = this.formatDate(n, d);
+      t.value = c, t.classList.remove("invalid"), this.dispatchDateChange(n);
+    }), a && a.addEventListener("click", async (r) => {
+      r.preventDefault(), r.stopPropagation(), e.style.pointerEvents = "auto";
+      try {
+        typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
+      } catch (o) {
+        console.log("Date picker error:", o), e.focus(), e.click();
+      } finally {
+        setTimeout(() => {
+          e.style.pointerEvents = "none";
+        }, 100);
+      }
+    });
+  }
+  isValidDate(t) {
+    if (!t) return !1;
+    const e = new Date(t);
+    return e instanceof Date && !isNaN(e.getTime());
+  }
+  dispatchDateChange(t) {
+    const e = this.getFormat(), a = this.formatDate(t, e);
+    this.dispatchEvent(
+      new CustomEvent("date-change", {
+        detail: {
+          value: t,
+          formattedValue: a,
+          format: e
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.isInternalUpdate = !0, this.setAttribute("value", t);
+  }
+  /**
+   * Get the current value in ISO format (YYYY-MM-DD)
+   */
+  getISOValue() {
+    return this.getValue();
+  }
+  /**
+   * Get the current value in the specified format
+   */
+  getFormattedValue() {
+    const t = this.getValue(), e = this.getFormat();
+    return this.formatDate(t, e);
+  }
+  /**
+   * Set the date value (accepts ISO format)
+   */
+  setValue(t) {
+    this.setAttribute("value", t);
+  }
+  /**
+   * Clear the date value
+   */
+  clear() {
+    this.setAttribute("value", "");
+  }
+  render() {
+    const t = this.getValue(), e = this.getFormat(), a = this.getMin(), i = this.getMax(), r = this.isDisabled(), o = this.getPlaceholder(), n = this.getLabel(), d = this.formatDate(t, e), c = n !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="date-picker-container">
+				${c ? `<label class="date-picker-label">${n}</label>` : ""}
+				<div class="date-input-wrapper ${r ? "disabled" : ""}">
+					<input
+						type="text"
+						class="formatted-input"
+						part="input"
+						value="${d}"
+						placeholder="${o}"
+						${r ? "disabled" : ""}
+					/>
+					<button 
+						class="calendar-btn" 
+						type="button"
+						${r ? "disabled" : ""}
+						title="Open calendar"
+					>
+						<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+						</svg>
+					</button>
+					<input
+						type="date"
+						class="hidden-date-input"
+						value="${t}"
+						${a ? `min="${a}"` : ""}
+						${i ? `max="${i}"` : ""}
+						${r ? "disabled" : ""}
+					/>
+				</div>
+				<div class="format-label">Format: ${e}</div>
+			</div>
+		`, this.attachEventListeners(), this.hasRendered = !0;
+  }
+}
+customElements.define("ui-date-picker", I);
+class T extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "_total", 0);
+    p(this, "_currentPage", 1);
+    p(this, "_pageSize", 10);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "pagination"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["total", "current-page", "page-size"];
+  }
+  attributeChangedCallback(t, e, a) {
+    switch (t) {
+      case "total":
+        this._total = parseInt(a, 10) || 0;
+        break;
+      case "current-page":
+        this._currentPage = parseInt(a, 10) || 1;
+        break;
+      case "page-size":
+        this._pageSize = parseInt(a, 10) || 10;
+        break;
+    }
+    this.render();
+  }
+  get total() {
+    return this._total;
+  }
+  set total(t) {
+    this._total = t, this.setAttribute("total", String(t));
+  }
+  get currentPage() {
+    return this._currentPage;
+  }
+  set currentPage(t) {
+    this._currentPage = t, this.setAttribute("current-page", String(t));
+  }
+  get pageSize() {
+    return this._pageSize;
+  }
+  set pageSize(t) {
+    this._pageSize = t, this.setAttribute("page-size", String(t));
+  }
+  get totalPages() {
+    return Math.ceil(this._total / this._pageSize);
+  }
+  handlePageChange(t) {
+    t < 1 || t > this.totalPages || t === this._currentPage || (this.currentPage = t, this.dispatchEvent(
+      new CustomEvent("page-change", {
+        detail: {
+          page: t,
+          pageSize: this._pageSize,
+          total: this._total,
+          totalPages: this.totalPages
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  getPageNumbers() {
+    const t = this.totalPages, e = this._currentPage;
+    if (t <= 7)
+      return Array.from({ length: t }, (i, r) => r + 1);
+    const a = [];
+    return e <= 3 ? a.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? a.push(1, "...", t - 3, t - 2, t - 1, t) : a.push(1, "...", e - 1, e, e + 1, "...", t), a;
+  }
+  render() {
+    const t = this.totalPages, e = this._currentPage, a = this.getPageNumbers(), i = (e - 1) * this._pageSize + 1, r = Math.min(e * this._pageSize, this._total);
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="pagination-container">
+				<div class="pagination-info">
+					${this._total > 0 ? `Showing ${i} to ${r} of ${this._total}` : "No results"}
+				</div>
+				${t > 1 ? `
+				<nav class="pagination" role="navigation" aria-label="Pagination">
+					<button 
+						class="page-btn nav-btn" 
+						${e === 1 ? "disabled" : ""}
+						data-page="prev"
+						aria-label="Previous page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+						</svg>
+					</button>
+					${a.map((o) => o === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
+							<button 
+								class="page-btn ${o === e ? "active" : ""}"
+								data-page="${o}"
+								aria-label="Page ${o}"
+								${o === e ? 'aria-current="page"' : ""}
+							>
+								${o}
+							</button>
+						`).join("")}
+					<button 
+						class="page-btn nav-btn" 
+						${e === t ? "disabled" : ""}
+						data-page="next"
+						aria-label="Next page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+						</svg>
+					</button>
+				</nav>
+				` : ""}
+			</div>
+		`, this.attachEventListeners();
+  }
+  attachEventListeners() {
+    this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
+      const a = t.target.closest(".page-btn");
+      if (!a || a.disabled) return;
+      const i = a.dataset.page;
+      if (i === "prev")
+        this.handlePageChange(this._currentPage - 1);
+      else if (i === "next")
+        this.handlePageChange(this._currentPage + 1);
+      else if (i) {
+        const r = parseInt(i, 10);
+        isNaN(r) || this.handlePageChange(r);
+      }
+    });
+  }
+}
+customElements.define("ui-pagination", T);
+class M extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "isOpen", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "modal"), super.connectedCallback(), this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "open" && e !== a && this.isOpen.set(a !== null);
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", (t) => {
+      t.key === "Escape" && this.isOpen.get() && !this.hasAttribute("no-close-on-escape") && this.close();
+    });
+  }
+  open() {
+    this.isOpen.set(!0), this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("modal-open", { bubbles: !0, composed: !0 })), document.body.style.overflow = "hidden";
+  }
+  close() {
+    this.isOpen.set(!1), this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("modal-close", { bubbles: !0, composed: !0 })), document.body.style.overflow = "";
+  }
+  handleBackdropClick(t) {
+    t.target.classList.contains("modal-backdrop") && !this.hasAttribute("no-close-on-backdrop") && this.close();
+  }
+  render() {
+    const t = this.isOpen.get(), e = this.getAttribute("title") || "", a = this.getAttribute("size") || "md";
+    this.shadowRoot.innerHTML = `
+			<style>
+				${f}
+				
+				::slotted([slot="footer"]) {
+					display: flex;
+					gap: 0.75rem;
+					width: 100%;
+					justify-content: flex-end;
+				}
+			</style>
+
+			<div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
+				<div class="modal-content ${a}" part="content" @click="${(o) => o.stopPropagation()}">
+					${e ? `
+						<div class="modal-header" part="header">
+							<h2 class="modal-title">${e}</h2>
+							<button class="modal-close" part="close" aria-label="Close modal">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						</div>
+					` : ""}
+					
+					<div class="modal-body" part="body">
+						<slot></slot>
+					</div>
+
+					<div class="modal-footer" part="footer">
+						<slot name="footer"></slot>
+					</div>
+				</div>
+			</div>
+		`;
+    const i = this.shadowRoot.querySelector(".modal-backdrop"), r = this.shadowRoot.querySelector(".modal-close");
+    i == null || i.addEventListener("click", (o) => this.handleBackdropClick(o)), r == null || r.addEventListener("click", () => this.close());
+  }
+}
+customElements.define("ui-modal", M);
+class R extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "isOpen", this.useSignal(!1));
+    p(this, "selectedValue", this.useSignal(""));
+    p(this, "searchTerm", this.useSignal(""));
+    p(this, "options", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "select"), super.connectedCallback(), this.parseOptions(), this.setupClickOutside();
+  }
+  static get observedAttributes() {
+    return ["value", "disabled", "placeholder", "options"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "value" && e !== a && this.selectedValue.set(a || ""), t === "options" && e !== a && this.parseOptions(), this.render();
+  }
+  parseOptions() {
+    const t = this.getAttribute("options");
+    if (t)
+      try {
+        this.options = JSON.parse(t);
+      } catch (e) {
+        console.error("Invalid options JSON", e), this.options = [];
+      }
+  }
+  setupClickOutside() {
+    document.addEventListener("click", (t) => {
+      !t.composedPath().includes(this) && this.isOpen.get() && this.isOpen.set(!1);
+    });
+  }
+  toggleDropdown() {
+    this.hasAttribute("disabled") || (this.isOpen.set(!this.isOpen.get()), this.isOpen.get() || this.searchTerm.set(""));
+  }
+  selectOption(t) {
+    this.selectedValue.set(t), this.setAttribute("value", t), this.isOpen.set(!1), this.searchTerm.set(""), this.dispatchEvent(new CustomEvent("select-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        value: t,
+        option: this.options.find((e) => e.value === t)
+      }
+    }));
+  }
+  handleSearch(t) {
+    this.searchTerm.set(t.toLowerCase());
+  }
+  getFilteredOptions() {
+    const t = this.searchTerm.get();
+    return t ? this.options.filter(
+      (e) => e.label.toLowerCase().includes(t) || e.value.toLowerCase().includes(t)
+    ) : this.options;
+  }
+  getSelectedLabel() {
+    const t = this.selectedValue.get(), e = this.options.find((a) => a.value === t);
+    return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
+  }
+  render() {
+    const t = this.isOpen.get(), e = this.hasAttribute("disabled"), a = this.hasAttribute("searchable"), i = this.getAttribute("label") || "", r = this.getSelectedLabel(), o = this.getFilteredOptions(), n = this.selectedValue.get() !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+
+			<div class="select-container">
+				${i ? `<label class="select-label">${i}</label>` : ""}
+				
+				<div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
+					<span class="select-placeholder ${n ? "has-selection" : ""}">${r}</span>
+					<span class="select-arrow ${t ? "open" : ""}">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<polyline points="6 9 12 15 18 9"></polyline>
+						</svg>
+					</span>
+				</div>
+
+				<div class="select-dropdown ${t ? "open" : ""}" part="dropdown">
+					${a ? `
+						<input 
+							type="text" 
+							class="select-search" 
+							placeholder="Search..."
+							part="search"
+						>
+					` : ""}
+					
+					${o.length > 0 ? o.map((u) => `
+						<div 
+							class="select-option ${u.value === this.selectedValue.get() ? "selected" : ""} ${u.disabled ? "disabled" : ""}"
+							data-value="${u.value}"
+							part="option"
+						>
+							${u.label}
+						</div>
+					`).join("") : `
+						<div class="select-empty">No options found</div>
+					`}
+				</div>
+			</div>
+		`;
+    const d = this.shadowRoot.querySelector(".select-trigger"), c = this.shadowRoot.querySelector(".select-search"), h = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
+    d == null || d.addEventListener("click", () => this.toggleDropdown()), d == null || d.addEventListener("keydown", (u) => {
+      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), this.toggleDropdown());
+    }), c == null || c.addEventListener("input", (u) => {
+      this.handleSearch(u.target.value);
+    }), c == null || c.addEventListener("click", (u) => u.stopPropagation()), h.forEach((u) => {
+      u.addEventListener("click", () => {
+        const b = u.getAttribute("data-value");
+        b && this.selectOption(b);
+      });
+    });
+  }
+}
+customElements.define("ui-select", R);
+class D extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "checked", this.useSignal(!1));
+    p(this, "indeterminate", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "checkbox"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled", "indeterminate"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "checked" && e !== a && this.checked.set(a !== null), t === "indeterminate" && e !== a && this.indeterminate.set(a !== null), this.render();
+  }
+  handleChange() {
+    if (this.hasAttribute("disabled")) return;
+    this.indeterminate.get() && (this.indeterminate.set(!1), this.removeAttribute("indeterminate"));
+    const t = !this.checked.get();
+    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("checkbox-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { checked: t }
+    }));
+  }
+  setChecked(t) {
+    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.indeterminate.set(!1), this.removeAttribute("indeterminate");
+  }
+  setIndeterminate(t) {
+    this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
+  }
+  render() {
+    const t = this.checked.get(), e = this.indeterminate.get(), a = this.hasAttribute("disabled"), i = this.getAttribute("label") || "", r = this.getAttribute("size") || "md", o = {
+      sm: "size-sm",
+      md: "size-md",
+      lg: "size-lg"
+    };
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+
+			<label class="checkbox-container ${o[r]}">
+				<input 
+					type="checkbox" 
+					${t ? "checked" : ""}
+					${a ? "disabled" : ""}
+				>
+				<div class="checkbox-box ${o[r]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${a ? "disabled" : ""}" part="checkbox">
+					<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+					<svg class="checkbox-icon minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<line x1="5" y1="12" x2="19" y2="12"></line>
+					</svg>
+				</div>
+				${i ? `<span class="checkbox-label">${i}</span>` : "<slot></slot>"}
+			</label>
+		`;
+    const n = this.shadowRoot.querySelector(".checkbox-container");
+    n == null || n.addEventListener("click", (d) => {
+      d.preventDefault(), this.handleChange();
+    });
+  }
+}
+customElements.define("ui-checkbox", D);
+const q = ':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';
+class Y extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "activeId", null);
+    p(this, "indicator", null);
+    p(this, "handleTabClick", (t) => {
+      const e = t.target;
+      if (!e) return;
+      const a = e.closest('[slot="tab"][data-tab]');
+      if (!a) return;
+      t.preventDefault();
+      const i = a.getAttribute("data-tab");
+      i && this.setActive(i);
+    });
+  }
+  static get observedAttributes() {
+    return ["active"];
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "tabs"), super.connectedCallback(), this.addEventListener("click", this.handleTabClick);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleTabClick), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "active" && e !== a && (this.activeId = a, this.syncTabs());
+  }
+  setActive(t) {
+    this.activeId !== t && (this.activeId = t, this.setAttribute("active", t), this.syncTabs(), this.dispatchEvent(new CustomEvent("tab-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: t }
+    })));
+  }
+  getTabs() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="tab"]');
+    return t ? t.assignedElements({ flatten: !0 }) : [];
+  }
+  getPanels() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="panel"]');
+    return t ? t.assignedElements({ flatten: !0 }) : [];
+  }
+  getActiveId(t) {
+    const e = this.getAttribute("active");
+    if (e && t.some((i) => i.getAttribute("data-tab") === e))
+      return e;
+    if (this.activeId && t.some((i) => i.getAttribute("data-tab") === this.activeId))
+      return this.activeId;
+    const a = t.find((i) => i.getAttribute("data-tab"));
+    return (a == null ? void 0 : a.getAttribute("data-tab")) ?? null;
+  }
+  syncTabs() {
+    const t = this.getTabs(), e = this.getPanels();
+    if (t.length === 0) return;
+    const a = this.getActiveId(t);
+    a && (this.activeId = a, this.getAttribute("active") !== a && this.setAttribute("active", a), t.forEach((i) => {
+      const r = i.getAttribute("data-tab");
+      if (!r) return;
+      const o = i.id || `tab-${r}`, n = r === a;
+      i.id = o, i.setAttribute("role", "tab"), i.setAttribute("aria-selected", String(n)), i.setAttribute("tabindex", n ? "0" : "-1"), i.classList.toggle("is-active", n);
+    }), e.forEach((i) => {
+      const r = i.getAttribute("data-tab");
+      if (!r) return;
+      const o = i.id || `panel-${r}`, n = r === a;
+      i.id = o, i.setAttribute("role", "tabpanel"), i.toggleAttribute("hidden", !n), i.classList.toggle("is-active", n);
+      const d = t.find((c) => c.getAttribute("data-tab") === r);
+      d && (d.setAttribute("aria-controls", o), i.setAttribute("aria-labelledby", d.id));
+    }), this.updateIndicator(t, a));
+  }
+  updateIndicator(t, e) {
+    if (!this.indicator) return;
+    const a = t.find((n) => n.getAttribute("data-tab") === e);
+    if (!a) return;
+    const i = this.shadowRoot.querySelector(".tablist");
+    if (!i) return;
+    a.getBoundingClientRect(), i.getBoundingClientRect();
+    const r = t.indexOf(a);
+    let o = 0;
+    for (let n = 0; n < r; n++)
+      o += t[n].offsetWidth;
+    this.indicator.style.transform = `translateX(${o}px)`, this.indicator.style.width = `${a.offsetWidth}px`;
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${f}${q}</style>
+			<div class="tabs">
+				<div class="tablist" role="tablist">
+					<div class="tab-indicator"></div>
+					<slot name="tab"></slot>
+				</div>
+				<div class="panels">
+					<slot name="panel"></slot>
+				</div>
+			</div>
+		`, this.indicator = this.shadowRoot.querySelector(".tab-indicator");
+    const t = this.shadowRoot.querySelector('slot[name="tab"]'), e = this.shadowRoot.querySelector('slot[name="panel"]');
+    t == null || t.addEventListener("slotchange", () => this.syncTabs()), e == null || e.addEventListener("slotchange", () => this.syncTabs()), requestAnimationFrame(() => this.syncTabs());
+  }
+}
+customElements.define("ui-tabs", Y);
+const P = ':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';
+class H extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "card"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["shadow", "shadow-color", "rounded", "variant", "elevation"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getShadow() {
+    return this.hasAttribute("shadow") && this.getAttribute("shadow") !== "false";
+  }
+  getShadowColor() {
+    return this.getAttribute("shadow-color") ?? "0, 0, 0";
+  }
+  getRounded() {
+    return this.getAttribute("rounded") !== "false";
+  }
+  getVariant() {
+    const s = this.getAttribute("variant");
+    return s === "elevated" || s === "bordered" || s === "ghost" ? s : "default";
+  }
+  getElevation() {
+    const s = this.getAttribute("elevation");
+    return s === "none" || s === "sm" || s === "md" || s === "lg" || s === "xl" ? s : "sm";
+  }
+  render() {
+    const s = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), a = this.getVariant(), i = this.getElevation();
+    let r = "none";
+    if (s)
+      switch (i) {
+        case "sm":
+          r = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
+          break;
+        case "md":
+          r = `0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;
+          break;
+        case "lg":
+          r = `0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;
+          break;
+        case "xl":
+          r = `0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;
+          break;
+        default:
+          r = "none";
+      }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${f}
+        ${P}
+        
+        .card.custom-shadow {
+          box-shadow: ${r};
+        }
+
+        .card.custom-shadow:hover {
+          box-shadow: ${s && i !== "none" ? r.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (o, n, d) => `rgba(${n}, ${Math.min(parseFloat(d) * 1.3, 0.25)})`) : "none"};
+        }
+      </style>
+      <div class="card ${a} ${e ? "rounded" : "square"} ${s ? "custom-shadow" : "no-shadow"}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("ui-card", H);
+const O = ":host{--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-bg: rgba(255, 255, 255, .95);--toast-blur: blur(12px);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);--toast-border: rgba(255, 255, 255, .3);--toast-text: #1e293b;--toast-radius: 14px;--toast-icon-size: 20px}.toast-container{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:420px;padding:16px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toast-container.bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toast-container.top-center{top:0;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse}.toast{pointer-events:auto;background:var(--toast-bg);backdrop-filter:var(--toast-blur);-webkit-backdrop-filter:var(--toast-blur);border:1px solid var(--toast-border);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);padding:16px 20px;min-width:300px;max-width:100%;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;opacity:0;transform:translate(100px);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}.toast.closing{animation:toastSlideOut .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-left .toast,.toast-container.bottom-left .toast{transform:translate(-100px);animation:toastSlideInLeft .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-left .toast.closing,.toast-container.bottom-left .toast.closing{animation:toastSlideOutLeft .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-center .toast,.toast-container.bottom-center .toast{transform:translateY(-50px);animation:toastSlideInTop .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-center .toast.closing,.toast-container.bottom-center .toast.closing{animation:toastSlideOutTop .3s cubic-bezier(.5,0,.75,0) forwards}.toast-icon{flex-shrink:0;width:var(--toast-icon-size);height:var(--toast-icon-size);display:flex;align-items:center;justify-content:center;margin-top:2px}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast.success .toast-icon{color:var(--toast-success)}.toast.error .toast-icon{color:var(--toast-error)}.toast.warning .toast-icon{color:var(--toast-warning)}.toast.info .toast-icon{color:var(--toast-info)}.toast.success:before{background:linear-gradient(135deg,var(--toast-success),rgba(16,185,129,.7))}.toast.error:before{background:linear-gradient(135deg,var(--toast-error),rgba(239,68,68,.7))}.toast.warning:before{background:linear-gradient(135deg,var(--toast-warning),rgba(245,158,11,.7))}.toast.info:before{background:linear-gradient(135deg,var(--toast-info),rgba(59,130,246,.7))}.toast-content{flex:1;min-width:0}.toast-title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--toast-text);line-height:1.4}.toast-description{margin:0;font-size:13.5px;color:#64748b;line-height:1.5}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;margin-top:2px}.toast-close:hover{background:#0000000d;color:var(--toast-text)}.toast-close svg{width:14px;height:14px;stroke-width:2.5}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 var(--toast-radius) var(--toast-radius);overflow:hidden;background:#0000000d}.toast-progress-bar{height:100%;width:100%;transform-origin:left;animation:toastProgress var(--duration) linear forwards}.toast.success .toast-progress-bar{background:var(--toast-success)}.toast.error .toast-progress-bar{background:var(--toast-error)}.toast.warning .toast-progress-bar{background:var(--toast-warning)}.toast.info .toast-progress-bar{background:var(--toast-info)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100px) scale(.95)}}@keyframes toastSlideInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOutLeft{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-100px) scale(.95)}}@keyframes toastSlideInTop{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOutTop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.95)}}@keyframes toastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-color-scheme: dark){:host{--toast-bg: rgba(30, 41, 59, .95);--toast-border: rgba(255, 255, 255, .1);--toast-text: #f1f5f9;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2)}.toast-description{color:#94a3b8}.toast-close{color:#64748b}.toast-close:hover{background:#ffffff1a;color:var(--toast-text)}.toast-progress{background:#ffffff1a}}@media (max-width: 480px){.toast-container{max-width:calc(100vw - 32px);left:16px!important;right:16px!important;transform:none!important;padding:12px}.toast{min-width:0;width:100%}}";
+class F extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "toasts", /* @__PURE__ */ new Map());
+    p(this, "toastCounter", 0);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "toast"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["position"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getPosition() {
+    const t = this.getAttribute("position");
+    return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
+  }
+  getIcon(t) {
+    var i;
+    const a = {
+      success: "check-circle",
+      error: "x-circle",
+      warning: "alert-triangle",
+      info: "info"
+    }[t];
+    return ((i = y.icons[a]) == null ? void 0 : i.toSvg()) || "";
+  }
+  /**
+   * Show a toast notification
+   * @param config Toast configuration
+   * @returns Toast ID for manual dismissal
+   */
+  show(t) {
+    const {
+      title: e,
+      description: a = "",
+      type: i = "info",
+      duration: r = 5e3,
+      closable: o = !0
+    } = t, n = `toast-${++this.toastCounter}`, d = this.getIcon(i), c = document.createElement("div");
+    c.className = `toast ${i}`, c.setAttribute("role", "alert"), c.setAttribute("aria-live", "polite"), c.innerHTML = `
+      <div class="toast-icon">${d}</div>
+      <div class="toast-content">
+        <div class="toast-title">${this.escapeHtml(e)}</div>
+        ${a ? `<div class="toast-description">${this.escapeHtml(a)}</div>` : ""}
+      </div>
+      ${o ? `
+        <button class="toast-close" aria-label="Close notification">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      ` : ""}
+      ${r > 0 ? `
+        <div class="toast-progress">
+          <div class="toast-progress-bar" style="--duration: ${r}ms"></div>
+        </div>
+      ` : ""}
+    `;
+    const h = this.shadowRoot.querySelector(".toast-container");
+    if (h && h.appendChild(c), o) {
+      const b = c.querySelector(".toast-close");
+      b == null || b.addEventListener("click", () => this.dismiss(n));
+    }
+    let u;
+    return r > 0 && (u = window.setTimeout(() => {
+      this.dismiss(n);
+    }, r)), this.toasts.set(n, { element: c, timer: u }), this.dispatchEvent(
+      new CustomEvent("toast-show", {
+        bubbles: !0,
+        composed: !0,
+        detail: { id: n, ...t }
+      })
+    ), n;
+  }
+  /**
+   * Dismiss a specific toast
+   */
+  dismiss(t) {
+    const e = this.toasts.get(t);
+    e && (e.timer && clearTimeout(e.timer), e.element.classList.add("closing"), setTimeout(() => {
+      e.element.remove(), this.toasts.delete(t), this.dispatchEvent(
+        new CustomEvent("toast-dismiss", {
+          bubbles: !0,
+          composed: !0,
+          detail: { id: t }
+        })
+      );
+    }, 300));
+  }
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll() {
+    Array.from(this.toasts.keys()).forEach((e) => this.dismiss(e));
+  }
+  /**
+   * Convenience methods for different toast types
+   */
+  success(t, e, a) {
+    return this.show({ title: t, description: e, type: "success", duration: a });
+  }
+  error(t, e, a) {
+    return this.show({ title: t, description: e, type: "error", duration: a });
+  }
+  warning(t, e, a) {
+    return this.show({ title: t, description: e, type: "warning", duration: a });
+  }
+  info(t, e, a) {
+    return this.show({ title: t, description: e, type: "info", duration: a });
+  }
+  escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+  render() {
+    const t = this.getPosition();
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${f}
+        ${O}
+      </style>
+      <div class="toast-container ${t}"></div>
+    `;
+  }
+}
+customElements.define("ui-toast", F);
+class U extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "steps", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "stepper"), super.connectedCallback(), this.parseSteps();
+  }
+  static get observedAttributes() {
+    return ["steps", "active", "orientation", "size"];
+  }
+  attributeChangedCallback(t, e, a) {
+    if (t === "steps" && e !== a && this.parseSteps(), t === "active" && e !== a) {
+      this.render();
+      return;
+    }
+    this.render();
+  }
+  parseSteps() {
+    const t = this.getAttribute("steps");
+    if (!t) {
+      this.steps = [];
+      return;
+    }
+    try {
+      const e = JSON.parse(t);
+      this.steps = Array.isArray(e) ? e : [];
+    } catch (e) {
+      console.error("Invalid steps JSON", e), this.steps = [];
+    }
+  }
+  getOrientation() {
+    return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+  }
+  getSize() {
+    const t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  getActiveIndex(t) {
+    const e = parseInt(this.getAttribute("active") || "1", 10);
+    return Number.isNaN(e) || t <= 0 ? 1 : Math.min(Math.max(e, 1), t);
+  }
+  resolveState(t, e, a) {
+    return t.state ? t.state : e + 1 < a ? "complete" : e + 1 === a ? "active" : "upcoming";
+  }
+  setActive(t) {
+    const e = this.steps.length;
+    if (e === 0) return;
+    const a = Math.min(Math.max(t, 1), e);
+    if (a === this.getActiveIndex(e)) return;
+    this.setAttribute("active", String(a));
+    const i = this.steps[a - 1], r = this.resolveState(i, a - 1, a);
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { index: a, step: i, state: r }
+      })
+    );
+  }
+  escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+  render() {
+    const t = this.getOrientation(), e = this.getSize(), a = this.steps, i = a.length, r = this.getActiveIndex(i);
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="stepper-wrap">
+				${i === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
+					<ol class="stepper ${t} ${e}" role="list">
+						${a.map((o, n) => {
+      const d = this.resolveState(o, n, r), c = d === "active", h = o.disabled ? "disabled" : "";
+      return `
+								<li class="step ${d} ${h}" data-state="${d}">
+									<button class="step-trigger" data-index="${n}" ${o.disabled ? "disabled" : ""} aria-current="${c ? "step" : "false"}">
+										<span class="step-node">${n + 1}</span>
+										<span class="step-text">
+											<span class="step-title">${this.escapeHtml(o.title || `Step ${n + 1}`)}</span>
+											${o.description ? `<span class="step-desc">${this.escapeHtml(o.description)}</span>` : ""}
+										</span>
+									</button>
+									${n < i - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
+								</li>
+							`;
+    }).join("")}
+					</ol>
+				`}
+			</div>
+		`, this.shadowRoot.querySelectorAll(".step-trigger").forEach((o) => {
+      o.addEventListener("click", () => {
+        const n = parseInt(o.dataset.index || "0", 10);
+        Number.isNaN(n) || this.setActive(n + 1);
+      });
+    });
+  }
+}
+customElements.define("ui-stepper", U);
+class j extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "files", this.useSignal([]));
+    p(this, "isDragging", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "upload"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["accept", "multiple", "disabled", "label", "helper", "name"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  get value() {
+    return this.files.get().map((t) => t.name).join(", ");
+  }
+  get filesValue() {
+    return this.files.get();
+  }
+  set filesValue(t) {
+    this.setFiles(t);
+  }
+  clear() {
+    this.setFiles([]);
+  }
+  isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  isMultiple() {
+    return this.hasAttribute("multiple");
+  }
+  getAccept() {
+    return this.getAttribute("accept") || "";
+  }
+  getLabel() {
+    return this.getAttribute("label") || "Upload files";
+  }
+  getHelper() {
+    return this.getAttribute("helper") || "";
+  }
+  setFiles(t) {
+    const e = this.isMultiple() ? t : t.slice(0, 1);
+    this.files.set(e), this.dispatchEvent(
+      new CustomEvent("upload-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { files: e }
+      })
+    );
+  }
+  formatSize(t) {
+    if (t < 1024) return `${t} B`;
+    const e = t / 1024;
+    return e < 1024 ? `${e.toFixed(1)} KB` : `${(e / 1024).toFixed(1)} MB`;
+  }
+  syncInputFiles(t, e) {
+    const a = new DataTransfer();
+    e.forEach((i) => a.items.add(i)), t.files = a.files;
+  }
+  render() {
+    const t = this.getAccept(), e = this.getLabel(), a = this.getHelper(), i = this.isDisabled(), r = this.isMultiple(), o = this.isDragging.get(), n = this.files.get();
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="upload">
+				${e ? `<label class="upload-label">${e}</label>` : ""}
+				<div class="upload-drop ${o ? "dragging" : ""} ${i ? "disabled" : ""}" part="dropzone">
+					<input
+						class="upload-input"
+						type="file"
+						${r ? "multiple" : ""}
+						${t ? `accept="${t}"` : ""}
+						${i ? "disabled" : ""}
+					>
+					<div class="upload-content">
+						<div class="upload-icon" aria-hidden="true">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M12 16V4"></path>
+								<path d="M8 8l4-4 4 4"></path>
+								<path d="M4 16v4h16v-4"></path>
+							</svg>
+						</div>
+						<div class="upload-text">
+							<div class="upload-title">Drop files here or browse</div>
+							<div class="upload-sub">
+								${t ? `Accepted: ${t}` : "Any file type supported"}
+							</div>
+						</div>
+						<button class="upload-btn" type="button" ${i ? "disabled" : ""}>Browse</button>
+					</div>
+				</div>
+				${a ? `<div class="upload-helper">${a}</div>` : ""}
+				${n.length ? `
+					<ul class="upload-list">
+						${n.map(
+      (b, m) => `
+								<li>
+									<span>${b.name}</span>
+									<span class="upload-meta">${this.formatSize(b.size)}</span>
+									<button class="upload-remove" data-index="${m}" type="button">Remove</button>
+								</li>
+							`
+    ).join("")}
+					</ul>
+				` : ""}
+			</div>
+		`;
+    const d = this.shadowRoot.querySelector(".upload-drop"), c = this.shadowRoot.querySelector(".upload-input"), h = this.shadowRoot.querySelector(".upload-btn"), u = this.shadowRoot.querySelectorAll(".upload-remove");
+    !d || !c || (n.length ? this.syncInputFiles(c, n) : c.value = "", d.addEventListener("dragover", (b) => {
+      i || (b.preventDefault(), this.isDragging.set(!0));
+    }), d.addEventListener("dragleave", () => {
+      this.isDragging.set(!1);
+    }), d.addEventListener("drop", (b) => {
+      var v;
+      if (i) return;
+      b.preventDefault(), this.isDragging.set(!1);
+      const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
+      m.length && (this.setFiles(m), this.syncInputFiles(c, this.files.get()));
+    }), c.addEventListener("change", () => {
+      const b = Array.from(c.files ?? []);
+      this.setFiles(b);
+    }), h == null || h.addEventListener("click", () => {
+      i || c.click();
+    }), u.forEach((b) => {
+      b.addEventListener("click", () => {
+        const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((st, A) => A !== m);
+        this.setFiles(v), this.syncInputFiles(c, v);
+      });
+    }));
+  }
+}
+customElements.define("ui-upload", j);
+class V extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["direction"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getDirection() {
+    const s = this.getAttribute("direction");
+    return s === "horizontal" || s === "vertical" ? s : "auto";
+  }
+  detectDirection() {
+    const s = this.getDirection();
+    if (s !== "auto") return s;
+    const t = this.querySelector("ui-layout-header"), e = this.querySelector("ui-layout-footer");
+    return this.querySelector("ui-layout-sidebar") ? "horizontal" : "vertical";
+  }
+  render() {
+    const s = this.detectDirection() === "horizontal" ? "row" : "column";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="layout-container" style="flex-direction: ${s}">
+				<slot></slot>
+			</div>
+		`;
+  }
+}
+class B extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout-header"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["height"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getHeight() {
+    const s = this.getAttribute("height");
+    return s && /^\d+$/.test(s) ? s + "px" : s || "64px";
+  }
+  render() {
+    const s = this.getHeight();
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<header class="layout-header" style="height: ${s}">
+				<slot></slot>
+			</header>
+		`;
+  }
+}
+class N extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout-footer"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["height"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getHeight() {
+    const s = this.getAttribute("height");
+    return s && /^\d+$/.test(s) ? s + "px" : s || "56px";
+  }
+  render() {
+    const s = this.getHeight();
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<footer class="layout-footer" style="height: ${s}">
+				<slot></slot>
+			</footer>
+		`;
+  }
+}
+class _ extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout-content"), super.connectedCallback();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="layout-content">
+				<slot></slot>
+			</div>
+		`;
+  }
+}
+class W extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "isCollapsed", !1);
+    p(this, "animating", !1);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout-sidebar"), super.connectedCallback(), this.isCollapsed = this.hasAttribute("collapsed"), this.render(), this.attachEventListeners();
+  }
+  static get observedAttributes() {
+    return ["collapsed", "width", "collapsed-width", "collapsible"];
+  }
+  attributeChangedCallback(t) {
+    t === "collapsed" && (this.isCollapsed = this.hasAttribute("collapsed")), this.render();
+  }
+  getWidth() {
+    const t = this.getAttribute("width");
+    return t && /^\d+$/.test(t) ? t + "px" : t || "240px";
+  }
+  getCollapsedWidth() {
+    const t = this.getAttribute("collapsed-width");
+    return t && /^\d+$/.test(t) ? t + "px" : t || "64px";
+  }
+  isCollapsible() {
+    return this.hasAttribute("collapsible");
+  }
+  attachEventListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".sidebar-toggle");
+    t && t.addEventListener("click", () => this.toggleCollapse());
+  }
+  toggleCollapse() {
+    this.animating || (this.animating = !0, this.isCollapsed = !this.isCollapsed, this.isCollapsed ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed"), this.dispatchEvent(
+      new CustomEvent("collapsed-change", {
+        detail: { collapsed: this.isCollapsed },
+        bubbles: !0,
+        composed: !0
+      })
+    ), setTimeout(() => {
+      this.animating = !1;
+    }, 300));
+  }
+  render() {
+    const t = this.getWidth(), e = this.getCollapsedWidth(), a = this.isCollapsible();
+    a && this.isCollapsed, this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<aside class="layout-sidebar ${this.isCollapsed ? "collapsed" : ""}" 
+				style="--sidebar-width: ${t}; --sidebar-collapsed-width: ${e}">
+				<div class="sidebar-content">
+					<slot></slot>
+				</div>
+				${a ? `
+					<button class="sidebar-toggle" title="${this.isCollapsed ? "Expand" : "Collapse"}">
+						<svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+								d="M15 19l-7-7 7-7"></path>
+						</svg>
+					</button>
+				` : ""}
+			</aside>
+		`, this.attachEventListeners();
+  }
+}
+customElements.define("ui-layout", V);
+customElements.define("ui-layout-header", B);
+customElements.define("ui-layout-footer", N);
+customElements.define("ui-layout-content", _);
+customElements.define("ui-layout-sidebar", W);
+class J {
+  constructor() {
+    p(this, "baseURL", "");
+    p(this, "defaultHeaders", {
+      "Content-Type": "application/json"
+    });
+    p(this, "defaultTimeout", 3e4);
+    p(this, "interceptors", {
+      request: {
+        handlers: [],
+        use: (s, t) => {
+          this.interceptors.request.handlers.push({ onFulfilled: s, onRejected: t });
+        }
+      },
+      response: {
+        handlers: [],
+        use: (s, t) => {
+          this.interceptors.response.handlers.push({ onFulfilled: s, onRejected: t });
+        }
+      }
+    });
+  }
+  /**
+   * Set base URL for all requests
+   */
+  setBaseURL(s) {
+    this.baseURL = s;
+  }
+  /**
+   * Get currently set base URL
+   */
+  getBaseURL() {
+    return this.baseURL;
+  }
+  /**
+   * Set default headers for all requests
+   */
+  setDefaultHeaders(s) {
+    this.defaultHeaders = { ...this.defaultHeaders, ...s };
+  }
+  /**
+   * Set default timeout for all requests (in ms)
+   */
+  setDefaultTimeout(s) {
+    this.defaultTimeout = s;
+  }
+  /**
+   * Execute request with interceptors
+   */
+  async executeRequest(s, t) {
+    const e = s.startsWith("http") ? s : this.baseURL + s;
+    let a = {
+      method: "GET",
+      headers: { ...this.defaultHeaders },
+      timeout: this.defaultTimeout,
+      ...t
+    };
+    for (const o of this.interceptors.request.handlers)
+      try {
+        a = await o.onFulfilled(a);
+      } catch (n) {
+        if (o.onRejected)
+          a = await o.onRejected(n);
+        else
+          throw n;
+      }
+    const i = new AbortController(), r = setTimeout(() => i.abort(), a.timeout || this.defaultTimeout);
+    try {
+      const o = {
+        method: a.method,
+        headers: a.headers,
+        signal: i.signal
+      };
+      a.body && a.method !== "GET" && (o.body = (typeof a.body == "string", a.body));
+      const n = await fetch(e, o);
+      let d;
+      const c = n.headers.get("content-type");
+      c != null && c.includes("application/json") ? d = n.ok ? await n.json() : null : c != null && c.includes("text") ? d = await n.text() : d = await n.blob();
+      let h = {
+        status: n.status,
+        statusText: n.statusText,
+        headers: n.headers,
+        data: d
+      };
+      if (!n.ok) {
+        const u = new Error(`HTTP ${n.status}: ${n.statusText}`);
+        throw u.response = h, u.config = a, u;
+      }
+      for (const u of this.interceptors.response.handlers)
+        try {
+          h = await u.onFulfilled(h);
+        } catch (b) {
+          if (u.onRejected)
+            h = await u.onRejected(b);
+          else
+            throw b;
+        }
+      return h.data;
+    } catch (o) {
+      throw o instanceof Error && o.name === "AbortError" ? new Error(`Request timeout after ${a.timeout}ms`) : o;
+    } finally {
+      clearTimeout(r);
+    }
+  }
+  /**
+   * GET request
+   */
+  async get(s, t) {
+    return this.executeRequest(s, { ...t, method: "GET" });
+  }
+  /**
+   * POST request
+   */
+  async post(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "POST",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PUT request
+   */
+  async put(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "PUT",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PATCH request
+   */
+  async patch(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "PATCH",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * DELETE request
+   */
+  async delete(s, t) {
+    return this.executeRequest(s, { ...t, method: "DELETE" });
+  }
+  /**
+   * HEAD request
+   */
+  async head(s, t) {
+    return this.executeRequest(s, { ...t, method: "HEAD" });
+  }
+}
+const nt = new J();
+function k(l, s) {
+  return l ? l.querySelector(s) : null;
+}
+function lt(l, s) {
+  return l ? l.querySelectorAll(s) : [];
+}
+function dt(l, s) {
+  return l ? l.querySelector(`#${s}`) : null;
+}
+function ct(l, s, t, e, a) {
+  if (!l) return null;
+  const i = l.querySelector(`#${s}`);
+  return i ? (i.addEventListener(t, e, a), i) : null;
+}
+function pt(l, s) {
+  return k(l, s);
+}
+function ut(l, s) {
+  return k(l, s);
+}
+function ht(l, s) {
+  return k(l, s);
+}
+const G = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
+function $(l) {
+  return l.getAttribute("name") || l.getAttribute("id") || "";
+}
+function X(l) {
+  const s = l.tagName.toLowerCase();
+  if (s === "ui-checkbox")
+    return l.hasAttribute("checked");
+  if (s === "ui-upload") {
+    const a = l == null ? void 0 : l.filesValue;
+    return Array.isArray(a) && a.length > 0 ? a : [];
+  }
+  const t = l == null ? void 0 : l.value;
+  if (typeof t == "string" && t !== "")
+    return t;
+  const e = l.getAttribute("value");
+  return e || "";
+}
+function bt(l, s = {}) {
+  const { includeDisabled: t = !1, includeEmpty: e = !0 } = s, a = {}, i = /* @__PURE__ */ new Map();
+  l.querySelectorAll('input[type="checkbox"]').forEach((o) => {
+    const n = $(o);
+    n && i.set(n, (i.get(n) || 0) + 1);
+  });
+  const r = Array.from(l.querySelectorAll(G));
+  for (const o of r) {
+    if (!t && (o.disabled || o.hasAttribute("disabled"))) continue;
+    const n = $(o);
+    if (!n) continue;
+    if (o instanceof HTMLInputElement) {
+      const c = o.type;
+      if (c === "checkbox") {
+        if ((i.get(n) || 0) > 1) {
+          const u = a[n] || [];
+          o.checked && u.push(o.value || "on"), a[n] = u;
+        } else
+          a[n] = o.checked;
+        continue;
+      }
+      if (c === "radio") {
+        o.checked && (a[n] = o.value);
+        continue;
+      }
+      if (c === "file") {
+        const h = Array.from(o.files ?? []);
+        (e || h.length > 0) && (a[n] = h);
+        continue;
+      }
+      (e || o.value !== "") && (a[n] = o.value);
+      continue;
+    }
+    if (o instanceof HTMLSelectElement) {
+      if (o.multiple) {
+        const c = Array.from(o.selectedOptions).map((h) => h.value);
+        (e || c.length > 0) && (a[n] = c);
+      } else (e || o.value !== "") && (a[n] = o.value);
+      continue;
+    }
+    if (o instanceof HTMLTextAreaElement) {
+      (e || o.value !== "") && (a[n] = o.value);
+      continue;
+    }
+    const d = X(o);
+    (e || (Array.isArray(d) ? d.length > 0 : d !== "")) && (a[n] = d);
+  }
+  return a;
+}
+function gt(l) {
+  const s = {};
+  l.querySelectorAll("ui-input").forEach((i) => {
+    var c;
+    const r = (c = i.value) == null ? void 0 : c.trim(), o = i.getAttribute("name"), n = i.getAttribute("label") || o;
+    i.getAttribute("required") !== null && !r && (s[o || ""] = `${n} is required`), r && o === "email" && (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r) || (s[o] = "Please enter a valid email address")), r && o === "phone" && (/^[\d\s\-\+\(\)]+$/.test(r) || (s[o] = "Please enter a valid phone number"));
+  }), l.querySelectorAll("ui-select").forEach((i) => {
+    const r = i.getAttribute("value"), o = i.getAttribute("name"), n = i.getAttribute("label") || o;
+    i.getAttribute("required") !== null && !r && (s[o || ""] = `${n} is required`);
+  });
+  const a = l.querySelectorAll("ui-checkbox");
+  return a.length > 0 && (Array.from(a).some((r) => r.checked || r.getAttribute("checked") !== null) || (s.checkboxes = "Please select at least one option")), {
+    isValid: Object.keys(s).length === 0,
+    errors: s
+  };
+}
+const K = ":host{display:flex;flex-direction:column;width:100%;height:100vh;background:#f9fafb;box-sizing:border-box}ui-top-bar{display:block;width:100%;flex-shrink:0}.layout-container{display:flex;flex-direction:row;flex:1;width:100%;min-height:0}app-sidebar{display:block;width:280px;flex-shrink:0;border-right:1px solid #e5e7eb;overflow:hidden;background:linear-gradient(to bottom,#1f2937,#111827)}.main-area{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:32px 48px;background:#f9fafb;box-sizing:border-box;height:100%}.content-area{background:#fff;border-radius:12px;padding:32px;border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d;box-sizing:border-box;margin-bottom:32px;transition:all .2s ease;width:100%}.content-area:hover{border-color:#d1d5db;box-shadow:0 1px 3px #00000014}::slotted(*){display:block!important;width:100%}.main-area::-webkit-scrollbar{width:8px}.main-area::-webkit-scrollbar-track{background:transparent}.main-area::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.main-area::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media (max-width: 1280px){.main-area{padding:24px 32px}.content-area{padding:28px}}@media (max-width: 768px){.layout-container{flex-direction:column}app-sidebar{width:100%;border-right:none;border-bottom:1px solid #e5e7eb;max-height:200px}.main-area{padding:16px 24px}.content-area{padding:20px;margin-bottom:20px}}", Q = `
+:host {
+  display: block;
+  width: 280px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.sidebar {
+  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  margin: 0;
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.brand-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  flex-shrink: 0;
+}
+
+.brand-icon svg {
+  width: 22px;
+  height: 22px;
+  stroke: white;
+}
+
+.brand-text {
+  font: 600 16px/1.2 "Sora", system-ui, sans-serif;
+  color: #ffffff;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.brand-sub {
+  font: 500 10px/1 "Inter", system-ui, sans-serif;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0;
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.nav-label {
+  font: 600 11px/1 "Inter", system-ui, sans-serif;
+  color: rgba(255, 255, 255, 0.35);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 12px 8px 6px;
+  margin: 4px 0 0;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.65);
+  text-decoration: none;
+  font: 500 14px/1.3 "Inter", system-ui, sans-serif;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sidebar-link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
+  border-radius: 8px;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.sidebar-link:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.sidebar-link:hover::before {
+  opacity: 1;
+}
+
+.sidebar-link.active {
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%);
+}
+
+.sidebar-link.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 20px;
+  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 0 3px 3px 0;
+}
+
+.link-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.65;
+  transition: opacity 200ms ease;
+}
+
+.sidebar-link:hover .link-icon,
+.sidebar-link.active .link-icon {
+  opacity: 1;
+}
+
+.link-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 16px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.sidebar-link[data-link] {
+  cursor: pointer;
+}
+
+.nav-section:first-child {
+  padding-top: 12px;
+}
+`;
+class Z extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "navItems", []);
+    p(this, "footerItems", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "sidebar"), super.connectedCallback(), this.updateActiveState(), window.addEventListener("popstate", () => this.updateActiveState()), document.addEventListener("click", () => this.updateActiveState());
+  }
+  set items(t) {
+    this.navItems = t.map((e) => ({ ...e, active: !1 })), this.updateActiveState();
+  }
+  get items() {
+    return this.navItems;
+  }
+  set footer(t) {
+    this.footerItems = t, this.render();
+  }
+  get footer() {
+    return this.footerItems;
+  }
+  updateActiveState() {
+    if (this.navItems.length === 0) return;
+    const t = window.location.pathname;
+    this.navItems = this.navItems.map((e) => ({
+      ...e,
+      active: e.href === t
+    })), this.render();
+  }
+  renderIcon(t) {
+    var a;
+    return ((a = y.icons[t]) == null ? void 0 : a.toSvg({ class: "" })) || "";
+  }
+  render() {
+    const t = this.navItems.map((i) => `
+      <a 
+        class="sidebar-link ${i.active ? "active" : ""}" 
+        href="${i.href}" 
+        data-link
+      >
+        <span class="link-icon">${this.renderIcon(i.icon)}</span>
+        ${i.label}
+      </a>
+    `).join(""), e = this.footerItems.map((i) => `
+      <a 
+        class="sidebar-link" 
+        href="${i.href}" 
+        target="_blank"
+        rel="noopener"
+      >
+        <span class="link-icon">${this.renderIcon(i.icon)}</span>
+        ${i.label}
+      </a>
+    `).join(""), a = this.footerItems.length > 0 ? `
+      <div class="sidebar-footer">
+        ${e}
+      </div>
+    ` : "";
+    this.shadowRoot.innerHTML = `
+      <style>${f}${Q}</style>
+      <aside class="sidebar">
+        <div class="sidebar-brand">
+          <div class="brand-icon">
+            ${this.renderIcon("hexagon")}
+          </div>
+          <div>
+            <div class="brand-text">UI Kit</div>
+            <div class="brand-sub">Components</div>
+          </div>
+        </div>
+        
+        <nav class="nav-section">
+          <div class="nav-label">Components</div>
+          ${t}
+        </nav>
+        
+        ${a}
+      </aside>
+    `;
+  }
+}
+customElements.define("app-sidebar", Z);
+const tt = ":host{display:block;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d}.top-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:14px 48px;width:100%;box-sizing:border-box}.title-section{display:flex;flex-direction:column;gap:2px;min-width:0}.page-title{font:600 22px/1.2 Sora,system-ui,sans-serif;color:#0f172a;letter-spacing:-.01em;margin:0;word-break:break-word}.page-subtitle{font:400 13px/1.4 Inter,system-ui,sans-serif;color:#6b7280;margin:0;letter-spacing:-.005em;word-break:break-word}.actions-slot{display:flex;align-items:center;gap:8px;flex-shrink:0}@media (max-width: 1280px){.top-bar{gap:16px;padding:12px 32px}.page-title{font-size:20px}.page-subtitle{font-size:12px}}@media (max-width: 768px){.top-bar{grid-template-columns:1fr;gap:12px;padding:12px 24px}.page-title{font-size:18px}.page-subtitle{font-size:12px}.actions-slot{width:100%;justify-content:flex-end}}@media (max-width: 480px){.top-bar{padding:10px 16px;gap:10px}.page-title{font-size:16px}.page-subtitle{font-size:11px}}";
+class et extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "top-bar"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["title", "subtitle", "bg-color"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getTitle() {
+    return this.getAttribute("title") ?? "Dashboard";
+  }
+  getSubtitle() {
+    return this.getAttribute("subtitle") ?? "";
+  }
+  getBgColor() {
+    return this.getAttribute("bg-color") ?? "var(--color-header)";
+  }
+  render() {
+    const s = this.getSubtitle(), t = this.getBgColor();
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${f}
+        ${tt}
+        :host {
+          background: ${t};
+        }
+      </style>
+      <div class="top-bar">
+        <div class="title-section">
+          <h1 class="page-title">${this.getTitle()}</h1>
+          ${s ? `<p class="page-subtitle">${s}</p>` : ""}
+        </div>
+        <div class="actions-slot">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("ui-top-bar", et);
+const at = [
+  {
+    path: "/",
+    layout: "app-layout",
+    load: () => import("./home-page-XUM8cHP7.js"),
+    component: "home-page"
+  },
+  {
+    path: "/button",
+    layout: "app-layout",
+    load: () => import("./button-demo-BcfxxPSq.js"),
+    component: "button-demo"
+  },
+  {
+    path: "/layout",
+    layout: "app-layout",
+    load: () => import("./layout-demo-CJsZ6DI5.js"),
+    component: "layout-demo"
+  },
+  {
+    path: "/date-picker",
+    layout: "app-layout",
+    load: () => import("./date-picker-demo-B8y3zapN.js"),
+    component: "date-picker-demo"
+  },
+  {
+    path: "/table-demo",
+    layout: "app-layout",
+    load: () => import("./table-demo-x2ZD8cFh.js"),
+    component: "table-demo"
+  },
+  {
+    path: "/forms",
+    layout: "app-layout",
+    load: () => import("./form-demo-page-F1iLCgfh.js"),
+    component: "form-demo-page"
+  },
+  {
+    path: "/modal",
+    layout: "app-layout",
+    load: () => import("./modal-demo-page-YN2KgJ31.js"),
+    component: "modal-demo-page"
+  },
+  {
+    path: "/tabs",
+    layout: "app-layout",
+    load: () => import("./tabs-demo-BQBtZzw9.js"),
+    component: "tabs-demo"
+  },
+  {
+    path: "/card",
+    layout: "app-layout",
+    load: () => import("./card-demo-Cxp-wRGW.js"),
+    component: "card-demo-page"
+  },
+  {
+    path: "/toast",
+    layout: "app-layout",
+    load: () => import("./toast-demo-page-DLVacHXA.js"),
+    component: "toast-demo-page"
+  },
+  {
+    path: "/stepper",
+    layout: "app-layout",
+    load: () => import("./stepper-demo-page-BkcpKk_F.js"),
+    component: "stepper-demo-page"
+  }
+];
+class it extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "pageTitle", "Dashboard");
+    p(this, "pageSubtitle", "Explore our component library");
+    p(this, "navItems", [
+      { icon: "home", label: "Home", href: "/" },
+      { icon: "box", label: "Button", href: "/button" },
+      { icon: "layout", label: "Layout", href: "/layout" },
+      { icon: "sliders", label: "Form Elements", href: "/forms" },
+      { icon: "calendar", label: "Date Picker", href: "/date-picker" },
+      { icon: "table", label: "Table", href: "/table-demo" },
+      { icon: "square", label: "Modal", href: "/modal" },
+      { icon: "folder", label: "Tabs", href: "/tabs" },
+      { icon: "credit-card", label: "Card", href: "/card" },
+      { icon: "message-circle", label: "Toast", href: "/toast" },
+      { icon: "layers", label: "Stepper", href: "/stepper" }
+    ]);
+    p(this, "footerItems", [
+      { icon: "github", label: "GitHub", href: "https://github.com/rodiniz/webcomponents" }
+    ]);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "layout"), super.connectedCallback(), this.updateTitle(), window.addEventListener("popstate", () => this.updateTitle()), document.addEventListener("click", () => this.updateTitle());
+  }
+  updateTitle() {
+    const t = window.location.pathname, a = {
+      "/": { title: "Web Components", subtitle: "A framework-agnostic component library" },
+      "/button": { title: "Button", subtitle: "Flexible button with variants and sizes" },
+      "/layout": { title: "Layout", subtitle: "Flexible page layouts with header, footer, sidebar, and content" },
+      "/forms": { title: "Form Elements", subtitle: "Inputs, selects, checkboxes, uploads, and more" },
+      "/date-picker": { title: "Date Picker", subtitle: "Date selection component" },
+      "/table-demo": { title: "Table", subtitle: "Data table with actions" },
+      "/modal": { title: "Modal", subtitle: "Dialog and overlay components" },
+      "/tabs": { title: "Tabs", subtitle: "Tabbed navigation component" },
+      "/card": { title: "Card", subtitle: "Flexible container component" },
+      "/toast": { title: "Toast", subtitle: "Notification and alert system" },
+      "/stepper": { title: "Stepper", subtitle: "Progressive step navigation" }
+    }[t] || { title: "Dashboard", subtitle: "Explore our component library" };
+    this.pageTitle = a.title, this.pageSubtitle = a.subtitle, this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>${f}${K}</style>
+      <ui-top-bar title="${this.pageTitle}" subtitle="${this.pageSubtitle}"></ui-top-bar>
+      <div class="layout-container">
+        <app-sidebar></app-sidebar>
+        <div class="main-area">
+          <main class="content-area">
+            <slot></slot>
+          </main>
+        </div>
+      </div>
+    `;
+    const t = this.shadowRoot.querySelector("app-sidebar");
+    t && (t.items = this.navItems, t.footer = this.footerItems);
+  }
+}
+customElements.define("app-layout", it);
+function ft(l, s = "#app") {
+  async function t() {
+    const e = location.pathname, a = e, i = l.find((n) => n.path === a);
+    if (!i) {
+      if (a !== "/") {
+        const n = "/";
+        history.replaceState(null, "", n), await t();
+      }
+      return;
+    }
+    if (await i.load(), i.guard && !await i.guard()) {
+      const d = "/";
+      history.replaceState(null, "", d), await t();
+      return;
+    }
+    const r = document.createElement(i.component), o = document.querySelector(s);
+    o && (o.innerHTML = "", o.appendChild(r));
+  }
+  return window.addEventListener("popstate", t), window.addEventListener("DOMContentLoaded", t), document.addEventListener("click", (e) => {
+    const i = e.composedPath().find(
+      (r) => r instanceof Element && r.matches("[data-link]")
+    );
+    if (i) {
+      e.preventDefault();
+      const r = i.getAttribute("href") ?? "/", o = r;
+      history.pushState(null, "", o), t();
+    }
+  }), t;
+}
+async function x() {
+  const l = location.pathname, s = l, t = at.find((r) => r.path === s);
+  if (!t) {
+    if (s !== "/") {
+      const r = "/";
+      history.replaceState(null, "", r), await x();
+    }
+    return;
+  }
+  if (await t.load(), t.guard && !await t.guard()) {
+    const o = "/";
+    history.replaceState(null, "", o), await x();
+    return;
+  }
+  const e = document.createElement(t.layout), a = document.createElement(t.component);
+  e.appendChild(a);
+  const i = document.querySelector("#app");
+  i && (i.innerHTML = "", i.appendChild(e));
+}
+window.addEventListener("popstate", x);
+window.addEventListener("DOMContentLoaded", x);
+document.addEventListener("click", (l) => {
+  const t = l.composedPath().find(
+    (e) => e instanceof Element && e.matches("[data-link]")
+  );
+  if (t) {
+    l.preventDefault();
+    const e = t.getAttribute("href") ?? "/", a = e;
+    history.pushState(null, "", a), x();
+  }
+});
+export {
+  ft as A,
+  g as B,
+  lt as C,
+  J as H,
+  S as U,
+  pt as a,
+  ut as b,
+  k as c,
+  ct as d,
+  dt as e,
+  H as f,
+  bt as g,
+  nt as h,
+  D as i,
+  I as j,
+  L as k,
+  V as l,
+  _ as m,
+  N as n,
+  B as o,
+  W as p,
+  ht as q,
+  M as r,
+  T as s,
+  R as t,
+  U as u,
+  gt as v,
+  z as w,
+  Y as x,
+  F as y,
+  j as z
+};