@patimweb/crtstyleguide 1.0.10 → 1.0.12

package/dist/lib/index.js

@@ -1,21 +1,21 @@
-import { css as l, LitElement as p, html as c } from "lit";
-const d = (r) => (t, a) => {
+import { css as d, LitElement as h, html as l } from "lit";
+const v = (e) => (t, a) => {
   a !== void 0 ? a.addInitializer(() => {
-    customElements.define(r, t);
-  }) : customElements.define(r, t);
+    customElements.define(e, t);
+  }) : customElements.define(e, t);
 };
-const yt = globalThis, Tt = yt.ShadowRoot && (yt.ShadyCSS === void 0 || yt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Xt = /* @__PURE__ */ Symbol(), Bt = /* @__PURE__ */ new WeakMap();
-let Ht = class {
-  constructor(t, a, i) {
-    if (this._$cssResult$ = !0, i !== Xt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+const Tt = globalThis, Jt = Tt.ShadowRoot && (Tt.ShadyCSS === void 0 || Tt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ke = /* @__PURE__ */ Symbol(), de = /* @__PURE__ */ new WeakMap();
+let Pe = class {
+  constructor(t, a, s) {
+    if (this._$cssResult$ = !0, s !== ke) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = a;
   }
   get styleSheet() {
     let t = this.o;
     const a = this.t;
-    if (Tt && t === void 0) {
-      const i = a !== void 0 && a.length === 1;
-      i && (t = Bt.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Bt.set(a, t));
+    if (Jt && t === void 0) {
+      const s = a !== void 0 && a.length === 1;
+      s && (t = de.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && de.set(a, t));
     }
     return t;
   }
@@ -23,108 +23,108 @@ let Ht = class {
     return this.cssText;
   }
 };
-const Gt = (r) => new Ht(typeof r == "string" ? r : r + "", void 0, Xt), Qt = (r, t) => {
-  if (Tt) r.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
+const Ae = (e) => new Pe(typeof e == "string" ? e : e + "", void 0, ke), Se = (e, t) => {
+  if (Jt) e.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
   else for (const a of t) {
-    const i = document.createElement("style"), e = yt.litNonce;
-    e !== void 0 && i.setAttribute("nonce", e), i.textContent = a.cssText, r.appendChild(i);
+    const s = document.createElement("style"), r = Tt.litNonce;
+    r !== void 0 && s.setAttribute("nonce", r), s.textContent = a.cssText, e.appendChild(s);
   }
-}, Yt = Tt ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
+}, he = Jt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let a = "";
-  for (const i of t.cssRules) a += i.cssText;
-  return Gt(a);
-})(r) : r;
-const { is: Jt, defineProperty: Zt, getOwnPropertyDescriptor: tr, getOwnPropertyNames: rr, getOwnPropertySymbols: er, getPrototypeOf: ar } = Object, Ct = globalThis, qt = Ct.trustedTypes, ir = qt ? qt.emptyScript : "", sr = Ct.reactiveElementPolyfillSupport, st = (r, t) => r, xt = { toAttribute(r, t) {
+  for (const s of t.cssRules) a += s.cssText;
+  return Ae(a);
+})(e) : e;
+const { is: Ee, defineProperty: Me, getOwnPropertyDescriptor: De, getOwnPropertyNames: Te, getOwnPropertySymbols: je, getPrototypeOf: Le } = Object, Vt = globalThis, ve = Vt.trustedTypes, Ie = ve ? ve.emptyScript : "", Be = Vt.reactiveElementPolyfillSupport, ft = (e, t) => e, jt = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
-      r = r ? ir : null;
+      e = e ? Ie : null;
       break;
     case Object:
     case Array:
-      r = r == null ? r : JSON.stringify(r);
+      e = e == null ? e : JSON.stringify(e);
   }
-  return r;
-}, fromAttribute(r, t) {
-  let a = r;
+  return e;
+}, fromAttribute(e, t) {
+  let a = e;
   switch (t) {
     case Boolean:
-      a = r !== null;
+      a = e !== null;
       break;
     case Number:
-      a = r === null ? null : Number(r);
+      a = e === null ? null : Number(e);
       break;
     case Object:
     case Array:
       try {
-        a = JSON.parse(r);
+        a = JSON.parse(e);
       } catch {
         a = null;
       }
   }
   return a;
-} }, jt = (r, t) => !Jt(r, t), Vt = { attribute: !0, type: String, converter: xt, reflect: !1, useDefault: !1, hasChanged: jt };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Ct.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class it extends HTMLElement {
+} }, te = (e, t) => !Ee(e, t), ge = { attribute: !0, type: String, converter: jt, reflect: !1, useDefault: !1, hasChanged: te };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Vt.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+let ut = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, a = Vt) {
+  static createProperty(t, a = ge) {
     if (a.state && (a.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((a = Object.create(a)).wrapped = !0), this.elementProperties.set(t, a), !a.noAccessor) {
-      const i = /* @__PURE__ */ Symbol(), e = this.getPropertyDescriptor(t, i, a);
-      e !== void 0 && Zt(this.prototype, t, e);
+      const s = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(t, s, a);
+      r !== void 0 && Me(this.prototype, t, r);
     }
   }
-  static getPropertyDescriptor(t, a, i) {
-    const { get: e, set: s } = tr(this.prototype, t) ?? { get() {
+  static getPropertyDescriptor(t, a, s) {
+    const { get: r, set: i } = De(this.prototype, t) ?? { get() {
       return this[a];
     }, set(o) {
       this[a] = o;
     } };
-    return { get: e, set(o) {
-      const h = e?.call(this);
-      s?.call(this, o), this.requestUpdate(t, h, i);
+    return { get: r, set(o) {
+      const c = r?.call(this);
+      i?.call(this, o), this.requestUpdate(t, c, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? Vt;
+    return this.elementProperties.get(t) ?? ge;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(st("elementProperties"))) return;
-    const t = ar(this);
+    if (this.hasOwnProperty(ft("elementProperties"))) return;
+    const t = Le(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(st("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(st("properties"))) {
-      const a = this.properties, i = [...rr(a), ...er(a)];
-      for (const e of i) this.createProperty(e, a[e]);
+    if (this.hasOwnProperty(ft("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ft("properties"))) {
+      const a = this.properties, s = [...Te(a), ...je(a)];
+      for (const r of s) this.createProperty(r, a[r]);
     }
     const t = this[Symbol.metadata];
     if (t !== null) {
       const a = litPropertyMetadata.get(t);
-      if (a !== void 0) for (const [i, e] of a) this.elementProperties.set(i, e);
+      if (a !== void 0) for (const [s, r] of a) this.elementProperties.set(s, r);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [a, i] of this.elementProperties) {
-      const e = this._$Eu(a, i);
-      e !== void 0 && this._$Eh.set(e, a);
+    for (const [a, s] of this.elementProperties) {
+      const r = this._$Eu(a, s);
+      r !== void 0 && this._$Eh.set(r, a);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(t) {
     const a = [];
     if (Array.isArray(t)) {
-      const i = new Set(t.flat(1 / 0).reverse());
-      for (const e of i) a.unshift(Yt(e));
-    } else t !== void 0 && a.push(Yt(t));
+      const s = new Set(t.flat(1 / 0).reverse());
+      for (const r of s) a.unshift(he(r));
+    } else t !== void 0 && a.push(he(t));
     return a;
   }
   static _$Eu(t, a) {
-    const i = a.attribute;
-    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
+    const s = a.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
@@ -140,12 +140,12 @@ class it extends HTMLElement {
   }
   _$E_() {
     const t = /* @__PURE__ */ new Map(), a = this.constructor.elementProperties;
-    for (const i of a.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
+    for (const s of a.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
     t.size > 0 && (this._$Ep = t);
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Qt(t, this.constructor.elementStyles), t;
+    return Se(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((t) => t.hostConnected?.());
@@ -155,35 +155,35 @@ class it extends HTMLElement {
   disconnectedCallback() {
     this._$EO?.forEach((t) => t.hostDisconnected?.());
   }
-  attributeChangedCallback(t, a, i) {
-    this._$AK(t, i);
+  attributeChangedCallback(t, a, s) {
+    this._$AK(t, s);
   }
   _$ET(t, a) {
-    const i = this.constructor.elementProperties.get(t), e = this.constructor._$Eu(t, i);
-    if (e !== void 0 && i.reflect === !0) {
-      const s = (i.converter?.toAttribute !== void 0 ? i.converter : xt).toAttribute(a, i.type);
-      this._$Em = t, s == null ? this.removeAttribute(e) : this.setAttribute(e, s), this._$Em = null;
+    const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
+    if (r !== void 0 && s.reflect === !0) {
+      const i = (s.converter?.toAttribute !== void 0 ? s.converter : jt).toAttribute(a, s.type);
+      this._$Em = t, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
     }
   }
   _$AK(t, a) {
-    const i = this.constructor, e = i._$Eh.get(t);
-    if (e !== void 0 && this._$Em !== e) {
-      const s = i.getPropertyOptions(e), o = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : xt;
-      this._$Em = e;
-      const h = o.fromAttribute(a, s.type);
-      this[e] = h ?? this._$Ej?.get(e) ?? h, this._$Em = null;
+    const s = this.constructor, r = s._$Eh.get(t);
+    if (r !== void 0 && this._$Em !== r) {
+      const i = s.getPropertyOptions(r), o = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : jt;
+      this._$Em = r;
+      const c = o.fromAttribute(a, i.type);
+      this[r] = c ?? this._$Ej?.get(r) ?? c, this._$Em = null;
     }
   }
-  requestUpdate(t, a, i, e = !1, s) {
+  requestUpdate(t, a, s, r = !1, i) {
     if (t !== void 0) {
       const o = this.constructor;
-      if (e === !1 && (s = this[t]), i ??= o.getPropertyOptions(t), !((i.hasChanged ?? jt)(s, a) || i.useDefault && i.reflect && s === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, i)))) return;
-      this.C(t, a, i);
+      if (r === !1 && (i = this[t]), s ??= o.getPropertyOptions(t), !((s.hasChanged ?? te)(i, a) || s.useDefault && s.reflect && i === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, s)))) return;
+      this.C(t, a, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(t, a, { useDefault: i, reflect: e, wrapped: s }, o) {
-    i && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, o ?? a ?? this[t]), s !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || i || (a = void 0), this._$AL.set(t, a)), e === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
+  C(t, a, { useDefault: s, reflect: r, wrapped: i }, o) {
+    s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, o ?? a ?? this[t]), i !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (a = void 0), this._$AL.set(t, a)), r === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -202,21 +202,21 @@ class it extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [e, s] of this._$Ep) this[e] = s;
+        for (const [r, i] of this._$Ep) this[r] = i;
         this._$Ep = void 0;
       }
-      const i = this.constructor.elementProperties;
-      if (i.size > 0) for (const [e, s] of i) {
-        const { wrapped: o } = s, h = this[e];
-        o !== !0 || this._$AL.has(e) || h === void 0 || this.C(e, void 0, s, h);
+      const s = this.constructor.elementProperties;
+      if (s.size > 0) for (const [r, i] of s) {
+        const { wrapped: o } = i, c = this[r];
+        o !== !0 || this._$AL.has(r) || c === void 0 || this.C(r, void 0, i, c);
       }
     }
     let t = !1;
     const a = this._$AL;
     try {
-      t = this.shouldUpdate(a), t ? (this.willUpdate(a), this._$EO?.forEach((i) => i.hostUpdate?.()), this.update(a)) : this._$EM();
-    } catch (i) {
-      throw t = !1, this._$EM(), i;
+      t = this.shouldUpdate(a), t ? (this.willUpdate(a), this._$EO?.forEach((s) => s.hostUpdate?.()), this.update(a)) : this._$EM();
+    } catch (s) {
+      throw t = !1, this._$EM(), s;
     }
     t && this._$AE(a);
   }
@@ -244,98 +244,349 @@ class it extends HTMLElement {
   }
   firstUpdated(t) {
   }
-}
-it.elementStyles = [], it.shadowRootOptions = { mode: "open" }, it[st("elementProperties")] = /* @__PURE__ */ new Map(), it[st("finalized")] = /* @__PURE__ */ new Map(), sr?.({ ReactiveElement: it }), (Ct.reactiveElementVersions ??= []).push("2.1.2");
-const or = { attribute: !0, type: String, converter: xt, reflect: !1, hasChanged: jt }, nr = (r = or, t, a) => {
-  const { kind: i, metadata: e } = a;
-  let s = globalThis.litPropertyMetadata.get(e);
-  if (s === void 0 && globalThis.litPropertyMetadata.set(e, s = /* @__PURE__ */ new Map()), i === "setter" && ((r = Object.create(r)).wrapped = !0), s.set(a.name, r), i === "accessor") {
+};
+ut.elementStyles = [], ut.shadowRootOptions = { mode: "open" }, ut[ft("elementProperties")] = /* @__PURE__ */ new Map(), ut[ft("finalized")] = /* @__PURE__ */ new Map(), Be?.({ ReactiveElement: ut }), (Vt.reactiveElementVersions ??= []).push("2.1.2");
+const Ne = { attribute: !0, type: String, converter: jt, reflect: !1, hasChanged: te }, Ue = (e = Ne, t, a) => {
+  const { kind: s, metadata: r } = a;
+  let i = globalThis.litPropertyMetadata.get(r);
+  if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((e = Object.create(e)).wrapped = !0), i.set(a.name, e), s === "accessor") {
     const { name: o } = a;
-    return { set(h) {
-      const u = t.get.call(this);
-      t.set.call(this, h), this.requestUpdate(o, u, r, !0, h);
-    }, init(h) {
-      return h !== void 0 && this.C(o, void 0, r, h), h;
+    return { set(c) {
+      const p = t.get.call(this);
+      t.set.call(this, c), this.requestUpdate(o, p, e, !0, c);
+    }, init(c) {
+      return c !== void 0 && this.C(o, void 0, e, c), c;
     } };
   }
-  if (i === "setter") {
+  if (s === "setter") {
     const { name: o } = a;
-    return function(h) {
-      const u = this[o];
-      t.call(this, h), this.requestUpdate(o, u, r, !0, h);
+    return function(c) {
+      const p = this[o];
+      t.call(this, c), this.requestUpdate(o, p, e, !0, c);
     };
   }
-  throw Error("Unsupported decorator location: " + i);
+  throw Error("Unsupported decorator location: " + s);
 };
-function n(r) {
-  return (t, a) => typeof a == "object" ? nr(r, t, a) : ((i, e, s) => {
-    const o = e.hasOwnProperty(s);
-    return e.constructor.createProperty(s, i), o ? Object.getOwnPropertyDescriptor(e, s) : void 0;
-  })(r, t, a);
+function n(e) {
+  return (t, a) => typeof a == "object" ? Ue(e, t, a) : ((s, r, i) => {
+    const o = r.hasOwnProperty(i);
+    return r.constructor.createProperty(i, s), o ? Object.getOwnPropertyDescriptor(r, i) : void 0;
+  })(e, t, a);
 }
-function v(r) {
-  return n({ ...r, state: !0, attribute: !1 });
+function m(e) {
+  return n({ ...e, state: !0, attribute: !1 });
 }
-const cr = (r, t, a) => (a.configurable = !0, a.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(r, t, a), a);
-function At(r, t) {
-  return (a, i, e) => {
-    const s = (o) => o.renderRoot?.querySelector(r) ?? null;
-    return cr(a, i, { get() {
-      return s(this);
+const Re = (e, t, a) => (a.configurable = !0, a.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, a), a);
+function ee(e, t) {
+  return (a, s, r) => {
+    const i = (o) => o.renderRoot?.querySelector(e) ?? null;
+    return Re(a, s, { get() {
+      return i(this);
     } });
   };
 }
-var lr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, Mt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? pr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && lr(t, a, e), e;
+const re = globalThis, ue = (e) => e, Lt = re.trustedTypes, me = Lt ? Lt.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, $e = "$lit$", R = `lit$${Math.random().toFixed(9).slice(2)}$`, _e = "?" + R, Fe = `<${_e}>`, Z = document, It = () => Z.createComment(""), bt = (e) => e === null || typeof e != "object" && typeof e != "function", ae = Array.isArray, He = (e) => ae(e) || typeof e?.[Symbol.iterator] == "function", Gt = `[ 	
+\f\r]`, mt = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, fe = /-->/g, be = />/g, K = RegExp(`>|${Gt}(?:([^\\s"'>=/]+)(${Gt}*=${Gt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, xe = /"/g, ze = /^(?:script|style|textarea|title)$/i, lt = /* @__PURE__ */ Symbol.for("lit-noChange"), f = /* @__PURE__ */ Symbol.for("lit-nothing"), we = /* @__PURE__ */ new WeakMap(), G = Z.createTreeWalker(Z, 129);
+function Ce(e, t) {
+  if (!ae(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return me !== void 0 ? me.createHTML(t) : t;
+}
+const Ye = (e, t) => {
+  const a = e.length - 1, s = [];
+  let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = mt;
+  for (let c = 0; c < a; c++) {
+    const p = e[c];
+    let g, b, u = -1, S = 0;
+    for (; S < p.length && (o.lastIndex = S, b = o.exec(p), b !== null); ) S = o.lastIndex, o === mt ? b[1] === "!--" ? o = fe : b[1] !== void 0 ? o = be : b[2] !== void 0 ? (ze.test(b[2]) && (r = RegExp("</" + b[2], "g")), o = K) : b[3] !== void 0 && (o = K) : o === K ? b[0] === ">" ? (o = r ?? mt, u = -1) : b[1] === void 0 ? u = -2 : (u = o.lastIndex - b[2].length, g = b[1], o = b[3] === void 0 ? K : b[3] === '"' ? xe : ye) : o === xe || o === ye ? o = K : o === fe || o === be ? o = mt : (o = K, r = void 0);
+    const U = o === K && e[c + 1].startsWith("/>") ? " " : "";
+    i += o === mt ? p + Fe : u >= 0 ? (s.push(g), p.slice(0, u) + $e + p.slice(u) + R + U) : p + R + (u === -2 ? c : U);
+  }
+  return [Ce(e, i + (e[a] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
-let ot = class extends p {
+class yt {
+  constructor({ strings: t, _$litType$: a }, s) {
+    let r;
+    this.parts = [];
+    let i = 0, o = 0;
+    const c = t.length - 1, p = this.parts, [g, b] = Ye(t, a);
+    if (this.el = yt.createElement(g, s), G.currentNode = this.el.content, a === 2 || a === 3) {
+      const u = this.el.content.firstChild;
+      u.replaceWith(...u.childNodes);
+    }
+    for (; (r = G.nextNode()) !== null && p.length < c; ) {
+      if (r.nodeType === 1) {
+        if (r.hasAttributes()) for (const u of r.getAttributeNames()) if (u.endsWith($e)) {
+          const S = b[o++], U = r.getAttribute(u).split(R), Dt = /([.?@])?(.*)/.exec(S);
+          p.push({ type: 1, index: i, name: Dt[2], strings: U, ctor: Dt[1] === "." ? qe : Dt[1] === "?" ? We : Dt[1] === "@" ? Xe : Wt }), r.removeAttribute(u);
+        } else u.startsWith(R) && (p.push({ type: 6, index: i }), r.removeAttribute(u));
+        if (ze.test(r.tagName)) {
+          const u = r.textContent.split(R), S = u.length - 1;
+          if (S > 0) {
+            r.textContent = Lt ? Lt.emptyScript : "";
+            for (let U = 0; U < S; U++) r.append(u[U], It()), G.nextNode(), p.push({ type: 2, index: ++i });
+            r.append(u[S], It());
+          }
+        }
+      } else if (r.nodeType === 8) if (r.data === _e) p.push({ type: 2, index: i });
+      else {
+        let u = -1;
+        for (; (u = r.data.indexOf(R, u + 1)) !== -1; ) p.push({ type: 7, index: i }), u += R.length - 1;
+      }
+      i++;
+    }
+  }
+  static createElement(t, a) {
+    const s = Z.createElement("template");
+    return s.innerHTML = t, s;
+  }
+}
+function ct(e, t, a = e, s) {
+  if (t === lt) return t;
+  let r = s !== void 0 ? a._$Co?.[s] : a._$Cl;
+  const i = bt(t) ? void 0 : t._$litDirective$;
+  return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(e), r._$AT(e, a, s)), s !== void 0 ? (a._$Co ??= [])[s] = r : a._$Cl = r), r !== void 0 && (t = ct(e, r._$AS(e, t.values), r, s)), t;
+}
+class Ve {
+  constructor(t, a) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = a;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t) {
+    const { el: { content: a }, parts: s } = this._$AD, r = (t?.creationScope ?? Z).importNode(a, !0);
+    G.currentNode = r;
+    let i = G.nextNode(), o = 0, c = 0, p = s[0];
+    for (; p !== void 0; ) {
+      if (o === p.index) {
+        let g;
+        p.type === 2 ? g = new qt(i, i.nextSibling, this, t) : p.type === 1 ? g = new p.ctor(i, p.name, p.strings, this, t) : p.type === 6 && (g = new Ke(i, this, t)), this._$AV.push(g), p = s[++c];
+      }
+      o !== p?.index && (i = G.nextNode(), o++);
+    }
+    return G.currentNode = Z, r;
+  }
+  p(t) {
+    let a = 0;
+    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, a), a += s.strings.length - 2) : s._$AI(t[a])), a++;
+  }
+}
+class qt {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t, a, s, r) {
+    this.type = 2, this._$AH = f, this._$AN = void 0, this._$AA = t, this._$AB = a, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode;
+    const a = this._$AM;
+    return a !== void 0 && t?.nodeType === 11 && (t = a.parentNode), t;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t, a = this) {
+    t = ct(this, t, a), bt(t) ? t === f || t == null || t === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : t !== this._$AH && t !== lt && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : He(t) ? this.k(t) : this._(t);
+  }
+  O(t) {
+    return this._$AA.parentNode.insertBefore(t, this._$AB);
+  }
+  T(t) {
+    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
+  }
+  _(t) {
+    this._$AH !== f && bt(this._$AH) ? this._$AA.nextSibling.data = t : this.T(Z.createTextNode(t)), this._$AH = t;
+  }
+  $(t) {
+    const { values: a, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = yt.createElement(Ce(s.h, s.h[0]), this.options)), s);
+    if (this._$AH?._$AD === r) this._$AH.p(a);
+    else {
+      const i = new Ve(r, this), o = i.u(this.options);
+      i.p(a), this.T(o), this._$AH = i;
+    }
+  }
+  _$AC(t) {
+    let a = we.get(t.strings);
+    return a === void 0 && we.set(t.strings, a = new yt(t)), a;
+  }
+  k(t) {
+    ae(this._$AH) || (this._$AH = [], this._$AR());
+    const a = this._$AH;
+    let s, r = 0;
+    for (const i of t) r === a.length ? a.push(s = new qt(this.O(It()), this.O(It()), this, this.options)) : s = a[r], s._$AI(i), r++;
+    r < a.length && (this._$AR(s && s._$AB.nextSibling, r), a.length = r);
+  }
+  _$AR(t = this._$AA.nextSibling, a) {
+    for (this._$AP?.(!1, !0, a); t !== this._$AB; ) {
+      const s = ue(t).nextSibling;
+      ue(t).remove(), t = s;
+    }
+  }
+  setConnected(t) {
+    this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
+  }
+}
+class Wt {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t, a, s, r, i) {
+    this.type = 1, this._$AH = f, this._$AN = void 0, this.element = t, this.name = a, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = f;
+  }
+  _$AI(t, a = this, s, r) {
+    const i = this.strings;
+    let o = !1;
+    if (i === void 0) t = ct(this, t, a, 0), o = !bt(t) || t !== this._$AH && t !== lt, o && (this._$AH = t);
+    else {
+      const c = t;
+      let p, g;
+      for (t = i[0], p = 0; p < i.length - 1; p++) g = ct(this, c[s + p], a, p), g === lt && (g = this._$AH[p]), o ||= !bt(g) || g !== this._$AH[p], g === f ? t = f : t !== f && (t += (g ?? "") + i[p + 1]), this._$AH[p] = g;
+    }
+    o && !r && this.j(t);
+  }
+  j(t) {
+    t === f ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  }
+}
+class qe extends Wt {
   constructor() {
-    super(...arguments), this.name = "", this.size = "md", this.icons = {
-      checkmark: "✓",
-      check: "✓",
-      close: "✕",
-      x: "✕",
-      plus: "+",
-      minus: "−",
-      search: "⌕",
-      "arrow-right": "→",
-      "arrow-left": "←",
-      "arrow-up": "↑",
-      "arrow-down": "↓",
-      download: "⬇",
-      upload: "⬆",
-      folder: "📁",
-      file: "📄",
-      trash: "🗑",
-      delete: "🗑",
-      edit: "✎",
-      pencil: "✎",
-      eye: "◉",
-      menu: "☰",
-      hamburger: "☰",
-      settings: "⚙",
-      gear: "⚙",
-      star: "★",
-      heart: "♥",
-      play: "►",
-      pause: "❚❚",
-      stop: "■",
-      prev: "◄◄",
-      next: "►►",
-      rewind: "◄◄",
-      forward: "►►",
-      volume: "🔊",
-      "volume-mute": "🔇",
-      music: "♫"
-    };
+    super(...arguments), this.type = 3;
+  }
+  j(t) {
+    this.element[this.name] = t === f ? void 0 : t;
+  }
+}
+class We extends Wt {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== f);
+  }
+}
+class Xe extends Wt {
+  constructor(t, a, s, r, i) {
+    super(t, a, s, r, i), this.type = 5;
+  }
+  _$AI(t, a = this) {
+    if ((t = ct(this, t, a, 0) ?? f) === lt) return;
+    const s = this._$AH, r = t === f && s !== f || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, i = t !== f && (s === f || r);
+    r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  }
+  handleEvent(t) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
+  }
+}
+class Ke {
+  constructor(t, a, s) {
+    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = a, this.options = s;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t) {
+    ct(this, t);
+  }
+}
+const Ge = re.litHtmlPolyfillSupport;
+Ge?.(yt, qt), (re.litHtmlVersions ??= []).push("3.3.2");
+const Ze = { CHILD: 2 }, Qe = (e) => (...t) => ({ _$litDirective$: e, values: t });
+class Je {
+  constructor(t) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, a, s) {
+    this._$Ct = t, this._$AM = a, this._$Ci = s;
+  }
+  _$AS(t, a) {
+    return this.update(t, a);
+  }
+  update(t, a) {
+    return this.render(...a);
+  }
+}
+class Zt extends Je {
+  constructor(t) {
+    if (super(t), this.it = f, t.type !== Ze.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(t) {
+    if (t === f || t == null) return this._t = void 0, this.it = t;
+    if (t === lt) return t;
+    if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (t === this.it) return this._t;
+    this.it = t;
+    const a = [t];
+    return a.raw = a, this._t = { _$litType$: this.constructor.resultType, strings: a, values: [] };
+  }
+}
+Zt.directiveName = "unsafeHTML", Zt.resultType = 1;
+const tr = Qe(Zt);
+var er = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, se = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? rr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && er(t, a, r), r;
+};
+const ar = {
+  check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17l-5-5"/></svg>',
+  checkmark: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17l-5-5"/></svg>',
+  close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>',
+  x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>',
+  plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M5 12h14"/></svg>',
+  minus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14"/></svg>',
+  search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>',
+  "arrow-right": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>',
+  "arrow-left": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5"/><path d="M11 19l-7-7 7-7"/></svg>',
+  "arrow-up": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5"/><path d="M5 12l7-7 7 7"/></svg>',
+  "arrow-down": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>',
+  download: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>',
+  upload: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v4"/><path d="M7 14l5-5 5 5"/><path d="M12 9v12"/></svg>',
+  folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>',
+  file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>',
+  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>',
+  delete: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>',
+  edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>',
+  pencil: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>',
+  eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>',
+  menu: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></svg>',
+  hamburger: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></svg>',
+  settings: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.66.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.03 7.03 0 0 0-1.7-.98l-.38-2.65A.5.5 0 0 0 13.5 2h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.24-1.18.56-1.7.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64L4.57 11c-.04.32-.07.66-.07.98s.03.66.07.98L2.46 14.6a.5.5 0 0 0-.12.64l2 3.46c.14.24.44.34.7.22l2.49-1c.52.42 1.09.74 1.7.98l.38 2.65c.05.28.29.42.5.42h4c.21 0 .45-.14.5-.42l.38-2.65c.61-.24 1.18-.56 1.7-.98l2.49 1c.26.12.56.02.7-.22l2-3.46a.5.5 0 0 0-.12-.64L19.43 12.98z"/><circle cx="12" cy="12" r="3"/></svg>',
+  gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.66.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.03 7.03 0 0 0-1.7-.98l-.38-2.65A.5.5 0 0 0 13.5 2h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.24-1.18.56-1.7.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64L4.57 11c-.04.32-.07.66-.07.98s.03.66.07.98L2.46 14.6a.5.5 0 0 0-.12.64l2 3.46c.14.24.44.34.7.22l2.49-1c.52.42 1.09.74 1.7.98l.38 2.65c.05.28.29.42.5.42h4c.21 0 .45-.14.5-.42l.38-2.65c.61-.24 1.18-.56 1.7-.98l2.49 1c.26.12.56.02.7-.22l2-3.46a.5.5 0 0 0-.12-.64L19.43 12.98z"/><circle cx="12" cy="12" r="3"/></svg>',
+  star: '<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" xmlns="http://www.w3.org/2000/svg"><path d="M12 .587l3.668 7.431L23.4 9.75l-5.6 5.455L18.335 24 12 19.897 5.665 24l.535-8.795L.6 9.75l7.732-1.732L12 .587z"/></svg>',
+  heart: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 21s-7-4.35-9.2-7.1C.8 11.9 2 7.9 5 6.4 7 5.3 9.6 6 12 8.2 14.4 6 17 5.3 19 6.4c3 1.5 4.2 5.5 2.2 7.5C19 16.65 12 21 12 21z"/></svg>',
+  play: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5 3v18l15-9L5 3z"/></svg>',
+  pause: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>',
+  stop: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="12" height="12"/></svg>',
+  prev: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M11 19l-7-7 7-7"/><path d="M18 19l-7-7 7-7"/></svg>',
+  next: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M13 5l7 7-7 7"/><path d="M6 5l7 7-7 7"/></svg>',
+  rewind: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M11 19l-7-7 7-7"/><path d="M18 19l-7-7 7-7"/></svg>',
+  forward: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M13 5l7 7-7 7"/><path d="M6 5l7 7-7 7"/></svg>',
+  volume: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19 5a4 4 0 0 1 0 14"/></svg>',
+  "volume-mute": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/></svg>',
+  music: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'
+};
+let xt = class extends h {
+  constructor() {
+    super(...arguments), this.name = "", this.size = "md";
   }
   render() {
-    return c`<span class="icon">${this.icons[this.name] || "?"}</span>`;
+    const e = ar[this.name] || '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><text x="0" y="14">?</text></svg>';
+    return l`<span class="icon" aria-hidden="true">${tr(e)}</span>`;
   }
 };
-ot.styles = l`
+xt.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -352,21 +603,21 @@ ot.styles = l`
       height: 100%;
     }
   `;
-Mt([
+se([
   n()
-], ot.prototype, "name", 2);
-Mt([
+], xt.prototype, "name", 2);
+se([
   n()
-], ot.prototype, "size", 2);
-ot = Mt([
-  d("crt-icon")
-], ot);
-var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, B = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? hr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && dr(t, a, e), e;
+], xt.prototype, "size", 2);
+xt = se([
+  v("crt-icon")
+], xt);
+var sr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, X = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ir(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && sr(t, a, r), r;
 };
-let w = class extends p {
+let z = class extends h {
   constructor() {
     super(), this.size = "medium", this.variant = "primary", this.disabled = !1, this.type = "button", this.iconOnly = !1, this.iconLeft = "", this.iconRight = "", console.log("Button constructor called");
   }
@@ -375,23 +626,23 @@ let w = class extends p {
   }
   render() {
     if (console.log("Button render called"), this.iconOnly) {
-      const r = this.iconLeft || this.iconRight;
-      return c`
+      const e = this.iconLeft || this.iconRight;
+      return l`
         <button type="${this.type}" ?disabled="${this.disabled}">
-          ${r ? c`<crt-icon name="${r}"></crt-icon>` : c`<slot></slot>`}
+          ${e ? l`<crt-icon name="${e}"></crt-icon>` : l`<slot></slot>`}
         </button>
       `;
     }
-    return c`
+    return l`
       <button type="${this.type}" ?disabled="${this.disabled}">
-        ${this.iconLeft ? c`<crt-icon name="${this.iconLeft}"></crt-icon>` : ""}
+        ${this.iconLeft ? l`<crt-icon name="${this.iconLeft}"></crt-icon>` : ""}
         <slot></slot>
-        ${this.iconRight ? c`<crt-icon name="${this.iconRight}"></crt-icon>` : ""}
+        ${this.iconRight ? l`<crt-icon name="${this.iconRight}"></crt-icon>` : ""}
       </button>
     `;
   }
 };
-w.styles = l`
+z.styles = d`
     :host {
       display: inline-block;
     }
@@ -547,44 +798,44 @@ w.styles = l`
       flex-shrink: 0;
     }
   `;
-B([
+X([
   n({ reflect: !0 })
-], w.prototype, "size", 2);
-B([
+], z.prototype, "size", 2);
+X([
   n({ reflect: !0 })
-], w.prototype, "variant", 2);
-B([
+], z.prototype, "variant", 2);
+X([
   n({ type: Boolean })
-], w.prototype, "disabled", 2);
-B([
+], z.prototype, "disabled", 2);
+X([
   n()
-], w.prototype, "type", 2);
-B([
+], z.prototype, "type", 2);
+X([
   n({ attribute: "icon-only", type: Boolean })
-], w.prototype, "iconOnly", 2);
-B([
+], z.prototype, "iconOnly", 2);
+X([
   n({ attribute: "icon-left" })
-], w.prototype, "iconLeft", 2);
-B([
+], z.prototype, "iconLeft", 2);
+X([
   n({ attribute: "icon-right" })
-], w.prototype, "iconRight", 2);
-w = B([
-  d("crt-button")
-], w);
-var vr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, Kt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? gr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && vr(t, a, e), e;
+], z.prototype, "iconRight", 2);
+z = X([
+  v("crt-button")
+], z);
+var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, Oe = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? nr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && or(t, a, r), r;
 };
-let wt = class extends p {
+let Bt = class extends h {
   constructor() {
     super(...arguments), this.variant = "primary";
   }
   render() {
-    return c`<span class="badge"><slot></slot></span>`;
+    return l`<span class="badge"><slot></slot></span>`;
   }
 };
-wt.styles = l`
+Bt.styles = d`
     :host {
       --badge-bg: transparent;
       --badge-color: var(--crt-primary);
@@ -625,41 +876,41 @@ wt.styles = l`
       --badge-border: 1px solid var(--crt-info);
     }
   `;
-Kt([
+Oe([
   n()
-], wt.prototype, "variant", 2);
-wt = Kt([
-  d("crt-badge")
-], wt);
-var ur = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, St = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? mr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && ur(t, a, e), e;
+], Bt.prototype, "variant", 2);
+Bt = Oe([
+  v("crt-badge")
+], Bt);
+var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Xt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? cr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && lr(t, a, r), r;
 };
-let kt = class extends p {
+let Nt = class extends h {
   constructor() {
     super(...arguments), this.level = 1;
   }
   render() {
     switch (this.level) {
       case 1:
-        return c`<h1><slot></slot></h1>`;
+        return l`<h1><slot></slot></h1>`;
       case 2:
-        return c`<h2><slot></slot></h2>`;
+        return l`<h2><slot></slot></h2>`;
       case 3:
-        return c`<h3><slot></slot></h3>`;
+        return l`<h3><slot></slot></h3>`;
       case 4:
-        return c`<h4><slot></slot></h4>`;
+        return l`<h4><slot></slot></h4>`;
       case 5:
-        return c`<h5><slot></slot></h5>`;
+        return l`<h5><slot></slot></h5>`;
       case 6:
-        return c`<h6><slot></slot></h6>`;
+        return l`<h6><slot></slot></h6>`;
       default:
-        return c`<h1><slot></slot></h1>`;
+        return l`<h1><slot></slot></h1>`;
     }
   }
 };
-kt.styles = l`
+Nt.styles = d`
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--crt-font-family);
       color: var(--crt-text-primary);
@@ -688,21 +939,21 @@ kt.styles = l`
       font-size: var(--crt-font-size-base);
     }
   `;
-St([
+Xt([
   n({ type: Number })
-], kt.prototype, "level", 2);
-kt = St([
-  d("crt-heading")
-], kt);
-let $t = class extends p {
+], Nt.prototype, "level", 2);
+Nt = Xt([
+  v("crt-heading")
+], Nt);
+let Ut = class extends h {
   constructor() {
     super(...arguments), this.muted = !1;
   }
   render() {
-    return c`<p><slot></slot></p>`;
+    return l`<p><slot></slot></p>`;
   }
 };
-$t.styles = l`
+Ut.styles = d`
     p {
       font-family: var(--crt-font-family);
       color: var(--crt-text-secondary);
@@ -714,43 +965,43 @@ $t.styles = l`
       color: var(--crt-text-muted);
     }
   `;
-St([
+Xt([
   n()
-], $t.prototype, "muted", 2);
-$t = St([
-  d("crt-text")
-], $t);
-var br = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, It = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? fr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && br(t, a, e), e;
+], Ut.prototype, "muted", 2);
+Ut = Xt([
+  v("crt-text")
+], Ut);
+var pr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, ie = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? dr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && pr(t, a, r), r;
 };
-let nt = class extends p {
+let wt = class extends h {
   constructor() {
     super(...arguments), this.activeTab = 0, this.tabs = [];
   }
-  selectTab(r) {
-    this.activeTab = r;
+  selectTab(e) {
+    this.activeTab = e;
   }
   render() {
-    return c`
+    return l`
       <div class="tabs-header">
         ${this.tabs.map(
-      (r, t) => c`
+      (e, t) => l`
             <button
               class="tab-button ${t === this.activeTab ? "active" : ""}"
               @click="${() => this.selectTab(t)}"
             >
-              ${r.label}
+              ${e.label}
             </button>
           `
     )}
       </div>
       <div class="tabs-content">
         ${this.tabs.map(
-      (r, t) => c`
+      (e, t) => l`
             <div class="tab-pane ${t === this.activeTab ? "active" : ""}">
-              ${r.label.toLowerCase() === "code" ? c`<pre><code>${r.content}</code></pre>` : c`<div>${yr(r.content)}</div>`}
+              ${e.label.toLowerCase() === "code" ? l`<pre><code>${e.content}</code></pre>` : l`<div>${hr(e.content)}</div>`}
             </div>
           `
     )}
@@ -758,7 +1009,7 @@ let nt = class extends p {
     `;
   }
 };
-nt.styles = l`
+wt.styles = d`
     :host {
       display: block;
     }
@@ -825,43 +1076,43 @@ nt.styles = l`
       font-family: var(--crt-font-family);
     }
   `;
-It([
-  v()
-], nt.prototype, "activeTab", 2);
-It([
+ie([
+  m()
+], wt.prototype, "activeTab", 2);
+ie([
   n({ type: Array })
-], nt.prototype, "tabs", 2);
-nt = It([
-  d("crt-tabs")
-], nt);
-function yr(r) {
+], wt.prototype, "tabs", 2);
+wt = ie([
+  v("crt-tabs")
+], wt);
+function hr(e) {
   const t = document.createElement("div");
-  return t.innerHTML = r, t;
+  return t.innerHTML = e, t;
 }
-var xr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, k = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? wr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && xr(t, a, e), e;
+var vr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, C = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? gr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && vr(t, a, r), r;
 };
-let Y = class extends p {
+let Q = class extends h {
   constructor() {
     super(...arguments), this.type = "text", this.placeholder = "", this.value = "", this.disabled = !1;
   }
   render() {
-    return c`
+    return l`
       <input
         type="${this.type}"
         placeholder="${this.placeholder}"
         value="${this.value}"
         ?disabled="${this.disabled}"
-        @input="${(r) => {
-      this.value = r.target.value;
+        @input="${(e) => {
+      this.value = e.target.value;
     }}"
       />
     `;
   }
 };
-Y.styles = l`
+Q.styles = d`
     :host {
       display: block;
     }
@@ -907,33 +1158,33 @@ Y.styles = l`
       padding-right: var(--crt-spacing-lg);
     }
   `;
-k([
+C([
   n()
-], Y.prototype, "type", 2);
-k([
+], Q.prototype, "type", 2);
+C([
   n()
-], Y.prototype, "placeholder", 2);
-k([
+], Q.prototype, "placeholder", 2);
+C([
   n()
-], Y.prototype, "value", 2);
-k([
+], Q.prototype, "value", 2);
+C([
   n()
-], Y.prototype, "disabled", 2);
-Y = k([
-  d("crt-input")
-], Y);
-let q = class extends p {
+], Q.prototype, "disabled", 2);
+Q = C([
+  v("crt-input")
+], Q);
+let J = class extends h {
   constructor() {
     super(...arguments), this.placeholder = "", this.value = "", this.disabled = !1, this.rows = 4;
   }
   render() {
-    return c`
+    return l`
       <textarea
         placeholder="${this.placeholder}"
         rows="${this.rows}"
         ?disabled="${this.disabled}"
-        @input="${(r) => {
-      this.value = r.target.value;
+        @input="${(e) => {
+      this.value = e.target.value;
     }}"
       >
 ${this.value}</textarea
@@ -941,7 +1192,7 @@ ${this.value}</textarea
     `;
   }
 };
-q.styles = l`
+J.styles = d`
     :host {
       display: block;
     }
@@ -983,41 +1234,41 @@ q.styles = l`
       border-style: dashed;
     }
   `;
-k([
+C([
   n()
-], q.prototype, "placeholder", 2);
-k([
+], J.prototype, "placeholder", 2);
+C([
   n()
-], q.prototype, "value", 2);
-k([
+], J.prototype, "value", 2);
+C([
   n()
-], q.prototype, "disabled", 2);
-k([
+], J.prototype, "disabled", 2);
+C([
   n()
-], q.prototype, "rows", 2);
-q = k([
-  d("crt-textarea")
-], q);
-var kr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, rt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? $r(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && kr(t, a, e), e;
+], J.prototype, "rows", 2);
+J = C([
+  v("crt-textarea")
+], J);
+var ur = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, ht = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? mr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && ur(t, a, r), r;
 };
-let I = class extends p {
+let F = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.target = "", this.iconLeft = !1, this.iconRight = !1, this.icon = "";
   }
   render() {
-    return c`
+    return l`
       <a href="${this.href}" ${this.target ? `target="${this.target}"` : ""}>
-        ${this.iconLeft ? c`<crt-icon name="${this.icon}"></crt-icon>` : ""}
+        ${this.iconLeft ? l`<crt-icon name="${this.icon}"></crt-icon>` : ""}
         <slot></slot>
-        ${this.iconRight ? c`<crt-icon name="${this.icon}"></crt-icon>` : ""}
+        ${this.iconRight ? l`<crt-icon name="${this.icon}"></crt-icon>` : ""}
       </a>
     `;
   }
 };
-I.styles = l`
+F.styles = d`
     :host {
       --crt-link-color: var(--crt-primary);
     }
@@ -1043,38 +1294,38 @@ I.styles = l`
       color: var(--crt-primary-dark);
     }
   `;
-rt([
+ht([
   n({ type: String })
-], I.prototype, "href", 2);
-rt([
+], F.prototype, "href", 2);
+ht([
   n({ type: String })
-], I.prototype, "target", 2);
-rt([
+], F.prototype, "target", 2);
+ht([
   n({ type: Boolean })
-], I.prototype, "iconLeft", 2);
-rt([
+], F.prototype, "iconLeft", 2);
+ht([
   n({ type: Boolean })
-], I.prototype, "iconRight", 2);
-rt([
+], F.prototype, "iconRight", 2);
+ht([
   n({ type: String })
-], I.prototype, "icon", 2);
-I = rt([
-  d("crt-link")
-], I);
-var _r = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, H = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? zr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && _r(t, a, e), e;
+], F.prototype, "icon", 2);
+F = ht([
+  v("crt-link")
+], F);
+var fr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, st = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? br(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && fr(t, a, r), r;
 };
-let P = class extends p {
+let E = class extends h {
   constructor() {
-    super(...arguments), this.accept = "", this.multiple = !0, this.name = "", this.maxSize = 10485760, this.maxFiles = 10, this.files = [], this._handleFileSelect = (r) => {
-      const t = r.target;
+    super(...arguments), this.accept = "", this.multiple = !0, this.name = "", this.maxSize = 10485760, this.maxFiles = 10, this.files = [], this._handleFileSelect = (e) => {
+      const t = e.target;
       t.files && (this._addFiles(Array.from(t.files)), t.value = "");
     }, this._handleUploadClick = () => {
       this.shadowRoot?.querySelector('input[type="file"]')?.click();
-    }, this._handleRemoveFile = (r) => {
-      this.files = this.files.filter((t) => t.id !== r), this.dispatchEvent(new CustomEvent("files-changed", {
+    }, this._handleRemoveFile = (e) => {
+      this.files = this.files.filter((t) => t.id !== e), this.dispatchEvent(new CustomEvent("files-changed", {
         detail: { files: this.files.map((t) => t.file) }
       }));
     }, this._handleClearAll = () => {
@@ -1092,44 +1343,44 @@ let P = class extends p {
   _generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
-  _addFiles(r) {
-    const i = r.filter((e) => {
-      if (e.size > this.maxSize)
-        return console.warn(`File ${e.name} exceeds max size`), !1;
+  _addFiles(e) {
+    const s = e.filter((r) => {
+      if (r.size > this.maxSize)
+        return console.warn(`File ${r.name} exceeds max size`), !1;
       if (this.accept) {
-        const s = this.accept.split(",").map((O) => O.trim()), o = e.type, h = "." + e.name.split(".").pop()?.toLowerCase();
-        if (!s.some((O) => O.startsWith(".") ? h === O.toLowerCase() : O.endsWith("/*") ? o.startsWith(O.replace("/*", "/")) : o === O))
-          return console.warn(`File ${e.name} type not accepted`), !1;
+        const i = this.accept.split(",").map((g) => g.trim()), o = r.type, c = "." + r.name.split(".").pop()?.toLowerCase();
+        if (!i.some((g) => g.startsWith(".") ? c === g.toLowerCase() : g.endsWith("/*") ? o.startsWith(g.replace("/*", "/")) : o === g))
+          return console.warn(`File ${r.name} type not accepted`), !1;
       }
       return !0;
-    }).slice(0, this.maxFiles - this.files.length).map((e) => ({
-      file: e,
+    }).slice(0, this.maxFiles - this.files.length).map((r) => ({
+      file: r,
       id: this._generateId(),
       progress: 100,
       status: "complete"
     }));
-    this.files = [...this.files, ...i], this.dispatchEvent(new CustomEvent("files-changed", {
-      detail: { files: this.files.map((e) => e.file) }
+    this.files = [...this.files, ...s], this.dispatchEvent(new CustomEvent("files-changed", {
+      detail: { files: this.files.map((r) => r.file) }
     }));
   }
   /** Public method to clear all files */
   clearFiles() {
     this._handleClearAll();
   }
-  _formatFileSize(r) {
-    if (r === 0) return "0 B";
-    const t = 1024, a = ["B", "KB", "MB", "GB"], i = Math.floor(Math.log(r) / Math.log(t));
-    return parseFloat((r / Math.pow(t, i)).toFixed(1)) + " " + a[i];
+  _formatFileSize(e) {
+    if (e === 0) return "0 B";
+    const t = 1024, a = ["B", "KB", "MB", "GB"], s = Math.floor(Math.log(e) / Math.log(t));
+    return parseFloat((e / Math.pow(t, s)).toFixed(1)) + " " + a[s];
   }
-  _getFileIcon(r) {
-    const t = r.name.split(".").pop()?.toLowerCase() || "", a = r.type;
+  _getFileIcon(e) {
+    const t = e.name.split(".").pop()?.toLowerCase() || "", a = e.type;
     return a.startsWith("image/") ? "[IMG]" : a.startsWith("video/") ? "[VID]" : a.startsWith("audio/") ? "[AUD]" : a === "application/pdf" ? "[PDF]" : ["doc", "docx"].includes(t) ? "[DOC]" : ["xls", "xlsx"].includes(t) ? "[XLS]" : ["zip", "rar", "7z", "tar", "gz"].includes(t) ? "[ZIP]" : ["js", "ts", "py", "java", "cpp", "c", "html", "css"].includes(t) ? "[COD]" : ["txt", "md", "json", "xml"].includes(t) ? "[TXT]" : "[FIL]";
   }
   _getTotalSize() {
-    return this.files.reduce((r, t) => r + t.file.size, 0);
+    return this.files.reduce((e, t) => e + t.file.size, 0);
   }
   render() {
-    return c`
+    return l`
       <div class="file-manager">
         <!-- Header -->
         <div class="fm-header">
@@ -1154,7 +1405,7 @@ let P = class extends p {
         </div>
 
         <!-- File List -->
-        ${this.files.length > 0 ? c`
+        ${this.files.length > 0 ? l`
           <div class="file-list-header">
             <span>FILENAME</span>
             <span style="text-align: right;">SIZE</span>
@@ -1162,25 +1413,25 @@ let P = class extends p {
             <span style="text-align: center;">ACT</span>
           </div>
           <div class="file-list">
-            ${this.files.map((r) => c`
+            ${this.files.map((e) => l`
               <div class="file-item">
                 <div class="file-info">
-                  <span class="file-icon">${this._getFileIcon(r.file)}</span>
-                  <span class="file-name">${r.file.name}</span>
+                  <span class="file-icon">${this._getFileIcon(e.file)}</span>
+                  <span class="file-name">${e.file.name}</span>
                 </div>
-                <span class="file-size">${this._formatFileSize(r.file.size)}</span>
-                <span class="file-status ${r.status}">${r.status.toUpperCase()}</span>
+                <span class="file-size">${this._formatFileSize(e.file.size)}</span>
+                <span class="file-status ${e.status}">${e.status.toUpperCase()}</span>
                 <div class="file-actions">
                   <button 
                     class="file-remove" 
-                    @click="${() => this._handleRemoveFile(r.id)}"
+                    @click="${() => this._handleRemoveFile(e.id)}"
                     title="Remove file"
                   >X</button>
                 </div>
               </div>
             `)}
           </div>
-        ` : c`
+        ` : l`
           <div class="empty-state">
             <div class="empty-icon">[---]</div>
             <div>NO FILES LOADED</div>
@@ -1193,7 +1444,7 @@ let P = class extends p {
             READY FOR TRANSFER
           </span>
           <div class="fm-footer-actions">
-            ${this.files.length > 0 ? c`
+            ${this.files.length > 0 ? l`
               <crt-button size="small" variant="error" @click="${this._handleClearAll}">
                 CLEAR ALL
               </crt-button>
@@ -1207,7 +1458,7 @@ let P = class extends p {
     `;
   }
 };
-P.styles = l`
+E.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -1502,33 +1753,33 @@ P.styles = l`
       transition: width 0.3s ease;
     }
   `;
-H([
+st([
   n({ type: String })
-], P.prototype, "accept", 2);
-H([
+], E.prototype, "accept", 2);
+st([
   n({ type: Boolean })
-], P.prototype, "multiple", 2);
-H([
+], E.prototype, "multiple", 2);
+st([
   n({ type: String })
-], P.prototype, "name", 2);
-H([
+], E.prototype, "name", 2);
+st([
   n({ type: Number })
-], P.prototype, "maxSize", 2);
-H([
+], E.prototype, "maxSize", 2);
+st([
   n({ type: Number })
-], P.prototype, "maxFiles", 2);
-H([
-  v()
-], P.prototype, "files", 2);
-P = H([
-  d("crt-file-upload")
-], P);
-var Or = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, $ = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Pr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Or(t, a, e), e;
+], E.prototype, "maxFiles", 2);
+st([
+  m()
+], E.prototype, "files", 2);
+E = st([
+  v("crt-file-upload")
+], E);
+var yr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, O = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? xr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && yr(t, a, r), r;
 };
-let m = class extends p {
+let x = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select date...", this.format = "DD.MM.YYYY", this.min = "", this.max = "", this.disabled = !1, this._isOpen = !1, this._viewDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"], this._months = [
       "Januar",
@@ -1543,8 +1794,8 @@ let m = class extends p {
       "Oktober",
       "November",
       "Dezember"
-    ], this._handleOutsideClick = (r) => {
-      this.contains(r.target) || (this._isOpen = !1);
+    ], this._handleOutsideClick = (e) => {
+      this.contains(e.target) || (this._isOpen = !1);
     };
   }
   connectedCallback() {
@@ -1554,15 +1805,15 @@ let m = class extends p {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
   }
   _parseValue() {
-    const r = this.value.split(".");
-    if (r.length === 3) {
-      const [t, a, i] = r.map(Number);
-      this._selectedDate = new Date(i, a - 1, t), this._viewDate = new Date(this._selectedDate);
+    const e = this.value.split(".");
+    if (e.length === 3) {
+      const [t, a, s] = e.map(Number);
+      this._selectedDate = new Date(s, a - 1, t), this._viewDate = new Date(this._selectedDate);
     }
   }
-  _formatDate(r) {
-    const t = String(r.getDate()).padStart(2, "0"), a = String(r.getMonth() + 1).padStart(2, "0"), i = r.getFullYear();
-    return `${t}.${a}.${i}`;
+  _formatDate(e) {
+    const t = String(e.getDate()).padStart(2, "0"), a = String(e.getMonth() + 1).padStart(2, "0"), s = e.getFullYear();
+    return `${t}.${a}.${s}`;
   }
   _toggleCalendar() {
     this.disabled || (this._isOpen = !this._isOpen);
@@ -1581,9 +1832,9 @@ let m = class extends p {
       1
     );
   }
-  _selectDate(r) {
-    this._selectedDate = r, this.value = this._formatDate(r), this._isOpen = !1, this.dispatchEvent(new CustomEvent("change", {
-      detail: { value: this.value, date: r }
+  _selectDate(e) {
+    this._selectedDate = e, this.value = this._formatDate(e), this._isOpen = !1, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value, date: e }
     }));
   }
   _selectToday() {
@@ -1594,55 +1845,55 @@ let m = class extends p {
       detail: { value: "", date: null }
     }));
   }
-  _getDaysInMonth(r, t) {
-    return new Date(r, t + 1, 0).getDate();
+  _getDaysInMonth(e, t) {
+    return new Date(e, t + 1, 0).getDate();
   }
-  _getFirstDayOfMonth(r, t) {
-    const a = new Date(r, t, 1).getDay();
+  _getFirstDayOfMonth(e, t) {
+    const a = new Date(e, t, 1).getDay();
     return a === 0 ? 6 : a - 1;
   }
-  _isToday(r) {
+  _isToday(e) {
     const t = /* @__PURE__ */ new Date();
-    return r.getDate() === t.getDate() && r.getMonth() === t.getMonth() && r.getFullYear() === t.getFullYear();
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
   }
-  _isSelected(r) {
-    return this._selectedDate ? r.getDate() === this._selectedDate.getDate() && r.getMonth() === this._selectedDate.getMonth() && r.getFullYear() === this._selectedDate.getFullYear() : !1;
+  _isSelected(e) {
+    return this._selectedDate ? e.getDate() === this._selectedDate.getDate() && e.getMonth() === this._selectedDate.getMonth() && e.getFullYear() === this._selectedDate.getFullYear() : !1;
   }
   _renderDays() {
-    const r = this._viewDate.getFullYear(), t = this._viewDate.getMonth(), a = this._getDaysInMonth(r, t), i = this._getFirstDayOfMonth(r, t), e = this._getDaysInMonth(r, t - 1), s = [];
-    for (let h = i - 1; h >= 0; h--) {
-      const u = new Date(r, t - 1, e - h);
-      s.push(c`
-        <div class="day other-month" @click="${() => this._selectDate(u)}">
-          ${e - h}
+    const e = this._viewDate.getFullYear(), t = this._viewDate.getMonth(), a = this._getDaysInMonth(e, t), s = this._getFirstDayOfMonth(e, t), r = this._getDaysInMonth(e, t - 1), i = [];
+    for (let c = s - 1; c >= 0; c--) {
+      const p = new Date(e, t - 1, r - c);
+      i.push(l`
+        <div class="day other-month" @click="${() => this._selectDate(p)}">
+          ${r - c}
         </div>
       `);
     }
-    for (let h = 1; h <= a; h++) {
-      const u = new Date(r, t, h), O = this._isToday(u), Wt = this._isSelected(u);
-      s.push(c`
+    for (let c = 1; c <= a; c++) {
+      const p = new Date(e, t, c), g = this._isToday(p), b = this._isSelected(p);
+      i.push(l`
         <div 
-          class="day ${O ? "today" : ""} ${Wt ? "selected" : ""}"
-          @click="${() => this._selectDate(u)}"
+          class="day ${g ? "today" : ""} ${b ? "selected" : ""}"
+          @click="${() => this._selectDate(p)}"
         >
-          ${h}
+          ${c}
         </div>
       `);
     }
-    const o = 42 - s.length;
-    for (let h = 1; h <= o; h++) {
-      const u = new Date(r, t + 1, h);
-      s.push(c`
-        <div class="day other-month" @click="${() => this._selectDate(u)}">
-          ${h}
+    const o = 42 - i.length;
+    for (let c = 1; c <= o; c++) {
+      const p = new Date(e, t + 1, c);
+      i.push(l`
+        <div class="day other-month" @click="${() => this._selectDate(p)}">
+          ${c}
         </div>
       `);
     }
-    return s;
+    return i;
   }
   render() {
-    const r = `${this._months[this._viewDate.getMonth()]} ${this._viewDate.getFullYear()}`;
-    return c`
+    const e = `${this._months[this._viewDate.getMonth()]} ${this._viewDate.getFullYear()}`;
+    return l`
       <div class="calendar-wrapper">
         <div class="calendar-input">
           <input 
@@ -1666,12 +1917,12 @@ let m = class extends p {
         <div class="calendar-dropdown ${this._isOpen ? "open" : ""}">
           <div class="calendar-header">
             <button class="calendar-nav-btn" @click="${this._prevMonth}">◄</button>
-            <span class="calendar-title">${r}</span>
+            <span class="calendar-title">${e}</span>
             <button class="calendar-nav-btn" @click="${this._nextMonth}">►</button>
           </div>
           
           <div class="calendar-weekdays">
-            ${this._weekdays.map((t) => c`<div class="weekday">${t}</div>`)}
+            ${this._weekdays.map((t) => l`<div class="weekday">${t}</div>`)}
           </div>
           
           <div class="calendar-days">
@@ -1687,7 +1938,7 @@ let m = class extends p {
     `;
   }
 };
-m.styles = l`
+x.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -1892,56 +2143,56 @@ m.styles = l`
       color: var(--crt-bg-dark);
     }
   `;
-$([
+O([
   n({ type: String })
-], m.prototype, "value", 2);
-$([
+], x.prototype, "value", 2);
+O([
   n({ type: String })
-], m.prototype, "placeholder", 2);
-$([
+], x.prototype, "placeholder", 2);
+O([
   n({ type: String })
-], m.prototype, "format", 2);
-$([
+], x.prototype, "format", 2);
+O([
   n({ type: String })
-], m.prototype, "min", 2);
-$([
+], x.prototype, "min", 2);
+O([
   n({ type: String })
-], m.prototype, "max", 2);
-$([
+], x.prototype, "max", 2);
+O([
   n({ type: Boolean })
-], m.prototype, "disabled", 2);
-$([
-  v()
-], m.prototype, "_isOpen", 2);
-$([
-  v()
-], m.prototype, "_viewDate", 2);
-$([
-  v()
-], m.prototype, "_selectedDate", 2);
-m = $([
-  d("crt-calendar")
-], m);
-var Cr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, G = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Sr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Cr(t, a, e), e;
+], x.prototype, "disabled", 2);
+O([
+  m()
+], x.prototype, "_isOpen", 2);
+O([
+  m()
+], x.prototype, "_viewDate", 2);
+O([
+  m()
+], x.prototype, "_selectedDate", 2);
+x = O([
+  v("crt-calendar")
+], x);
+var wr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, it = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? kr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && wr(t, a, r), r;
 };
-let C = class extends p {
+let M = class extends h {
   constructor() {
-    super(...arguments), this.value = "", this.placeholder = "Select...", this.label = "", this.disabled = !1, this.options = [], this._isOpen = !1, this._handleOutsideClick = (r) => {
-      this.contains(r.target) || (this._isOpen = !1);
+    super(...arguments), this.value = "", this.placeholder = "Select...", this.label = "", this.disabled = !1, this.options = [], this._isOpen = !1, this._handleOutsideClick = (e) => {
+      this.contains(e.target) || (this._isOpen = !1);
     };
   }
   // Normalize options to flat array with group property
   _getNormalizedOptions() {
-    const r = [];
+    const e = [];
     for (const t of this.options)
       if ("options" in t && Array.isArray(t.options))
         for (const a of t.options)
-          r.push({ ...a, group: t.group });
-      else "value" in t && r.push(t);
-    return r;
+          e.push({ ...a, group: t.group });
+      else "value" in t && e.push(t);
+    return e;
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
@@ -1952,51 +2203,51 @@ let C = class extends p {
   _toggle() {
     this.disabled || (this._isOpen = !this._isOpen);
   }
-  _selectOption(r) {
-    r.disabled || (this.value = r.value, this._isOpen = !1, this.dispatchEvent(new CustomEvent("change", {
-      detail: { value: r.value, label: r.label }
+  _selectOption(e) {
+    e.disabled || (this.value = e.value, this._isOpen = !1, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: e.value, label: e.label }
     })));
   }
   _getSelectedLabel() {
     return this._getNormalizedOptions().find((a) => a.value === this.value)?.label || "";
   }
   _renderOptions() {
-    const r = this._getNormalizedOptions(), t = /* @__PURE__ */ new Map(), a = [];
-    r.forEach((e) => {
-      e.group ? (t.has(e.group) || t.set(e.group, []), t.get(e.group).push(e)) : a.push(e);
+    const e = this._getNormalizedOptions(), t = /* @__PURE__ */ new Map(), a = [];
+    e.forEach((r) => {
+      r.group ? (t.has(r.group) || t.set(r.group, []), t.get(r.group).push(r)) : a.push(r);
     });
-    const i = [];
-    for (const e of a)
-      i.push(this._renderOption(e));
-    for (const [e, s] of t) {
-      i.push(c`<div class="select-group-label">${e}</div>`);
-      for (const o of s)
-        i.push(this._renderOption(o));
+    const s = [];
+    for (const r of a)
+      s.push(this._renderOption(r));
+    for (const [r, i] of t) {
+      s.push(l`<div class="select-group-label">${r}</div>`);
+      for (const o of i)
+        s.push(this._renderOption(o));
     }
-    return i;
+    return s;
   }
-  _renderOption(r) {
-    const t = r.value === this.value;
-    return c`
+  _renderOption(e) {
+    const t = e.value === this.value;
+    return l`
       <div 
-        class="select-option ${t ? "selected" : ""} ${r.disabled ? "disabled" : ""}"
-        @click="${() => this._selectOption(r)}"
+        class="select-option ${t ? "selected" : ""} ${e.disabled ? "disabled" : ""}"
+        @click="${() => this._selectOption(e)}"
       >
-        ${r.label}
+        ${e.label}
       </div>
     `;
   }
   render() {
-    const r = this._getSelectedLabel();
-    return c`
-      ${this.label ? c`<label class="select-label">${this.label}</label>` : ""}
+    const e = this._getSelectedLabel();
+    return l`
+      ${this.label ? l`<label class="select-label">${this.label}</label>` : ""}
       <div class="select-wrapper">
         <div 
           class="select-trigger ${this._isOpen ? "open" : ""} ${this.disabled ? "disabled" : ""}"
           @click="${this._toggle}"
         >
-          <span class="select-value ${r ? "" : "placeholder"}">
-            ${r || this.placeholder}
+          <span class="select-value ${e ? "" : "placeholder"}">
+            ${e || this.placeholder}
           </span>
           <span class="select-arrow">▼</span>
         </div>
@@ -2008,7 +2259,7 @@ let C = class extends p {
     `;
   }
 };
-C.styles = l`
+M.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -2165,44 +2416,44 @@ C.styles = l`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-G([
+it([
   n({ type: String })
-], C.prototype, "value", 2);
-G([
+], M.prototype, "value", 2);
+it([
   n({ type: String })
-], C.prototype, "placeholder", 2);
-G([
+], M.prototype, "placeholder", 2);
+it([
   n({ type: String })
-], C.prototype, "label", 2);
-G([
+], M.prototype, "label", 2);
+it([
   n({ type: Boolean })
-], C.prototype, "disabled", 2);
-G([
+], M.prototype, "disabled", 2);
+it([
   n({ type: Array })
-], C.prototype, "options", 2);
-G([
-  v()
-], C.prototype, "_isOpen", 2);
-C = G([
-  d("crt-select")
-], C);
-var Er = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, g = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Dr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Er(t, a, e), e;
+], M.prototype, "options", 2);
+it([
+  m()
+], M.prototype, "_isOpen", 2);
+M = it([
+  v("crt-select")
+], M);
+var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, y = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? _r(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && $r(t, a, r), r;
 };
-let L = class extends p {
+let H = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.indeterminate = !1, this.label = "", this.value = "";
   }
-  _handleChange(r) {
-    const t = r.target;
+  _handleChange(e) {
+    const t = e.target;
     this.checked = t.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("change", {
       detail: { checked: this.checked, value: this.value }
     }));
   }
   render() {
-    return c`
+    return l`
       <label class="checkbox-wrapper">
         <input 
           type="checkbox" 
@@ -2215,11 +2466,11 @@ let L = class extends p {
           <span class="checkmark">${this.indeterminate ? "−" : "✓"}</span>
         </div>
       </label>
-      ${this.label ? c`<span class="label">${this.label}</span>` : ""}
+      ${this.label ? l`<span class="label">${this.label}</span>` : ""}
     `;
   }
 };
-L.styles = l`
+H.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2301,36 +2552,36 @@ L.styles = l`
       transform: scale(1);
     }
   `;
-g([
+y([
   n({ type: Boolean, reflect: !0 })
-], L.prototype, "checked", 2);
-g([
+], H.prototype, "checked", 2);
+y([
   n({ type: Boolean, reflect: !0 })
-], L.prototype, "disabled", 2);
-g([
+], H.prototype, "disabled", 2);
+y([
   n({ type: Boolean })
-], L.prototype, "indeterminate", 2);
-g([
+], H.prototype, "indeterminate", 2);
+y([
   n({ type: String })
-], L.prototype, "label", 2);
-g([
+], H.prototype, "label", 2);
+y([
   n({ type: String })
-], L.prototype, "value", 2);
-L = g([
-  d("crt-checkbox")
-], L);
-let U = class extends p {
+], H.prototype, "value", 2);
+H = y([
+  v("crt-checkbox")
+], H);
+let Y = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.value = "", this.name = "";
   }
-  _handleChange(r) {
-    r.target.checked && (this.checked = !0, this.dispatchEvent(new CustomEvent("change", {
+  _handleChange(e) {
+    e.target.checked && (this.checked = !0, this.dispatchEvent(new CustomEvent("change", {
       detail: { checked: this.checked, value: this.value },
       bubbles: !0
     })));
   }
   render() {
-    return c`
+    return l`
       <label class="radio-wrapper">
         <input 
           type="radio" 
@@ -2344,11 +2595,11 @@ let U = class extends p {
           <div class="radio-dot"></div>
         </div>
       </label>
-      ${this.label ? c`<span class="label">${this.label}</span>` : ""}
+      ${this.label ? l`<span class="label">${this.label}</span>` : ""}
     `;
   }
 };
-U.styles = l`
+Y.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2422,28 +2673,28 @@ U.styles = l`
       user-select: none;
     }
   `;
-g([
+y([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "checked", 2);
-g([
+], Y.prototype, "checked", 2);
+y([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "disabled", 2);
-g([
+], Y.prototype, "disabled", 2);
+y([
   n({ type: String })
-], U.prototype, "label", 2);
-g([
+], Y.prototype, "label", 2);
+y([
   n({ type: String })
-], U.prototype, "value", 2);
-g([
+], Y.prototype, "value", 2);
+y([
   n({ type: String })
-], U.prototype, "name", 2);
-U = g([
-  d("crt-radio")
-], U);
-let Z = class extends p {
+], Y.prototype, "name", 2);
+Y = y([
+  v("crt-radio")
+], Y);
+let pt = class extends h {
   constructor() {
-    super(...arguments), this.name = "", this.value = "", this.horizontal = !1, this._handleChange = (r) => {
-      const t = r.target;
+    super(...arguments), this.name = "", this.value = "", this.horizontal = !1, this._handleChange = (e) => {
+      const t = e.target;
       t.tagName === "CRT-RADIO" && (this.value = t.value, this.querySelectorAll("crt-radio").forEach((a) => {
         a.checked = a === t;
       }), this.dispatchEvent(new CustomEvent("change", {
@@ -2458,10 +2709,10 @@ let Z = class extends p {
     super.disconnectedCallback(), this.removeEventListener("change", this._handleChange);
   }
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-Z.styles = l`
+pt.styles = d`
     :host {
       display: flex;
       flex-direction: column;
@@ -2474,24 +2725,24 @@ Z.styles = l`
       gap: var(--crt-spacing-lg);
     }
   `;
-g([
+y([
   n({ type: String })
-], Z.prototype, "name", 2);
-g([
+], pt.prototype, "name", 2);
+y([
   n({ type: String })
-], Z.prototype, "value", 2);
-g([
+], pt.prototype, "value", 2);
+y([
   n({ type: Boolean, reflect: !0 })
-], Z.prototype, "horizontal", 2);
-Z = g([
-  d("crt-radio-group")
-], Z);
-var Tr = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, _ = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? jr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Tr(t, a, e), e;
+], pt.prototype, "horizontal", 2);
+pt = y([
+  v("crt-radio-group")
+], pt);
+var zr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, P = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Cr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && zr(t, a, r), r;
 };
-let b = class extends p {
+let w = class extends h {
   constructor() {
     super(...arguments), this.value = 0, this.max = 100, this.label = "", this.animated = !1, this.indeterminate = !1, this.segmented = !1, this.size = "medium", this.variant = "default", this.showValue = !0;
   }
@@ -2499,25 +2750,25 @@ let b = class extends p {
     return Math.min(100, Math.max(0, this.value / this.max * 100));
   }
   render() {
-    const r = this._getPercentage();
-    return c`
+    const e = this._getPercentage();
+    return l`
       <div class="progress-wrapper">
-        ${this.label || this.showValue ? c`
+        ${this.label || this.showValue ? l`
           <div class="progress-header">
-            ${this.label ? c`<span class="progress-label">${this.label}</span>` : ""}
-            ${this.showValue && !this.indeterminate ? c`
-              <span class="progress-value">${Math.round(r)}%</span>
+            ${this.label ? l`<span class="progress-label">${this.label}</span>` : ""}
+            ${this.showValue && !this.indeterminate ? l`
+              <span class="progress-value">${Math.round(e)}%</span>
             ` : ""}
           </div>
         ` : ""}
         <div class="progress-track" role="progressbar" aria-valuenow="${this.value}" aria-valuemax="${this.max}">
-          <div class="progress-bar" style="width: ${this.indeterminate ? "30" : r}%"></div>
+          <div class="progress-bar" style="width: ${this.indeterminate ? "30" : e}%"></div>
         </div>
       </div>
     `;
   }
 };
-b.styles = l`
+w.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2641,42 +2892,42 @@ b.styles = l`
       );
     }
   `;
-_([
+P([
   n({ type: Number })
-], b.prototype, "value", 2);
-_([
+], w.prototype, "value", 2);
+P([
   n({ type: Number })
-], b.prototype, "max", 2);
-_([
+], w.prototype, "max", 2);
+P([
   n({ type: String })
-], b.prototype, "label", 2);
-_([
+], w.prototype, "label", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], b.prototype, "animated", 2);
-_([
+], w.prototype, "animated", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], b.prototype, "indeterminate", 2);
-_([
+], w.prototype, "indeterminate", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], b.prototype, "segmented", 2);
-_([
+], w.prototype, "segmented", 2);
+P([
   n({ type: String, reflect: !0 })
-], b.prototype, "size", 2);
-_([
+], w.prototype, "size", 2);
+P([
   n({ type: String, reflect: !0 })
-], b.prototype, "variant", 2);
-_([
+], w.prototype, "variant", 2);
+P([
   n({ type: Boolean })
-], b.prototype, "showValue", 2);
-b = _([
-  d("crt-progress")
-], b);
-var Ar = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, gt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Mr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Ar(t, a, e), e;
+], w.prototype, "showValue", 2);
+w = P([
+  v("crt-progress")
+], w);
+var Or = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, Pt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Pr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Or(t, a, r), r;
 };
-let V = class extends p {
+let tt = class extends h {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
   }
@@ -2689,7 +2940,7 @@ let V = class extends p {
     this._timeout && clearTimeout(this._timeout), this._visible = !1;
   }
   render() {
-    return c`
+    return l`
       <div 
         class="trigger"
         @mouseenter="${this._show}"
@@ -2705,7 +2956,7 @@ let V = class extends p {
     `;
   }
 };
-V.styles = l`
+tt.styles = d`
     :host {
       display: inline-block;
       position: relative;
@@ -2812,37 +3063,37 @@ V.styles = l`
       border-right-color: var(--crt-primary);
     }
   `;
-gt([
+Pt([
   n({ type: String })
-], V.prototype, "text", 2);
-gt([
+], tt.prototype, "text", 2);
+Pt([
   n({ type: String, reflect: !0 })
-], V.prototype, "position", 2);
-gt([
+], tt.prototype, "position", 2);
+Pt([
   n({ type: Number })
-], V.prototype, "delay", 2);
-gt([
-  v()
-], V.prototype, "_visible", 2);
-V = gt([
-  d("crt-tooltip")
-], V);
-var Ir = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, Lt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Lr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Ir(t, a, e), e;
+], tt.prototype, "delay", 2);
+Pt([
+  m()
+], tt.prototype, "_visible", 2);
+tt = Pt([
+  v("crt-tooltip")
+], tt);
+var Ar = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, oe = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Sr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Ar(t, a, r), r;
 };
-let ct = class extends p {
+let kt = class extends h {
   constructor() {
     super(...arguments), this.items = [], this.separator = ">";
   }
   render() {
-    return c`
+    return l`
       <nav class="breadcrumb" aria-label="Breadcrumb">
-        ${this.items.map((r, t) => c`
+        ${this.items.map((e, t) => l`
           <span class="item ${t === this.items.length - 1 ? "active" : ""}">
-            ${r.href && t !== this.items.length - 1 ? c`<a href="${r.href}">${r.label}</a>` : c`<span class="text">${r.label}</span>`}
-            ${t < this.items.length - 1 ? c`<span class="separator">${this.separator}</span>` : ""}
+            ${e.href && t !== this.items.length - 1 ? l`<a href="${e.href}">${e.label}</a>` : l`<span class="text">${e.label}</span>`}
+            ${t < this.items.length - 1 ? l`<span class="separator">${this.separator}</span>` : ""}
           </span>
         `)}
         <slot></slot>
@@ -2850,7 +3101,7 @@ let ct = class extends p {
     `;
   }
 };
-ct.styles = l`
+kt.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2899,40 +3150,40 @@ ct.styles = l`
       font-size: var(--crt-font-size-sm);
     }
   `;
-Lt([
+oe([
   n({ type: Array })
-], ct.prototype, "items", 2);
-Lt([
+], kt.prototype, "items", 2);
+oe([
   n({ type: String })
-], ct.prototype, "separator", 2);
-ct = Lt([
-  d("crt-breadcrumb")
-], ct);
-var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, ut = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Nr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Ur(t, a, e), e;
+], kt.prototype, "separator", 2);
+kt = oe([
+  v("crt-breadcrumb")
+], kt);
+var Er = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, At = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Mr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Er(t, a, r), r;
 };
-let X = class extends p {
+let et = class extends h {
   constructor() {
     super(...arguments), this.current = 1, this.total = 1, this.siblings = 1, this.showInfo = !0;
   }
-  _goToPage(r) {
-    r >= 1 && r <= this.total && r !== this.current && (this.current = r, this.dispatchEvent(new CustomEvent("change", {
+  _goToPage(e) {
+    e >= 1 && e <= this.total && e !== this.current && (this.current = e, this.dispatchEvent(new CustomEvent("change", {
       detail: { page: this.current }
     })));
   }
   _getPageNumbers() {
-    const r = [], t = this.current > this.siblings + 2, a = this.current < this.total - this.siblings - 1;
-    r.push(1), t && r.push("...");
-    const i = Math.max(2, this.current - this.siblings), e = Math.min(this.total - 1, this.current + this.siblings);
-    for (let s = i; s <= e; s++)
-      r.includes(s) || r.push(s);
-    return a && r.push("..."), this.total > 1 && !r.includes(this.total) && r.push(this.total), r;
+    const e = [], t = this.current > this.siblings + 2, a = this.current < this.total - this.siblings - 1;
+    e.push(1), t && e.push("...");
+    const s = Math.max(2, this.current - this.siblings), r = Math.min(this.total - 1, this.current + this.siblings);
+    for (let i = s; i <= r; i++)
+      e.includes(i) || e.push(i);
+    return a && e.push("..."), this.total > 1 && !e.includes(this.total) && e.push(this.total), e;
   }
   render() {
-    const r = this._getPageNumbers();
-    return c`
+    const e = this._getPageNumbers();
+    return l`
       <nav class="pagination" aria-label="Pagination">
         <button 
           class="page-btn" 
@@ -2943,8 +3194,8 @@ let X = class extends p {
           ◄
         </button>
         
-        ${r.map(
-      (t) => t === "..." ? c`<span class="page-ellipsis">...</span>` : c`
+        ${e.map(
+      (t) => t === "..." ? l`<span class="page-ellipsis">...</span>` : l`
                 <button 
                   class="page-btn ${t === this.current ? "active" : ""}"
                   @click="${() => this._goToPage(t)}"
@@ -2965,14 +3216,14 @@ let X = class extends p {
           ►
         </button>
         
-        ${this.showInfo ? c`
+        ${this.showInfo ? l`
           <span class="page-info">Seite ${this.current} von ${this.total}</span>
         ` : ""}
       </nav>
     `;
   }
 };
-X.styles = l`
+et.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3027,38 +3278,38 @@ X.styles = l`
       margin-left: var(--crt-spacing-md);
     }
   `;
-ut([
+At([
   n({ type: Number })
-], X.prototype, "current", 2);
-ut([
+], et.prototype, "current", 2);
+At([
   n({ type: Number })
-], X.prototype, "total", 2);
-ut([
+], et.prototype, "total", 2);
+At([
   n({ type: Number })
-], X.prototype, "siblings", 2);
-ut([
+], et.prototype, "siblings", 2);
+At([
   n({ type: Boolean })
-], X.prototype, "showInfo", 2);
-X = ut([
-  d("crt-pagination")
-], X);
-var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, T = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Fr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Rr(t, a, e), e;
+], et.prototype, "showInfo", 2);
+et = At([
+  v("crt-pagination")
+], et);
+var Dr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, L = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Tr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Dr(t, a, r), r;
 };
-let f = class extends p {
+let k = class extends h {
   constructor() {
     super(...arguments), this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showMarks = !1, this.unit = "";
   }
-  _handleInput(r) {
-    const t = r.target;
+  _handleInput(e) {
+    const t = e.target;
     this.value = Number(t.value), this.dispatchEvent(new CustomEvent("input", {
       detail: { value: this.value }
     }));
   }
-  _handleChange(r) {
-    const t = r.target;
+  _handleChange(e) {
+    const t = e.target;
     this.value = Number(t.value), this.dispatchEvent(new CustomEvent("change", {
       detail: { value: this.value }
     }));
@@ -3067,9 +3318,9 @@ let f = class extends p {
     return (this.value - this.min) / (this.max - this.min) * 100;
   }
   render() {
-    return c`
+    return l`
       <div class="slider-wrapper">
-        ${this.label ? c`
+        ${this.label ? l`
           <div class="slider-header">
             <span class="slider-label">${this.label}</span>
             <span class="slider-value">${this.value}${this.unit}</span>
@@ -3090,7 +3341,7 @@ let f = class extends p {
           />
         </div>
         
-        ${this.showMarks ? c`
+        ${this.showMarks ? l`
           <div class="slider-marks">
             <span class="slider-mark">${this.min}${this.unit}</span>
             <span class="slider-mark">${this.max}${this.unit}</span>
@@ -3100,7 +3351,7 @@ let f = class extends p {
     `;
   }
 };
-f.styles = l`
+k.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3234,50 +3485,50 @@ f.styles = l`
       cursor: not-allowed;
     }
   `;
-T([
+L([
   n({ type: Number })
-], f.prototype, "value", 2);
-T([
+], k.prototype, "value", 2);
+L([
   n({ type: Number })
-], f.prototype, "min", 2);
-T([
+], k.prototype, "min", 2);
+L([
   n({ type: Number })
-], f.prototype, "max", 2);
-T([
+], k.prototype, "max", 2);
+L([
   n({ type: Number })
-], f.prototype, "step", 2);
-T([
+], k.prototype, "step", 2);
+L([
   n({ type: String })
-], f.prototype, "label", 2);
-T([
+], k.prototype, "label", 2);
+L([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-T([
+], k.prototype, "disabled", 2);
+L([
   n({ type: Boolean })
-], f.prototype, "showMarks", 2);
-T([
+], k.prototype, "showMarks", 2);
+L([
   n({ type: String })
-], f.prototype, "unit", 2);
-f = T([
-  d("crt-slider")
-], f);
-var Br = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, Q = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Yr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Br(t, a, e), e;
+], k.prototype, "unit", 2);
+k = L([
+  v("crt-slider")
+], k);
+var jr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ot = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Lr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && jr(t, a, r), r;
 };
-let S = class extends p {
+let D = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.onLabel = "1", this.offLabel = "0", this.size = "medium";
   }
-  _handleChange(r) {
-    const t = r.target;
+  _handleChange(e) {
+    const t = e.target;
     this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
       detail: { checked: this.checked }
     }));
   }
   render() {
-    return c`
+    return l`
       <label class="toggle-wrapper">
         <input 
           type="checkbox" 
@@ -3293,11 +3544,11 @@ let S = class extends p {
           </div>
         </div>
       </label>
-      ${this.label ? c`<span class="label">${this.label}</span>` : ""}
+      ${this.label ? l`<span class="label">${this.label}</span>` : ""}
     `;
   }
 };
-S.styles = l`
+D.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3419,66 +3670,66 @@ S.styles = l`
       left: 35px;
     }
   `;
-Q([
+ot([
   n({ type: Boolean, reflect: !0 })
-], S.prototype, "checked", 2);
-Q([
+], D.prototype, "checked", 2);
+ot([
   n({ type: Boolean, reflect: !0 })
-], S.prototype, "disabled", 2);
-Q([
+], D.prototype, "disabled", 2);
+ot([
   n({ type: String })
-], S.prototype, "label", 2);
-Q([
+], D.prototype, "label", 2);
+ot([
   n({ type: String })
-], S.prototype, "onLabel", 2);
-Q([
+], D.prototype, "onLabel", 2);
+ot([
   n({ type: String })
-], S.prototype, "offLabel", 2);
-Q([
+], D.prototype, "offLabel", 2);
+ot([
   n({ type: String, reflect: !0 })
-], S.prototype, "size", 2);
-S = Q([
-  d("crt-toggle")
-], S);
-var qr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, j = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Vr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && qr(t, a, e), e;
+], D.prototype, "size", 2);
+D = ot([
+  v("crt-toggle")
+], D);
+var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, I = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Br(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Ir(t, a, r), r;
 };
-let E = class extends p {
+let T = class extends h {
   constructor() {
     super(...arguments), this.src = "", this.alt = "", this.name = "", this.size = "md", this.shape = "square", this.status = "";
   }
   _getInitials() {
     if (!this.name) return "?";
-    const r = this.name.trim().split(/\s+/);
-    return r.length === 1 ? r[0].substring(0, 2) : r[0][0] + r[r.length - 1][0];
+    const e = this.name.trim().split(/\s+/);
+    return e.length === 1 ? e[0].substring(0, 2) : e[0][0] + e[e.length - 1][0];
   }
   _handleError() {
     this.src = "";
   }
   render() {
-    return c`
+    return l`
       <div class="avatar-wrapper">
         <div class="avatar">
-          ${this.src ? c`
+          ${this.src ? l`
             <img 
               src="${this.src}" 
               alt="${this.alt || this.name}"
               @error="${this._handleError}"
             />
-          ` : this.name ? c`
+          ` : this.name ? l`
             <span class="initials">${this._getInitials()}</span>
-          ` : c`
+          ` : l`
             <span class="fallback-icon">[?]</span>
           `}
         </div>
-        ${this.status ? c`<div class="status-indicator"></div>` : ""}
+        ${this.status ? l`<div class="status-indicator"></div>` : ""}
       </div>
     `;
   }
 };
-E.styles = l`
+T.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -3606,38 +3857,38 @@ E.styles = l`
       border-color: var(--crt-bg-dark);
     }
   `;
-j([
+I([
   n({ type: String })
-], E.prototype, "src", 2);
-j([
+], T.prototype, "src", 2);
+I([
   n({ type: String })
-], E.prototype, "alt", 2);
-j([
+], T.prototype, "alt", 2);
+I([
   n({ type: String })
-], E.prototype, "name", 2);
-j([
+], T.prototype, "name", 2);
+I([
   n({ type: String, reflect: !0 })
-], E.prototype, "size", 2);
-j([
+], T.prototype, "size", 2);
+I([
   n({ type: String, reflect: !0 })
-], E.prototype, "shape", 2);
-j([
+], T.prototype, "shape", 2);
+I([
   n({ type: String, reflect: !0 })
-], E.prototype, "status", 2);
-E = j([
-  d("crt-avatar")
-], E);
-let _t = class extends p {
+], T.prototype, "status", 2);
+T = I([
+  v("crt-avatar")
+], T);
+let Rt = class extends h {
   constructor() {
     super(...arguments), this.max = 5;
   }
   render() {
-    return c`
+    return l`
       <slot></slot>
     `;
   }
 };
-_t.styles = l`
+Rt.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3666,23 +3917,23 @@ _t.styles = l`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-j([
+I([
   n({ type: Number })
-], _t.prototype, "max", 2);
-_t = j([
-  d("crt-avatar-group")
-], _t);
-var Xr = Object.defineProperty, Kr = Object.getOwnPropertyDescriptor, z = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Kr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Xr(t, a, e), e;
+], Rt.prototype, "max", 2);
+Rt = I([
+  v("crt-avatar-group")
+], Rt);
+var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, A = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Ur(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Nr(t, a, r), r;
 };
-let N = class extends p {
+let V = class extends h {
   constructor() {
     super(...arguments), this.variant = "rectangular", this.animation = "shimmer", this.width = "100%", this.height = "20px", this.effect = !1;
   }
   render() {
-    return c`
+    return l`
       <div 
         class="skeleton"
         style="width: ${this.width}; height: ${this.height};"
@@ -3690,7 +3941,7 @@ let N = class extends p {
     `;
   }
 };
-N.styles = l`
+V.styles = d`
     :host {
       display: block;
     }
@@ -3805,37 +4056,37 @@ N.styles = l`
       pointer-events: none;
     }
   `;
-z([
+A([
   n({ type: String, reflect: !0 })
-], N.prototype, "variant", 2);
-z([
+], V.prototype, "variant", 2);
+A([
   n({ type: String, reflect: !0 })
-], N.prototype, "animation", 2);
-z([
+], V.prototype, "animation", 2);
+A([
   n({ type: String })
-], N.prototype, "width", 2);
-z([
+], V.prototype, "width", 2);
+A([
   n({ type: String })
-], N.prototype, "height", 2);
-z([
+], V.prototype, "height", 2);
+A([
   n({ type: Boolean, reflect: !0 })
-], N.prototype, "effect", 2);
-N = z([
-  d("crt-skeleton")
-], N);
-let zt = class extends p {
+], V.prototype, "effect", 2);
+V = A([
+  v("crt-skeleton")
+], V);
+let Ft = class extends h {
   constructor() {
     super(...arguments), this.lines = 3;
   }
   render() {
-    return c`
-      ${Array.from({ length: this.lines }).map(() => c`
+    return l`
+      ${Array.from({ length: this.lines }).map(() => l`
         <div class="line"></div>
       `)}
     `;
   }
 };
-zt.styles = l`
+Ft.styles = d`
     :host {
       display: block;
     }
@@ -3867,20 +4118,20 @@ zt.styles = l`
       }
     }
   `;
-z([
+A([
   n({ type: Number })
-], zt.prototype, "lines", 2);
-zt = z([
-  d("crt-skeleton-text")
-], zt);
-let Ot = class extends p {
+], Ft.prototype, "lines", 2);
+Ft = A([
+  v("crt-skeleton-text")
+], Ft);
+let Ht = class extends h {
   constructor() {
     super(...arguments), this.hideImage = !1;
   }
   render() {
-    return c`
+    return l`
       <div class="card">
-        ${this.hideImage ? "" : c`<div class="image"></div>`}
+        ${this.hideImage ? "" : l`<div class="image"></div>`}
         <div class="title"></div>
         <div class="text"></div>
         <div class="text"></div>
@@ -3889,7 +4140,7 @@ let Ot = class extends p {
     `;
   }
 };
-Ot.styles = l`
+Ht.styles = d`
     :host {
       display: block;
     }
@@ -3940,18 +4191,18 @@ Ot.styles = l`
       }
     }
   `;
-z([
+A([
   n({ type: Boolean })
-], Ot.prototype, "hideImage", 2);
-Ot = z([
-  d("crt-skeleton-card")
-], Ot);
-var Wr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, A = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Hr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Wr(t, a, e), e;
+], Ht.prototype, "hideImage", 2);
+Ht = A([
+  v("crt-skeleton-card")
+], Ht);
+var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, B = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Fr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Rr(t, a, r), r;
 };
-let y = class extends p {
+let $ = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.title = "", this.closable = !1, this.filled = !1, this.outlined = !1, this.banner = !1, this.animated = !1, this.icon = "";
   }
@@ -3967,11 +4218,11 @@ let y = class extends p {
     this.dispatchEvent(new CustomEvent("close")), this.remove();
   }
   render() {
-    return c`
+    return l`
       <div class="alert" role="alert">
         <span class="alert-icon">${this.icon || this._getDefaultIcon()}</span>
         <div class="alert-content">
-          ${this.title ? c`<div class="alert-title">${this.title}</div>` : ""}
+          ${this.title ? l`<div class="alert-title">${this.title}</div>` : ""}
           <div class="alert-message">
             <slot></slot>
           </div>
@@ -3979,14 +4230,14 @@ let y = class extends p {
             <slot name="actions"></slot>
           </div>
         </div>
-        ${this.closable ? c`
+        ${this.closable ? l`
           <button class="alert-close" @click="${this._handleClose}">[X]</button>
         ` : ""}
       </div>
     `;
   }
 };
-y.styles = l`
+$.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -4151,44 +4402,44 @@ y.styles = l`
       border-top: none;
     }
   `;
-A([
+B([
   n({ type: String, reflect: !0 })
-], y.prototype, "variant", 2);
-A([
+], $.prototype, "variant", 2);
+B([
   n({ type: String })
-], y.prototype, "title", 2);
-A([
+], $.prototype, "title", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "closable", 2);
-A([
+], $.prototype, "closable", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "filled", 2);
-A([
+], $.prototype, "filled", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "outlined", 2);
-A([
+], $.prototype, "outlined", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "banner", 2);
-A([
+], $.prototype, "banner", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "animated", 2);
-A([
+], $.prototype, "animated", 2);
+B([
   n({ type: String })
-], y.prototype, "icon", 2);
-y = A([
-  d("crt-alert")
-], y);
-var Gr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, Ut = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Qr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && Gr(t, a, e), e;
+], $.prototype, "icon", 2);
+$ = B([
+  v("crt-alert")
+], $);
+var Hr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, ne = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Yr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Hr(t, a, r), r;
 };
-let lt = class extends p {
+let $t = class extends h {
   constructor() {
     super(...arguments), this.open = !1, this.message = "LOADING...";
   }
   render() {
-    return this.open ? c`
+    return this.open ? l`
       <div class="overlay">
         <div class="atom">
           <div class="nucleus"></div>
@@ -4204,10 +4455,10 @@ let lt = class extends p {
         </div>
         <div class="message">${this.message}</div>
       </div>
-    ` : c``;
+    ` : l``;
   }
 };
-lt.styles = l`
+$t.styles = d`
     :host {
       display: block;
     }
@@ -4429,23 +4680,23 @@ lt.styles = l`
       50% { opacity: 0.5; }
     }
   `;
-Ut([
+ne([
   n({ type: Boolean, reflect: !0 })
-], lt.prototype, "open", 2);
-Ut([
+], $t.prototype, "open", 2);
+ne([
   n({ type: String })
-], lt.prototype, "message", 2);
-lt = Ut([
-  d("crt-spinner")
-], lt);
-var Jr = Object.getOwnPropertyDescriptor, Zr = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? Jr(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = o(e) || e);
-  return e;
+], $t.prototype, "message", 2);
+$t = ne([
+  v("crt-spinner")
+], $t);
+var Vr = Object.getOwnPropertyDescriptor, qr = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Vr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = o(r) || r);
+  return r;
 };
-let Dt = class extends p {
+let Qt = class extends h {
   render() {
-    return c`
+    return l`
       <div class="card">
         <div class="card-header">
           <slot name="header"></slot>
@@ -4460,8 +4711,18 @@ let Dt = class extends p {
     `;
   }
 };
-Dt.styles = l`
+Qt.styles = d`
+    :host {
+      /* Make the card element act like a normal block-level container
+         so external width/height styles can be applied responsively. */
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
     .card {
+      width: 100%;
+      box-sizing: border-box;
       border: 3px double var(--crt-primary);
       padding: var(--crt-spacing-lg);
       background-color: var(--crt-bg-dark);
@@ -4492,34 +4753,34 @@ Dt.styles = l`
       margin-top: var(--crt-spacing-md);
     }
   `;
-Dt = Zr([
-  d("crt-card")
-], Dt);
-var te = Object.defineProperty, re = Object.getOwnPropertyDescriptor, Nt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? re(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && te(t, a, e), e;
+Qt = qr([
+  v("crt-card")
+], Qt);
+var Wr = Object.defineProperty, Xr = Object.getOwnPropertyDescriptor, le = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Xr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Wr(t, a, r), r;
 };
-let pt = class extends p {
+let _t = class extends h {
   constructor() {
     super(...arguments), this.headers = [], this.rows = [];
   }
   render() {
-    return c`
+    return l`
       <table>
         <thead>
           <tr>
-            ${this.headers.map((r) => c`<th>${r}</th>`)}
+            ${this.headers.map((e) => l`<th>${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${this.rows.map((r) => c`<tr>${r.map((t) => c`<td>${t}</td>`)}</tr>`)}
+          ${this.rows.map((e) => l`<tr>${e.map((t) => l`<td>${t}</td>`)}</tr>`)}
         </tbody>
       </table>
     `;
   }
 };
-pt.styles = l`
+_t.styles = d`
     :host {
       display: block;
     }
@@ -4571,26 +4832,26 @@ pt.styles = l`
       border-bottom: none;
     }
   `;
-Nt([
+le([
   n({ type: Array })
-], pt.prototype, "headers", 2);
-Nt([
+], _t.prototype, "headers", 2);
+le([
   n({ type: Array })
-], pt.prototype, "rows", 2);
-pt = Nt([
-  d("crt-table")
-], pt);
-var ee = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, Rt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? ae(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && ee(t, a, e), e;
+], _t.prototype, "rows", 2);
+_t = le([
+  v("crt-table")
+], _t);
+var Kr = Object.defineProperty, Gr = Object.getOwnPropertyDescriptor, ce = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Gr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Kr(t, a, r), r;
 };
-let dt = class extends p {
+let zt = class extends h {
   constructor() {
     super(...arguments), this.columns = 3, this.gap = "var(--crt-spacing-lg)";
   }
   render() {
-    return c`
+    return l`
       <style>
         :host {
           --grid-gap: ${this.gap};
@@ -4603,7 +4864,7 @@ let dt = class extends p {
     `;
   }
 };
-dt.styles = l`
+zt.styles = d`
     :host {
       display: block;
     }
@@ -4632,42 +4893,42 @@ dt.styles = l`
       }
     }
   `;
-Rt([
+ce([
   n({ type: Number })
-], dt.prototype, "columns", 2);
-Rt([
+], zt.prototype, "columns", 2);
+ce([
   n({ type: String })
-], dt.prototype, "gap", 2);
-dt = Rt([
-  d("crt-grid")
-], dt);
-var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, et = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? se(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && ie(t, a, e), e;
+], zt.prototype, "gap", 2);
+zt = ce([
+  v("crt-grid")
+], zt);
+var Zr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, vt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Qr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Zr(t, a, r), r;
 };
-let R = class extends p {
+let q = class extends h {
   constructor() {
     super(...arguments), this.title = "", this.description = "", this.code = "", this.activeTab = "preview", this.copied = !1;
   }
-  switchTab(r) {
-    this.activeTab = r;
+  switchTab(e) {
+    this.activeTab = e;
   }
   async copyCode() {
     try {
       await navigator.clipboard.writeText(this.code), this.copied = !0, setTimeout(() => {
         this.copied = !1;
       }, 2e3);
-    } catch (r) {
-      console.error("Failed to copy:", r);
+    } catch (e) {
+      console.error("Failed to copy:", e);
     }
   }
   render() {
-    return c`
+    return l`
       <div class="example-header">
         <h4 class="example-title">${this.title}</h4>
       </div>
-      ${this.description ? c`<p class="example-description">${this.description}</p>` : ""}
+      ${this.description ? l`<p class="example-description">${this.description}</p>` : ""}
       
       <div class="tabs-wrapper">
         <div class="tab-header">
@@ -4703,10 +4964,13 @@ let R = class extends p {
     `;
   }
 };
-R.styles = l`
+q.styles = d`
     :host {
       display: block;
       margin-bottom: var(--crt-spacing-xl);
+      width: 100%;
+      max-width: none;
+      box-sizing: border-box;
     }
 
     .example-header {
@@ -4734,6 +4998,8 @@ R.styles = l`
       border: 2px solid var(--crt-primary);
       background: var(--crt-bg-light);
       box-shadow: var(--crt-glow-inset);
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .tab-header {
@@ -4778,6 +5044,17 @@ R.styles = l`
       flex-wrap: wrap;
       gap: var(--crt-spacing-md);
       align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Ensure embedded demo components stretch to the available width
+       so examples don't get stuck at an intrinsic/narrow width. */
+    .preview-pane > * {
+      flex: 1 1 100%;
+      min-width: 0; /* allow children to shrink below their content width */
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .code-pane {
@@ -4836,33 +5113,33 @@ R.styles = l`
       color: var(--crt-bg-dark);
     }
   `;
-et([
+vt([
   n()
-], R.prototype, "title", 2);
-et([
+], q.prototype, "title", 2);
+vt([
   n()
-], R.prototype, "description", 2);
-et([
+], q.prototype, "description", 2);
+vt([
   n()
-], R.prototype, "code", 2);
-et([
-  v()
-], R.prototype, "activeTab", 2);
-et([
-  v()
-], R.prototype, "copied", 2);
-R = et([
-  d("crt-code-example")
-], R);
-var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, Et = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? ne(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && oe(t, a, e), e;
+], q.prototype, "code", 2);
+vt([
+  m()
+], q.prototype, "activeTab", 2);
+vt([
+  m()
+], q.prototype, "copied", 2);
+q = vt([
+  v("crt-code-example")
+], q);
+var Jr = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, Kt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ta(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && Jr(t, a, r), r;
 };
-let tt = class extends p {
+let dt = class extends h {
   constructor() {
-    super(...arguments), this.open = !1, this.title = "Modal", this.size = "medium", this._handleKeydown = (r) => {
-      r.key === "Escape" && this.open && this.close();
+    super(...arguments), this.open = !1, this.title = "Modal", this.size = "medium", this._handleKeydown = (e) => {
+      e.key === "Escape" && this.open && this.close();
     };
   }
   connectedCallback() {
@@ -4874,11 +5151,11 @@ let tt = class extends p {
   close() {
     this.open = !1, this.dispatchEvent(new CustomEvent("close"));
   }
-  _handleBackdropClick(r) {
-    r.target.classList.contains("backdrop") && this.close();
+  _handleBackdropClick(e) {
+    e.target.classList.contains("backdrop") && this.close();
   }
   render() {
-    return c`
+    return l`
       <div class="backdrop" @click="${this._handleBackdropClick}">
         <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
           <div class="modal-header">
@@ -4896,7 +5173,7 @@ let tt = class extends p {
     `;
   }
 };
-tt.styles = l`
+dt.styles = d`
     :host {
       display: none;
     }
@@ -5023,24 +5300,24 @@ tt.styles = l`
       height: calc(95vh - 120px);
     }
   `;
-Et([
+Kt([
   n({ type: Boolean, reflect: !0 })
-], tt.prototype, "open", 2);
-Et([
+], dt.prototype, "open", 2);
+Kt([
   n({ type: String })
-], tt.prototype, "title", 2);
-Et([
+], dt.prototype, "title", 2);
+Kt([
   n({ type: String })
-], tt.prototype, "size", 2);
-tt = Et([
-  d("crt-modal")
-], tt);
-var ce = Object.defineProperty, le = Object.getOwnPropertyDescriptor, J = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? le(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && ce(t, a, e), e;
+], dt.prototype, "size", 2);
+dt = Kt([
+  v("crt-modal")
+], dt);
+var ea = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, nt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ra(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && ea(t, a, r), r;
 };
-let D = class extends p {
+let j = class extends h {
   constructor() {
     super(...arguments), this.position = "top-right", this.message = "", this.title = "", this.variant = "default", this.duration = 4e3, this._toasts = [], this._counter = 0, this._initialized = !1;
   }
@@ -5054,25 +5331,25 @@ let D = class extends p {
       });
     }));
   }
-  show(r) {
+  show(e) {
     const t = ++this._counter, a = {
       id: t,
-      title: r.title,
-      message: r.message,
-      variant: r.variant || "default",
-      duration: r.duration ?? 4e3
+      title: e.title,
+      message: e.message,
+      variant: e.variant || "default",
+      duration: e.duration ?? 4e3
     };
     this._toasts = [...this._toasts, a], a.duration > 0 && setTimeout(() => this._removeToast(t), a.duration);
   }
-  _removeToast(r) {
+  _removeToast(e) {
     this._toasts = this._toasts.map(
-      (t) => t.id === r ? { ...t, removing: !0 } : t
+      (t) => t.id === e ? { ...t, removing: !0 } : t
     ), setTimeout(() => {
-      this._toasts = this._toasts.filter((t) => t.id !== r);
+      this._toasts = this._toasts.filter((t) => t.id !== e);
     }, 300);
   }
-  _getIcon(r) {
-    switch (r) {
+  _getIcon(e) {
+    switch (e) {
       case "success":
         return "[✓]";
       case "warning":
@@ -5086,18 +5363,18 @@ let D = class extends p {
     }
   }
   render() {
-    return c`
+    return l`
       <div class="toast-container">
-        ${this._toasts.map((r) => c`
-          <div class="toast ${r.variant} ${r.removing ? "removing" : ""}">
-            <span class="toast-icon">${this._getIcon(r.variant)}</span>
+        ${this._toasts.map((e) => l`
+          <div class="toast ${e.variant} ${e.removing ? "removing" : ""}">
+            <span class="toast-icon">${this._getIcon(e.variant)}</span>
             <div class="toast-content">
-              ${r.title ? c`<h4 class="toast-title">${r.title}</h4>` : ""}
-              <p class="toast-message">${r.message}</p>
+              ${e.title ? l`<h4 class="toast-title">${e.title}</h4>` : ""}
+              <p class="toast-message">${e.message}</p>
             </div>
-            <button class="toast-close" @click="${() => this._removeToast(r.id)}">✕</button>
-            ${r.duration > 0 ? c`
-              <div class="toast-progress" style="animation-duration: ${r.duration}ms"></div>
+            <button class="toast-close" @click="${() => this._removeToast(e.id)}">✕</button>
+            ${e.duration > 0 ? l`
+              <div class="toast-progress" style="animation-duration: ${e.duration}ms"></div>
             ` : ""}
           </div>
         `)}
@@ -5105,7 +5382,7 @@ let D = class extends p {
     `;
   }
 };
-D.styles = l`
+j.styles = d`
     :host {
       position: fixed;
       z-index: 10001;
@@ -5272,33 +5549,33 @@ D.styles = l`
       to { width: 0%; }
     }
   `;
-J([
+nt([
   n({ type: String, reflect: !0 })
-], D.prototype, "position", 2);
-J([
+], j.prototype, "position", 2);
+nt([
   n({ type: String })
-], D.prototype, "message", 2);
-J([
+], j.prototype, "message", 2);
+nt([
   n({ type: String })
-], D.prototype, "title", 2);
-J([
+], j.prototype, "title", 2);
+nt([
   n({ type: String })
-], D.prototype, "variant", 2);
-J([
+], j.prototype, "variant", 2);
+nt([
   n({ type: Number })
-], D.prototype, "duration", 2);
-J([
-  v()
-], D.prototype, "_toasts", 2);
-D = J([
-  d("crt-toast")
-], D);
-var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, mt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? de(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && pe(t, a, e), e;
+], j.prototype, "duration", 2);
+nt([
+  m()
+], j.prototype, "_toasts", 2);
+j = nt([
+  v("crt-toast")
+], j);
+var aa = Object.defineProperty, sa = Object.getOwnPropertyDescriptor, St = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? sa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && aa(t, a, r), r;
 };
-let ht = class extends p {
+let Ct = class extends h {
   constructor() {
     super(...arguments), this.header = "", this.open = !1;
   }
@@ -5309,7 +5586,7 @@ let ht = class extends p {
     }));
   }
   render() {
-    return c`
+    return l`
       <div 
         class="accordion-header ${this.open ? "open" : ""}"
         @click="${this.toggle}"
@@ -5327,7 +5604,7 @@ let ht = class extends p {
     `;
   }
 };
-ht.styles = l`
+Ct.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -5398,20 +5675,20 @@ ht.styles = l`
       color: var(--crt-text-secondary);
     }
   `;
-mt([
+St([
   n({ type: String })
-], ht.prototype, "header", 2);
-mt([
+], Ct.prototype, "header", 2);
+St([
   n({ type: Boolean, reflect: !0 })
-], ht.prototype, "open", 2);
-ht = mt([
-  d("crt-accordion-item")
-], ht);
-let Pt = class extends p {
+], Ct.prototype, "open", 2);
+Ct = St([
+  v("crt-accordion-item")
+], Ct);
+let Yt = class extends h {
   constructor() {
-    super(...arguments), this.multiple = !1, this._handleToggle = (r) => {
-      !this.multiple && r.detail.open && this.querySelectorAll("crt-accordion-item").forEach((t) => {
-        t !== r.target && (t.open = !1);
+    super(...arguments), this.multiple = !1, this._handleToggle = (e) => {
+      !this.multiple && e.detail.open && this.querySelectorAll("crt-accordion-item").forEach((t) => {
+        t !== e.target && (t.open = !1);
       });
     };
   }
@@ -5422,36 +5699,36 @@ let Pt = class extends p {
     super.disconnectedCallback(), this.removeEventListener("toggle", this._handleToggle);
   }
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-Pt.styles = l`
+Yt.styles = d`
     :host {
       display: block;
     }
   `;
-mt([
+St([
   n({ type: Boolean })
-], Pt.prototype, "multiple", 2);
-Pt = mt([
-  d("crt-accordion")
-], Pt);
-var he = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, bt = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? ve(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && he(t, a, e), e;
+], Yt.prototype, "multiple", 2);
+Yt = St([
+  v("crt-accordion")
+], Yt);
+var ia = Object.defineProperty, oa = Object.getOwnPropertyDescriptor, Et = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? oa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && ia(t, a, r), r;
 };
-let K = class extends p {
+let rt = class extends h {
   constructor() {
     super(...arguments), this.bars = 20, this.mode = 1, this.barHeights = [], this.isActive = !1, this.visualize = () => {
       if (!this.isActive || !this.analyser || !this.dataArray) return;
       this.analyser.getByteFrequencyData(this.dataArray);
-      const r = Math.floor(this.dataArray.length / this.bars), t = [];
+      const e = Math.floor(this.dataArray.length / this.bars), t = [];
       for (let a = 0; a < this.bars; a++) {
-        let i;
-        this.mode === 1 ? i = a * r : this.mode === 2 ? a < this.bars / 2 ? i = Math.floor((this.bars / 2 - a - 1) * r) : i = Math.floor((a - this.bars / 2) * r) : a < this.bars / 2 ? i = Math.floor(a * r) : i = Math.floor((this.bars - a - 1) * r);
-        const s = (this.dataArray[i] || 0) / 255 * 100;
-        t.push(Math.max(20, s));
+        let s;
+        this.mode === 1 ? s = a * e : this.mode === 2 ? a < this.bars / 2 ? s = Math.floor((this.bars / 2 - a - 1) * e) : s = Math.floor((a - this.bars / 2) * e) : a < this.bars / 2 ? s = Math.floor(a * e) : s = Math.floor((this.bars - a - 1) * e);
+        const i = (this.dataArray[s] || 0) / 255 * 100;
+        t.push(Math.max(20, i));
       }
       this.barHeights = t, this.animationId = requestAnimationFrame(this.visualize);
     };
@@ -5462,9 +5739,9 @@ let K = class extends p {
   disconnectedCallback() {
     super.disconnectedCallback(), this.stop();
   }
-  connectAudio(r) {
+  connectAudio(e) {
     if (!this.audioContext) {
-      this.audioContext = new (window.AudioContext || window.webkitAudioContext)(), this.analyser = this.audioContext.createAnalyser(), this.analyser.fftSize = 64, this.sourceNode = this.audioContext.createMediaElementSource(r), this.sourceNode.connect(this.analyser), this.analyser.connect(this.audioContext.destination);
+      this.audioContext = new (window.AudioContext || window.webkitAudioContext)(), this.analyser = this.audioContext.createAnalyser(), this.analyser.fftSize = 64, this.sourceNode = this.audioContext.createMediaElementSource(e), this.sourceNode.connect(this.analyser), this.analyser.connect(this.audioContext.destination);
       const t = this.analyser.frequencyBinCount;
       this.dataArray = new Uint8Array(t);
     }
@@ -5483,18 +5760,18 @@ let K = class extends p {
     this.mode = this.mode === 3 ? 1 : this.mode + 1, this.dispatchEvent(new CustomEvent("mode-change", { detail: { mode: this.mode } }));
   }
   render() {
-    return c`
+    return l`
       <div class="visualizer">
         <span class="label">[VISUALIZER]</span>
         <button class="mode-toggle" @click="${this.toggleMode}">MODE ${this.mode}</button>
-        ${this.barHeights.map((r) => c`
-          <div class="bar" style="height: ${r}%"></div>
+        ${this.barHeights.map((e) => l`
+          <div class="bar" style="height: ${e}%"></div>
         `)}
       </div>
     `;
   }
 };
-K.styles = l`
+rt.styles = d`
     :host {
       display: block;
     }
@@ -5569,37 +5846,37 @@ K.styles = l`
       animation: none;
     }
   `;
-bt([
+Et([
   n({ type: Number })
-], K.prototype, "bars", 2);
-bt([
+], rt.prototype, "bars", 2);
+Et([
   n({ type: Number })
-], K.prototype, "mode", 2);
-bt([
-  v()
-], K.prototype, "barHeights", 2);
-bt([
-  v()
-], K.prototype, "isActive", 2);
-K = bt([
-  d("crt-visualizer")
-], K);
-var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, Ft = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? ue(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && ge(t, a, e), e;
+], rt.prototype, "mode", 2);
+Et([
+  m()
+], rt.prototype, "barHeights", 2);
+Et([
+  m()
+], rt.prototype, "isActive", 2);
+rt = Et([
+  v("crt-visualizer")
+], rt);
+var na = Object.defineProperty, la = Object.getOwnPropertyDescriptor, pe = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? la(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && na(t, a, r), r;
 };
-let vt = class extends p {
+let Ot = class extends h {
   constructor() {
     super(...arguments), this.tracks = [], this.currentIndex = 0;
   }
-  handleTrackClick(r) {
+  handleTrackClick(e) {
     this.dispatchEvent(new CustomEvent("track-select", {
-      detail: { index: r, track: this.tracks[r] }
+      detail: { index: e, track: this.tracks[e] }
     }));
   }
-  handleRemoveTrack(r, t) {
-    r.stopPropagation(), this.dispatchEvent(new CustomEvent("track-remove", {
+  handleRemoveTrack(e, t) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("track-remove", {
       detail: { index: t }
     }));
   }
@@ -5607,17 +5884,17 @@ let vt = class extends p {
     this.dispatchEvent(new CustomEvent("add-tracks"));
   }
   render() {
-    return c`
+    return l`
       <crt-card>
         <crt-heading level="4" slot="header" style="margin: 0;">[PLAYLIST]</crt-heading>
         
-        ${this.tracks.length === 0 ? c`
+        ${this.tracks.length === 0 ? l`
           <div class="empty-state" @click="${this.handleEmptyClick}">
             <div class="empty-icon">[+]</div>
             <crt-heading level="4" style="margin: 0 0 var(--crt-spacing-sm) 0;">NO TRACKS LOADED</crt-heading>
             <crt-text muted style="margin: 0;">CLICK TO ADD AUDIO FILES</crt-text>
           </div>
-        ` : c`
+        ` : l`
           <div class="table-wrapper">
             <table>
               <thead>
@@ -5629,14 +5906,14 @@ let vt = class extends p {
                 </tr>
               </thead>
               <tbody>
-                ${this.tracks.map((r, t) => c`
+                ${this.tracks.map((e, t) => l`
                   <tr 
                     class="${t === this.currentIndex ? "active" : ""}"
                     @click="${() => this.handleTrackClick(t)}"
                   >
                     <td class="track-number">${t + 1}</td>
-                    <td class="track-title">${r.title}</td>
-                    <td class="track-artist">${r.artist}</td>
+                    <td class="track-title">${e.title}</td>
+                    <td class="track-artist">${e.artist}</td>
                     <td class="actions">
                       <crt-button 
                         class="remove-btn"
@@ -5658,9 +5935,11 @@ let vt = class extends p {
     `;
   }
 };
-vt.styles = l`
+Ot.styles = d`
     :host {
       display: block;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     /* Table Styles */
@@ -5743,10 +6022,12 @@ vt.styles = l`
     }
 
     td.track-title {
-      white-space: nowrap;
+      /* Allow titles to wrap on narrow screens to avoid forcing huge action column widths */
+      white-space: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       min-width: 0;
+      word-break: break-word;
     }
 
     td.track-artist {
@@ -5758,7 +6039,8 @@ vt.styles = l`
     }
 
     .remove-btn {
-      opacity: 0;
+      /* Visible by default at low opacity so touch devices can see it */
+      opacity: 0.65;
       transition: var(--crt-transition);
     }
 
@@ -5772,6 +6054,13 @@ vt.styles = l`
       text-align: center;
       padding: var(--crt-spacing-xl);
       transition: var(--crt-transition);
+      /* Ensure the empty preview stretches to the container width */
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
 
     .empty-state:hover {
@@ -5796,8 +6085,9 @@ vt.styles = l`
 
     /* Responsive: hide artist on narrow screens and allow horizontal scroll fallback */
     @media (max-width: 520px) {
-      td.track-artist { display: none; }
-      td.track-title { max-width: 140px; min-width: 0; }
+      /* Keep artist visible on narrow screens but allow wrapping */
+      td.track-artist { display: table-cell; max-width: 120px; white-space: normal; word-break: break-word; }
+      td.track-title { max-width: 140px; min-width: 0; white-space: normal; }
       .table-wrapper { overflow-x: auto; min-width: 0; }
     }
 
@@ -5815,21 +6105,21 @@ vt.styles = l`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-Ft([
+pe([
   n({ type: Array })
-], vt.prototype, "tracks", 2);
-Ft([
+], Ot.prototype, "tracks", 2);
+pe([
   n({ type: Number })
-], vt.prototype, "currentIndex", 2);
-vt = Ft([
-  d("crt-playlist")
-], vt);
-var me = Object.defineProperty, be = Object.getOwnPropertyDescriptor, M = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? be(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && me(t, a, e), e;
+], Ot.prototype, "currentIndex", 2);
+Ot = pe([
+  v("crt-playlist")
+], Ot);
+var ca = Object.defineProperty, pa = Object.getOwnPropertyDescriptor, N = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? pa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && ca(t, a, r), r;
 };
-let x = class extends p {
+let _ = class extends h {
   constructor() {
     super(...arguments), this.tracks = [], this.currentIndex = 0, this.isPlaying = !1, this.currentTime = 0, this.duration = 0, this.volume = 80, this.togglePlay = () => {
       this.isPlaying ? this.pause() : this.play();
@@ -5843,34 +6133,34 @@ let x = class extends p {
       this.duration = this.audio?.duration || 0;
     }, this.handleEnded = () => {
       this.nextTrack();
-    }, this.handleProgressClick = (r) => {
-      const a = r.currentTarget.getBoundingClientRect(), i = (r.clientX - a.left) / a.width;
-      this.audio && (this.audio.currentTime = this.duration * i);
-    }, this.handleVolumeChange = (r) => {
-      this.volume = r.detail.value, this.audio && (this.audio.volume = this.volume / 100), localStorage.setItem("crtPlayerVolume", this.volume.toString());
+    }, this.handleProgressClick = (e) => {
+      const a = e.currentTarget.getBoundingClientRect(), s = (e.clientX - a.left) / a.width;
+      this.audio && (this.audio.currentTime = this.duration * s);
+    }, this.handleVolumeChange = (e) => {
+      this.volume = e.detail.value, this.audio && (this.audio.volume = this.volume / 100), localStorage.setItem("crtPlayerVolume", this.volume.toString());
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    const r = localStorage.getItem("crtPlayerVolume");
-    r && (this.volume = parseInt(r));
+    const e = localStorage.getItem("crtPlayerVolume");
+    e && (this.volume = parseInt(e));
   }
   firstUpdated() {
     this.audio && (this.audio.volume = this.volume / 100);
   }
-  updated(r) {
-    r.has("tracks") && this.tracks.length > 0 && (r.get("tracks") === void 0 || r.get("tracks")?.length === 0) && this.loadTrack(0);
+  updated(e) {
+    e.has("tracks") && this.tracks.length > 0 && (e.get("tracks") === void 0 || e.get("tracks")?.length === 0) && this.loadTrack(0);
   }
-  loadTrack(r) {
-    if (r < 0 || r >= this.tracks.length) return;
-    const t = this.tracks[r];
+  loadTrack(e) {
+    if (e < 0 || e >= this.tracks.length) return;
+    const t = this.tracks[e];
     if (!t?.url) {
-      this.currentIndex = r;
+      this.currentIndex = e;
       return;
     }
     const a = this.isPlaying;
-    this.isPlaying && (this.audio?.pause(), this.visualizer?.stop()), this.currentIndex = r, this.currentTime = 0, this.audio && (this.audio.src = t.url, this.audio.load()), a && this.audio?.addEventListener("canplay", () => this.play(), { once: !0 }), this.dispatchEvent(new CustomEvent("track-change", {
-      detail: { index: r, track: this.tracks[r] }
+    this.isPlaying && (this.audio?.pause(), this.visualizer?.stop()), this.currentIndex = e, this.currentTime = 0, this.audio && (this.audio.src = t.url, this.audio.load()), a && this.audio?.addEventListener("canplay", () => this.play(), { once: !0 }), this.dispatchEvent(new CustomEvent("track-change", {
+      detail: { index: e, track: this.tracks[e] }
     }));
   }
   play() {
@@ -5879,9 +6169,9 @@ let x = class extends p {
   pause() {
     this.audio?.pause(), this.isPlaying = !1, this.visualizer?.stop();
   }
-  formatTime(r) {
-    if (!r || isNaN(r)) return "00:00";
-    const t = Math.floor(r / 60), a = Math.floor(r % 60);
+  formatTime(e) {
+    if (!e || isNaN(e)) return "00:00";
+    const t = Math.floor(e / 60), a = Math.floor(e % 60);
     return `${t.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
   }
   get currentTrack() {
@@ -5891,15 +6181,15 @@ let x = class extends p {
     return this.duration ? this.currentTime / this.duration * 100 : 0;
   }
   render() {
-    const r = this.tracks.length > 0 && this.currentTrack;
-    return c`
+    const e = this.tracks.length > 0 && this.currentTrack;
+    return l`
       <div class="player">
         <!-- Header -->
         <div class="player-header">
           <crt-heading level="4" style="margin: 0;">[♫] MUSIC PLAYER [♫]</crt-heading>
         </div>
 
-        ${r ? c`
+        ${e ? l`
           <!-- Visualizer -->
           <div class="visualizer-section">
             <crt-visualizer .bars="${20}"></crt-visualizer>
@@ -5950,7 +6240,7 @@ let x = class extends p {
               </div>
             </div>
           </div>
-        ` : c`
+        ` : l`
           <!-- Empty State -->
           <div class="empty-state">
             <crt-text muted style="font-size: 2rem; margin: 0 0 var(--crt-spacing-md) 0;">[---]</crt-text>
@@ -5969,7 +6259,7 @@ let x = class extends p {
     `;
   }
 };
-x.styles = l`
+_.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6122,55 +6412,55 @@ x.styles = l`
       opacity: 0.5;
     }
   `;
-M([
+N([
   n({ type: Array })
-], x.prototype, "tracks", 2);
-M([
+], _.prototype, "tracks", 2);
+N([
   n({ type: Number })
-], x.prototype, "currentIndex", 2);
-M([
-  v()
-], x.prototype, "isPlaying", 2);
-M([
-  v()
-], x.prototype, "currentTime", 2);
-M([
-  v()
-], x.prototype, "duration", 2);
-M([
-  v()
-], x.prototype, "volume", 2);
-M([
-  At("audio")
-], x.prototype, "audio", 2);
-M([
-  At("crt-visualizer")
-], x.prototype, "visualizer", 2);
-x = M([
-  d("crt-music-player")
-], x);
-var fe = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, at = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? ye(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && fe(t, a, e), e;
+], _.prototype, "currentIndex", 2);
+N([
+  m()
+], _.prototype, "isPlaying", 2);
+N([
+  m()
+], _.prototype, "currentTime", 2);
+N([
+  m()
+], _.prototype, "duration", 2);
+N([
+  m()
+], _.prototype, "volume", 2);
+N([
+  ee("audio")
+], _.prototype, "audio", 2);
+N([
+  ee("crt-visualizer")
+], _.prototype, "visualizer", 2);
+_ = N([
+  v("crt-music-player")
+], _);
+var da = Object.defineProperty, ha = Object.getOwnPropertyDescriptor, gt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ha(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && da(t, a, r), r;
 };
-let F = class extends p {
+let W = class extends h {
   constructor() {
     super(), this.rows = 10, this.prompt = "$", this.disabled = !1, this.outputs = [], this.input = "", this.handleFocus = () => {
       this.disabled || this.focus();
-    }, this.handleKeydown = (r) => {
+    }, this.handleKeydown = (e) => {
       if (!this.disabled) {
-        if (r.key === "Backspace") {
-          r.preventDefault(), this.input = this.input.slice(0, -1), this.requestUpdate();
+        if (e.key === "Backspace") {
+          e.preventDefault(), this.input = this.input.slice(0, -1), this.requestUpdate();
           return;
         }
-        if (r.key === "Enter") {
-          r.preventDefault();
+        if (e.key === "Enter") {
+          e.preventDefault();
           const t = this.input.trim();
           this.println(`${this.prompt} ${t}`), this.dispatchEvent(new CustomEvent("command", { detail: t })), this.input = "", this.requestUpdate();
           return;
         }
-        r.key.length === 1 && !r.ctrlKey && !r.metaKey && (this.input += r.key, this.requestUpdate());
+        e.key.length === 1 && !e.ctrlKey && !e.metaKey && (this.input += e.key, this.requestUpdate());
       }
     }, this.typing = !1, this.typeQueue = [], this.outputs = ["$ SYSTEM READY _"];
   }
@@ -6181,13 +6471,13 @@ let F = class extends p {
     this.removeEventListener("click", this.handleFocus), this.removeEventListener("keydown", this.handleKeydown), super.disconnectedCallback();
   }
   // Public API
-  write(r) {
+  write(e) {
     this.outputs.length === 0 && (this.outputs = []);
     const t = this.outputs[this.outputs.length - 1] || "";
-    this.outputs[this.outputs.length - 1] = t + r, this.requestUpdate(), this.scrollToBottom();
+    this.outputs[this.outputs.length - 1] = t + e, this.requestUpdate(), this.scrollToBottom();
   }
-  println(r) {
-    this.outputs = [...this.outputs, r], this.requestUpdate(), this.scrollToBottom();
+  println(e) {
+    this.outputs = [...this.outputs, e], this.requestUpdate(), this.scrollToBottom();
   }
   clear() {
     this.outputs = [], this.requestUpdate();
@@ -6197,39 +6487,39 @@ let F = class extends p {
   }
   scrollToBottom() {
     requestAnimationFrame(() => {
-      const r = this.shadowRoot?.querySelector(".term");
-      r && (r.scrollTop = r.scrollHeight);
+      const e = this.shadowRoot?.querySelector(".term");
+      e && (e.scrollTop = e.scrollHeight);
     });
   }
-  type(r, t = 30) {
-    this.typeQueue.push({ text: r, speed: t }), this.typing || this.processTypeQueue();
+  type(e, t = 30) {
+    this.typeQueue.push({ text: e, speed: t }), this.typing || this.processTypeQueue();
   }
   async processTypeQueue() {
     if (!this.typing) {
       for (this.typing = !0; this.typeQueue.length > 0; ) {
-        const { text: r, speed: t } = this.typeQueue.shift();
+        const { text: e, speed: t } = this.typeQueue.shift();
         await new Promise((a) => {
           this.outputs = [...this.outputs, ""];
-          let i = 0;
-          const e = () => {
-            if (i >= r.length) {
+          let s = 0;
+          const r = () => {
+            if (s >= e.length) {
               a();
               return;
             }
-            const s = this.outputs.length - 1;
-            this.outputs[s] = (this.outputs[s] || "") + r[i++], this.requestUpdate(), this.scrollToBottom(), setTimeout(e, t);
+            const i = this.outputs.length - 1;
+            this.outputs[i] = (this.outputs[i] || "") + e[s++], this.requestUpdate(), this.scrollToBottom(), setTimeout(r, t);
           };
-          e();
+          r();
         });
       }
       this.typing = !1;
     }
   }
   render() {
-    const r = this.outputs.slice(-this.rows);
-    return c`
+    const e = this.outputs.slice(-this.rows);
+    return l`
       <div class="term" role="textbox" aria-label="Terminal" tabindex="0" aria-disabled="${this.disabled}">
-        ${r.map((t) => c`<div class="line">${t}</div>`)}
+        ${e.map((t) => l`<div class="line">${t}</div>`)}
         <div class="line input-line">
           <span class="prompt">${this.prompt}</span>
           <div class="fake-input"><span class="input-text">${this.input}</span></div>
@@ -6239,9 +6529,11 @@ let F = class extends p {
     `;
   }
 };
-F.styles = l`
-    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
+W.styles = d`
+    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; width: 100%; max-width: none; box-sizing: border-box; min-width: 0; }
     .term {
+      width: 100%;
+      max-width: none;
       background: #0b0f0b;
       color: #8aff8a;
       padding: 12px;
@@ -6277,53 +6569,53 @@ F.styles = l`
     .fake-input .input-text { display:inline-block; white-space:pre; }
     .muted { opacity: 0.7; font-size: 0.9em; }
   `;
-at([
+gt([
   n({ type: Number })
-], F.prototype, "rows", 2);
-at([
+], W.prototype, "rows", 2);
+gt([
   n({ type: String })
-], F.prototype, "prompt", 2);
-at([
+], W.prototype, "prompt", 2);
+gt([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "disabled", 2);
-at([
-  v()
-], F.prototype, "outputs", 2);
-at([
-  v()
-], F.prototype, "input", 2);
-F = at([
-  d("crt-terminal")
-], F);
-var xe = Object.defineProperty, we = Object.getOwnPropertyDescriptor, ft = (r, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? we(t, a) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = (i ? o(t, a, e) : o(e)) || e);
-  return i && e && xe(t, a, e), e;
+], W.prototype, "disabled", 2);
+gt([
+  m()
+], W.prototype, "outputs", 2);
+gt([
+  m()
+], W.prototype, "input", 2);
+W = gt([
+  v("crt-terminal")
+], W);
+var va = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, Mt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ga(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && va(t, a, r), r;
 };
-let W = class extends p {
+let at = class extends h {
   constructor() {
-    super(...arguments), this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (r) => {
-      const a = r.detail.files.filter((i) => i.type.startsWith("audio/") || i.name.endsWith(".mp3") || i.name.endsWith(".wav") || i.name.endsWith(".ogg") || i.name.endsWith(".flac")).map((i) => {
-        const e = i.name.replace(/\.[^/.]+$/, "");
-        let s = "UNKNOWN ARTIST", o = e.toUpperCase();
-        if (e.includes(" - ")) {
-          const h = e.split(" - ");
-          s = h[0].trim().toUpperCase(), o = h.slice(1).join(" - ").trim().toUpperCase();
+    super(...arguments), this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (e) => {
+      const a = e.detail.files.filter((s) => s.type.startsWith("audio/") || s.name.endsWith(".mp3") || s.name.endsWith(".wav") || s.name.endsWith(".ogg") || s.name.endsWith(".flac")).map((s) => {
+        const r = s.name.replace(/\.[^/.]+$/, "");
+        let i = "UNKNOWN ARTIST", o = r.toUpperCase();
+        if (r.includes(" - ")) {
+          const c = r.split(" - ");
+          i = c[0].trim().toUpperCase(), o = c.slice(1).join(" - ").trim().toUpperCase();
         }
         return {
           title: o,
-          artist: s,
-          url: URL.createObjectURL(i)
+          artist: i,
+          url: URL.createObjectURL(s)
         };
       });
       this.tracks = [...this.tracks, ...a];
-    }, this.handleTrackSelect = (r) => {
-      this.currentIndex = r.detail.index;
-    }, this.handleTrackRemove = (r) => {
-      const t = r.detail.index, a = this.tracks[t];
-      URL.revokeObjectURL(a.url), this.tracks = this.tracks.filter((i, e) => e !== t), this.tracks.length === 0 ? this.currentIndex = 0 : t <= this.currentIndex && (this.currentIndex = Math.max(0, this.currentIndex - 1));
-    }, this.handleTrackChange = (r) => {
-      this.currentIndex = r.detail.index;
+    }, this.handleTrackSelect = (e) => {
+      this.currentIndex = e.detail.index;
+    }, this.handleTrackRemove = (e) => {
+      const t = e.detail.index, a = this.tracks[t];
+      URL.revokeObjectURL(a.url), this.tracks = this.tracks.filter((s, r) => r !== t), this.tracks.length === 0 ? this.currentIndex = 0 : t <= this.currentIndex && (this.currentIndex = Math.max(0, this.currentIndex - 1));
+    }, this.handleTrackChange = (e) => {
+      this.currentIndex = e.detail.index;
     }, this.openUploadModal = () => {
       this.showUploadModal = !0;
     }, this.closeUploadModal = () => {
@@ -6333,7 +6625,7 @@ let W = class extends p {
     };
   }
   render() {
-    return c`
+    return l`
       <div class="station">
         <!-- Header -->
         <div class="station-header">
@@ -6388,7 +6680,7 @@ let W = class extends p {
     `;
   }
 };
-W.styles = l`
+at.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6461,61 +6753,61 @@ W.styles = l`
       padding-top: var(--crt-spacing-md);
     }
   `;
-ft([
-  v()
-], W.prototype, "tracks", 2);
-ft([
-  v()
-], W.prototype, "currentIndex", 2);
-ft([
-  v()
-], W.prototype, "showUploadModal", 2);
-ft([
-  At("crt-file-upload")
-], W.prototype, "fileUpload", 2);
-W = ft([
-  d("crt-music-station")
-], W);
+Mt([
+  m()
+], at.prototype, "tracks", 2);
+Mt([
+  m()
+], at.prototype, "currentIndex", 2);
+Mt([
+  m()
+], at.prototype, "showUploadModal", 2);
+Mt([
+  ee("crt-file-upload")
+], at.prototype, "fileUpload", 2);
+at = Mt([
+  v("crt-music-station")
+], at);
 export {
-  Pt as Accordion,
-  ht as AccordionItem,
-  y as Alert,
-  E as Avatar,
-  _t as AvatarGroup,
-  wt as Badge,
-  ct as Breadcrumb,
-  w as Button,
-  m as Calendar,
-  Dt as Card,
-  L as Checkbox,
-  R as CodeExample,
-  P as FileUpload,
-  dt as Grid,
-  kt as Heading,
-  ot as Icon,
-  Y as Input,
-  I as Link,
-  tt as Modal,
-  x as MusicPlayer,
-  W as MusicStation,
-  X as Pagination,
-  vt as Playlist,
-  b as Progress,
-  U as Radio,
-  Z as RadioGroup,
-  C as Select,
-  N as Skeleton,
-  Ot as SkeletonCard,
-  zt as SkeletonText,
-  f as Slider,
-  lt as Spinner,
-  pt as Table,
-  nt as Tabs,
-  F as Terminal,
-  $t as Text,
-  q as Textarea,
-  D as Toast,
-  S as Toggle,
-  V as Tooltip,
-  K as Visualizer
+  Yt as Accordion,
+  Ct as AccordionItem,
+  $ as Alert,
+  T as Avatar,
+  Rt as AvatarGroup,
+  Bt as Badge,
+  kt as Breadcrumb,
+  z as Button,
+  x as Calendar,
+  Qt as Card,
+  H as Checkbox,
+  q as CodeExample,
+  E as FileUpload,
+  zt as Grid,
+  Nt as Heading,
+  xt as Icon,
+  Q as Input,
+  F as Link,
+  dt as Modal,
+  _ as MusicPlayer,
+  at as MusicStation,
+  et as Pagination,
+  Ot as Playlist,
+  w as Progress,
+  Y as Radio,
+  pt as RadioGroup,
+  M as Select,
+  V as Skeleton,
+  Ht as SkeletonCard,
+  Ft as SkeletonText,
+  k as Slider,
+  $t as Spinner,
+  _t as Table,
+  wt as Tabs,
+  W as Terminal,
+  Ut as Text,
+  J as Textarea,
+  j as Toast,
+  D as Toggle,
+  tt as Tooltip,
+  rt as Visualizer
 };