@diniz/webcomponents 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +291 -824
  2. package/dist/README.md +291 -824
  3. package/dist/style.css +180 -0
  4. package/dist/webcomponents.es.js +593 -400
  5. package/dist/webcomponents.umd.js +108 -72
  6. package/package.json +1 -1
package/dist/webcomponents.es.js CHANGED
@@ -1,14 +1,14 @@
1
- var $ = Object.defineProperty;
2
- var A = (l, i, t) => i in l ? $(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
3
- var p = (l, i, t) => A(l, typeof i != "symbol" ? i + "" : i, t);
4
- import k from "feather-icons";
5
- function E(l) {
6
- let i = l;
1
+ var A = Object.defineProperty;
2
+ var C = (l, a, t) => a in l ? A(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
3
+ var u = (l, a, t) => C(l, typeof a != "symbol" ? a + "" : a, t);
4
+ import w from "feather-icons";
5
+ function y(l) {
6
+ let a = l;
7
7
  const t = /* @__PURE__ */ new Set();
8
8
  return {
9
- get: () => i,
9
+ get: () => a,
10
10
  set: (e) => {
11
- Object.is(i, e) || (i = e, t.forEach((a) => a(i)));
11
+ Object.is(a, e) || (a = e, t.forEach((s) => s(a)));
12
12
  },
13
13
  subscribe: (e) => (t.add(e), () => t.delete(e))
14
14
  };
@@ -16,13 +16,42 @@ function E(l) {
16
16
  class g extends HTMLElement {
17
17
  constructor() {
18
18
  super();
19
- p(this, "state");
20
- p(this, "signalUnsubs");
19
+ u(this, "state");
20
+ u(this, "signalUnsubs");
21
21
  this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
22
22
  }
23
23
  useSignal(t) {
24
- const e = E(t), a = e.subscribe(() => this.render());
25
- return this.signalUnsubs.add(a), e;
24
+ const e = y(t), s = e.subscribe(() => this.render());
25
+ return this.signalUnsubs.add(s), e;
26
+ }
27
+ /**
28
+ * Create a signal bound to a specific HTML element
29
+ * Automatically updates the element's textContent when the signal value changes
30
+ * @param elementId - The ID of the HTML element to bind to
31
+ * @param initial - The initial value
32
+ * @returns A signal that auto-updates the element
33
+ *
34
+ * @example
35
+ * ```typescript
36
+ * private count = this.useSignalHtml('countValue', 0);
37
+ *
38
+ * private increment() {
39
+ * this.count.set(this.count.get() + 1);
40
+ * // Element with id="countValue" automatically updates
41
+ * }
42
+ * ```
43
+ */
44
+ useSignalHtml(t, e) {
45
+ const s = y(e), i = s.subscribe((n) => {
46
+ var o;
47
+ const r = (o = this.shadowRoot) == null ? void 0 : o.getElementById(t);
48
+ r && (r.textContent = String(n));
49
+ });
50
+ return this.signalUnsubs.add(i), requestAnimationFrame(() => {
51
+ var r;
52
+ const n = (r = this.shadowRoot) == null ? void 0 : r.getElementById(t);
53
+ n && (n.textContent = String(e));
54
+ }), s;
26
55
  }
27
56
  setState(t) {
28
57
  this.state = { ...this.state, ...t }, this.render();
@@ -36,8 +65,8 @@ class g extends HTMLElement {
36
65
  render() {
37
66
  }
38
67
  }
39
- 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}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';
40
- class C extends g {
68
+ 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}';
69
+ class E extends g {
41
70
  connectedCallback() {
42
71
  this.setAttribute("data-ui", "button"), super.connectedCallback(), this.attachClickHandler();
43
72
  }
@@ -49,18 +78,18 @@ class C extends g {
49
78
  }
50
79
  attachClickHandler() {
51
80
  if (!this.shadowRoot) return;
52
- const i = this.shadowRoot.querySelector("button");
53
- if (!i) return;
54
- const t = i._clickHandler;
55
- t && i.removeEventListener("click", t);
56
- const e = (a) => {
57
- const s = this.getType();
81
+ const a = this.shadowRoot.querySelector("button");
82
+ if (!a) return;
83
+ const t = a._clickHandler;
84
+ t && a.removeEventListener("click", t);
85
+ const e = (s) => {
86
+ const i = this.getType();
58
87
  if (this.hasAttribute("disabled")) {
59
- a.preventDefault(), a.stopPropagation();
88
+ s.preventDefault(), s.stopPropagation();
60
89
  return;
61
90
  }
62
- if (s === "submit") {
63
- a.preventDefault(), a.stopPropagation();
91
+ if (i === "submit") {
92
+ s.preventDefault(), s.stopPropagation();
64
93
  let r = this.closest("form");
65
94
  if (!r) {
66
95
  let o = this.parentElement;
@@ -81,52 +110,52 @@ class C extends g {
81
110
  }
82
111
  }
83
112
  };
84
- i._clickHandler = e, i.addEventListener("click", e);
113
+ a._clickHandler = e, a.addEventListener("click", e);
85
114
  }
86
115
  getVariant() {
87
- const i = this.getAttribute("variant");
88
- return i === "secondary" || i === "ghost" || i === "danger" ? i : "primary";
116
+ const a = this.getAttribute("variant");
117
+ return a === "secondary" || a === "ghost" || a === "danger" ? a : "primary";
89
118
  }
90
119
  getSize() {
91
- const i = this.getAttribute("size");
92
- return i === "sm" || i === "lg" ? i : "md";
120
+ const a = this.getAttribute("size");
121
+ return a === "sm" || a === "lg" ? a : "md";
93
122
  }
94
123
  getType() {
95
124
  return this.getAttribute("type") ?? "button";
96
125
  }
97
126
  getIcon() {
98
- var a;
99
- const i = this.getAttribute("icon");
100
- if (!i) return null;
101
- const t = i.trim();
102
- return { html: `<span class="btn-icon">${((a = k.icons[t]) == null ? void 0 : a.toSvg()) || ""}</span>`, name: t };
127
+ var s;
128
+ const a = this.getAttribute("icon");
129
+ if (!a) return null;
130
+ const t = a.trim();
131
+ return { html: `<span class="btn-icon">${((s = w.icons[t]) == null ? void 0 : s.toSvg()) || ""}</span>`, name: t };
103
132
  }
104
133
  getIconPosition() {
105
134
  return this.getAttribute("icon-position") === "right" ? "right" : "left";
106
135
  }
107
136
  render() {
108
- const i = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), a = this.getType(), s = this.getIcon(), n = this.getIconPosition(), r = s !== null, o = s ? s.html : "", d = this.innerHTML.trim(), c = r && !d;
109
- let h;
110
- r && d ? h = n === "left" ? `${o}<span>${d}</span>` : `<span>${d}</span>${o}` : r ? h = o : h = d, this.shadowRoot.innerHTML = `
137
+ const a = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), s = this.getType(), i = this.getIcon(), n = this.getIconPosition(), r = i !== null, o = i ? i.html : "", c = this.innerHTML.trim(), d = r && !c;
138
+ let p;
139
+ r && c ? p = n === "left" ? `${o}<span>${c}</span>` : `<span>${c}</span>${o}` : r ? p = o : p = c, this.shadowRoot.innerHTML = `
111
140
  <style>${f}</style>
112
141
  <button
113
142
  part="button"
114
- class="btn ${i} ${t}${r ? " has-icon" : ""}${c ? " icon-only" : ""}"
115
- type="${a}"
143
+ class="btn ${a} ${t}${r ? " has-icon" : ""}${d ? " icon-only" : ""}"
144
+ type="${s}"
116
145
  ${e ? "disabled" : ""}
117
146
  >
118
- ${h}
147
+ ${p}
119
148
  </button>
120
149
  `;
121
150
  }
122
151
  }
123
- customElements.define("ui-button", C);
152
+ customElements.define("ui-button", E);
124
153
  class S extends g {
125
154
  constructor() {
126
155
  super();
127
- p(this, "inputEl", null);
128
- p(this, "customValidator", null);
129
- p(this, "validationRule", null);
156
+ u(this, "inputEl", null);
157
+ u(this, "customValidator", null);
158
+ u(this, "validationRule", null);
130
159
  this.state = {
131
160
  value: "",
132
161
  valid: !0,
@@ -140,8 +169,8 @@ class S extends g {
140
169
  connectedCallback() {
141
170
  this.setAttribute("data-ui", "input"), super.connectedCallback();
142
171
  }
143
- attributeChangedCallback(t, e, a) {
144
- e !== a && t !== "value" && this.render();
172
+ attributeChangedCallback(t, e, s) {
173
+ e !== s && t !== "value" && this.render();
145
174
  }
146
175
  setCustomValidator(t) {
147
176
  this.customValidator = t, this.validate();
@@ -193,8 +222,8 @@ class S extends g {
193
222
  return { valid: !1, message: `Must end with @${t.domain}` };
194
223
  break;
195
224
  case "match":
196
- const a = document.querySelector(t.selector);
197
- if (a && e !== a.value)
225
+ const s = document.querySelector(t.selector);
226
+ if (s && e !== s.value)
198
227
  return { valid: !1, message: "Values do not match" };
199
228
  break;
200
229
  case "minLength":
@@ -241,14 +270,14 @@ class S extends g {
241
270
  }
242
271
  updateErrorDisplay() {
243
272
  if (!this.inputEl) return;
244
- const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), a = this.getName();
245
- 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`);
273
+ const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), s = this.getName();
274
+ 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)), s && this.inputEl.setAttribute("aria-describedby", `${s}-error`);
246
275
  }
247
276
  needsRender() {
248
277
  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");
249
278
  }
250
279
  render() {
251
- const t = this.getType(), e = this.getLabel(), a = this.getPlaceholder(), s = this.getName(), n = this.getErrorMessage(), r = this.hasAttribute("required"), o = 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 !== "";
280
+ const t = this.getType(), e = this.getLabel(), s = this.getPlaceholder(), i = this.getName(), n = this.getErrorMessage(), r = this.hasAttribute("required"), o = this.getAttribute("pattern"), c = this.getAttribute("minlength"), d = this.getAttribute("maxlength"), p = this.getAttribute("min"), h = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
252
281
  this.shadowRoot.innerHTML = `
253
282
  <style>${f}</style>
254
283
  <div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
@@ -257,30 +286,30 @@ class S extends g {
257
286
  part="input"
258
287
  class="input-field"
259
288
  type="${t}"
260
- placeholder="${a}"
261
- name="${s}"
289
+ placeholder="${s}"
290
+ name="${i}"
262
291
  .value="${this.state.value}"
263
292
  ${r ? "required" : ""}
264
293
  ${o ? `pattern="${o}"` : ""}
265
- ${d ? `minlength="${d}"` : ""}
266
- ${c ? `maxlength="${c}"` : ""}
267
- ${h ? `min="${h}"` : ""}
268
- ${u ? `max="${u}"` : ""}
294
+ ${c ? `minlength="${c}"` : ""}
295
+ ${d ? `maxlength="${d}"` : ""}
296
+ ${p ? `min="${p}"` : ""}
297
+ ${h ? `max="${h}"` : ""}
269
298
  ${b ? "disabled" : ""}
270
299
  aria-invalid="${m}"
271
- aria-describedby="${s}-error"
300
+ aria-describedby="${i}-error"
272
301
  />
273
- <span class="input-error${m && n ? "" : " hidden"}" id="${s}-error" role="alert">${n}</span>
302
+ <span class="input-error${m && n ? "" : " hidden"}" id="${i}-error" role="alert">${n}</span>
274
303
  </div>
275
304
  `, 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)));
276
305
  }
277
306
  }
278
307
  customElements.define("ui-input", S);
279
- class z extends g {
308
+ class L extends g {
280
309
  constructor() {
281
310
  super(...arguments);
282
- p(this, "columns", []);
283
- p(this, "rows", []);
311
+ u(this, "columns", []);
312
+ u(this, "rows", []);
284
313
  }
285
314
  connectedCallback() {
286
315
  this.setAttribute("data-ui", "table"), super.connectedCallback();
@@ -292,15 +321,15 @@ class z extends g {
292
321
  return { columns: this.columns, rows: this.rows };
293
322
  }
294
323
  render() {
295
- const t = this.columns.filter((s) => s.visible !== !1), e = t.map(
296
- (s) => `<th class="align-${s.align ?? "left"}">${s.label}</th>`
297
- ).join(""), a = this.rows.map(
298
- (s, n) => `<tr data-row-index="${n}">${t.map(
324
+ const t = this.columns.filter((i) => i.visible !== !1), e = t.map(
325
+ (i) => `<th class="align-${i.align ?? "left"}">${i.label}</th>`
326
+ ).join(""), s = this.rows.map(
327
+ (i, n) => `<tr data-row-index="${n}">${t.map(
299
328
  (r) => r.actions ? `<td class="align-center actions-cell">
300
329
  ${r.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
301
330
  ${r.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
302
331
  </td>` : `<td class="align-${r.align ?? "left"}">${String(
303
- s[r.key] ?? ""
332
+ i[r.key] ?? ""
304
333
  )}</td>`
305
334
  ).join("")}</tr>`
306
335
  ).join("");
@@ -309,29 +338,29 @@ class z extends g {
309
338
  <div class="table-wrap">
310
339
  <table>
311
340
  <thead><tr>${e}</tr></thead>
312
- <tbody>${a}</tbody>
341
+ <tbody>${s}</tbody>
313
342
  </table>
314
343
  </div>
315
- `, this.shadowRoot.querySelectorAll(".action-btn").forEach((s) => {
316
- s.addEventListener("click", (n) => {
317
- const r = n.currentTarget, o = r.dataset.action, d = parseInt(r.dataset.rowIndex || "0", 10), c = o === "edit" ? "edit-action" : "delete-action";
318
- this.dispatchEvent(new CustomEvent(c, {
344
+ `, this.shadowRoot.querySelectorAll(".action-btn").forEach((i) => {
345
+ i.addEventListener("click", (n) => {
346
+ const r = n.currentTarget, o = r.dataset.action, c = parseInt(r.dataset.rowIndex || "0", 10), d = o === "edit" ? "edit-action" : "delete-action";
347
+ this.dispatchEvent(new CustomEvent(d, {
319
348
  bubbles: !0,
320
349
  composed: !0,
321
- detail: { row: this.rows[d], rowIndex: d }
350
+ detail: { row: this.rows[c], rowIndex: c }
322
351
  }));
323
352
  });
324
353
  });
325
354
  }
326
355
  }
327
- customElements.define("ui-table", z);
328
- class L extends g {
356
+ customElements.define("ui-table", L);
357
+ class z extends g {
329
358
  constructor() {
330
359
  super(...arguments);
331
- p(this, "inputElement", null);
332
- p(this, "isConnected", !1);
333
- p(this, "isInternalUpdate", !1);
334
- p(this, "hasRendered", !1);
360
+ u(this, "inputElement", null);
361
+ u(this, "isConnected", !1);
362
+ u(this, "isInternalUpdate", !1);
363
+ u(this, "hasRendered", !1);
335
364
  }
336
365
  connectedCallback() {
337
366
  this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
@@ -339,8 +368,8 @@ class L extends g {
339
368
  static get observedAttributes() {
340
369
  return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
341
370
  }
342
- attributeChangedCallback(t, e, a) {
343
- if (!(!this.isConnected || e === a)) {
371
+ attributeChangedCallback(t, e, s) {
372
+ if (!(!this.isConnected || e === s)) {
344
373
  if (this.isInternalUpdate && t === "value") {
345
374
  this.isInternalUpdate = !1;
346
375
  return;
@@ -352,8 +381,8 @@ class L extends g {
352
381
  if (!this.shadowRoot) return;
353
382
  const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
354
383
  if (t && e) {
355
- const a = this.getValue(), s = this.getFormat(), n = this.formatDate(a, s);
356
- t.value = n, e.value = a;
384
+ const s = this.getValue(), i = this.getFormat(), n = this.formatDate(s, i);
385
+ t.value = n, e.value = s;
357
386
  }
358
387
  }
359
388
  getFormat() {
@@ -383,18 +412,18 @@ class L extends g {
383
412
  */
384
413
  formatDate(t, e) {
385
414
  if (!t) return "";
386
- const a = t.split("-");
387
- if (a.length !== 3) return t;
388
- const [s, n, r] = a;
415
+ const s = t.split("-");
416
+ if (s.length !== 3) return t;
417
+ const [i, n, r] = s;
389
418
  switch (e) {
390
419
  case "DD/MM/YYYY":
391
- return `${r}/${n}/${s}`;
420
+ return `${r}/${n}/${i}`;
392
421
  case "MM/DD/YYYY":
393
- return `${n}/${r}/${s}`;
422
+ return `${n}/${r}/${i}`;
394
423
  case "DD-MM-YYYY":
395
- return `${r}-${n}-${s}`;
424
+ return `${r}-${n}-${i}`;
396
425
  case "MM-DD-YYYY":
397
- return `${n}-${r}-${s}`;
426
+ return `${n}-${r}-${i}`;
398
427
  case "YYYY-MM-DD":
399
428
  default:
400
429
  return t;
@@ -405,44 +434,44 @@ class L extends g {
405
434
  */
406
435
  parseDate(t, e) {
407
436
  if (!t) return "";
408
- let a, s, n, r;
437
+ let s, i, n, r;
409
438
  switch (e) {
410
439
  case "DD/MM/YYYY":
411
- if (a = t.split("/"), a.length !== 3) return "";
412
- [r, n, s] = a;
440
+ if (s = t.split("/"), s.length !== 3) return "";
441
+ [r, n, i] = s;
413
442
  break;
414
443
  case "MM/DD/YYYY":
415
- if (a = t.split("/"), a.length !== 3) return "";
416
- [n, r, s] = a;
444
+ if (s = t.split("/"), s.length !== 3) return "";
445
+ [n, r, i] = s;
417
446
  break;
418
447
  case "DD-MM-YYYY":
419
- if (a = t.split("-"), a.length !== 3) return "";
420
- [r, n, s] = a;
448
+ if (s = t.split("-"), s.length !== 3) return "";
449
+ [r, n, i] = s;
421
450
  break;
422
451
  case "MM-DD-YYYY":
423
- if (a = t.split("-"), a.length !== 3) return "";
424
- [n, r, s] = a;
452
+ if (s = t.split("-"), s.length !== 3) return "";
453
+ [n, r, i] = s;
425
454
  break;
426
455
  case "YYYY-MM-DD":
427
456
  default:
428
457
  return t;
429
458
  }
430
- return n = n.padStart(2, "0"), r = r.padStart(2, "0"), `${s}-${n}-${r}`;
459
+ return n = n.padStart(2, "0"), r = r.padStart(2, "0"), `${i}-${n}-${r}`;
431
460
  }
432
461
  attachEventListeners() {
433
462
  if (!this.shadowRoot) return;
434
- const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), a = this.shadowRoot.querySelector(".calendar-btn");
463
+ const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), s = this.shadowRoot.querySelector(".calendar-btn");
435
464
  if (!t || !e) return;
436
- const s = () => {
465
+ const i = () => {
437
466
  const n = t.value, r = this.getFormat(), o = this.parseDate(n, r);
438
467
  this.isValidDate(o) ? (e.value = o, t.classList.remove("invalid"), this.dispatchDateChange(o)) : n === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
439
468
  };
440
- t.addEventListener("blur", s), t.addEventListener("keydown", (n) => {
441
- n.key === "Enter" && (s(), t.blur());
469
+ t.addEventListener("blur", i), t.addEventListener("keydown", (n) => {
470
+ n.key === "Enter" && (i(), t.blur());
442
471
  }), e.addEventListener("change", (n) => {
443
- const o = n.target.value, d = this.getFormat(), c = this.formatDate(o, d);
444
- t.value = c, t.classList.remove("invalid"), this.dispatchDateChange(o);
445
- }), a && a.addEventListener("click", async (n) => {
472
+ const o = n.target.value, c = this.getFormat(), d = this.formatDate(o, c);
473
+ t.value = d, t.classList.remove("invalid"), this.dispatchDateChange(o);
474
+ }), s && s.addEventListener("click", async (n) => {
446
475
  n.preventDefault(), n.stopPropagation(), e.style.pointerEvents = "auto";
447
476
  try {
448
477
  typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
@@ -461,12 +490,12 @@ class L extends g {
461
490
  return e instanceof Date && !isNaN(e.getTime());
462
491
  }
463
492
  dispatchDateChange(t) {
464
- const e = this.getFormat(), a = this.formatDate(t, e);
493
+ const e = this.getFormat(), s = this.formatDate(t, e);
465
494
  this.dispatchEvent(
466
495
  new CustomEvent("date-change", {
467
496
  detail: {
468
497
  value: t,
469
- formattedValue: a,
498
+ formattedValue: s,
470
499
  format: e
471
500
  },
472
501
  bubbles: !0,
@@ -500,17 +529,17 @@ class L extends g {
500
529
  this.setAttribute("value", "");
501
530
  }
502
531
  render() {
503
- const t = this.getValue(), e = this.getFormat(), a = this.getMin(), s = this.getMax(), n = this.isDisabled(), r = this.getPlaceholder(), o = this.getLabel(), d = this.formatDate(t, e), c = o !== "";
532
+ const t = this.getValue(), e = this.getFormat(), s = this.getMin(), i = this.getMax(), n = this.isDisabled(), r = this.getPlaceholder(), o = this.getLabel(), c = this.formatDate(t, e), d = o !== "";
504
533
  this.shadowRoot.innerHTML = `
505
534
  <style>${f}</style>
506
535
  <div class="date-picker-container">
507
- ${c ? `<label class="date-picker-label">${o}</label>` : ""}
536
+ ${d ? `<label class="date-picker-label">${o}</label>` : ""}
508
537
  <div class="date-input-wrapper ${n ? "disabled" : ""}">
509
538
  <input
510
539
  type="text"
511
540
  class="formatted-input"
512
541
  part="input"
513
- value="${d}"
542
+ value="${c}"
514
543
  placeholder="${r}"
515
544
  ${n ? "disabled" : ""}
516
545
  />
@@ -528,8 +557,8 @@ class L extends g {
528
557
  type="date"
529
558
  class="hidden-date-input"
530
559
  value="${t}"
531
- ${a ? `min="${a}"` : ""}
532
- ${s ? `max="${s}"` : ""}
560
+ ${s ? `min="${s}"` : ""}
561
+ ${i ? `max="${i}"` : ""}
533
562
  ${n ? "disabled" : ""}
534
563
  />
535
564
  </div>
@@ -538,13 +567,13 @@ class L extends g {
538
567
  `, this.attachEventListeners(), this.hasRendered = !0;
539
568
  }
540
569
  }
541
- customElements.define("ui-date-picker", L);
570
+ customElements.define("ui-date-picker", z);
542
571
  class I extends g {
543
572
  constructor() {
544
573
  super(...arguments);
545
- p(this, "_total", 0);
546
- p(this, "_currentPage", 1);
547
- p(this, "_pageSize", 10);
574
+ u(this, "_total", 0);
575
+ u(this, "_currentPage", 1);
576
+ u(this, "_pageSize", 10);
548
577
  }
549
578
  connectedCallback() {
550
579
  this.setAttribute("data-ui", "pagination"), super.connectedCallback();
@@ -552,16 +581,16 @@ class I extends g {
552
581
  static get observedAttributes() {
553
582
  return ["total", "current-page", "page-size"];
554
583
  }
555
- attributeChangedCallback(t, e, a) {
584
+ attributeChangedCallback(t, e, s) {
556
585
  switch (t) {
557
586
  case "total":
558
- this._total = parseInt(a, 10) || 0;
587
+ this._total = parseInt(s, 10) || 0;
559
588
  break;
560
589
  case "current-page":
561
- this._currentPage = parseInt(a, 10) || 1;
590
+ this._currentPage = parseInt(s, 10) || 1;
562
591
  break;
563
592
  case "page-size":
564
- this._pageSize = parseInt(a, 10) || 10;
593
+ this._pageSize = parseInt(s, 10) || 10;
565
594
  break;
566
595
  }
567
596
  this.render();
@@ -604,17 +633,17 @@ class I extends g {
604
633
  getPageNumbers() {
605
634
  const t = this.totalPages, e = this._currentPage;
606
635
  if (t <= 7)
607
- return Array.from({ length: t }, (s, n) => n + 1);
608
- const a = [];
609
- 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;
636
+ return Array.from({ length: t }, (i, n) => n + 1);
637
+ const s = [];
638
+ return e <= 3 ? s.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? s.push(1, "...", t - 3, t - 2, t - 1, t) : s.push(1, "...", e - 1, e, e + 1, "...", t), s;
610
639
  }
611
640
  render() {
612
- const t = this.totalPages, e = this._currentPage, a = this.getPageNumbers(), s = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
641
+ const t = this.totalPages, e = this._currentPage, s = this.getPageNumbers(), i = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
613
642
  this.shadowRoot.innerHTML = `
614
643
  <style>${f}</style>
615
644
  <div class="pagination-container">
616
645
  <div class="pagination-info">
617
- ${this._total > 0 ? `Showing ${s} to ${n} of ${this._total}` : "No results"}
646
+ ${this._total > 0 ? `Showing ${i} to ${n} of ${this._total}` : "No results"}
618
647
  </div>
619
648
  ${t > 1 ? `
620
649
  <nav class="pagination" role="navigation" aria-label="Pagination">
@@ -628,7 +657,7 @@ class I extends g {
628
657
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
629
658
  </svg>
630
659
  </button>
631
- ${a.map((r) => r === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
660
+ ${s.map((r) => r === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
632
661
  <button
633
662
  class="page-btn ${r === e ? "active" : ""}"
634
663
  data-page="${r}"
@@ -655,15 +684,15 @@ class I extends g {
655
684
  }
656
685
  attachEventListeners() {
657
686
  this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
658
- const a = t.target.closest(".page-btn");
659
- if (!a || a.disabled) return;
660
- const s = a.dataset.page;
661
- if (s === "prev")
687
+ const s = t.target.closest(".page-btn");
688
+ if (!s || s.disabled) return;
689
+ const i = s.dataset.page;
690
+ if (i === "prev")
662
691
  this.handlePageChange(this._currentPage - 1);
663
- else if (s === "next")
692
+ else if (i === "next")
664
693
  this.handlePageChange(this._currentPage + 1);
665
- else if (s) {
666
- const n = parseInt(s, 10);
694
+ else if (i) {
695
+ const n = parseInt(i, 10);
667
696
  isNaN(n) || this.handlePageChange(n);
668
697
  }
669
698
  });
@@ -673,7 +702,7 @@ customElements.define("ui-pagination", I);
673
702
  class M extends g {
674
703
  constructor() {
675
704
  super(...arguments);
676
- p(this, "isOpen", this.useSignal(!1));
705
+ u(this, "isOpen", this.useSignal(!1));
677
706
  }
678
707
  connectedCallback() {
679
708
  this.setAttribute("data-ui", "modal"), super.connectedCallback(), this.setupEventListeners();
@@ -681,8 +710,8 @@ class M extends g {
681
710
  static get observedAttributes() {
682
711
  return ["open"];
683
712
  }
684
- attributeChangedCallback(t, e, a) {
685
- t === "open" && e !== a && this.isOpen.set(a !== null);
713
+ attributeChangedCallback(t, e, s) {
714
+ t === "open" && e !== s && this.isOpen.set(s !== null);
686
715
  }
687
716
  setupEventListeners() {
688
717
  document.addEventListener("keydown", (t) => {
@@ -699,7 +728,7 @@ class M extends g {
699
728
  t.target.classList.contains("modal-backdrop") && !this.hasAttribute("no-close-on-backdrop") && this.close();
700
729
  }
701
730
  render() {
702
- const t = this.isOpen.get(), e = this.getAttribute("title") || "", a = this.getAttribute("size") || "md";
731
+ const t = this.isOpen.get(), e = this.getAttribute("title") || "", s = this.getAttribute("size") || "md";
703
732
  this.shadowRoot.innerHTML = `
704
733
  <style>
705
734
  ${f}
@@ -713,7 +742,7 @@ class M extends g {
713
742
  </style>
714
743
 
715
744
  <div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
716
- <div class="modal-content ${a}" part="content" @click="${(r) => r.stopPropagation()}">
745
+ <div class="modal-content ${s}" part="content" @click="${(r) => r.stopPropagation()}">
717
746
  ${e ? `
718
747
  <div class="modal-header" part="header">
719
748
  <h2 class="modal-title">${e}</h2>
@@ -736,18 +765,18 @@ class M extends g {
736
765
  </div>
737
766
  </div>
738
767
  `;
739
- const s = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
740
- s == null || s.addEventListener("click", (r) => this.handleBackdropClick(r)), n == null || n.addEventListener("click", () => this.close());
768
+ const i = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
769
+ i == null || i.addEventListener("click", (r) => this.handleBackdropClick(r)), n == null || n.addEventListener("click", () => this.close());
741
770
  }
742
771
  }
743
772
  customElements.define("ui-modal", M);
744
773
  class R extends g {
745
774
  constructor() {
746
775
  super(...arguments);
747
- p(this, "isOpen", this.useSignal(!1));
748
- p(this, "selectedValue", this.useSignal(""));
749
- p(this, "searchTerm", this.useSignal(""));
750
- p(this, "options", []);
776
+ u(this, "isOpen", this.useSignal(!1));
777
+ u(this, "selectedValue", this.useSignal(""));
778
+ u(this, "searchTerm", this.useSignal(""));
779
+ u(this, "options", []);
751
780
  }
752
781
  connectedCallback() {
753
782
  this.setAttribute("data-ui", "select"), super.connectedCallback(), this.parseOptions(), this.setupClickOutside();
@@ -755,8 +784,8 @@ class R extends g {
755
784
  static get observedAttributes() {
756
785
  return ["value", "disabled", "placeholder", "options"];
757
786
  }
758
- attributeChangedCallback(t, e, a) {
759
- t === "value" && e !== a && this.selectedValue.set(a || ""), t === "options" && e !== a && this.parseOptions(), this.render();
787
+ attributeChangedCallback(t, e, s) {
788
+ t === "value" && e !== s && this.selectedValue.set(s || ""), t === "options" && e !== s && this.parseOptions(), this.render();
760
789
  }
761
790
  parseOptions() {
762
791
  const t = this.getAttribute("options");
@@ -795,16 +824,16 @@ class R extends g {
795
824
  ) : this.options;
796
825
  }
797
826
  getSelectedLabel() {
798
- const t = this.selectedValue.get(), e = this.options.find((a) => a.value === t);
827
+ const t = this.selectedValue.get(), e = this.options.find((s) => s.value === t);
799
828
  return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
800
829
  }
801
830
  render() {
802
- const t = this.isOpen.get(), e = this.hasAttribute("disabled"), a = this.hasAttribute("searchable"), s = this.getAttribute("label") || "", n = this.getSelectedLabel(), r = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
831
+ const t = this.isOpen.get(), e = this.hasAttribute("disabled"), s = this.hasAttribute("searchable"), i = this.getAttribute("label") || "", n = this.getSelectedLabel(), r = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
803
832
  this.shadowRoot.innerHTML = `
804
833
  <style>${f}</style>
805
834
 
806
835
  <div class="select-container">
807
- ${s ? `<label class="select-label">${s}</label>` : ""}
836
+ ${i ? `<label class="select-label">${i}</label>` : ""}
808
837
 
809
838
  <div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
810
839
  <span class="select-placeholder ${o ? "has-selection" : ""}">${n}</span>
@@ -816,7 +845,7 @@ class R extends g {
816
845
  </div>
817
846
 
818
847
  <div class="select-dropdown ${t ? "open" : ""}" part="dropdown">
819
- ${a ? `
848
+ ${s ? `
820
849
  <input
821
850
  type="text"
822
851
  class="select-search"
@@ -825,13 +854,13 @@ class R extends g {
825
854
  >
826
855
  ` : ""}
827
856
 
828
- ${r.length > 0 ? r.map((u) => `
857
+ ${r.length > 0 ? r.map((h) => `
829
858
  <div
830
- class="select-option ${u.value === this.selectedValue.get() ? "selected" : ""} ${u.disabled ? "disabled" : ""}"
831
- data-value="${u.value}"
859
+ class="select-option ${h.value === this.selectedValue.get() ? "selected" : ""} ${h.disabled ? "disabled" : ""}"
860
+ data-value="${h.value}"
832
861
  part="option"
833
862
  >
834
- ${u.label}
863
+ ${h.label}
835
864
  </div>
836
865
  `).join("") : `
837
866
  <div class="select-empty">No options found</div>
@@ -839,14 +868,14 @@ class R extends g {
839
868
  </div>
840
869
  </div>
841
870
  `;
842
- const d = this.shadowRoot.querySelector(".select-trigger"), c = this.shadowRoot.querySelector(".select-search"), h = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
843
- d == null || d.addEventListener("click", () => this.toggleDropdown()), d == null || d.addEventListener("keydown", (u) => {
844
- (u.key === "Enter" || u.key === " ") && (u.preventDefault(), this.toggleDropdown());
845
- }), c == null || c.addEventListener("input", (u) => {
846
- this.handleSearch(u.target.value);
847
- }), c == null || c.addEventListener("click", (u) => u.stopPropagation()), h.forEach((u) => {
848
- u.addEventListener("click", () => {
849
- const b = u.getAttribute("data-value");
871
+ const c = this.shadowRoot.querySelector(".select-trigger"), d = this.shadowRoot.querySelector(".select-search"), p = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
872
+ c == null || c.addEventListener("click", () => this.toggleDropdown()), c == null || c.addEventListener("keydown", (h) => {
873
+ (h.key === "Enter" || h.key === " ") && (h.preventDefault(), this.toggleDropdown());
874
+ }), d == null || d.addEventListener("input", (h) => {
875
+ this.handleSearch(h.target.value);
876
+ }), d == null || d.addEventListener("click", (h) => h.stopPropagation()), p.forEach((h) => {
877
+ h.addEventListener("click", () => {
878
+ const b = h.getAttribute("data-value");
850
879
  b && this.selectOption(b);
851
880
  });
852
881
  });
@@ -856,8 +885,8 @@ customElements.define("ui-select", R);
856
885
  class D extends g {
857
886
  constructor() {
858
887
  super(...arguments);
859
- p(this, "checked", this.useSignal(!1));
860
- p(this, "indeterminate", this.useSignal(!1));
888
+ u(this, "checked", this.useSignal(!1));
889
+ u(this, "indeterminate", this.useSignal(!1));
861
890
  }
862
891
  connectedCallback() {
863
892
  this.setAttribute("data-ui", "checkbox"), super.connectedCallback();
@@ -865,8 +894,8 @@ class D extends g {
865
894
  static get observedAttributes() {
866
895
  return ["checked", "disabled", "indeterminate"];
867
896
  }
868
- attributeChangedCallback(t, e, a) {
869
- t === "checked" && e !== a && this.checked.set(a !== null), t === "indeterminate" && e !== a && this.indeterminate.set(a !== null), this.render();
897
+ attributeChangedCallback(t, e, s) {
898
+ t === "checked" && e !== s && this.checked.set(s !== null), t === "indeterminate" && e !== s && this.indeterminate.set(s !== null), this.render();
870
899
  }
871
900
  handleChange() {
872
901
  if (this.hasAttribute("disabled")) return;
@@ -885,7 +914,7 @@ class D extends g {
885
914
  this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
886
915
  }
887
916
  render() {
888
- const t = this.checked.get(), e = this.indeterminate.get(), a = this.hasAttribute("disabled"), s = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", r = {
917
+ const t = this.checked.get(), e = this.indeterminate.get(), s = this.hasAttribute("disabled"), i = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", r = {
889
918
  sm: "size-sm",
890
919
  md: "size-md",
891
920
  lg: "size-lg"
@@ -897,9 +926,9 @@ class D extends g {
897
926
  <input
898
927
  type="checkbox"
899
928
  ${t ? "checked" : ""}
900
- ${a ? "disabled" : ""}
929
+ ${s ? "disabled" : ""}
901
930
  >
902
- <div class="checkbox-box ${r[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${a ? "disabled" : ""}" part="checkbox">
931
+ <div class="checkbox-box ${r[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${s ? "disabled" : ""}" part="checkbox">
903
932
  <svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
904
933
  <polyline points="20 6 9 17 4 12"></polyline>
905
934
  </svg>
@@ -907,12 +936,12 @@ class D extends g {
907
936
  <line x1="5" y1="12" x2="19" y2="12"></line>
908
937
  </svg>
909
938
  </div>
910
- ${s ? `<span class="checkbox-label">${s}</span>` : "<slot></slot>"}
939
+ ${i ? `<span class="checkbox-label">${i}</span>` : "<slot></slot>"}
911
940
  </label>
912
941
  `;
913
942
  const o = this.shadowRoot.querySelector(".checkbox-container");
914
- o == null || o.addEventListener("click", (d) => {
915
- d.preventDefault(), this.handleChange();
943
+ o == null || o.addEventListener("click", (c) => {
944
+ c.preventDefault(), this.handleChange();
916
945
  });
917
946
  }
918
947
  }
@@ -921,16 +950,16 @@ const T = ':host{display:block}.tabs{background:var(--color-page-bg);border-radi
921
950
  class Y extends g {
922
951
  constructor() {
923
952
  super(...arguments);
924
- p(this, "activeId", null);
925
- p(this, "indicator", null);
926
- p(this, "handleTabClick", (t) => {
953
+ u(this, "activeId", null);
954
+ u(this, "indicator", null);
955
+ u(this, "handleTabClick", (t) => {
927
956
  const e = t.target;
928
957
  if (!e) return;
929
- const a = e.closest('[slot="tab"][data-tab]');
930
- if (!a) return;
958
+ const s = e.closest('[slot="tab"][data-tab]');
959
+ if (!s) return;
931
960
  t.preventDefault();
932
- const s = a.getAttribute("data-tab");
933
- s && this.setActive(s);
961
+ const i = s.getAttribute("data-tab");
962
+ i && this.setActive(i);
934
963
  });
935
964
  }
936
965
  static get observedAttributes() {
@@ -942,8 +971,8 @@ class Y extends g {
942
971
  disconnectedCallback() {
943
972
  this.removeEventListener("click", this.handleTabClick), super.disconnectedCallback();
944
973
  }
945
- attributeChangedCallback(t, e, a) {
946
- t === "active" && e !== a && (this.activeId = a, this.syncTabs());
974
+ attributeChangedCallback(t, e, s) {
975
+ t === "active" && e !== s && (this.activeId = s, this.syncTabs());
947
976
  }
948
977
  setActive(t) {
949
978
  this.activeId !== t && (this.activeId = t, this.setAttribute("active", t), this.syncTabs(), this.dispatchEvent(new CustomEvent("tab-change", {
@@ -964,43 +993,43 @@ class Y extends g {
964
993
  }
965
994
  getActiveId(t) {
966
995
  const e = this.getAttribute("active");
967
- if (e && t.some((s) => s.getAttribute("data-tab") === e))
996
+ if (e && t.some((i) => i.getAttribute("data-tab") === e))
968
997
  return e;
969
- if (this.activeId && t.some((s) => s.getAttribute("data-tab") === this.activeId))
998
+ if (this.activeId && t.some((i) => i.getAttribute("data-tab") === this.activeId))
970
999
  return this.activeId;
971
- const a = t.find((s) => s.getAttribute("data-tab"));
972
- return (a == null ? void 0 : a.getAttribute("data-tab")) ?? null;
1000
+ const s = t.find((i) => i.getAttribute("data-tab"));
1001
+ return (s == null ? void 0 : s.getAttribute("data-tab")) ?? null;
973
1002
  }
974
1003
  syncTabs() {
975
1004
  const t = this.getTabs(), e = this.getPanels();
976
1005
  if (t.length === 0) return;
977
- const a = this.getActiveId(t);
978
- a && (this.activeId = a, this.getAttribute("active") !== a && this.setAttribute("active", a), t.forEach((s) => {
979
- const n = s.getAttribute("data-tab");
1006
+ const s = this.getActiveId(t);
1007
+ s && (this.activeId = s, this.getAttribute("active") !== s && this.setAttribute("active", s), t.forEach((i) => {
1008
+ const n = i.getAttribute("data-tab");
980
1009
  if (!n) return;
981
- const r = s.id || `tab-${n}`, o = n === a;
982
- s.id = r, s.setAttribute("role", "tab"), s.setAttribute("aria-selected", String(o)), s.setAttribute("tabindex", o ? "0" : "-1"), s.classList.toggle("is-active", o);
983
- }), e.forEach((s) => {
984
- const n = s.getAttribute("data-tab");
1010
+ const r = i.id || `tab-${n}`, o = n === s;
1011
+ i.id = r, i.setAttribute("role", "tab"), i.setAttribute("aria-selected", String(o)), i.setAttribute("tabindex", o ? "0" : "-1"), i.classList.toggle("is-active", o);
1012
+ }), e.forEach((i) => {
1013
+ const n = i.getAttribute("data-tab");
985
1014
  if (!n) return;
986
- const r = s.id || `panel-${n}`, o = n === a;
987
- s.id = r, s.setAttribute("role", "tabpanel"), s.toggleAttribute("hidden", !o), s.classList.toggle("is-active", o);
988
- const d = t.find((c) => c.getAttribute("data-tab") === n);
989
- d && (d.setAttribute("aria-controls", r), s.setAttribute("aria-labelledby", d.id));
990
- }), this.updateIndicator(t, a));
1015
+ const r = i.id || `panel-${n}`, o = n === s;
1016
+ i.id = r, i.setAttribute("role", "tabpanel"), i.toggleAttribute("hidden", !o), i.classList.toggle("is-active", o);
1017
+ const c = t.find((d) => d.getAttribute("data-tab") === n);
1018
+ c && (c.setAttribute("aria-controls", r), i.setAttribute("aria-labelledby", c.id));
1019
+ }), this.updateIndicator(t, s));
991
1020
  }
992
1021
  updateIndicator(t, e) {
993
1022
  if (!this.indicator) return;
994
- const a = t.find((o) => o.getAttribute("data-tab") === e);
995
- if (!a) return;
996
- const s = this.shadowRoot.querySelector(".tablist");
1023
+ const s = t.find((o) => o.getAttribute("data-tab") === e);
997
1024
  if (!s) return;
998
- a.getBoundingClientRect(), s.getBoundingClientRect();
999
- const n = t.indexOf(a);
1025
+ const i = this.shadowRoot.querySelector(".tablist");
1026
+ if (!i) return;
1027
+ s.getBoundingClientRect(), i.getBoundingClientRect();
1028
+ const n = t.indexOf(s);
1000
1029
  let r = 0;
1001
1030
  for (let o = 0; o < n; o++)
1002
1031
  r += t[o].offsetWidth;
1003
- this.indicator.style.transform = `translateX(${r}px)`, this.indicator.style.width = `${a.offsetWidth}px`;
1032
+ this.indicator.style.transform = `translateX(${r}px)`, this.indicator.style.width = `${s.offsetWidth}px`;
1004
1033
  }
1005
1034
  render() {
1006
1035
  this.shadowRoot.innerHTML = `
@@ -1021,7 +1050,7 @@ class Y extends g {
1021
1050
  }
1022
1051
  customElements.define("ui-tabs", Y);
1023
1052
  const q = ':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}}';
1024
- class P extends g {
1053
+ class H extends g {
1025
1054
  connectedCallback() {
1026
1055
  this.setAttribute("data-ui", "card"), super.connectedCallback();
1027
1056
  }
@@ -1041,18 +1070,18 @@ class P extends g {
1041
1070
  return this.getAttribute("rounded") !== "false";
1042
1071
  }
1043
1072
  getVariant() {
1044
- const i = this.getAttribute("variant");
1045
- return i === "elevated" || i === "bordered" || i === "ghost" ? i : "default";
1073
+ const a = this.getAttribute("variant");
1074
+ return a === "elevated" || a === "bordered" || a === "ghost" ? a : "default";
1046
1075
  }
1047
1076
  getElevation() {
1048
- const i = this.getAttribute("elevation");
1049
- return i === "none" || i === "sm" || i === "md" || i === "lg" || i === "xl" ? i : "sm";
1077
+ const a = this.getAttribute("elevation");
1078
+ return a === "none" || a === "sm" || a === "md" || a === "lg" || a === "xl" ? a : "sm";
1050
1079
  }
1051
1080
  render() {
1052
- const i = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), a = this.getVariant(), s = this.getElevation();
1081
+ const a = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), s = this.getVariant(), i = this.getElevation();
1053
1082
  let n = "none";
1054
- if (i)
1055
- switch (s) {
1083
+ if (a)
1084
+ switch (i) {
1056
1085
  case "sm":
1057
1086
  n = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
1058
1087
  break;
@@ -1078,22 +1107,22 @@ class P extends g {
1078
1107
  }
1079
1108
 
1080
1109
  .card.custom-shadow:hover {
1081
- box-shadow: ${i && s !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (r, o, d) => `rgba(${o}, ${Math.min(parseFloat(d) * 1.3, 0.25)})`) : "none"};
1110
+ box-shadow: ${a && i !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (r, o, c) => `rgba(${o}, ${Math.min(parseFloat(c) * 1.3, 0.25)})`) : "none"};
1082
1111
  }
1083
1112
  </style>
1084
- <div class="card ${a} ${e ? "rounded" : "square"} ${i ? "custom-shadow" : "no-shadow"}">
1113
+ <div class="card ${s} ${e ? "rounded" : "square"} ${a ? "custom-shadow" : "no-shadow"}">
1085
1114
  <slot></slot>
1086
1115
  </div>
1087
1116
  `;
1088
1117
  }
1089
1118
  }
1090
- customElements.define("ui-card", P);
1091
- 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%}}";
1092
- class H extends g {
1119
+ customElements.define("ui-card", H);
1120
+ const P = ":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%}}";
1121
+ class O extends g {
1093
1122
  constructor() {
1094
1123
  super(...arguments);
1095
- p(this, "toasts", /* @__PURE__ */ new Map());
1096
- p(this, "toastCounter", 0);
1124
+ u(this, "toasts", /* @__PURE__ */ new Map());
1125
+ u(this, "toastCounter", 0);
1097
1126
  }
1098
1127
  connectedCallback() {
1099
1128
  this.setAttribute("data-ui", "toast"), super.connectedCallback();
@@ -1109,14 +1138,14 @@ class H extends g {
1109
1138
  return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
1110
1139
  }
1111
1140
  getIcon(t) {
1112
- var s;
1113
- const a = {
1141
+ var i;
1142
+ const s = {
1114
1143
  success: "check-circle",
1115
1144
  error: "x-circle",
1116
1145
  warning: "alert-triangle",
1117
1146
  info: "info"
1118
1147
  }[t];
1119
- return ((s = k.icons[a]) == null ? void 0 : s.toSvg()) || "";
1148
+ return ((i = w.icons[s]) == null ? void 0 : i.toSvg()) || "";
1120
1149
  }
1121
1150
  /**
1122
1151
  * Show a toast notification
@@ -1126,16 +1155,16 @@ class H extends g {
1126
1155
  show(t) {
1127
1156
  const {
1128
1157
  title: e,
1129
- description: a = "",
1130
- type: s = "info",
1158
+ description: s = "",
1159
+ type: i = "info",
1131
1160
  duration: n = 5e3,
1132
1161
  closable: r = !0
1133
- } = t, o = `toast-${++this.toastCounter}`, d = this.getIcon(s), c = document.createElement("div");
1134
- c.className = `toast ${s}`, c.setAttribute("role", "alert"), c.setAttribute("aria-live", "polite"), c.innerHTML = `
1135
- <div class="toast-icon">${d}</div>
1162
+ } = t, o = `toast-${++this.toastCounter}`, c = this.getIcon(i), d = document.createElement("div");
1163
+ d.className = `toast ${i}`, d.setAttribute("role", "alert"), d.setAttribute("aria-live", "polite"), d.innerHTML = `
1164
+ <div class="toast-icon">${c}</div>
1136
1165
  <div class="toast-content">
1137
1166
  <div class="toast-title">${this.escapeHtml(e)}</div>
1138
- ${a ? `<div class="toast-description">${this.escapeHtml(a)}</div>` : ""}
1167
+ ${s ? `<div class="toast-description">${this.escapeHtml(s)}</div>` : ""}
1139
1168
  </div>
1140
1169
  ${r ? `
1141
1170
  <button class="toast-close" aria-label="Close notification">
@@ -1151,15 +1180,15 @@ class H extends g {
1151
1180
  </div>
1152
1181
  ` : ""}
1153
1182
  `;
1154
- const h = this.shadowRoot.querySelector(".toast-container");
1155
- if (h && h.appendChild(c), r) {
1156
- const b = c.querySelector(".toast-close");
1183
+ const p = this.shadowRoot.querySelector(".toast-container");
1184
+ if (p && p.appendChild(d), r) {
1185
+ const b = d.querySelector(".toast-close");
1157
1186
  b == null || b.addEventListener("click", () => this.dismiss(o));
1158
1187
  }
1159
- let u;
1160
- return n > 0 && (u = window.setTimeout(() => {
1188
+ let h;
1189
+ return n > 0 && (h = window.setTimeout(() => {
1161
1190
  this.dismiss(o);
1162
- }, n)), this.toasts.set(o, { element: c, timer: u }), this.dispatchEvent(
1191
+ }, n)), this.toasts.set(o, { element: d, timer: h }), this.dispatchEvent(
1163
1192
  new CustomEvent("toast-show", {
1164
1193
  bubbles: !0,
1165
1194
  composed: !0,
@@ -1191,17 +1220,17 @@ class H extends g {
1191
1220
  /**
1192
1221
  * Convenience methods for different toast types
1193
1222
  */
1194
- success(t, e, a) {
1195
- return this.show({ title: t, description: e, type: "success", duration: a });
1223
+ success(t, e, s) {
1224
+ return this.show({ title: t, description: e, type: "success", duration: s });
1196
1225
  }
1197
- error(t, e, a) {
1198
- return this.show({ title: t, description: e, type: "error", duration: a });
1226
+ error(t, e, s) {
1227
+ return this.show({ title: t, description: e, type: "error", duration: s });
1199
1228
  }
1200
- warning(t, e, a) {
1201
- return this.show({ title: t, description: e, type: "warning", duration: a });
1229
+ warning(t, e, s) {
1230
+ return this.show({ title: t, description: e, type: "warning", duration: s });
1202
1231
  }
1203
- info(t, e, a) {
1204
- return this.show({ title: t, description: e, type: "info", duration: a });
1232
+ info(t, e, s) {
1233
+ return this.show({ title: t, description: e, type: "info", duration: s });
1205
1234
  }
1206
1235
  escapeHtml(t) {
1207
1236
  const e = document.createElement("div");
@@ -1212,17 +1241,17 @@ class H extends g {
1212
1241
  this.shadowRoot.innerHTML = `
1213
1242
  <style>
1214
1243
  ${f}
1215
- ${O}
1244
+ ${P}
1216
1245
  </style>
1217
1246
  <div class="toast-container ${t}"></div>
1218
1247
  `;
1219
1248
  }
1220
1249
  }
1221
- customElements.define("ui-toast", H);
1250
+ customElements.define("ui-toast", O);
1222
1251
  class F extends g {
1223
1252
  constructor() {
1224
1253
  super(...arguments);
1225
- p(this, "steps", []);
1254
+ u(this, "steps", []);
1226
1255
  }
1227
1256
  connectedCallback() {
1228
1257
  this.setAttribute("data-ui", "stepper"), super.connectedCallback(), this.parseSteps();
@@ -1230,8 +1259,8 @@ class F extends g {
1230
1259
  static get observedAttributes() {
1231
1260
  return ["steps", "active", "orientation", "size"];
1232
1261
  }
1233
- attributeChangedCallback(t, e, a) {
1234
- if (t === "steps" && e !== a && this.parseSteps(), t === "active" && e !== a) {
1262
+ attributeChangedCallback(t, e, s) {
1263
+ if (t === "steps" && e !== s && this.parseSteps(), t === "active" && e !== s) {
1235
1264
  this.render();
1236
1265
  return;
1237
1266
  }
@@ -1261,21 +1290,21 @@ class F extends g {
1261
1290
  const e = parseInt(this.getAttribute("active") || "1", 10);
1262
1291
  return Number.isNaN(e) || t <= 0 ? 1 : Math.min(Math.max(e, 1), t);
1263
1292
  }
1264
- resolveState(t, e, a) {
1265
- return t.state ? t.state : e + 1 < a ? "complete" : e + 1 === a ? "active" : "upcoming";
1293
+ resolveState(t, e, s) {
1294
+ return t.state ? t.state : e + 1 < s ? "complete" : e + 1 === s ? "active" : "upcoming";
1266
1295
  }
1267
1296
  setActive(t) {
1268
1297
  const e = this.steps.length;
1269
1298
  if (e === 0) return;
1270
- const a = Math.min(Math.max(t, 1), e);
1271
- if (a === this.getActiveIndex(e)) return;
1272
- this.setAttribute("active", String(a));
1273
- const s = this.steps[a - 1], n = this.resolveState(s, a - 1, a);
1299
+ const s = Math.min(Math.max(t, 1), e);
1300
+ if (s === this.getActiveIndex(e)) return;
1301
+ this.setAttribute("active", String(s));
1302
+ const i = this.steps[s - 1], n = this.resolveState(i, s - 1, s);
1274
1303
  this.dispatchEvent(
1275
1304
  new CustomEvent("step-change", {
1276
1305
  bubbles: !0,
1277
1306
  composed: !0,
1278
- detail: { index: a, step: s, state: n }
1307
+ detail: { index: s, step: i, state: n }
1279
1308
  })
1280
1309
  );
1281
1310
  }
@@ -1284,24 +1313,24 @@ class F extends g {
1284
1313
  return e.textContent = t, e.innerHTML;
1285
1314
  }
1286
1315
  render() {
1287
- const t = this.getOrientation(), e = this.getSize(), a = this.steps, s = a.length, n = this.getActiveIndex(s);
1316
+ const t = this.getOrientation(), e = this.getSize(), s = this.steps, i = s.length, n = this.getActiveIndex(i);
1288
1317
  this.shadowRoot.innerHTML = `
1289
1318
  <style>${f}</style>
1290
1319
  <div class="stepper-wrap">
1291
- ${s === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
1320
+ ${i === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
1292
1321
  <ol class="stepper ${t} ${e}" role="list">
1293
- ${a.map((r, o) => {
1294
- const d = this.resolveState(r, o, n), c = d === "active", h = r.disabled ? "disabled" : "";
1322
+ ${s.map((r, o) => {
1323
+ const c = this.resolveState(r, o, n), d = c === "active", p = r.disabled ? "disabled" : "";
1295
1324
  return `
1296
- <li class="step ${d} ${h}" data-state="${d}">
1297
- <button class="step-trigger" data-index="${o}" ${r.disabled ? "disabled" : ""} aria-current="${c ? "step" : "false"}">
1325
+ <li class="step ${c} ${p}" data-state="${c}">
1326
+ <button class="step-trigger" data-index="${o}" ${r.disabled ? "disabled" : ""} aria-current="${d ? "step" : "false"}">
1298
1327
  <span class="step-node">${o + 1}</span>
1299
1328
  <span class="step-text">
1300
1329
  <span class="step-title">${this.escapeHtml(r.title || `Step ${o + 1}`)}</span>
1301
1330
  ${r.description ? `<span class="step-desc">${this.escapeHtml(r.description)}</span>` : ""}
1302
1331
  </span>
1303
1332
  </button>
1304
- ${o < s - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
1333
+ ${o < i - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
1305
1334
  </li>
1306
1335
  `;
1307
1336
  }).join("")}
@@ -1317,11 +1346,11 @@ class F extends g {
1317
1346
  }
1318
1347
  }
1319
1348
  customElements.define("ui-stepper", F);
1320
- class V extends g {
1349
+ class U extends g {
1321
1350
  constructor() {
1322
1351
  super(...arguments);
1323
- p(this, "files", this.useSignal([]));
1324
- p(this, "isDragging", this.useSignal(!1));
1352
+ u(this, "files", this.useSignal([]));
1353
+ u(this, "isDragging", this.useSignal(!1));
1325
1354
  }
1326
1355
  connectedCallback() {
1327
1356
  this.setAttribute("data-ui", "upload"), super.connectedCallback();
@@ -1375,22 +1404,22 @@ class V extends g {
1375
1404
  return e < 1024 ? `${e.toFixed(1)} KB` : `${(e / 1024).toFixed(1)} MB`;
1376
1405
  }
1377
1406
  syncInputFiles(t, e) {
1378
- const a = new DataTransfer();
1379
- e.forEach((s) => a.items.add(s)), t.files = a.files;
1407
+ const s = new DataTransfer();
1408
+ e.forEach((i) => s.items.add(i)), t.files = s.files;
1380
1409
  }
1381
1410
  render() {
1382
- const t = this.getAccept(), e = this.getLabel(), a = this.getHelper(), s = this.isDisabled(), n = this.isMultiple(), r = this.isDragging.get(), o = this.files.get();
1411
+ const t = this.getAccept(), e = this.getLabel(), s = this.getHelper(), i = this.isDisabled(), n = this.isMultiple(), r = this.isDragging.get(), o = this.files.get();
1383
1412
  this.shadowRoot.innerHTML = `
1384
1413
  <style>${f}</style>
1385
1414
  <div class="upload">
1386
1415
  ${e ? `<label class="upload-label">${e}</label>` : ""}
1387
- <div class="upload-drop ${r ? "dragging" : ""} ${s ? "disabled" : ""}" part="dropzone">
1416
+ <div class="upload-drop ${r ? "dragging" : ""} ${i ? "disabled" : ""}" part="dropzone">
1388
1417
  <input
1389
1418
  class="upload-input"
1390
1419
  type="file"
1391
1420
  ${n ? "multiple" : ""}
1392
1421
  ${t ? `accept="${t}"` : ""}
1393
- ${s ? "disabled" : ""}
1422
+ ${i ? "disabled" : ""}
1394
1423
  >
1395
1424
  <div class="upload-content">
1396
1425
  <div class="upload-icon" aria-hidden="true">
@@ -1406,10 +1435,10 @@ class V extends g {
1406
1435
  ${t ? `Accepted: ${t}` : "Any file type supported"}
1407
1436
  </div>
1408
1437
  </div>
1409
- <button class="upload-btn" type="button" ${s ? "disabled" : ""}>Browse</button>
1438
+ <button class="upload-btn" type="button" ${i ? "disabled" : ""}>Browse</button>
1410
1439
  </div>
1411
1440
  </div>
1412
- ${a ? `<div class="upload-helper">${a}</div>` : ""}
1441
+ ${s ? `<div class="upload-helper">${s}</div>` : ""}
1413
1442
  ${o.length ? `
1414
1443
  <ul class="upload-list">
1415
1444
  ${o.map(
@@ -1425,49 +1454,208 @@ class V extends g {
1425
1454
  ` : ""}
1426
1455
  </div>
1427
1456
  `;
1428
- 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");
1429
- !d || !c || (o.length ? this.syncInputFiles(c, o) : c.value = "", d.addEventListener("dragover", (b) => {
1430
- s || (b.preventDefault(), this.isDragging.set(!0));
1431
- }), d.addEventListener("dragleave", () => {
1457
+ const c = this.shadowRoot.querySelector(".upload-drop"), d = this.shadowRoot.querySelector(".upload-input"), p = this.shadowRoot.querySelector(".upload-btn"), h = this.shadowRoot.querySelectorAll(".upload-remove");
1458
+ !c || !d || (o.length ? this.syncInputFiles(d, o) : d.value = "", c.addEventListener("dragover", (b) => {
1459
+ i || (b.preventDefault(), this.isDragging.set(!0));
1460
+ }), c.addEventListener("dragleave", () => {
1432
1461
  this.isDragging.set(!1);
1433
- }), d.addEventListener("drop", (b) => {
1462
+ }), c.addEventListener("drop", (b) => {
1434
1463
  var v;
1435
- if (s) return;
1464
+ if (i) return;
1436
1465
  b.preventDefault(), this.isDragging.set(!1);
1437
1466
  const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
1438
- m.length && (this.setFiles(m), this.syncInputFiles(c, this.files.get()));
1439
- }), c.addEventListener("change", () => {
1440
- const b = Array.from(c.files ?? []);
1467
+ m.length && (this.setFiles(m), this.syncInputFiles(d, this.files.get()));
1468
+ }), d.addEventListener("change", () => {
1469
+ const b = Array.from(d.files ?? []);
1441
1470
  this.setFiles(b);
1442
- }), h == null || h.addEventListener("click", () => {
1443
- s || c.click();
1444
- }), u.forEach((b) => {
1471
+ }), p == null || p.addEventListener("click", () => {
1472
+ i || d.click();
1473
+ }), h.forEach((b) => {
1445
1474
  b.addEventListener("click", () => {
1446
- const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((_, w) => w !== m);
1447
- this.setFiles(v), this.syncInputFiles(c, v);
1475
+ const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((X, $) => $ !== m);
1476
+ this.setFiles(v), this.syncInputFiles(d, v);
1448
1477
  });
1449
1478
  }));
1450
1479
  }
1451
1480
  }
1452
- customElements.define("ui-upload", V);
1453
- class U {
1481
+ customElements.define("ui-upload", U);
1482
+ class V extends g {
1483
+ connectedCallback() {
1484
+ this.setAttribute("data-ui", "layout"), super.connectedCallback();
1485
+ }
1486
+ static get observedAttributes() {
1487
+ return ["direction"];
1488
+ }
1489
+ attributeChangedCallback() {
1490
+ this.render();
1491
+ }
1492
+ getDirection() {
1493
+ const a = this.getAttribute("direction");
1494
+ return a === "horizontal" || a === "vertical" ? a : "auto";
1495
+ }
1496
+ detectDirection() {
1497
+ const a = this.getDirection();
1498
+ if (a !== "auto") return a;
1499
+ const t = this.querySelector("ui-layout-header"), e = this.querySelector("ui-layout-footer");
1500
+ return this.querySelector("ui-layout-sidebar") ? "horizontal" : "vertical";
1501
+ }
1502
+ render() {
1503
+ const a = this.detectDirection() === "horizontal" ? "row" : "column";
1504
+ this.shadowRoot.innerHTML = `
1505
+ <style>${f}</style>
1506
+ <div class="layout-container" style="flex-direction: ${a}">
1507
+ <slot></slot>
1508
+ </div>
1509
+ `;
1510
+ }
1511
+ }
1512
+ class j extends g {
1513
+ connectedCallback() {
1514
+ this.setAttribute("data-ui", "layout-header"), super.connectedCallback();
1515
+ }
1516
+ static get observedAttributes() {
1517
+ return ["height"];
1518
+ }
1519
+ attributeChangedCallback() {
1520
+ this.render();
1521
+ }
1522
+ getHeight() {
1523
+ const a = this.getAttribute("height");
1524
+ return a && /^\d+$/.test(a) ? a + "px" : a || "64px";
1525
+ }
1526
+ render() {
1527
+ const a = this.getHeight();
1528
+ this.shadowRoot.innerHTML = `
1529
+ <style>${f}</style>
1530
+ <header class="layout-header" style="height: ${a}">
1531
+ <slot></slot>
1532
+ </header>
1533
+ `;
1534
+ }
1535
+ }
1536
+ class N extends g {
1537
+ connectedCallback() {
1538
+ this.setAttribute("data-ui", "layout-footer"), super.connectedCallback();
1539
+ }
1540
+ static get observedAttributes() {
1541
+ return ["height"];
1542
+ }
1543
+ attributeChangedCallback() {
1544
+ this.render();
1545
+ }
1546
+ getHeight() {
1547
+ const a = this.getAttribute("height");
1548
+ return a && /^\d+$/.test(a) ? a + "px" : a || "56px";
1549
+ }
1550
+ render() {
1551
+ const a = this.getHeight();
1552
+ this.shadowRoot.innerHTML = `
1553
+ <style>${f}</style>
1554
+ <footer class="layout-footer" style="height: ${a}">
1555
+ <slot></slot>
1556
+ </footer>
1557
+ `;
1558
+ }
1559
+ }
1560
+ class _ extends g {
1561
+ connectedCallback() {
1562
+ this.setAttribute("data-ui", "layout-content"), super.connectedCallback();
1563
+ }
1564
+ render() {
1565
+ this.shadowRoot.innerHTML = `
1566
+ <style>${f}</style>
1567
+ <div class="layout-content">
1568
+ <slot></slot>
1569
+ </div>
1570
+ `;
1571
+ }
1572
+ }
1573
+ class B extends g {
1454
1574
  constructor() {
1455
- p(this, "baseURL", "");
1456
- p(this, "defaultHeaders", {
1575
+ super(...arguments);
1576
+ u(this, "isCollapsed", !1);
1577
+ u(this, "animating", !1);
1578
+ }
1579
+ connectedCallback() {
1580
+ this.setAttribute("data-ui", "layout-sidebar"), super.connectedCallback(), this.isCollapsed = this.hasAttribute("collapsed"), this.render(), this.attachEventListeners();
1581
+ }
1582
+ static get observedAttributes() {
1583
+ return ["collapsed", "width", "collapsed-width", "collapsible"];
1584
+ }
1585
+ attributeChangedCallback(t) {
1586
+ t === "collapsed" && (this.isCollapsed = this.hasAttribute("collapsed")), this.render();
1587
+ }
1588
+ getWidth() {
1589
+ const t = this.getAttribute("width");
1590
+ return t && /^\d+$/.test(t) ? t + "px" : t || "240px";
1591
+ }
1592
+ getCollapsedWidth() {
1593
+ const t = this.getAttribute("collapsed-width");
1594
+ return t && /^\d+$/.test(t) ? t + "px" : t || "64px";
1595
+ }
1596
+ isCollapsible() {
1597
+ return this.hasAttribute("collapsible");
1598
+ }
1599
+ attachEventListeners() {
1600
+ if (!this.shadowRoot) return;
1601
+ const t = this.shadowRoot.querySelector(".sidebar-toggle");
1602
+ t && t.addEventListener("click", () => this.toggleCollapse());
1603
+ }
1604
+ toggleCollapse() {
1605
+ this.animating || (this.animating = !0, this.isCollapsed = !this.isCollapsed, this.isCollapsed ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed"), this.dispatchEvent(
1606
+ new CustomEvent("collapsed-change", {
1607
+ detail: { collapsed: this.isCollapsed },
1608
+ bubbles: !0,
1609
+ composed: !0
1610
+ })
1611
+ ), setTimeout(() => {
1612
+ this.animating = !1;
1613
+ }, 300));
1614
+ }
1615
+ render() {
1616
+ const t = this.getWidth(), e = this.getCollapsedWidth(), s = this.isCollapsible();
1617
+ s && this.isCollapsed, this.shadowRoot.innerHTML = `
1618
+ <style>${f}</style>
1619
+ <aside class="layout-sidebar ${this.isCollapsed ? "collapsed" : ""}"
1620
+ style="--sidebar-width: ${t}; --sidebar-collapsed-width: ${e}">
1621
+ <div class="sidebar-content">
1622
+ <slot></slot>
1623
+ </div>
1624
+ ${s ? `
1625
+ <button class="sidebar-toggle" title="${this.isCollapsed ? "Expand" : "Collapse"}">
1626
+ <svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1627
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1628
+ d="M15 19l-7-7 7-7"></path>
1629
+ </svg>
1630
+ </button>
1631
+ ` : ""}
1632
+ </aside>
1633
+ `, this.attachEventListeners();
1634
+ }
1635
+ }
1636
+ customElements.define("ui-layout", V);
1637
+ customElements.define("ui-layout-header", j);
1638
+ customElements.define("ui-layout-footer", N);
1639
+ customElements.define("ui-layout-content", _);
1640
+ customElements.define("ui-layout-sidebar", B);
1641
+ class W {
1642
+ constructor() {
1643
+ u(this, "baseURL", "");
1644
+ u(this, "defaultHeaders", {
1457
1645
  "Content-Type": "application/json"
1458
1646
  });
1459
- p(this, "defaultTimeout", 3e4);
1460
- p(this, "interceptors", {
1647
+ u(this, "defaultTimeout", 3e4);
1648
+ u(this, "interceptors", {
1461
1649
  request: {
1462
1650
  handlers: [],
1463
- use: (i, t) => {
1464
- this.interceptors.request.handlers.push({ onFulfilled: i, onRejected: t });
1651
+ use: (a, t) => {
1652
+ this.interceptors.request.handlers.push({ onFulfilled: a, onRejected: t });
1465
1653
  }
1466
1654
  },
1467
1655
  response: {
1468
1656
  handlers: [],
1469
- use: (i, t) => {
1470
- this.interceptors.response.handlers.push({ onFulfilled: i, onRejected: t });
1657
+ use: (a, t) => {
1658
+ this.interceptors.response.handlers.push({ onFulfilled: a, onRejected: t });
1471
1659
  }
1472
1660
  }
1473
1661
  });
@@ -1475,8 +1663,8 @@ class U {
1475
1663
  /**
1476
1664
  * Set base URL for all requests
1477
1665
  */
1478
- setBaseURL(i) {
1479
- this.baseURL = i;
1666
+ setBaseURL(a) {
1667
+ this.baseURL = a;
1480
1668
  }
1481
1669
  /**
1482
1670
  * Get currently set base URL
@@ -1487,21 +1675,21 @@ class U {
1487
1675
  /**
1488
1676
  * Set default headers for all requests
1489
1677
  */
1490
- setDefaultHeaders(i) {
1491
- this.defaultHeaders = { ...this.defaultHeaders, ...i };
1678
+ setDefaultHeaders(a) {
1679
+ this.defaultHeaders = { ...this.defaultHeaders, ...a };
1492
1680
  }
1493
1681
  /**
1494
1682
  * Set default timeout for all requests (in ms)
1495
1683
  */
1496
- setDefaultTimeout(i) {
1497
- this.defaultTimeout = i;
1684
+ setDefaultTimeout(a) {
1685
+ this.defaultTimeout = a;
1498
1686
  }
1499
1687
  /**
1500
1688
  * Execute request with interceptors
1501
1689
  */
1502
- async executeRequest(i, t) {
1503
- const e = i.startsWith("http") ? i : this.baseURL + i;
1504
- let a = {
1690
+ async executeRequest(a, t) {
1691
+ const e = a.startsWith("http") ? a : this.baseURL + a;
1692
+ let s = {
1505
1693
  method: "GET",
1506
1694
  headers: { ...this.defaultHeaders },
1507
1695
  timeout: this.defaultTimeout,
@@ -1509,47 +1697,47 @@ class U {
1509
1697
  };
1510
1698
  for (const r of this.interceptors.request.handlers)
1511
1699
  try {
1512
- a = await r.onFulfilled(a);
1700
+ s = await r.onFulfilled(s);
1513
1701
  } catch (o) {
1514
1702
  if (r.onRejected)
1515
- a = await r.onRejected(o);
1703
+ s = await r.onRejected(o);
1516
1704
  else
1517
1705
  throw o;
1518
1706
  }
1519
- const s = new AbortController(), n = setTimeout(() => s.abort(), a.timeout || this.defaultTimeout);
1707
+ const i = new AbortController(), n = setTimeout(() => i.abort(), s.timeout || this.defaultTimeout);
1520
1708
  try {
1521
1709
  const r = {
1522
- method: a.method,
1523
- headers: a.headers,
1524
- signal: s.signal
1710
+ method: s.method,
1711
+ headers: s.headers,
1712
+ signal: i.signal
1525
1713
  };
1526
- a.body && a.method !== "GET" && (r.body = (typeof a.body == "string", a.body));
1714
+ s.body && s.method !== "GET" && (r.body = (typeof s.body == "string", s.body));
1527
1715
  const o = await fetch(e, r);
1528
- let d;
1529
- const c = o.headers.get("content-type");
1530
- c != null && c.includes("application/json") ? d = o.ok ? await o.json() : null : c != null && c.includes("text") ? d = await o.text() : d = await o.blob();
1531
- let h = {
1716
+ let c;
1717
+ const d = o.headers.get("content-type");
1718
+ d != null && d.includes("application/json") ? c = o.ok ? await o.json() : null : d != null && d.includes("text") ? c = await o.text() : c = await o.blob();
1719
+ let p = {
1532
1720
  status: o.status,
1533
1721
  statusText: o.statusText,
1534
1722
  headers: o.headers,
1535
- data: d
1723
+ data: c
1536
1724
  };
1537
1725
  if (!o.ok) {
1538
- const u = new Error(`HTTP ${o.status}: ${o.statusText}`);
1539
- throw u.response = h, u.config = a, u;
1726
+ const h = new Error(`HTTP ${o.status}: ${o.statusText}`);
1727
+ throw h.response = p, h.config = s, h;
1540
1728
  }
1541
- for (const u of this.interceptors.response.handlers)
1729
+ for (const h of this.interceptors.response.handlers)
1542
1730
  try {
1543
- h = await u.onFulfilled(h);
1731
+ p = await h.onFulfilled(p);
1544
1732
  } catch (b) {
1545
- if (u.onRejected)
1546
- h = await u.onRejected(b);
1733
+ if (h.onRejected)
1734
+ p = await h.onRejected(b);
1547
1735
  else
1548
1736
  throw b;
1549
1737
  }
1550
- return h.data;
1738
+ return p.data;
1551
1739
  } catch (r) {
1552
- throw r instanceof Error && r.name === "AbortError" ? new Error(`Request timeout after ${a.timeout}ms`) : r;
1740
+ throw r instanceof Error && r.name === "AbortError" ? new Error(`Request timeout after ${s.timeout}ms`) : r;
1553
1741
  } finally {
1554
1742
  clearTimeout(n);
1555
1743
  }
@@ -1557,14 +1745,14 @@ class U {
1557
1745
  /**
1558
1746
  * GET request
1559
1747
  */
1560
- async get(i, t) {
1561
- return this.executeRequest(i, { ...t, method: "GET" });
1748
+ async get(a, t) {
1749
+ return this.executeRequest(a, { ...t, method: "GET" });
1562
1750
  }
1563
1751
  /**
1564
1752
  * POST request
1565
1753
  */
1566
- async post(i, t, e) {
1567
- return this.executeRequest(i, {
1754
+ async post(a, t, e) {
1755
+ return this.executeRequest(a, {
1568
1756
  ...e,
1569
1757
  method: "POST",
1570
1758
  body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
@@ -1573,8 +1761,8 @@ class U {
1573
1761
  /**
1574
1762
  * PUT request
1575
1763
  */
1576
- async put(i, t, e) {
1577
- return this.executeRequest(i, {
1764
+ async put(a, t, e) {
1765
+ return this.executeRequest(a, {
1578
1766
  ...e,
1579
1767
  method: "PUT",
1580
1768
  body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
@@ -1583,8 +1771,8 @@ class U {
1583
1771
  /**
1584
1772
  * PATCH request
1585
1773
  */
1586
- async patch(i, t, e) {
1587
- return this.executeRequest(i, {
1774
+ async patch(a, t, e) {
1775
+ return this.executeRequest(a, {
1588
1776
  ...e,
1589
1777
  method: "PATCH",
1590
1778
  body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
@@ -1593,51 +1781,51 @@ class U {
1593
1781
  /**
1594
1782
  * DELETE request
1595
1783
  */
1596
- async delete(i, t) {
1597
- return this.executeRequest(i, { ...t, method: "DELETE" });
1784
+ async delete(a, t) {
1785
+ return this.executeRequest(a, { ...t, method: "DELETE" });
1598
1786
  }
1599
1787
  /**
1600
1788
  * HEAD request
1601
1789
  */
1602
- async head(i, t) {
1603
- return this.executeRequest(i, { ...t, method: "HEAD" });
1790
+ async head(a, t) {
1791
+ return this.executeRequest(a, { ...t, method: "HEAD" });
1604
1792
  }
1605
1793
  }
1606
- const J = new U();
1607
- function x(l, i) {
1608
- return l ? l.querySelector(i) : null;
1794
+ const Z = new W();
1795
+ function x(l, a) {
1796
+ return l ? l.querySelector(a) : null;
1609
1797
  }
1610
- function G(l, i) {
1611
- return l ? l.querySelectorAll(i) : [];
1798
+ function tt(l, a) {
1799
+ return l ? l.querySelectorAll(a) : [];
1612
1800
  }
1613
- function X(l, i) {
1614
- return l ? l.querySelector(`#${i}`) : null;
1801
+ function et(l, a) {
1802
+ return l ? l.querySelector(`#${a}`) : null;
1615
1803
  }
1616
- function K(l, i, t, e, a) {
1804
+ function st(l, a, t, e, s) {
1617
1805
  if (!l) return null;
1618
- const s = l.querySelector(`#${i}`);
1619
- return s ? (s.addEventListener(t, e, a), s) : null;
1806
+ const i = l.querySelector(`#${a}`);
1807
+ return i ? (i.addEventListener(t, e, s), i) : null;
1620
1808
  }
1621
- function Q(l, i) {
1622
- return x(l, i);
1809
+ function at(l, a) {
1810
+ return x(l, a);
1623
1811
  }
1624
- function Z(l, i) {
1625
- return x(l, i);
1812
+ function rt(l, a) {
1813
+ return x(l, a);
1626
1814
  }
1627
- function tt(l, i) {
1628
- return x(l, i);
1815
+ function it(l, a) {
1816
+ return x(l, a);
1629
1817
  }
1630
- const N = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
1631
- function y(l) {
1818
+ const J = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
1819
+ function k(l) {
1632
1820
  return l.getAttribute("name") || l.getAttribute("id") || "";
1633
1821
  }
1634
- function j(l) {
1635
- const i = l.tagName.toLowerCase();
1636
- if (i === "ui-checkbox")
1822
+ function G(l) {
1823
+ const a = l.tagName.toLowerCase();
1824
+ if (a === "ui-checkbox")
1637
1825
  return l.hasAttribute("checked");
1638
- if (i === "ui-upload") {
1639
- const a = l == null ? void 0 : l.filesValue;
1640
- return Array.isArray(a) && a.length > 0 ? a : [];
1826
+ if (a === "ui-upload") {
1827
+ const s = l == null ? void 0 : l.filesValue;
1828
+ return Array.isArray(s) && s.length > 0 ? s : [];
1641
1829
  }
1642
1830
  const t = l == null ? void 0 : l.value;
1643
1831
  if (typeof t == "string" && t !== "")
@@ -1645,77 +1833,82 @@ function j(l) {
1645
1833
  const e = l.getAttribute("value");
1646
1834
  return e || "";
1647
1835
  }
1648
- function et(l, i = {}) {
1649
- const { includeDisabled: t = !1, includeEmpty: e = !0 } = i, a = {}, s = /* @__PURE__ */ new Map();
1836
+ function ot(l, a = {}) {
1837
+ const { includeDisabled: t = !1, includeEmpty: e = !0 } = a, s = {}, i = /* @__PURE__ */ new Map();
1650
1838
  l.querySelectorAll('input[type="checkbox"]').forEach((r) => {
1651
- const o = y(r);
1652
- o && s.set(o, (s.get(o) || 0) + 1);
1839
+ const o = k(r);
1840
+ o && i.set(o, (i.get(o) || 0) + 1);
1653
1841
  });
1654
- const n = Array.from(l.querySelectorAll(N));
1842
+ const n = Array.from(l.querySelectorAll(J));
1655
1843
  for (const r of n) {
1656
1844
  if (!t && (r.disabled || r.hasAttribute("disabled"))) continue;
1657
- const o = y(r);
1845
+ const o = k(r);
1658
1846
  if (!o) continue;
1659
1847
  if (r instanceof HTMLInputElement) {
1660
- const c = r.type;
1661
- if (c === "checkbox") {
1662
- if ((s.get(o) || 0) > 1) {
1663
- const u = a[o] || [];
1664
- r.checked && u.push(r.value || "on"), a[o] = u;
1848
+ const d = r.type;
1849
+ if (d === "checkbox") {
1850
+ if ((i.get(o) || 0) > 1) {
1851
+ const h = s[o] || [];
1852
+ r.checked && h.push(r.value || "on"), s[o] = h;
1665
1853
  } else
1666
- a[o] = r.checked;
1854
+ s[o] = r.checked;
1667
1855
  continue;
1668
1856
  }
1669
- if (c === "radio") {
1670
- r.checked && (a[o] = r.value);
1857
+ if (d === "radio") {
1858
+ r.checked && (s[o] = r.value);
1671
1859
  continue;
1672
1860
  }
1673
- if (c === "file") {
1674
- const h = Array.from(r.files ?? []);
1675
- (e || h.length > 0) && (a[o] = h);
1861
+ if (d === "file") {
1862
+ const p = Array.from(r.files ?? []);
1863
+ (e || p.length > 0) && (s[o] = p);
1676
1864
  continue;
1677
1865
  }
1678
- (e || r.value !== "") && (a[o] = r.value);
1866
+ (e || r.value !== "") && (s[o] = r.value);
1679
1867
  continue;
1680
1868
  }
1681
1869
  if (r instanceof HTMLSelectElement) {
1682
1870
  if (r.multiple) {
1683
- const c = Array.from(r.selectedOptions).map((h) => h.value);
1684
- (e || c.length > 0) && (a[o] = c);
1685
- } else (e || r.value !== "") && (a[o] = r.value);
1871
+ const d = Array.from(r.selectedOptions).map((p) => p.value);
1872
+ (e || d.length > 0) && (s[o] = d);
1873
+ } else (e || r.value !== "") && (s[o] = r.value);
1686
1874
  continue;
1687
1875
  }
1688
1876
  if (r instanceof HTMLTextAreaElement) {
1689
- (e || r.value !== "") && (a[o] = r.value);
1877
+ (e || r.value !== "") && (s[o] = r.value);
1690
1878
  continue;
1691
1879
  }
1692
- const d = j(r);
1693
- (e || (Array.isArray(d) ? d.length > 0 : d !== "")) && (a[o] = d);
1880
+ const c = G(r);
1881
+ (e || (Array.isArray(c) ? c.length > 0 : c !== "")) && (s[o] = c);
1694
1882
  }
1695
- return a;
1883
+ return s;
1696
1884
  }
1697
1885
  export {
1698
- U as HTTPClient,
1699
- C as UIButton,
1700
- P as UICard,
1886
+ W as HTTPClient,
1887
+ E as UIButton,
1888
+ H as UICard,
1701
1889
  D as UICheckbox,
1702
- L as UIDatePicker,
1890
+ z as UIDatePicker,
1703
1891
  S as UIInput,
1892
+ V as UILayout,
1893
+ _ as UILayoutContent,
1894
+ N as UILayoutFooter,
1895
+ j as UILayoutHeader,
1896
+ B as UILayoutSidebar,
1704
1897
  M as UIModal,
1705
1898
  I as UIPagination,
1706
1899
  R as UISelect,
1707
1900
  F as UIStepper,
1708
- z as UITable,
1901
+ L as UITable,
1709
1902
  Y as UITabs,
1710
- H as UIToast,
1711
- V as UIUpload,
1712
- K as addEventListenerById,
1713
- X as getElementById,
1714
- et as getFormValues,
1715
- J as http,
1903
+ O as UIToast,
1904
+ U as UIUpload,
1905
+ st as addEventListenerById,
1906
+ et as getElementById,
1907
+ ot as getFormValues,
1908
+ Z as http,
1716
1909
  x as queryElement,
1717
- G as queryElements,
1718
- tt as queryModal,
1719
- Z as queryPagination,
1720
- Q as queryTable
1910
+ tt as queryElements,
1911
+ it as queryModal,
1912
+ rt as queryPagination,
1913
+ at as queryTable
1721
1914
  };