@patimweb/crtstyleguide 1.0.19 → 1.0.20

package/dist/lib/index.js

@@ -1,21 +1,21 @@
 import { css as c, LitElement as p, html as l } from "lit";
-const d = (r) => (t, a) => {
+const d = (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, Mt = yt.ShadowRoot && (yt.ShadyCSS === void 0 || yt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ht = /* @__PURE__ */ Symbol(), Ft = /* @__PURE__ */ new WeakMap();
-let Wt = class {
-  constructor(t, a, s) {
-    if (this._$cssResult$ = !0, s !== Ht) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+const zt = globalThis, Nt = zt.ShadowRoot && (zt.ShadyCSS === void 0 || zt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, te = /* @__PURE__ */ Symbol(), Gt = /* @__PURE__ */ new WeakMap();
+let se = class {
+  constructor(t, a, i) {
+    if (this._$cssResult$ = !0, i !== te) 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 (Mt && t === void 0) {
-      const s = a !== void 0 && a.length === 1;
-      s && (t = Ft.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && Ft.set(a, t));
+    if (Nt && t === void 0) {
+      const i = a !== void 0 && a.length === 1;
+      i && (t = Gt.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Gt.set(a, t));
     }
     return t;
   }
@@ -23,108 +23,108 @@ let Wt = class {
     return this.cssText;
   }
 };
-const Gt = (r) => new Wt(typeof r == "string" ? r : r + "", void 0, Ht), Qt = (r, t) => {
-  if (Mt) r.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
+const oe = (e) => new se(typeof e == "string" ? e : e + "", void 0, te), ne = (e, t) => {
+  if (Nt) e.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
   else for (const a of t) {
-    const s = document.createElement("style"), e = yt.litNonce;
-    e !== void 0 && s.setAttribute("nonce", e), s.textContent = a.cssText, r.appendChild(s);
+    const i = document.createElement("style"), r = zt.litNonce;
+    r !== void 0 && i.setAttribute("nonce", r), i.textContent = a.cssText, e.appendChild(i);
   }
-}, Yt = Mt ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
+}, Qt = Nt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let a = "";
-  for (const s of t.cssRules) a += s.cssText;
-  return Gt(a);
-})(r) : r;
-const { is: Jt, defineProperty: Zt, getOwnPropertyDescriptor: tr, getOwnPropertyNames: rr, getOwnPropertySymbols: er, getPrototypeOf: ar } = Object, Ot = globalThis, Vt = Ot.trustedTypes, sr = Vt ? Vt.emptyScript : "", ir = Ot.reactiveElementPolyfillSupport, ot = (r, t) => r, xt = { toAttribute(r, t) {
+  for (const i of t.cssRules) a += i.cssText;
+  return oe(a);
+})(e) : e;
+const { is: le, defineProperty: ce, getOwnPropertyDescriptor: pe, getOwnPropertyNames: de, getOwnPropertySymbols: he, getPrototypeOf: ve } = Object, It = globalThis, Jt = It.trustedTypes, ue = Jt ? Jt.emptyScript : "", ge = It.reactiveElementPolyfillSupport, pt = (e, t) => e, Ct = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
-      r = r ? sr : null;
+      e = e ? ue : 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), qt = { attribute: !0, type: String, converter: xt, reflect: !1, useDefault: !1, hasChanged: jt };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Ot.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class it extends HTMLElement {
+} }, Rt = (e, t) => !le(e, t), Zt = { attribute: !0, type: String, converter: Ct, reflect: !1, useDefault: !1, hasChanged: Rt };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), It.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+class ct 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 = qt) {
+  static createProperty(t, a = Zt) {
     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 s = /* @__PURE__ */ Symbol(), e = this.getPropertyDescriptor(t, s, a);
-      e !== void 0 && Zt(this.prototype, t, e);
+      const i = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(t, i, a);
+      r !== void 0 && ce(this.prototype, t, r);
     }
   }
-  static getPropertyDescriptor(t, a, s) {
-    const { get: e, set: i } = tr(this.prototype, t) ?? { get() {
+  static getPropertyDescriptor(t, a, i) {
+    const { get: r, set: s } = pe(this.prototype, t) ?? { get() {
       return this[a];
     }, set(o) {
       this[a] = o;
     } };
-    return { get: e, set(o) {
-      const h = e?.call(this);
-      i?.call(this, o), this.requestUpdate(t, h, s);
+    return { get: r, set(o) {
+      const h = r?.call(this);
+      s?.call(this, o), this.requestUpdate(t, h, i);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? qt;
+    return this.elementProperties.get(t) ?? Zt;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(ot("elementProperties"))) return;
-    const t = ar(this);
+    if (this.hasOwnProperty(pt("elementProperties"))) return;
+    const t = ve(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(ot("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ot("properties"))) {
-      const a = this.properties, s = [...rr(a), ...er(a)];
-      for (const e of s) this.createProperty(e, a[e]);
+    if (this.hasOwnProperty(pt("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(pt("properties"))) {
+      const a = this.properties, i = [...de(a), ...he(a)];
+      for (const r of i) this.createProperty(r, a[r]);
     }
     const t = this[Symbol.metadata];
     if (t !== null) {
       const a = litPropertyMetadata.get(t);
-      if (a !== void 0) for (const [s, e] of a) this.elementProperties.set(s, e);
+      if (a !== void 0) for (const [i, r] of a) this.elementProperties.set(i, r);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [a, s] of this.elementProperties) {
-      const e = this._$Eu(a, s);
-      e !== void 0 && this._$Eh.set(e, a);
+    for (const [a, i] of this.elementProperties) {
+      const r = this._$Eu(a, i);
+      r !== void 0 && this._$Eh.set(r, a);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(t) {
     const a = [];
     if (Array.isArray(t)) {
-      const s = new Set(t.flat(1 / 0).reverse());
-      for (const e of s) a.unshift(Yt(e));
-    } else t !== void 0 && a.push(Yt(t));
+      const i = new Set(t.flat(1 / 0).reverse());
+      for (const r of i) a.unshift(Qt(r));
+    } else t !== void 0 && a.push(Qt(t));
     return a;
   }
   static _$Eu(t, a) {
-    const s = a.attribute;
-    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
+    const i = a.attribute;
+    return i === !1 ? void 0 : typeof i == "string" ? i : 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 s of a.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
+    for (const i of a.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
     t.size > 0 && (this._$Ep = t);
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Qt(t, this.constructor.elementStyles), t;
+    return ne(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, s) {
-    this._$AK(t, s);
+  attributeChangedCallback(t, a, i) {
+    this._$AK(t, i);
   }
   _$ET(t, a) {
-    const s = this.constructor.elementProperties.get(t), e = this.constructor._$Eu(t, s);
-    if (e !== void 0 && s.reflect === !0) {
-      const i = (s.converter?.toAttribute !== void 0 ? s.converter : xt).toAttribute(a, s.type);
-      this._$Em = t, i == null ? this.removeAttribute(e) : this.setAttribute(e, i), this._$Em = null;
+    const i = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, i);
+    if (r !== void 0 && i.reflect === !0) {
+      const s = (i.converter?.toAttribute !== void 0 ? i.converter : Ct).toAttribute(a, i.type);
+      this._$Em = t, s == null ? this.removeAttribute(r) : this.setAttribute(r, s), this._$Em = null;
     }
   }
   _$AK(t, a) {
-    const s = this.constructor, e = s._$Eh.get(t);
-    if (e !== void 0 && this._$Em !== e) {
-      const i = s.getPropertyOptions(e), o = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : xt;
-      this._$Em = e;
-      const h = o.fromAttribute(a, i.type);
-      this[e] = h ?? this._$Ej?.get(e) ?? h, this._$Em = null;
+    const i = this.constructor, r = i._$Eh.get(t);
+    if (r !== void 0 && this._$Em !== r) {
+      const s = i.getPropertyOptions(r), o = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : Ct;
+      this._$Em = r;
+      const h = o.fromAttribute(a, s.type);
+      this[r] = h ?? this._$Ej?.get(r) ?? h, this._$Em = null;
     }
   }
-  requestUpdate(t, a, s, e = !1, i) {
+  requestUpdate(t, a, i, r = !1, s) {
     if (t !== void 0) {
       const o = this.constructor;
-      if (e === !1 && (i = this[t]), s ??= o.getPropertyOptions(t), !((s.hasChanged ?? jt)(i, a) || s.useDefault && s.reflect && i === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, s)))) return;
-      this.C(t, a, s);
+      if (r === !1 && (s = this[t]), i ??= o.getPropertyOptions(t), !((i.hasChanged ?? Rt)(s, a) || i.useDefault && i.reflect && s === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, i)))) return;
+      this.C(t, a, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(t, a, { useDefault: s, reflect: e, 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)), e === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
+  C(t, a, { useDefault: i, reflect: r, 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)), 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, i] of this._$Ep) this[e] = i;
+        for (const [r, s] of this._$Ep) this[r] = s;
         this._$Ep = void 0;
       }
-      const s = this.constructor.elementProperties;
-      if (s.size > 0) for (const [e, i] of s) {
-        const { wrapped: o } = i, h = this[e];
-        o !== !0 || this._$AL.has(e) || h === void 0 || this.C(e, void 0, i, h);
+      const i = this.constructor.elementProperties;
+      if (i.size > 0) for (const [r, s] of i) {
+        const { wrapped: o } = s, h = this[r];
+        o !== !0 || this._$AL.has(r) || h === void 0 || this.C(r, void 0, s, h);
       }
     }
     let t = !1;
     const a = this._$AL;
     try {
-      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.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._$AE(a);
   }
@@ -245,52 +245,52 @@ class it extends HTMLElement {
   firstUpdated(t) {
   }
 }
-it.elementStyles = [], it.shadowRootOptions = { mode: "open" }, it[ot("elementProperties")] = /* @__PURE__ */ new Map(), it[ot("finalized")] = /* @__PURE__ */ new Map(), ir?.({ ReactiveElement: it }), (Ot.reactiveElementVersions ??= []).push("2.1.2");
-const or = { attribute: !0, type: String, converter: xt, reflect: !1, hasChanged: jt }, nr = (r = or, t, a) => {
-  const { kind: s, metadata: e } = a;
-  let i = globalThis.litPropertyMetadata.get(e);
-  if (i === void 0 && globalThis.litPropertyMetadata.set(e, i = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), i.set(a.name, r), s === "accessor") {
+ct.elementStyles = [], ct.shadowRootOptions = { mode: "open" }, ct[pt("elementProperties")] = /* @__PURE__ */ new Map(), ct[pt("finalized")] = /* @__PURE__ */ new Map(), ge?.({ ReactiveElement: ct }), (It.reactiveElementVersions ??= []).push("2.1.2");
+const me = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged: Rt }, fe = (e = me, t, a) => {
+  const { kind: i, metadata: r } = a;
+  let s = globalThis.litPropertyMetadata.get(r);
+  if (s === void 0 && globalThis.litPropertyMetadata.set(r, s = /* @__PURE__ */ new Map()), i === "setter" && ((e = Object.create(e)).wrapped = !0), s.set(a.name, e), i === "accessor") {
     const { name: o } = a;
     return { set(h) {
-      const m = t.get.call(this);
-      t.set.call(this, h), this.requestUpdate(o, m, r, !0, h);
+      const f = t.get.call(this);
+      t.set.call(this, h), this.requestUpdate(o, f, e, !0, h);
     }, init(h) {
-      return h !== void 0 && this.C(o, void 0, r, h), h;
+      return h !== void 0 && this.C(o, void 0, e, h), h;
     } };
   }
-  if (s === "setter") {
+  if (i === "setter") {
     const { name: o } = a;
     return function(h) {
-      const m = this[o];
-      t.call(this, h), this.requestUpdate(o, m, r, !0, h);
+      const f = this[o];
+      t.call(this, h), this.requestUpdate(o, f, e, !0, h);
     };
   }
-  throw Error("Unsupported decorator location: " + s);
+  throw Error("Unsupported decorator location: " + i);
 };
-function n(r) {
-  return (t, a) => typeof a == "object" ? nr(r, t, a) : ((s, e, i) => {
-    const o = e.hasOwnProperty(i);
-    return e.constructor.createProperty(i, s), o ? Object.getOwnPropertyDescriptor(e, i) : void 0;
-  })(r, t, a);
+function n(e) {
+  return (t, a) => typeof a == "object" ? fe(e, t, a) : ((i, r, s) => {
+    const o = r.hasOwnProperty(s);
+    return r.constructor.createProperty(s, i), o ? Object.getOwnPropertyDescriptor(r, s) : void 0;
+  })(e, t, a);
 }
-function v(r) {
-  return n({ ...r, state: !0, attribute: !1 });
+function v(e) {
+  return n({ ...e, state: !0, attribute: !1 });
 }
-const lr = (r, t, a) => (a.configurable = !0, a.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(r, t, a), a);
-function Tt(r, t) {
-  return (a, s, e) => {
-    const i = (o) => o.renderRoot?.querySelector(r) ?? null;
-    return lr(a, s, { get() {
-      return i(this);
+const be = (e, t, a) => (a.configurable = !0, a.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, a), a);
+function Ft(e, t) {
+  return (a, i, r) => {
+    const s = (o) => o.renderRoot?.querySelector(e) ?? null;
+    return be(a, i, { get() {
+      return s(this);
     } });
   };
 }
-var cr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, At = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? pr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && cr(t, a, e), e;
+var ye = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, Vt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? xe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && ye(t, a, r), r;
 };
-const dr = {
+const we = {
   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>',
@@ -344,16 +344,16 @@ const dr = {
   "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 nt = class extends p {
+let dt = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.size = "md";
   }
   render() {
-    const r = dr[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" .innerHTML=${r}></span>`;
+    const e = we[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" .innerHTML=${e}></span>`;
   }
 };
-nt.styles = c`
+dt.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -370,21 +370,21 @@ nt.styles = c`
       height: 100%;
     }
   `;
-At([
+Vt([
   n()
-], nt.prototype, "name", 2);
-At([
+], dt.prototype, "name", 2);
+Vt([
   n()
-], nt.prototype, "size", 2);
-nt = At([
+], dt.prototype, "size", 2);
+dt = Vt([
   d("crt-icon")
-], nt);
-var hr = Object.defineProperty, vr = Object.getOwnPropertyDescriptor, Y = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? vr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && hr(t, a, e), e;
+], dt);
+var ke = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, q = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? _e(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && ke(t, a, r), r;
 };
-let k = class extends p {
+let $ = class extends p {
   constructor() {
     super(), this.size = "medium", this.variant = "primary", this.disabled = !1, this.type = "button", this.iconOnly = !1, this.iconLeft = "", this.iconRight = "";
   }
@@ -393,10 +393,10 @@ let k = class extends p {
   }
   render() {
     if (this.iconOnly) {
-      const r = this.iconLeft || this.iconRight;
+      const e = this.iconLeft || this.iconRight;
       return l`
         <button type="${this.type}" ?disabled="${this.disabled}">
-          ${r ? l`<crt-icon name="${r}"></crt-icon>` : l`<slot></slot>`}
+          ${e ? l`<crt-icon name="${e}"></crt-icon>` : l`<slot></slot>`}
         </button>
       `;
     }
@@ -409,7 +409,7 @@ let k = class extends p {
     `;
   }
 };
-k.styles = c`
+$.styles = c`
     :host {
       display: inline-block;
     }
@@ -565,36 +565,36 @@ k.styles = c`
       flex-shrink: 0;
     }
   `;
-Y([
+q([
   n({ reflect: !0 })
-], k.prototype, "size", 2);
-Y([
+], $.prototype, "size", 2);
+q([
   n({ reflect: !0 })
-], k.prototype, "variant", 2);
-Y([
+], $.prototype, "variant", 2);
+q([
   n({ type: Boolean })
-], k.prototype, "disabled", 2);
-Y([
+], $.prototype, "disabled", 2);
+q([
   n()
-], k.prototype, "type", 2);
-Y([
+], $.prototype, "type", 2);
+q([
   n({ attribute: "icon-only", type: Boolean })
-], k.prototype, "iconOnly", 2);
-Y([
+], $.prototype, "iconOnly", 2);
+q([
   n({ attribute: "icon-left" })
-], k.prototype, "iconLeft", 2);
-Y([
+], $.prototype, "iconLeft", 2);
+q([
   n({ attribute: "icon-right" })
-], k.prototype, "iconRight", 2);
-k = Y([
+], $.prototype, "iconRight", 2);
+$ = q([
   d("crt-button")
-], k);
-var gr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Xt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? ur(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && gr(t, a, e), e;
+], $);
+var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, ee = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? ze(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && $e(t, a, r), r;
 };
-let wt = class extends p {
+let Pt = class extends p {
   constructor() {
     super(...arguments), this.variant = "primary";
   }
@@ -602,7 +602,7 @@ let wt = class extends p {
     return l`<span class="badge"><slot></slot></span>`;
   }
 };
-wt.styles = c`
+Pt.styles = c`
     :host {
       --badge-bg: transparent;
       --badge-color: var(--crt-primary);
@@ -643,18 +643,18 @@ wt.styles = c`
       --badge-border: 1px solid var(--crt-info);
     }
   `;
-Xt([
+ee([
   n()
-], wt.prototype, "variant", 2);
-wt = Xt([
+], Pt.prototype, "variant", 2);
+Pt = ee([
   d("crt-badge")
-], wt);
-var mr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, St = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? br(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && mr(t, a, e), e;
+], Pt);
+var Ce = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, Lt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Pe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ce(t, a, r), r;
 };
-let kt = class extends p {
+let Ot = class extends p {
   constructor() {
     super(...arguments), this.level = 1;
   }
@@ -677,7 +677,7 @@ let kt = class extends p {
     }
   }
 };
-kt.styles = c`
+Ot.styles = c`
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--crt-font-family);
       color: var(--crt-text-primary);
@@ -706,13 +706,13 @@ kt.styles = c`
       font-size: var(--crt-font-size-base);
     }
   `;
-St([
+Lt([
   n({ type: Number })
-], kt.prototype, "level", 2);
-kt = St([
+], Ot.prototype, "level", 2);
+Ot = Lt([
   d("crt-heading")
-], kt);
-let $t = class extends p {
+], Ot);
+let St = class extends p {
   constructor() {
     super(...arguments), this.muted = !1;
   }
@@ -720,7 +720,7 @@ let $t = class extends p {
     return l`<p><slot></slot></p>`;
   }
 };
-$t.styles = c`
+St.styles = c`
     p {
       font-family: var(--crt-font-family);
       color: var(--crt-text-secondary);
@@ -732,43 +732,43 @@ $t.styles = c`
       color: var(--crt-text-muted);
     }
   `;
-St([
+Lt([
   n()
-], $t.prototype, "muted", 2);
-$t = St([
+], St.prototype, "muted", 2);
+St = Lt([
   d("crt-text")
-], $t);
-var fr = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, Lt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? yr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && fr(t, a, e), e;
+], St);
+var Oe = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, Yt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Se(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Oe(t, a, r), r;
 };
-let lt = class extends p {
+let ht = class extends p {
   constructor() {
     super(...arguments), this.activeTab = 0, this.tabs = [];
   }
-  selectTab(r) {
-    this.activeTab = r;
+  selectTab(e) {
+    this.activeTab = e;
   }
   render() {
     return l`
       <div class="tabs-header">
         ${this.tabs.map(
-      (r, t) => l`
+      (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) => l`
+      (e, t) => l`
             <div class="tab-pane ${t === this.activeTab ? "active" : ""}">
-              ${r.label.toLowerCase() === "code" ? l`<pre><code>${r.content}</code></pre>` : l`<div>${xr(r.content)}</div>`}
+              ${e.label.toLowerCase() === "code" ? l`<pre><code>${e.content}</code></pre>` : l`<div>${Ee(e.content)}</div>`}
             </div>
           `
     )}
@@ -776,7 +776,7 @@ let lt = class extends p {
     `;
   }
 };
-lt.styles = c`
+ht.styles = c`
     :host {
       display: block;
     }
@@ -843,25 +843,25 @@ lt.styles = c`
       font-family: var(--crt-font-family);
     }
   `;
-Lt([
+Yt([
   v()
-], lt.prototype, "activeTab", 2);
-Lt([
+], ht.prototype, "activeTab", 2);
+Yt([
   n({ type: Array })
-], lt.prototype, "tabs", 2);
-lt = Lt([
+], ht.prototype, "tabs", 2);
+ht = Yt([
   d("crt-tabs")
-], lt);
-function xr(r) {
+], ht);
+function Ee(e) {
   const t = document.createElement("div");
-  return t.innerHTML = r, t;
+  return t.innerHTML = e, t;
 }
-var wr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, $ = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? kr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && wr(t, a, e), e;
+var De = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, z = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Me(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && De(t, a, r), r;
 };
-let V = class extends p {
+let H = class extends p {
   constructor() {
     super(...arguments), this.type = "text", this.placeholder = "", this.value = "", this.disabled = !1;
   }
@@ -872,14 +872,14 @@ let V = class extends p {
         placeholder="${this.placeholder}"
         value="${this.value}"
         ?disabled="${this.disabled}"
-        @input="${(r) => {
-      this.value = r.target.value;
+        @input="${(e) => {
+      this.value = e.target.value;
     }}"
       />
     `;
   }
 };
-V.styles = c`
+H.styles = c`
     :host {
       display: block;
     }
@@ -925,22 +925,22 @@ V.styles = c`
       padding-right: var(--crt-spacing-lg);
     }
   `;
-$([
+z([
   n()
-], V.prototype, "type", 2);
-$([
+], H.prototype, "type", 2);
+z([
   n()
-], V.prototype, "placeholder", 2);
-$([
+], H.prototype, "placeholder", 2);
+z([
   n()
-], V.prototype, "value", 2);
-$([
+], H.prototype, "value", 2);
+z([
   n()
-], V.prototype, "disabled", 2);
-V = $([
+], H.prototype, "disabled", 2);
+H = z([
   d("crt-input")
-], V);
-let q = class extends p {
+], H);
+let K = class extends p {
   constructor() {
     super(...arguments), this.placeholder = "", this.value = "", this.disabled = !1, this.rows = 4;
   }
@@ -951,14 +951,14 @@ let q = class extends p {
         placeholder="${this.placeholder}"
         rows="${this.rows}"
         ?disabled="${this.disabled}"
-        @input="${(r) => {
-      this.value = r.target.value;
+        @input="${(e) => {
+      this.value = e.target.value;
     }}"
       ></textarea>
     `;
   }
 };
-q.styles = c`
+K.styles = c`
     :host {
       display: block;
     }
@@ -1000,33 +1000,40 @@ q.styles = c`
       border-style: dashed;
     }
   `;
-$([
+z([
   n()
-], q.prototype, "placeholder", 2);
-$([
+], K.prototype, "placeholder", 2);
+z([
   n()
-], q.prototype, "value", 2);
-$([
+], K.prototype, "value", 2);
+z([
   n()
-], q.prototype, "disabled", 2);
-$([
+], K.prototype, "disabled", 2);
+z([
   n()
-], q.prototype, "rows", 2);
-q = $([
+], K.prototype, "rows", 2);
+K = z([
   d("crt-textarea")
-], q);
-var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, et = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? _r(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && $r(t, a, e), e;
+], K);
+var je = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, ot = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Te(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && je(t, a, r), r;
 };
-let I = class extends p {
+let U = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.target = "", this.iconLeft = !1, this.iconRight = !1, this.icon = "";
   }
+  _onClick(e) {
+    this.href && this.href.startsWith("#") && (e.preventDefault(), this.dispatchEvent(new CustomEvent("navigate", {
+      detail: { href: this.href },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
   render() {
     return l`
-      <a href="${this.href}" ${this.target ? `target="${this.target}"` : ""}>
+      <a href="${this.href}" ${this.target ? `target="${this.target}"` : ""} @click="${(e) => this._onClick(e)}">
         ${this.iconLeft ? l`<crt-icon name="${this.icon}"></crt-icon>` : ""}
         <slot></slot>
         ${this.iconRight ? l`<crt-icon name="${this.icon}"></crt-icon>` : ""}
@@ -1034,7 +1041,7 @@ let I = class extends p {
     `;
   }
 };
-I.styles = c`
+U.styles = c`
     :host {
       --crt-link-color: var(--crt-primary);
     }
@@ -1060,38 +1067,38 @@ I.styles = c`
       color: var(--crt-primary-dark);
     }
   `;
-et([
+ot([
   n({ type: String })
-], I.prototype, "href", 2);
-et([
+], U.prototype, "href", 2);
+ot([
   n({ type: String })
-], I.prototype, "target", 2);
-et([
+], U.prototype, "target", 2);
+ot([
   n({ type: Boolean })
-], I.prototype, "iconLeft", 2);
-et([
+], U.prototype, "iconLeft", 2);
+ot([
   n({ type: Boolean })
-], I.prototype, "iconRight", 2);
-et([
+], U.prototype, "iconRight", 2);
+ot([
   n({ type: String })
-], I.prototype, "icon", 2);
-I = et([
+], U.prototype, "icon", 2);
+U = ot([
   d("crt-link")
-], I);
-var zr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, W = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Cr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && zr(t, a, e), e;
+], U);
+var Ae = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, Z = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ie(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ae(t, a, r), r;
 };
-let O = class extends p {
+let E = class extends p {
   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 = () => {
@@ -1109,41 +1116,41 @@ let O = class extends p {
   _generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
-  _addFiles(r) {
-    const s = r.filter((e) => {
-      if (e.size > this.maxSize)
-        return console.warn(`File ${e.name} exceeds max size`), !1;
+  _addFiles(e) {
+    const i = e.filter((r) => {
+      if (r.size > this.maxSize)
+        return console.warn(`File ${r.name} exceeds max size`), !1;
       if (this.accept) {
-        const i = this.accept.split(",").map((P) => P.trim()), o = e.type, h = "." + e.name.split(".").pop()?.toLowerCase();
-        if (!i.some((P) => P.startsWith(".") ? h === P.toLowerCase() : P.endsWith("/*") ? o.startsWith(P.replace("/*", "/")) : o === P))
-          return console.warn(`File ${e.name} type not accepted`), !1;
+        const s = this.accept.split(",").map((S) => S.trim()), o = r.type, h = "." + r.name.split(".").pop()?.toLowerCase();
+        if (!s.some((S) => S.startsWith(".") ? h === S.toLowerCase() : S.endsWith("/*") ? o.startsWith(S.replace("/*", "/")) : o === S))
+          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, ...s], this.dispatchEvent(new CustomEvent("files-changed", {
-      detail: { files: this.files.map((e) => e.file) }
+    this.files = [...this.files, ...i], 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"], s = Math.floor(Math.log(r) / Math.log(t));
-    return parseFloat((r / Math.pow(t, s)).toFixed(1)) + " " + a[s];
+  _formatFileSize(e) {
+    if (e === 0) return "0 B";
+    const t = 1024, a = ["B", "KB", "MB", "GB"], i = Math.floor(Math.log(e) / Math.log(t));
+    return parseFloat((e / Math.pow(t, i)).toFixed(1)) + " " + a[i];
   }
-  _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 l`
@@ -1179,18 +1186,18 @@ let O = class extends p {
             <span style="text-align: center;">ACT</span>
           </div>
           <div class="file-list">
-            ${this.files.map((r) => l`
+            ${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>
@@ -1224,7 +1231,7 @@ let O = class extends p {
     `;
   }
 };
-O.styles = c`
+E.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -1519,31 +1526,31 @@ O.styles = c`
       transition: width 0.3s ease;
     }
   `;
-W([
+Z([
   n({ type: String })
-], O.prototype, "accept", 2);
-W([
+], E.prototype, "accept", 2);
+Z([
   n({ type: Boolean })
-], O.prototype, "multiple", 2);
-W([
+], E.prototype, "multiple", 2);
+Z([
   n({ type: String })
-], O.prototype, "name", 2);
-W([
+], E.prototype, "name", 2);
+Z([
   n({ type: Number })
-], O.prototype, "maxSize", 2);
-W([
+], E.prototype, "maxSize", 2);
+Z([
   n({ type: Number })
-], O.prototype, "maxFiles", 2);
-W([
+], E.prototype, "maxFiles", 2);
+Z([
   v()
-], O.prototype, "files", 2);
-O = W([
+], E.prototype, "files", 2);
+E = Z([
   d("crt-file-upload")
-], O);
-var Pr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, _ = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Or(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Pr(t, a, e), e;
+], E);
+var Le = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, C = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Be(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Le(t, a, r), r;
 };
 let b = class extends p {
   constructor() {
@@ -1560,8 +1567,8 @@ let b = 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() {
@@ -1571,15 +1578,15 @@ let b = class extends p {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
   }
   _parseValue() {
-    const r = this.value.split(".");
-    if (r.length === 3) {
-      const [t, a, s] = r.map(Number);
-      this._selectedDate = new Date(s, a - 1, t), this._viewDate = new Date(this._selectedDate);
+    const e = this.value.split(".");
+    if (e.length === 3) {
+      const [t, a, i] = e.map(Number);
+      this._selectedDate = new Date(i, 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"), s = r.getFullYear();
-    return `${t}.${a}.${s}`;
+  _formatDate(e) {
+    const t = String(e.getDate()).padStart(2, "0"), a = String(e.getMonth() + 1).padStart(2, "0"), i = e.getFullYear();
+    return `${t}.${a}.${i}`;
   }
   _toggleCalendar() {
     this.disabled || (this._isOpen = !this._isOpen);
@@ -1598,9 +1605,9 @@ let b = 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() {
@@ -1611,54 +1618,54 @@ let b = 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), s = this._getFirstDayOfMonth(r, t), e = this._getDaysInMonth(r, t - 1), i = [];
-    for (let h = s - 1; h >= 0; h--) {
-      const m = new Date(r, t - 1, e - h);
-      i.push(l`
-        <div class="day other-month" @click="${() => this._selectDate(m)}">
-          ${e - h}
+    const e = this._viewDate.getFullYear(), t = this._viewDate.getMonth(), a = this._getDaysInMonth(e, t), i = this._getFirstDayOfMonth(e, t), r = this._getDaysInMonth(e, t - 1), s = [];
+    for (let h = i - 1; h >= 0; h--) {
+      const f = new Date(e, t - 1, r - h);
+      s.push(l`
+        <div class="day other-month" @click="${() => this._selectDate(f)}">
+          ${r - h}
         </div>
       `);
     }
     for (let h = 1; h <= a; h++) {
-      const m = new Date(r, t, h), P = this._isToday(m), Kt = this._isSelected(m);
-      i.push(l`
+      const f = new Date(e, t, h), S = this._isToday(f), ie = this._isSelected(f);
+      s.push(l`
         <div 
-          class="day ${P ? "today" : ""} ${Kt ? "selected" : ""}"
-          @click="${() => this._selectDate(m)}"
+          class="day ${S ? "today" : ""} ${ie ? "selected" : ""}"
+          @click="${() => this._selectDate(f)}"
         >
           ${h}
         </div>
       `);
     }
-    const o = 42 - i.length;
+    const o = 42 - s.length;
     for (let h = 1; h <= o; h++) {
-      const m = new Date(r, t + 1, h);
-      i.push(l`
-        <div class="day other-month" @click="${() => this._selectDate(m)}">
+      const f = new Date(e, t + 1, h);
+      s.push(l`
+        <div class="day other-month" @click="${() => this._selectDate(f)}">
           ${h}
         </div>
       `);
     }
-    return i;
+    return s;
   }
   render() {
-    const r = `${this._months[this._viewDate.getMonth()]} ${this._viewDate.getFullYear()}`;
+    const e = `${this._months[this._viewDate.getMonth()]} ${this._viewDate.getFullYear()}`;
     return l`
       <div class="calendar-wrapper">
         <div class="calendar-input">
@@ -1683,7 +1690,7 @@ let b = 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>
           
@@ -1909,56 +1916,56 @@ b.styles = c`
       color: var(--crt-bg-dark);
     }
   `;
-_([
+C([
   n({ type: String })
 ], b.prototype, "value", 2);
-_([
+C([
   n({ type: String })
 ], b.prototype, "placeholder", 2);
-_([
+C([
   n({ type: String })
 ], b.prototype, "format", 2);
-_([
+C([
   n({ type: String })
 ], b.prototype, "min", 2);
-_([
+C([
   n({ type: String })
 ], b.prototype, "max", 2);
-_([
+C([
   n({ type: Boolean })
 ], b.prototype, "disabled", 2);
-_([
+C([
   v()
 ], b.prototype, "_isOpen", 2);
-_([
+C([
   v()
 ], b.prototype, "_viewDate", 2);
-_([
+C([
   v()
 ], b.prototype, "_selectedDate", 2);
-b = _([
+b = C([
   d("crt-calendar")
 ], b);
-var Sr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, G = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Er(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Sr(t, a, e), e;
+var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, tt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ne(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ue(t, a, r), r;
 };
-let S = class extends p {
+let D = class extends p {
   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);
@@ -1969,42 +1976,42 @@ let S = 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 s = [];
-    for (const e of a)
-      s.push(this._renderOption(e));
-    for (const [e, i] of t) {
-      s.push(l`<div class="select-group-label">${e}</div>`);
-      for (const o of i)
-        s.push(this._renderOption(o));
+    const i = [];
+    for (const r of a)
+      i.push(this._renderOption(r));
+    for (const [r, s] of t) {
+      i.push(l`<div class="select-group-label">${r}</div>`);
+      for (const o of s)
+        i.push(this._renderOption(o));
     }
-    return s;
+    return i;
   }
-  _renderOption(r) {
-    const t = r.value === this.value;
+  _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();
+    const e = this._getSelectedLabel();
     return l`
       ${this.label ? l`<label class="select-label">${this.label}</label>` : ""}
       <div class="select-wrapper">
@@ -2012,8 +2019,8 @@ let S = class extends p {
           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>
@@ -2025,7 +2032,7 @@ let S = class extends p {
     `;
   }
 };
-S.styles = c`
+D.styles = c`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -2182,38 +2189,261 @@ S.styles = c`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-G([
+tt([
   n({ type: String })
-], S.prototype, "value", 2);
-G([
+], D.prototype, "value", 2);
+tt([
   n({ type: String })
-], S.prototype, "placeholder", 2);
-G([
+], D.prototype, "placeholder", 2);
+tt([
   n({ type: String })
-], S.prototype, "label", 2);
-G([
+], D.prototype, "label", 2);
+tt([
   n({ type: Boolean })
-], S.prototype, "disabled", 2);
-G([
+], D.prototype, "disabled", 2);
+tt([
   n({ type: Array })
-], S.prototype, "options", 2);
-G([
+], D.prototype, "options", 2);
+tt([
   v()
-], S.prototype, "_isOpen", 2);
-S = G([
+], D.prototype, "_isOpen", 2);
+D = tt([
   d("crt-select")
-], S);
-var Dr = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, g = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Mr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Dr(t, a, e), e;
+], D);
+var Re = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, _ = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Fe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Re(t, a, r), r;
+};
+let m = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "Search...", this.debounceMs = 300, this.minLength = 1, this.suggestions = [], this._open = !1, this._activeIndex = -1, this._filtered = [], this._loading = !1, this._id = `crt-search-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._filtered = [...this.suggestions];
+  }
+  updated(e) {
+    e.has("suggestions") && (this._filtered = [...this.suggestions]);
+  }
+  _onInput(e) {
+    const t = e.target.value;
+    if (this.value = t, this.dispatchEvent(new CustomEvent("input-change", { detail: { value: this.value } })), this._debounceTimer && window.clearTimeout(this._debounceTimer), this.value.length < this.minLength) {
+      this._open = !1, this._filtered = [];
+      return;
+    }
+    this._debounceTimer = window.setTimeout(async () => {
+      if (this._loading = !0, this.fetcher)
+        try {
+          const a = await this.fetcher(this.value);
+          this._filtered = (a || []).slice(0, 50);
+        } catch (a) {
+          console.warn("crt-search: fetcher error", a), this._filtered = [];
+        }
+      else {
+        const a = this.value.toLowerCase();
+        this._filtered = this.suggestions.filter((i) => (i.label || i.value).toLowerCase().includes(a)).slice(0, 50);
+      }
+      this._activeIndex = this._filtered.length > 0 ? 0 : -1, this._open = this._filtered.length > 0, this._loading = !1;
+    }, this.debounceMs);
+  }
+  _onKeyDown(e) {
+    if (!this._open && (e.key === "ArrowDown" || e.key === "ArrowUp") && this._filtered.length > 0 && (this._open = !0), !this._open) {
+      e.key === "Enter" && this.dispatchEvent(new CustomEvent("search", { detail: { value: this.value } }));
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this._activeIndex = (this._activeIndex + 1) % this._filtered.length, this._scrollIntoView();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this._activeIndex = (this._activeIndex - 1 + this._filtered.length) % this._filtered.length, this._scrollIntoView();
+        break;
+      case "Home":
+        e.preventDefault(), this._activeIndex = 0, this._scrollIntoView();
+        break;
+      case "End":
+        e.preventDefault(), this._activeIndex = this._filtered.length - 1, this._scrollIntoView();
+        break;
+      case "Enter":
+        e.preventDefault(), this._activeIndex >= 0 && this._filtered[this._activeIndex] ? this._select(this._activeIndex) : this.dispatchEvent(new CustomEvent("search", { detail: { value: this.value } }));
+        break;
+      case "Escape":
+        e.preventDefault(), this._open = !1;
+        break;
+    }
+  }
+  _scrollIntoView() {
+    const e = this.shadowRoot?.querySelector(".list"), t = e?.querySelectorAll(".item")[this._activeIndex];
+    if (t && e) {
+      const a = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+      a.top < i.top && t.scrollIntoView({ block: "nearest" }), a.bottom > i.bottom && t.scrollIntoView({ block: "nearest" });
+    }
+  }
+  _select(e) {
+    const t = this._filtered[e];
+    t && (this.value = t.value, this._open = !1, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("select", { detail: { item: t, value: t.value, label: t.label, index: e } })));
+  }
+  _onBlur() {
+    setTimeout(() => {
+      const e = this.shadowRoot?.activeElement;
+      (!e || !e.classList?.contains("item")) && (this._open = !1, this._activeIndex = -1);
+    }, 150);
+  }
+  render() {
+    const e = `${this._id}-list`;
+    return l`
+      <div class="search">
+        <input
+          class="input"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="${this._open ? "true" : "false"}"
+          aria-controls="${e}"
+          aria-activedescendant="${this._activeIndex >= 0 ? `${this._id}-option-${this._activeIndex}` : ""}"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          @input=${this._onInput}
+          @keydown=${this._onKeyDown}
+          @blur=${this._onBlur}
+        />
+
+        ${this._open ? l`
+          <ul class="list" id="${e}" role="listbox">
+            ${this._loading ? l`<li class="loading">Loading...</li>` : ""}
+            ${this._filtered.length === 0 && !this._loading ? l`<li class="empty">No results</li>` : ""}
+            ${this._filtered.map((t, a) => l`
+              <li
+                id="${this._id}-option-${a}"
+                class="item"
+                role="option"
+                aria-selected="${this._activeIndex === a ? "true" : "false"}"
+                @click="${() => this._select(a)}"
+              >
+                ${t.label ?? t.value}
+              </li>
+            `)}
+          </ul>
+        ` : ""}
+      </div>
+    `;
+  }
+};
+m.styles = c`
+    :host { display: block; font-family: var(--crt-font-family); }
+
+    .search {
+      position: relative;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .input {
+      width: 100%;
+      padding: var(--crt-spacing-md);
+      font-family: var(--crt-font-family);
+      background: var(--crt-bg-dark);
+      color: var(--crt-text-primary);
+      border: 2px solid var(--crt-primary);
+      box-shadow: var(--crt-glow-inset);
+      box-sizing: border-box;
+      transition: var(--crt-transition);
+      cursor: var(--crt-cursor-text);
+    }
+
+    .input:focus {
+      outline: none;
+      box-shadow: inset 0 0 10px rgba(51,255,51,0.2), var(--crt-glow);
+    }
+
+    .list {
+      position: absolute;
+      top: calc(100% + var(--crt-spacing-xs));
+      left: 0;
+      right: 0;
+      background: var(--crt-bg-dark);
+      border: 2px solid var(--crt-primary);
+      box-shadow: 0 10px 20px color-mix(in srgb, var(--crt-primary) 20%, transparent), var(--crt-glow-inset);
+      max-height: 240px;
+      overflow-y: auto;
+      z-index: 1000;
+      padding: 0;
+      margin: 0;
+    }
+
+    .item {
+      list-style: none;
+      padding: var(--crt-spacing-md);
+      cursor: var(--crt-cursor-pointer);
+      color: var(--crt-text-primary);
+      transition: var(--crt-transition);
+      display: flex;
+      align-items: center;
+      gap: var(--crt-spacing-sm);
+    }
+
+    .item:hover,
+    .item[aria-selected="true"] {
+      background: color-mix(in srgb, var(--crt-primary) 10%, transparent);
+      box-shadow: var(--crt-glow-sm);
+      color: var(--crt-primary);
+    }
+
+    .empty {
+      padding: var(--crt-spacing-md);
+      color: var(--crt-text-muted);
+      text-align: center;
+    }
+
+    .loading {
+      padding: var(--crt-spacing-md);
+      color: var(--crt-text-muted);
+      text-align: center;
+    }
+  `;
+_([
+  n({ type: String })
+], m.prototype, "value", 2);
+_([
+  n({ type: String })
+], m.prototype, "placeholder", 2);
+_([
+  n({ type: Number })
+], m.prototype, "debounceMs", 2);
+_([
+  n({ type: Number })
+], m.prototype, "minLength", 2);
+_([
+  n({ type: Array })
+], m.prototype, "suggestions", 2);
+_([
+  n()
+], m.prototype, "fetcher", 2);
+_([
+  v()
+], m.prototype, "_open", 2);
+_([
+  v()
+], m.prototype, "_activeIndex", 2);
+_([
+  v()
+], m.prototype, "_filtered", 2);
+_([
+  v()
+], m.prototype, "_loading", 2);
+m = _([
+  d("crt-search")
+], m);
+var Ve = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, u = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ye(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ve(t, a, r), r;
 };
-let B = class extends p {
+let N = class extends p {
   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 }
     }));
@@ -2236,7 +2466,7 @@ let B = class extends p {
     `;
   }
 };
-B.styles = c`
+N.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2318,30 +2548,30 @@ B.styles = c`
       transform: scale(1);
     }
   `;
-g([
+u([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "checked", 2);
-g([
+], N.prototype, "checked", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "disabled", 2);
-g([
+], N.prototype, "disabled", 2);
+u([
   n({ type: Boolean })
-], B.prototype, "indeterminate", 2);
-g([
+], N.prototype, "indeterminate", 2);
+u([
   n({ type: String })
-], B.prototype, "label", 2);
-g([
+], N.prototype, "label", 2);
+u([
   n({ type: String })
-], B.prototype, "value", 2);
-B = g([
+], N.prototype, "value", 2);
+N = u([
   d("crt-checkbox")
-], B);
-let U = class extends p {
+], N);
+let R = class extends p {
   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
     })));
@@ -2365,7 +2595,7 @@ let U = class extends p {
     `;
   }
 };
-U.styles = c`
+R.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2439,28 +2669,28 @@ U.styles = c`
       user-select: none;
     }
   `;
-g([
+u([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "checked", 2);
-g([
+], R.prototype, "checked", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "disabled", 2);
-g([
+], R.prototype, "disabled", 2);
+u([
   n({ type: String })
-], U.prototype, "label", 2);
-g([
+], R.prototype, "label", 2);
+u([
   n({ type: String })
-], U.prototype, "value", 2);
-g([
+], R.prototype, "value", 2);
+u([
   n({ type: String })
-], U.prototype, "name", 2);
-U = g([
+], R.prototype, "name", 2);
+R = u([
   d("crt-radio")
-], U);
-let tt = class extends p {
+], R);
+let it = class extends p {
   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", {
@@ -2478,7 +2708,7 @@ let tt = class extends p {
     return l`<slot></slot>`;
   }
 };
-tt.styles = c`
+it.styles = c`
     :host {
       display: flex;
       flex-direction: column;
@@ -2491,24 +2721,24 @@ tt.styles = c`
       gap: var(--crt-spacing-lg);
     }
   `;
-g([
+u([
   n({ type: String })
-], tt.prototype, "name", 2);
-g([
+], it.prototype, "name", 2);
+u([
   n({ type: String })
-], tt.prototype, "value", 2);
-g([
+], it.prototype, "value", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], tt.prototype, "horizontal", 2);
-tt = g([
+], it.prototype, "horizontal", 2);
+it = u([
   d("crt-radio-group")
-], tt);
-var jr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, z = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Tr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && jr(t, a, e), e;
+], it);
+var qe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, P = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? He(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && qe(t, a, r), r;
 };
-let f = class extends p {
+let y = class extends p {
   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;
   }
@@ -2516,25 +2746,25 @@ let f = class extends p {
     return Math.min(100, Math.max(0, this.value / this.max * 100));
   }
   render() {
-    const r = this._getPercentage();
+    const e = this._getPercentage();
     return l`
       <div class="progress-wrapper">
         ${this.label || this.showValue ? l`
           <div class="progress-header">
             ${this.label ? l`<span class="progress-label">${this.label}</span>` : ""}
             ${this.showValue && !this.indeterminate ? l`
-              <span class="progress-value">${Math.round(r)}%</span>
+              <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>
     `;
   }
 };
-f.styles = c`
+y.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2658,42 +2888,42 @@ f.styles = c`
       );
     }
   `;
-z([
+P([
   n({ type: Number })
-], f.prototype, "value", 2);
-z([
+], y.prototype, "value", 2);
+P([
   n({ type: Number })
-], f.prototype, "max", 2);
-z([
+], y.prototype, "max", 2);
+P([
   n({ type: String })
-], f.prototype, "label", 2);
-z([
+], y.prototype, "label", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "animated", 2);
-z([
+], y.prototype, "animated", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "indeterminate", 2);
-z([
+], y.prototype, "indeterminate", 2);
+P([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "segmented", 2);
-z([
+], y.prototype, "segmented", 2);
+P([
   n({ type: String, reflect: !0 })
-], f.prototype, "size", 2);
-z([
+], y.prototype, "size", 2);
+P([
   n({ type: String, reflect: !0 })
-], f.prototype, "variant", 2);
-z([
+], y.prototype, "variant", 2);
+P([
   n({ type: Boolean })
-], f.prototype, "showValue", 2);
-f = z([
+], y.prototype, "showValue", 2);
+y = P([
   d("crt-progress")
-], f);
-var Ar = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ut = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Lr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Ar(t, a, e), e;
+], y);
+var Ke = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, yt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Xe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ke(t, a, r), r;
 };
-let H = class extends p {
+let X = class extends p {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
   }
@@ -2722,7 +2952,7 @@ let H = class extends p {
     `;
   }
 };
-H.styles = c`
+X.styles = c`
     :host {
       display: inline-block;
       position: relative;
@@ -2829,36 +3059,36 @@ H.styles = c`
       border-right-color: var(--crt-primary);
     }
   `;
-ut([
+yt([
   n({ type: String })
-], H.prototype, "text", 2);
-ut([
+], X.prototype, "text", 2);
+yt([
   n({ type: String, reflect: !0 })
-], H.prototype, "position", 2);
-ut([
+], X.prototype, "position", 2);
+yt([
   n({ type: Number })
-], H.prototype, "delay", 2);
-ut([
+], X.prototype, "delay", 2);
+yt([
   v()
-], H.prototype, "_visible", 2);
-H = ut([
+], X.prototype, "_visible", 2);
+X = yt([
   d("crt-tooltip")
-], H);
-var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, It = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Br(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Ir(t, a, e), e;
+], X);
+var We = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, qt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ge(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && We(t, a, r), r;
 };
-let ct = class extends p {
+let vt = class extends p {
   constructor() {
     super(...arguments), this.items = [], this.separator = ">";
   }
   render() {
     return l`
       <nav class="breadcrumb" aria-label="Breadcrumb">
-        ${this.items.map((r, t) => l`
+        ${this.items.map((e, t) => l`
           <span class="item ${t === this.items.length - 1 ? "active" : ""}">
-            ${r.href && t !== this.items.length - 1 ? l`<a href="${r.href}">${r.label}</a>` : l`<span class="text">${r.label}</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>
         `)}
@@ -2867,7 +3097,7 @@ let ct = class extends p {
     `;
   }
 };
-ct.styles = c`
+vt.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2916,39 +3146,39 @@ ct.styles = c`
       font-size: var(--crt-font-size-sm);
     }
   `;
-It([
+qt([
   n({ type: Array })
-], ct.prototype, "items", 2);
-It([
+], vt.prototype, "items", 2);
+qt([
   n({ type: String })
-], ct.prototype, "separator", 2);
-ct = It([
+], vt.prototype, "separator", 2);
+vt = qt([
   d("crt-breadcrumb")
-], ct);
-var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, mt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Nr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Ur(t, a, e), e;
+], vt);
+var Qe = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, xt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Je(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Qe(t, a, r), r;
 };
-let X = class extends p {
+let W = class extends p {
   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 s = Math.max(2, this.current - this.siblings), e = Math.min(this.total - 1, this.current + this.siblings);
-    for (let i = s; i <= e; i++)
-      r.includes(i) || r.push(i);
-    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 i = Math.max(2, this.current - this.siblings), r = Math.min(this.total - 1, this.current + this.siblings);
+    for (let s = i; s <= r; s++)
+      e.includes(s) || e.push(s);
+    return a && e.push("..."), this.total > 1 && !e.includes(this.total) && e.push(this.total), e;
   }
   render() {
-    const r = this._getPageNumbers();
+    const e = this._getPageNumbers();
     return l`
       <nav class="pagination" aria-label="Pagination">
         <button 
@@ -2960,7 +3190,7 @@ let X = class extends p {
           ◄
         </button>
         
-        ${r.map(
+        ${e.map(
       (t) => t === "..." ? l`<span class="page-ellipsis">...</span>` : l`
                 <button 
                   class="page-btn ${t === this.current ? "active" : ""}"
@@ -2989,7 +3219,7 @@ let X = class extends p {
     `;
   }
 };
-X.styles = c`
+W.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3044,40 +3274,40 @@ X.styles = c`
       margin-left: var(--crt-spacing-md);
     }
   `;
-mt([
+xt([
   n({ type: Number })
-], X.prototype, "current", 2);
-mt([
+], W.prototype, "current", 2);
+xt([
   n({ type: Number })
-], X.prototype, "total", 2);
-mt([
+], W.prototype, "total", 2);
+xt([
   n({ type: Number })
-], X.prototype, "siblings", 2);
-mt([
+], W.prototype, "siblings", 2);
+xt([
   n({ type: Boolean })
-], X.prototype, "showInfo", 2);
-X = mt([
+], W.prototype, "showInfo", 2);
+W = xt([
   d("crt-pagination")
-], X);
-var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, T = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Fr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Rr(t, a, e), e;
+], W);
+var Ze = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, I = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? tr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ze(t, a, r), r;
 };
-let x = class extends p {
+let w = class extends p {
   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 },
       bubbles: !0,
       composed: !0
     }));
   }
-  _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 },
       bubbles: !0,
@@ -3121,7 +3351,7 @@ let x = class extends p {
     `;
   }
 };
-x.styles = c`
+w.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3255,44 +3485,44 @@ x.styles = c`
       cursor: not-allowed;
     }
   `;
-T([
+I([
   n({ type: Number })
-], x.prototype, "value", 2);
-T([
+], w.prototype, "value", 2);
+I([
   n({ type: Number })
-], x.prototype, "min", 2);
-T([
+], w.prototype, "min", 2);
+I([
   n({ type: Number })
-], x.prototype, "max", 2);
-T([
+], w.prototype, "max", 2);
+I([
   n({ type: Number })
-], x.prototype, "step", 2);
-T([
+], w.prototype, "step", 2);
+I([
   n({ type: String })
-], x.prototype, "label", 2);
-T([
+], w.prototype, "label", 2);
+I([
   n({ type: Boolean, reflect: !0 })
-], x.prototype, "disabled", 2);
-T([
+], w.prototype, "disabled", 2);
+I([
   n({ type: Boolean })
-], x.prototype, "showMarks", 2);
-T([
+], w.prototype, "showMarks", 2);
+I([
   n({ type: String })
-], x.prototype, "unit", 2);
-x = T([
+], w.prototype, "unit", 2);
+w = I([
   d("crt-slider")
-], x);
-var Yr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, Q = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Vr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Yr(t, a, e), e;
+], w);
+var er = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, et = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? rr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && er(t, a, r), r;
 };
-let E = class extends p {
+let M = class extends p {
   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 }
     }));
@@ -3318,7 +3548,7 @@ let E = class extends p {
     `;
   }
 };
-E.styles = c`
+M.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3440,40 +3670,40 @@ E.styles = c`
       left: 35px;
     }
   `;
-Q([
+et([
   n({ type: Boolean, reflect: !0 })
-], E.prototype, "checked", 2);
-Q([
+], M.prototype, "checked", 2);
+et([
   n({ type: Boolean, reflect: !0 })
-], E.prototype, "disabled", 2);
-Q([
+], M.prototype, "disabled", 2);
+et([
   n({ type: String })
-], E.prototype, "label", 2);
-Q([
+], M.prototype, "label", 2);
+et([
   n({ type: String })
-], E.prototype, "onLabel", 2);
-Q([
+], M.prototype, "onLabel", 2);
+et([
   n({ type: String })
-], E.prototype, "offLabel", 2);
-Q([
+], M.prototype, "offLabel", 2);
+et([
   n({ type: String, reflect: !0 })
-], E.prototype, "size", 2);
-E = Q([
+], M.prototype, "size", 2);
+M = et([
   d("crt-toggle")
-], E);
-var qr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, A = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Hr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && qr(t, a, e), e;
+], M);
+var ar = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, L = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? ir(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && ar(t, a, r), r;
 };
-let D = class extends p {
+let j = class extends p {
   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 = "";
@@ -3499,7 +3729,7 @@ let D = class extends p {
     `;
   }
 };
-D.styles = c`
+j.styles = c`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -3627,28 +3857,28 @@ D.styles = c`
       border-color: var(--crt-bg-dark);
     }
   `;
-A([
+L([
   n({ type: String })
-], D.prototype, "src", 2);
-A([
+], j.prototype, "src", 2);
+L([
   n({ type: String })
-], D.prototype, "alt", 2);
-A([
+], j.prototype, "alt", 2);
+L([
   n({ type: String })
-], D.prototype, "name", 2);
-A([
+], j.prototype, "name", 2);
+L([
   n({ type: String, reflect: !0 })
-], D.prototype, "size", 2);
-A([
+], j.prototype, "size", 2);
+L([
   n({ type: String, reflect: !0 })
-], D.prototype, "shape", 2);
-A([
+], j.prototype, "shape", 2);
+L([
   n({ type: String, reflect: !0 })
-], D.prototype, "status", 2);
-D = A([
+], j.prototype, "status", 2);
+j = L([
   d("crt-avatar")
-], D);
-let _t = class extends p {
+], j);
+let Et = class extends p {
   constructor() {
     super(...arguments), this.max = 5;
   }
@@ -3658,7 +3888,7 @@ let _t = class extends p {
     `;
   }
 };
-_t.styles = c`
+Et.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3687,18 +3917,18 @@ _t.styles = c`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-A([
+L([
   n({ type: Number })
-], _t.prototype, "max", 2);
-_t = A([
+], Et.prototype, "max", 2);
+Et = L([
   d("crt-avatar-group")
-], _t);
-var Xr = Object.defineProperty, Kr = Object.getOwnPropertyDescriptor, C = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Kr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Xr(t, a, e), e;
+], Et);
+var sr = Object.defineProperty, or = Object.getOwnPropertyDescriptor, O = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? or(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && sr(t, a, r), r;
 };
-let N = class extends p {
+let F = class extends p {
   constructor() {
     super(...arguments), this.variant = "rectangular", this.animation = "shimmer", this.width = "100%", this.height = "20px", this.effect = !1;
   }
@@ -3711,7 +3941,7 @@ let N = class extends p {
     `;
   }
 };
-N.styles = c`
+F.styles = c`
     :host {
       display: block;
     }
@@ -3826,25 +4056,25 @@ N.styles = c`
       pointer-events: none;
     }
   `;
-C([
+O([
   n({ type: String, reflect: !0 })
-], N.prototype, "variant", 2);
-C([
+], F.prototype, "variant", 2);
+O([
   n({ type: String, reflect: !0 })
-], N.prototype, "animation", 2);
-C([
+], F.prototype, "animation", 2);
+O([
   n({ type: String })
-], N.prototype, "width", 2);
-C([
+], F.prototype, "width", 2);
+O([
   n({ type: String })
-], N.prototype, "height", 2);
-C([
+], F.prototype, "height", 2);
+O([
   n({ type: Boolean, reflect: !0 })
-], N.prototype, "effect", 2);
-N = C([
+], F.prototype, "effect", 2);
+F = O([
   d("crt-skeleton")
-], N);
-let zt = class extends p {
+], F);
+let Dt = class extends p {
   constructor() {
     super(...arguments), this.lines = 3;
   }
@@ -3856,7 +4086,7 @@ let zt = class extends p {
     `;
   }
 };
-zt.styles = c`
+Dt.styles = c`
     :host {
       display: block;
     }
@@ -3888,13 +4118,13 @@ zt.styles = c`
       }
     }
   `;
-C([
+O([
   n({ type: Number })
-], zt.prototype, "lines", 2);
-zt = C([
+], Dt.prototype, "lines", 2);
+Dt = O([
   d("crt-skeleton-text")
-], zt);
-let Ct = class extends p {
+], Dt);
+let Mt = class extends p {
   constructor() {
     super(...arguments), this.hideImage = !1;
   }
@@ -3910,7 +4140,7 @@ let Ct = class extends p {
     `;
   }
 };
-Ct.styles = c`
+Mt.styles = c`
     :host {
       display: block;
     }
@@ -3961,18 +4191,18 @@ Ct.styles = c`
       }
     }
   `;
-C([
+O([
   n({ type: Boolean })
-], Ct.prototype, "hideImage", 2);
-Ct = C([
+], Mt.prototype, "hideImage", 2);
+Mt = O([
   d("crt-skeleton-card")
-], Ct);
-var Wr = Object.defineProperty, Gr = Object.getOwnPropertyDescriptor, L = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Gr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Wr(t, a, e), e;
+], Mt);
+var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, B = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? lr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && nr(t, a, r), r;
 };
-let w = class extends p {
+let k = class extends p {
   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 = "";
   }
@@ -4007,7 +4237,7 @@ let w = class extends p {
     `;
   }
 };
-w.styles = c`
+k.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -4172,39 +4402,39 @@ w.styles = c`
       border-top: none;
     }
   `;
-L([
+B([
   n({ type: String, reflect: !0 })
-], w.prototype, "variant", 2);
-L([
+], k.prototype, "variant", 2);
+B([
   n({ type: String })
-], w.prototype, "title", 2);
-L([
+], k.prototype, "title", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "closable", 2);
-L([
+], k.prototype, "closable", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "filled", 2);
-L([
+], k.prototype, "filled", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "outlined", 2);
-L([
+], k.prototype, "outlined", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "banner", 2);
-L([
+], k.prototype, "banner", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "animated", 2);
-L([
+], k.prototype, "animated", 2);
+B([
   n({ type: String })
-], w.prototype, "icon", 2);
-w = L([
+], k.prototype, "icon", 2);
+k = B([
   d("crt-alert")
-], w);
-var Qr = Object.defineProperty, Jr = Object.getOwnPropertyDescriptor, Bt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Jr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && Qr(t, a, e), e;
+], k);
+var cr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, Ht = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? pr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && cr(t, a, r), r;
 };
-let pt = class extends p {
+let ut = class extends p {
   constructor() {
     super(...arguments), this.open = !1, this.message = "LOADING...";
   }
@@ -4228,7 +4458,7 @@ let pt = class extends p {
     ` : l``;
   }
 };
-pt.styles = c`
+ut.styles = c`
     :host {
       display: block;
     }
@@ -4450,21 +4680,21 @@ pt.styles = c`
       50% { opacity: 0.5; }
     }
   `;
-Bt([
+Ht([
   n({ type: Boolean, reflect: !0 })
-], pt.prototype, "open", 2);
-Bt([
+], ut.prototype, "open", 2);
+Ht([
   n({ type: String })
-], pt.prototype, "message", 2);
-pt = Bt([
+], ut.prototype, "message", 2);
+ut = Ht([
   d("crt-spinner")
-], pt);
-var Zr = Object.getOwnPropertyDescriptor, te = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Zr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = o(e) || e);
-  return e;
+], ut);
+var dr = Object.getOwnPropertyDescriptor, hr = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? dr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = o(r) || r);
+  return r;
 };
-let Dt = class extends p {
+let Ut = class extends p {
   render() {
     return l`
       <div class="card">
@@ -4481,7 +4711,7 @@ let Dt = class extends p {
     `;
   }
 };
-Dt.styles = c`
+Ut.styles = c`
     :host {
       /* Make the card element act like a normal block-level container
          so external width/height styles can be applied responsively. */
@@ -4523,15 +4753,15 @@ Dt.styles = c`
       margin-top: var(--crt-spacing-md);
     }
   `;
-Dt = te([
+Ut = hr([
   d("crt-card")
-], Dt);
-var re = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, Ut = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? ee(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && re(t, a, e), e;
+], Ut);
+var vr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Kt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? ur(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && vr(t, a, r), r;
 };
-let dt = class extends p {
+let gt = class extends p {
   constructor() {
     super(...arguments), this.headers = [], this.rows = [];
   }
@@ -4540,17 +4770,17 @@ let dt = class extends p {
       <table>
         <thead>
           <tr>
-            ${this.headers.map((r) => l`<th>${r}</th>`)}
+            ${this.headers.map((e) => l`<th>${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${this.rows.map((r) => l`<tr>${r.map((t) => l`<td>${t}</td>`)}</tr>`)}
+          ${this.rows.map((e) => l`<tr>${e.map((t) => l`<td>${t}</td>`)}</tr>`)}
         </tbody>
       </table>
     `;
   }
 };
-dt.styles = c`
+gt.styles = c`
     :host {
       display: block;
     }
@@ -4602,21 +4832,21 @@ dt.styles = c`
       border-bottom: none;
     }
   `;
-Ut([
+Kt([
   n({ type: Array })
-], dt.prototype, "headers", 2);
-Ut([
+], gt.prototype, "headers", 2);
+Kt([
   n({ type: Array })
-], dt.prototype, "rows", 2);
-dt = Ut([
+], gt.prototype, "rows", 2);
+gt = Kt([
   d("crt-table")
-], dt);
-var ae = Object.defineProperty, se = Object.getOwnPropertyDescriptor, Nt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? se(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ae(t, a, e), e;
+], gt);
+var gr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, Xt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? mr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && gr(t, a, r), r;
 };
-let ht = class extends p {
+let mt = class extends p {
   constructor() {
     super(...arguments), this.columns = 3, this.gap = "var(--crt-spacing-lg)";
   }
@@ -4634,7 +4864,7 @@ let ht = class extends p {
     `;
   }
 };
-ht.styles = c`
+mt.styles = c`
     :host {
       display: block;
     }
@@ -4663,34 +4893,34 @@ ht.styles = c`
       }
     }
   `;
-Nt([
+Xt([
   n({ type: Number })
-], ht.prototype, "columns", 2);
-Nt([
+], mt.prototype, "columns", 2);
+Xt([
   n({ type: String })
-], ht.prototype, "gap", 2);
-ht = Nt([
+], mt.prototype, "gap", 2);
+mt = Xt([
   d("crt-grid")
-], ht);
-var ie = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, at = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? oe(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ie(t, a, e), e;
+], mt);
+var fr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, nt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? br(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && fr(t, a, r), r;
 };
-let R = class extends p {
+let V = class extends p {
   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() {
@@ -4734,7 +4964,7 @@ let R = class extends p {
     `;
   }
 };
-R.styles = c`
+V.styles = c`
     :host {
       display: block;
       margin-bottom: var(--crt-spacing-xl);
@@ -4883,33 +5113,33 @@ R.styles = c`
       color: var(--crt-bg-dark);
     }
   `;
-at([
+nt([
   n()
-], R.prototype, "title", 2);
-at([
+], V.prototype, "title", 2);
+nt([
   n()
-], R.prototype, "description", 2);
-at([
+], V.prototype, "description", 2);
+nt([
   n()
-], R.prototype, "code", 2);
-at([
+], V.prototype, "code", 2);
+nt([
   v()
-], R.prototype, "activeTab", 2);
-at([
+], V.prototype, "activeTab", 2);
+nt([
   v()
-], R.prototype, "copied", 2);
-R = at([
+], V.prototype, "copied", 2);
+V = nt([
   d("crt-code-example")
-], R);
-var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, Et = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? le(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ne(t, a, e), e;
+], V);
+var yr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, Bt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? xr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && yr(t, a, r), r;
 };
-let rt = class extends p {
+let st = class extends p {
   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() {
@@ -4921,8 +5151,8 @@ let rt = 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 l`
@@ -4943,7 +5173,7 @@ let rt = class extends p {
     `;
   }
 };
-rt.styles = c`
+st.styles = c`
     :host {
       display: none;
     }
@@ -5070,24 +5300,24 @@ rt.styles = c`
       height: calc(95vh - 120px);
     }
   `;
-Et([
+Bt([
   n({ type: Boolean, reflect: !0 })
-], rt.prototype, "open", 2);
-Et([
+], st.prototype, "open", 2);
+Bt([
   n({ type: String })
-], rt.prototype, "title", 2);
-Et([
+], st.prototype, "title", 2);
+Bt([
   n({ type: String })
-], rt.prototype, "size", 2);
-rt = Et([
+], st.prototype, "size", 2);
+st = Bt([
   d("crt-modal")
-], rt);
-var ce = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, J = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? pe(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ce(t, a, e), e;
+], st);
+var wr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, rt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? kr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && wr(t, a, r), r;
 };
-let M = class extends p {
+let T = class extends p {
   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;
   }
@@ -5101,25 +5331,25 @@ let M = 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":
@@ -5135,16 +5365,16 @@ let M = class extends p {
   render() {
     return l`
       <div class="toast-container">
-        ${this._toasts.map((r) => l`
-          <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 ? l`<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 ? l`
-              <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>
         `)}
@@ -5152,7 +5382,7 @@ let M = class extends p {
     `;
   }
 };
-M.styles = c`
+T.styles = c`
     :host {
       position: fixed;
       z-index: 10001;
@@ -5319,33 +5549,33 @@ M.styles = c`
       to { width: 0%; }
     }
   `;
-J([
+rt([
   n({ type: String, reflect: !0 })
-], M.prototype, "position", 2);
-J([
+], T.prototype, "position", 2);
+rt([
   n({ type: String })
-], M.prototype, "message", 2);
-J([
+], T.prototype, "message", 2);
+rt([
   n({ type: String })
-], M.prototype, "title", 2);
-J([
+], T.prototype, "title", 2);
+rt([
   n({ type: String })
-], M.prototype, "variant", 2);
-J([
+], T.prototype, "variant", 2);
+rt([
   n({ type: Number })
-], M.prototype, "duration", 2);
-J([
+], T.prototype, "duration", 2);
+rt([
   v()
-], M.prototype, "_toasts", 2);
-M = J([
+], T.prototype, "_toasts", 2);
+T = rt([
   d("crt-toast")
-], M);
-var de = Object.defineProperty, he = Object.getOwnPropertyDescriptor, bt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? he(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && de(t, a, e), e;
+], T);
+var _r = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, wt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? $r(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && _r(t, a, r), r;
 };
-let vt = class extends p {
+let ft = class extends p {
   constructor() {
     super(...arguments), this.header = "", this.open = !1;
   }
@@ -5374,7 +5604,7 @@ let vt = class extends p {
     `;
   }
 };
-vt.styles = c`
+ft.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -5445,20 +5675,20 @@ vt.styles = c`
       color: var(--crt-text-secondary);
     }
   `;
-bt([
+wt([
   n({ type: String })
-], vt.prototype, "header", 2);
-bt([
+], ft.prototype, "header", 2);
+wt([
   n({ type: Boolean, reflect: !0 })
-], vt.prototype, "open", 2);
-vt = bt([
+], ft.prototype, "open", 2);
+ft = wt([
   d("crt-accordion-item")
-], vt);
-let Pt = class extends p {
+], ft);
+let jt = class extends p {
   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);
       });
     };
   }
@@ -5472,33 +5702,33 @@ let Pt = class extends p {
     return l`<slot></slot>`;
   }
 };
-Pt.styles = c`
+jt.styles = c`
     :host {
       display: block;
     }
   `;
-bt([
+wt([
   n({ type: Boolean })
-], Pt.prototype, "multiple", 2);
-Pt = bt([
+], jt.prototype, "multiple", 2);
+jt = wt([
   d("crt-accordion")
-], Pt);
-var ve = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, ft = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? ge(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ve(t, a, e), e;
+], jt);
+var zr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, kt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Cr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && zr(t, a, r), r;
 };
-let K = class extends p {
+let G = class extends p {
   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 s;
-        this.mode === 1 ? s = a * r : this.mode === 2 ? a < this.bars / 2 ? s = Math.floor((this.bars / 2 - a - 1) * r) : s = Math.floor((a - this.bars / 2) * r) : a < this.bars / 2 ? s = Math.floor(a * r) : s = Math.floor((this.bars - a - 1) * r);
-        const i = (this.dataArray[s] || 0) / 255 * 100;
-        t.push(Math.max(20, i));
+        let i;
+        this.mode === 1 ? i = a * e : this.mode === 2 ? a < this.bars / 2 ? i = Math.floor((this.bars / 2 - a - 1) * e) : i = Math.floor((a - this.bars / 2) * e) : a < this.bars / 2 ? i = Math.floor(a * e) : i = Math.floor((this.bars - a - 1) * e);
+        const s = (this.dataArray[i] || 0) / 255 * 100;
+        t.push(Math.max(20, s));
       }
       this.barHeights = t, this.animationId = requestAnimationFrame(this.visualize);
     };
@@ -5509,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);
     }
@@ -5534,14 +5764,14 @@ let K = class extends p {
       <div class="visualizer">
         <span class="label">[VISUALIZER]</span>
         <button class="mode-toggle" @click="${this.toggleMode}">MODE ${this.mode}</button>
-        ${this.barHeights.map((r) => l`
-          <div class="bar" style="height: ${r}%"></div>
+        ${this.barHeights.map((e) => l`
+          <div class="bar" style="height: ${e}%"></div>
         `)}
       </div>
     `;
   }
 };
-K.styles = c`
+G.styles = c`
     :host {
       display: block;
     }
@@ -5616,37 +5846,37 @@ K.styles = c`
       animation: none;
     }
   `;
-ft([
+kt([
   n({ type: Number })
-], K.prototype, "bars", 2);
-ft([
+], G.prototype, "bars", 2);
+kt([
   n({ type: Number })
-], K.prototype, "mode", 2);
-ft([
+], G.prototype, "mode", 2);
+kt([
   v()
-], K.prototype, "barHeights", 2);
-ft([
+], G.prototype, "barHeights", 2);
+kt([
   v()
-], K.prototype, "isActive", 2);
-K = ft([
+], G.prototype, "isActive", 2);
+G = kt([
   d("crt-visualizer")
-], K);
-var ue = Object.defineProperty, me = Object.getOwnPropertyDescriptor, Rt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? me(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ue(t, a, e), e;
+], G);
+var Pr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, Wt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Or(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Pr(t, a, r), r;
 };
-let gt = class extends p {
+let bt = class extends p {
   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 }
     }));
   }
@@ -5676,14 +5906,14 @@ let gt = class extends p {
                 </tr>
               </thead>
               <tbody>
-                ${this.tracks.map((r, t) => l`
+                ${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"
@@ -5705,7 +5935,7 @@ let gt = class extends p {
     `;
   }
 };
-gt.styles = c`
+bt.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -5875,21 +6105,21 @@ gt.styles = c`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-Rt([
+Wt([
   n({ type: Array })
-], gt.prototype, "tracks", 2);
-Rt([
+], bt.prototype, "tracks", 2);
+Wt([
   n({ type: Number })
-], gt.prototype, "currentIndex", 2);
-gt = Rt([
+], bt.prototype, "currentIndex", 2);
+bt = Wt([
   d("crt-playlist")
-], gt);
-var be = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, y = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? fe(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && be(t, a, e), e;
+], bt);
+var Sr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, x = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Er(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Sr(t, a, r), r;
 };
-let u = class extends p {
+let g = class extends p {
   constructor() {
     super(...arguments), this.tracks = [], this.currentIndex = 0, this.autoplay = !1, this.autoplayDelay = 500, this.isPlaying = !1, this.currentTime = 0, this.duration = 0, this.volume = 80, this.autoplayMuted = !1, this.togglePlay = async () => {
       this.isPlaying ? this.pause() : await this.play();
@@ -5903,39 +6133,39 @@ let u = class extends p {
       this.duration = this.audio?.duration || 0;
     }, this.handleEnded = () => {
       this.nextTrack();
-    }, this.handleProgressClick = (r) => {
-      const a = r.currentTarget.getBoundingClientRect(), s = (r.clientX - a.left) / a.width;
-      this.audio && (this.audio.currentTime = this.duration * s);
-    }, 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(), i = (e.clientX - a.left) / a.width;
+      this.audio && (this.audio.currentTime = this.duration * i);
+    }, 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) {
-    if (r.has("tracks") && this.tracks.length > 0 && ((r.get("tracks") === void 0 || r.get("tracks")?.length === 0) && this.loadTrack(0), this.autoplay && this.tracks.length > 0)) {
+  updated(e) {
+    if (e.has("tracks") && this.tracks.length > 0 && ((e.get("tracks") === void 0 || e.get("tracks")?.length === 0) && this.loadTrack(0), this.autoplay && this.tracks.length > 0)) {
       const t = Math.max(0, Number(this.autoplayDelay) || 0);
       setTimeout(() => {
         this.isPlaying || this.play();
       }, t);
     }
   }
-  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] }
     }));
   }
   async play() {
@@ -5971,15 +6201,15 @@ let u = class extends p {
           this.visualizer?.audioContext?.resume?.();
         } catch {
         }
-        const r = this.audio.play();
-        r instanceof Promise && await r, this.autoplayMuted = !1, this.isPlaying = !0;
-      } catch (r) {
-        console.warn("Unmute / resume failed:", r);
+        const e = this.audio.play();
+        e instanceof Promise && await e, this.autoplayMuted = !1, this.isPlaying = !0;
+      } catch (e) {
+        console.warn("Unmute / resume failed:", e);
       }
   }
-  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() {
@@ -5989,7 +6219,7 @@ let u = class extends p {
     return this.duration ? this.currentTime / this.duration * 100 : 0;
   }
   render() {
-    const r = this.tracks.length > 0 && this.currentTrack;
+    const e = this.tracks.length > 0 && this.currentTrack;
     return l`
       <div class="player">
         <!-- Header -->
@@ -5997,7 +6227,7 @@ let u = class extends p {
           <crt-heading level="4" style="margin: 0;">[♫] MUSIC PLAYER [♫]</crt-heading>
         </div>
 
-        ${r ? l`
+        ${e ? l`
           <!-- Visualizer -->
           <div class="visualizer-section">
             <crt-visualizer .bars="${20}"></crt-visualizer>
@@ -6073,7 +6303,7 @@ let u = class extends p {
     `;
   }
 };
-u.styles = c`
+g.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6226,64 +6456,64 @@ u.styles = c`
       opacity: 0.5;
     }
   `;
-y([
+x([
   n({ type: Array })
-], u.prototype, "tracks", 2);
-y([
+], g.prototype, "tracks", 2);
+x([
   n({ type: Number })
-], u.prototype, "currentIndex", 2);
-y([
+], g.prototype, "currentIndex", 2);
+x([
   n({ type: Boolean })
-], u.prototype, "autoplay", 2);
-y([
+], g.prototype, "autoplay", 2);
+x([
   n({ type: Number })
-], u.prototype, "autoplayDelay", 2);
-y([
+], g.prototype, "autoplayDelay", 2);
+x([
   v()
-], u.prototype, "isPlaying", 2);
-y([
+], g.prototype, "isPlaying", 2);
+x([
   v()
-], u.prototype, "currentTime", 2);
-y([
+], g.prototype, "currentTime", 2);
+x([
   v()
-], u.prototype, "duration", 2);
-y([
+], g.prototype, "duration", 2);
+x([
   v()
-], u.prototype, "volume", 2);
-y([
+], g.prototype, "volume", 2);
+x([
   v()
-], u.prototype, "autoplayMuted", 2);
-y([
-  Tt("audio")
-], u.prototype, "audio", 2);
-y([
-  Tt("crt-visualizer")
-], u.prototype, "visualizer", 2);
-u = y([
+], g.prototype, "autoplayMuted", 2);
+x([
+  Ft("audio")
+], g.prototype, "audio", 2);
+x([
+  Ft("crt-visualizer")
+], g.prototype, "visualizer", 2);
+g = x([
   d("crt-music-player")
-], u);
-var ye = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, st = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? xe(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && ye(t, a, e), e;
+], g);
+var Dr = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, lt = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Mr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Dr(t, a, r), r;
 };
-let F = class extends p {
+let Y = class extends p {
   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 _"];
   }
@@ -6294,13 +6524,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();
@@ -6310,39 +6540,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 s = 0;
-          const e = () => {
-            if (s >= r.length) {
+          let i = 0;
+          const r = () => {
+            if (i >= e.length) {
               a();
               return;
             }
-            const i = this.outputs.length - 1;
-            this.outputs[i] = (this.outputs[i] || "") + r[s++], this.requestUpdate(), this.scrollToBottom(), setTimeout(e, t);
+            const s = this.outputs.length - 1;
+            this.outputs[s] = (this.outputs[s] || "") + e[i++], this.requestUpdate(), this.scrollToBottom(), setTimeout(r, t);
           };
-          e();
+          r();
         });
       }
       this.typing = !1;
     }
   }
   render() {
-    const r = this.outputs.slice(-this.rows);
+    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) => l`<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>
@@ -6352,7 +6582,7 @@ let F = class extends p {
     `;
   }
 };
-F.styles = c`
+Y.styles = c`
     :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%;
@@ -6392,53 +6622,488 @@ F.styles = c`
     .fake-input .input-text { display:inline-block; white-space:pre; }
     .muted { opacity: 0.7; font-size: 0.9em; }
   `;
-st([
+lt([
   n({ type: Number })
-], F.prototype, "rows", 2);
-st([
+], Y.prototype, "rows", 2);
+lt([
   n({ type: String })
-], F.prototype, "prompt", 2);
-st([
+], Y.prototype, "prompt", 2);
+lt([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "disabled", 2);
-st([
+], Y.prototype, "disabled", 2);
+lt([
   v()
-], F.prototype, "outputs", 2);
-st([
+], Y.prototype, "outputs", 2);
+lt([
   v()
-], F.prototype, "input", 2);
-F = st([
+], Y.prototype, "input", 2);
+Y = lt([
   d("crt-terminal")
-], F);
-var we = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, Z = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? ke(t, a) : t, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
-  return s && e && we(t, a, e), e;
+], Y);
+var jr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, _t = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Tr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && jr(t, a, r), r;
 };
-let j = class extends p {
+let Q = class extends p {
   constructor() {
-    super(...arguments), this.autoplay = !1, this.autoplayDelay = 500, this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (r) => {
-      const a = r.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 e = s.name.replace(/\.[^/.]+$/, "");
-        let i = "UNKNOWN ARTIST", o = e.toUpperCase();
-        if (e.includes(" - ")) {
-          const h = e.split(" - ");
-          i = h[0].trim().toUpperCase(), o = h.slice(1).join(" - ").trim().toUpperCase();
+    super(...arguments), this.items = [], this.brand = "", this._open = !1;
+  }
+  _toggle() {
+    this._open = !this._open;
+  }
+  _onLinkClick(e, t) {
+    try {
+      const a = (t.href || "").trim();
+      if (a && a.startsWith("#")) {
+        e.preventDefault();
+        const i = document.querySelector(a);
+        if (i) {
+          i.scrollIntoView({ behavior: "smooth", block: "start" });
+          try {
+            history.replaceState(null, "", a);
+          } catch {
+            location.hash = a;
+          }
+        } else
+          console.warn("crt-navbar: target not found for", a);
+      }
+    } catch {
+    }
+    this.dispatchEvent(new CustomEvent("nav-select", { detail: t })), this.items = this.items.map((a) => ({ ...a, active: a.href === t.href }));
+  }
+  _onMenuSelect(e) {
+    const t = e.detail?.item;
+    t && (this._handleNavHref(t.href), this.items = this.items.map((a) => ({ ...a, active: a.href === t.href })));
+  }
+  _onLinkNavigate(e, t) {
+    e.stopPropagation(), this._handleNavHref(t.href), this.items = this.items.map((a) => ({ ...a, active: a.href === t.href }));
+  }
+  _handleNavHref(e) {
+    const t = (e || "").trim();
+    if (t && t.startsWith("#")) {
+      const a = document.querySelector(t);
+      if (a) {
+        a.scrollIntoView({ behavior: "smooth", block: "start" });
+        try {
+          history.replaceState(null, "", t);
+        } catch {
+          location.hash = t;
+        }
+      }
+    }
+  }
+  render() {
+    const e = typeof this.maxVisible == "number" ? this.items.slice(0, this.maxVisible) : this.items.slice(0), t = typeof this.maxVisible == "number" ? this.items.slice(this.maxVisible) : [];
+    return l`
+      <nav class="nav" role="navigation" aria-label="Main Navigation">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+          <div class="brand">
+            <slot name="brand">${this.brand || "CRT"}</slot>
+          </div>
+          <button class="toggle" @click="${this._toggle}" aria-expanded="${this._open ? "true" : "false"}" aria-label="Toggle navigation">☰</button>
+        </div>
+
+        <div class="menu ${this._open ? "open" : ""}" role="menubar">
+          ${e.map((a) => l`
+            <crt-link
+              href="${a.href}"
+              class="link"
+              ?aria-current="${a.active ? !0 : void 0}"
+              @click=${(i) => this._onLinkClick(i, a)}
+              @navigate=${(i) => this._onLinkNavigate(i, a)}
+              >${a.label}</crt-link>
+          `)}
+
+          ${t.length > 0 ? l`
+            <div style="position:relative;">
+              <crt-menu .items="${t}" label="MORE" class="more-dropdown-container" @select="${(a) => this._onMenuSelect(a)}"></crt-menu>
+            </div>
+          ` : ""}
+
+          <slot name="end"></slot>
+        </div>
+      </nav>
+    `;
+  }
+};
+Q.styles = c`
+    :host { display: block; font-family: var(--crt-font-family); }
+    .nav {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: var(--crt-spacing-md) var(--crt-spacing-lg);
+      background: var(--crt-bg-darker);
+      border-bottom: 2px solid var(--crt-primary);
+      box-shadow: var(--crt-glow-inset);
+    }
+
+    .brand {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      color: var(--crt-primary);
+      text-shadow: var(--crt-glow);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+    }
+
+    .menu {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    .link {
+      color: var(--crt-primary);
+      padding: 8px 12px;
+      text-decoration: none;
+      border: 1px solid transparent;
+      transition: var(--crt-transition);
+      font-family: var(--crt-font-family);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      white-space: nowrap;
+    }
+
+    .link:hover {
+      background: color-mix(in srgb, var(--crt-primary) 10%, transparent);
+      box-shadow: var(--crt-glow-sm);
+    }
+
+    .link[aria-current="true"] {
+      background: color-mix(in srgb, var(--crt-primary) 18%, transparent);
+      box-shadow: var(--crt-glow);
+      color: var(--crt-bg-dark);
+    }
+
+    /* .more-button replaced with crt-button - keep visual spacing rules */
+    .more-button {
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--crt-primary);
+      padding: 0;
+    }
+
+    .more-dropdown-container {
+      position: absolute;
+      right: 0;
+      margin-top: 8px;
+    }
+
+    .toggle {
+      display: none;
+      background: transparent;
+      border: 1px solid var(--crt-primary);
+      color: var(--crt-primary);
+      padding: 8px;
+      cursor: var(--crt-cursor-pointer);
+      font-family: var(--crt-font-family);
+    }
+
+    @media (max-width: 720px) {
+      .menu { display: none; }
+      .menu.open { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+      .toggle { display: inline-flex; }
+      .nav { flex-direction: column; align-items: stretch; }
+      .brand { justify-content: space-between; width: 100%; }
+    }
+  `;
+_t([
+  n({ type: Array })
+], Q.prototype, "items", 2);
+_t([
+  n({ type: String })
+], Q.prototype, "brand", 2);
+_t([
+  v()
+], Q.prototype, "_open", 2);
+_t([
+  n({ type: Number })
+], Q.prototype, "maxVisible", 2);
+Q = _t([
+  d("crt-navbar")
+], Q);
+var Ar = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, re = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ir(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ar(t, a, r), r;
+};
+let Tt = class extends p {
+  constructor() {
+    super(...arguments), this.title = "";
+  }
+  render() {
+    return l`
+      <header class="header-wrap" role="banner">
+        <div style="display:flex;align-items:center;gap:12px;min-width:0;">
+          <slot name="brand">
+            <div style="display:flex;flex-direction:column;gap:2px;min-width:0;">
+              <crt-heading level="4">${this.title || "CRT LIVING STYLE GUIDE"}</crt-heading>
+              <crt-text muted style="font-size:var(--crt-font-size-xs);">Component Library · Lit Web Components</crt-text>
+            </div>
+          </slot>
+        </div>
+
+        <div class="actions">
+          <slot name="actions">
+            <!-- default action: search -->
+            <crt-search placeholder="Search styleguide..." style="width:220px;"></crt-search>
+          </slot>
+        </div>
+      </header>
+    `;
+  }
+};
+Tt.styles = c`
+    :host { display: block; }
+    .header-wrap {
+      padding: var(--crt-spacing-lg) var(--crt-spacing-md);
+      background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.75));
+      border-bottom: 2px solid var(--crt-primary);
+      box-shadow: var(--crt-glow-inset);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    /* Make nested atoms adopt spacing */
+    .title ::slotted(crt-heading) { margin: 0; }
+    .title ::slotted(crt-text) { margin: 0; }
+
+    .actions { display: flex; align-items: center; gap: 12px; }
+
+    @media (max-width: 720px) {
+      .header-wrap { flex-direction: column; align-items: stretch; }
+      .actions { justify-content: flex-end; width: 100%; }
+    }
+  `;
+re([
+  n({ type: String })
+], Tt.prototype, "title", 2);
+Tt = re([
+  d("crt-header")
+], Tt);
+var Lr = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, ae = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Br(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Lr(t, a, r), r;
+};
+let At = class extends p {
+  constructor() {
+    super(...arguments), this.copyright = "";
+  }
+  render() {
+    return l`
+      <footer class="footer">
+        <div><slot name="left">${this.copyright || "© 2026 CRT Style Guide"}</slot></div>
+        <div><slot name="right">Made with ♥ · <crt-link href="https://github.com/" target="_blank">GitHub</crt-link></slot></div>
+      </footer>
+    `;
+  }
+};
+At.styles = c`
+    :host { display: block; }
+    .footer {
+      padding: var(--crt-spacing-md) var(--crt-spacing-lg);
+      border-top: 2px solid var(--crt-primary);
+      background: var(--crt-bg-darker);
+      color: var(--crt-text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      font-family: var(--crt-font-family);
+      font-size: var(--crt-font-size-sm);
+    }
+  `;
+ae([
+  n({ type: String })
+], At.prototype, "copyright", 2);
+At = ae([
+  d("crt-footer")
+], At);
+var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, $t = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Nr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Ur(t, a, r), r;
+};
+let J = class extends p {
+  constructor() {
+    super(...arguments), this.items = [], this.open = !1, this.label = "Menu", this._active = -1, this._triggerId = `crt-menu-trigger-${Math.random().toString(36).slice(2, 8)}`, this._listId = `crt-menu-list-${Math.random().toString(36).slice(2, 8)}`, this._onDocClick = (e) => {
+      this.open && (this.contains(e.target) || (this.open = !1, this._active = -1, this.shadowRoot?.querySelector("button.trigger")?.focus()));
+    }, this._onDocKeydown = (e) => {
+      this.open && e.key === "Escape" && (this.open = !1, this._active = -1, this.shadowRoot?.querySelector("button.trigger")?.focus());
+    }, this._toggle = () => {
+      this.open = !this.open, this.open ? (this._active = this.items.findIndex((e) => !e.disabled), this.updateComplete.then(() => {
+        this._focusActive();
+      })) : (this._active = -1, this.shadowRoot?.querySelector("button.trigger")?.focus());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", this._onDocKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick), document.removeEventListener("keydown", this._onDocKeydown);
+  }
+  _focusActive() {
+    const e = this.shadowRoot?.querySelectorAll(".item");
+    if (!e) return;
+    e.forEach((a, i) => a.setAttribute("tabindex", this._active === i ? "0" : "-1")), e[this._active]?.focus();
+  }
+  _onKey(e) {
+    if (!this.open) return;
+    if (e.key === "Tab") {
+      this.open = !1, this._active = -1;
+      return;
+    }
+    const t = this.items.map((a, i) => ({ it: a, idx: i })).filter((a) => !a.it.disabled);
+    switch (["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(e.key) && e.preventDefault(), e.key) {
+      case "ArrowDown": {
+        const a = t.find((i) => i.idx > this._active) || t[0];
+        this._active = a?.idx ?? this._active, this._focusActive();
+        break;
+      }
+      case "ArrowUp": {
+        const a = t.filter((r) => r.idx < this._active), i = a[a.length - 1] || t[t.length - 1];
+        this._active = i?.idx ?? this._active, this._focusActive();
+        break;
+      }
+      case "Home":
+        this._active = t[0]?.idx ?? this._active, this._focusActive();
+        break;
+      case "End":
+        this._active = t[t.length - 1]?.idx ?? this._active, this._focusActive();
+        break;
+      case "Enter":
+      case " ":
+        this._active >= 0 && this._select(this._active);
+        break;
+    }
+  }
+  _select(e) {
+    const t = this.items[e];
+    !t || t.disabled || (this.open = !1, this._active = -1, this.dispatchEvent(new CustomEvent("select", { detail: { item: t, index: e } })), t.href && (window.location.href = t.href), this.shadowRoot?.querySelector("button.trigger")?.focus());
+  }
+  render() {
+    return l`
+      <div style="display:flex;align-items:center;gap:8px;">
+        <button id="${this._triggerId}" class="trigger" @click=${this._toggle} aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="true" aria-controls="${this._listId}" aria-label="${this.label}">${this.label} ▾</button>
+        <div id="${this._listId}" class="dropdown ${this.open ? "open" : ""}" role="menu" aria-labelledby="${this._triggerId}" @keydown=${(e) => this._onKey(e)}>
+          ${this.items.map((e, t) => l`
+            <div
+              class="item"
+              role="menuitem"
+              tabindex="${this._active === t ? "0" : "-1"}"
+              aria-disabled="${e.disabled ? "true" : "false"}"
+              aria-selected="${this._active === t ? "true" : "false"}"
+              @click=${() => this._select(t)}
+              @keydown=${(a) => this._onKey(a)}
+            >${e.label}</div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+J.styles = c`
+    :host { display: inline-block; position: relative; font-family: var(--crt-font-family); }
+    button.trigger {
+      background: transparent;
+      border: 1px solid var(--crt-primary);
+      color: var(--crt-primary);
+      padding: 8px 10px;
+      cursor: var(--crt-cursor-pointer);
+      font-family: var(--crt-font-family);
+    }
+
+    .dropdown {
+      position: absolute;
+      right: 0;
+      background: var(--crt-bg-dark);
+      border: 2px solid var(--crt-primary);
+      box-shadow: var(--crt-glow-sm);
+      margin-top: 8px;
+      min-width: 160px;
+      display: none;
+      flex-direction: column;
+      z-index: 2000;
+    }
+
+    .dropdown.open { display: flex; }
+
+    .item {
+      padding: var(--crt-spacing-sm) var(--crt-spacing-md);
+      cursor: var(--crt-cursor-pointer);
+      color: var(--crt-primary);
+      white-space: nowrap;
+    }
+
+    .item[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+
+    .item[aria-selected='true'] {
+      background: color-mix(in srgb, var(--crt-primary) 18%, transparent);
+      box-shadow: var(--crt-glow-sm);
+      color: var(--crt-bg-dark);
+    }
+  `;
+$t([
+  n({ type: Array })
+], J.prototype, "items", 2);
+$t([
+  n({ type: Boolean, reflect: !0 })
+], J.prototype, "open", 2);
+$t([
+  n({ type: String })
+], J.prototype, "label", 2);
+$t([
+  v()
+], J.prototype, "_active", 2);
+J = $t([
+  d("crt-menu")
+], J);
+var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, at = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Fr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
+  return i && r && Rr(t, a, r), r;
+};
+let A = class extends p {
+  constructor() {
+    super(...arguments), this.autoplay = !1, this.autoplayDelay = 500, this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (e) => {
+      const a = e.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 r = i.name.replace(/\.[^/.]+$/, "");
+        let s = "UNKNOWN ARTIST", o = r.toUpperCase();
+        if (r.includes(" - ")) {
+          const h = r.split(" - ");
+          s = h[0].trim().toUpperCase(), o = h.slice(1).join(" - ").trim().toUpperCase();
         }
         return {
           title: o,
-          artist: i,
-          url: URL.createObjectURL(s)
+          artist: s,
+          url: URL.createObjectURL(i)
         };
       });
       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((s, 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((i, 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 = () => {
@@ -6505,7 +7170,7 @@ let j = class extends p {
     `;
   }
 };
-j.styles = c`
+A.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6578,67 +7243,72 @@ j.styles = c`
       padding-top: var(--crt-spacing-md);
     }
   `;
-Z([
+at([
   n({ type: Boolean })
-], j.prototype, "autoplay", 2);
-Z([
+], A.prototype, "autoplay", 2);
+at([
   n({ type: Number })
-], j.prototype, "autoplayDelay", 2);
-Z([
+], A.prototype, "autoplayDelay", 2);
+at([
   v()
-], j.prototype, "tracks", 2);
-Z([
+], A.prototype, "tracks", 2);
+at([
   v()
-], j.prototype, "currentIndex", 2);
-Z([
+], A.prototype, "currentIndex", 2);
+at([
   v()
-], j.prototype, "showUploadModal", 2);
-Z([
-  Tt("crt-file-upload")
-], j.prototype, "fileUpload", 2);
-j = Z([
+], A.prototype, "showUploadModal", 2);
+at([
+  Ft("crt-file-upload")
+], A.prototype, "fileUpload", 2);
+A = at([
   d("crt-music-station")
-], j);
+], A);
 export {
-  Pt as Accordion,
-  vt as AccordionItem,
-  w as Alert,
-  D as Avatar,
-  _t as AvatarGroup,
-  wt as Badge,
-  ct as Breadcrumb,
-  k as Button,
+  jt as Accordion,
+  ft as AccordionItem,
+  k as Alert,
+  j as Avatar,
+  Et as AvatarGroup,
+  Pt as Badge,
+  vt as Breadcrumb,
+  $ as Button,
   b as Calendar,
-  Dt as Card,
-  B as Checkbox,
-  R as CodeExample,
-  O as FileUpload,
-  ht as Grid,
-  kt as Heading,
-  nt as Icon,
-  V as Input,
-  I as Link,
-  rt as Modal,
-  u as MusicPlayer,
-  j as MusicStation,
-  X as Pagination,
-  gt as Playlist,
-  f as Progress,
-  U as Radio,
-  tt as RadioGroup,
-  S as Select,
-  N as Skeleton,
-  Ct as SkeletonCard,
-  zt as SkeletonText,
-  x as Slider,
-  pt as Spinner,
-  dt as Table,
-  lt as Tabs,
-  F as Terminal,
-  $t as Text,
-  q as Textarea,
-  M as Toast,
-  E as Toggle,
-  H as Tooltip,
-  K as Visualizer
+  Ut as Card,
+  N as Checkbox,
+  V as CodeExample,
+  E as FileUpload,
+  At as Footer,
+  mt as Grid,
+  Tt as Header,
+  Ot as Heading,
+  dt as Icon,
+  H as Input,
+  U as Link,
+  J as Menu,
+  st as Modal,
+  g as MusicPlayer,
+  A as MusicStation,
+  Q as Navbar,
+  W as Pagination,
+  bt as Playlist,
+  y as Progress,
+  R as Radio,
+  it as RadioGroup,
+  m as Search,
+  D as Select,
+  F as Skeleton,
+  Mt as SkeletonCard,
+  Dt as SkeletonText,
+  w as Slider,
+  ut as Spinner,
+  gt as Table,
+  ht as Tabs,
+  Y as Terminal,
+  St as Text,
+  K as Textarea,
+  T as Toast,
+  M as Toggle,
+  X as Tooltip,
+  G as Visualizer
 };