@patimweb/crtstyleguide 1.0.28 → 1.0.29

package/dist/lib/index.js

@@ -4,18 +4,18 @@ const d = (e) => (t, r) => {
     customElements.define(e, t);
   }) : customElements.define(e, t);
 };
-const Et = globalThis, qt = Et.ShadowRoot && (Et.ShadyCSS === void 0 || Et.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ie = /* @__PURE__ */ Symbol(), Jt = /* @__PURE__ */ new WeakMap();
-let le = class {
+const Mt = globalThis, Ht = Mt.ShadowRoot && (Mt.ShadyCSS === void 0 || Mt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, oe = /* @__PURE__ */ Symbol(), ee = /* @__PURE__ */ new WeakMap();
+let pe = class {
   constructor(t, r, i) {
-    if (this._$cssResult$ = !0, i !== ie) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== oe) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = r;
   }
   get styleSheet() {
     let t = this.o;
     const r = this.t;
-    if (qt && t === void 0) {
+    if (Ht && t === void 0) {
       const i = r !== void 0 && r.length === 1;
-      i && (t = Jt.get(r)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Jt.set(r, t));
+      i && (t = ee.get(r)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ee.set(r, t));
     }
     return t;
   }
@@ -23,21 +23,21 @@ let le = class {
     return this.cssText;
   }
 };
-const ce = (e) => new le(typeof e == "string" ? e : e + "", void 0, ie), pe = (e, t) => {
-  if (qt) e.adoptedStyleSheets = t.map((r) => r instanceof CSSStyleSheet ? r : r.styleSheet);
+const de = (e) => new pe(typeof e == "string" ? e : e + "", void 0, oe), he = (e, t) => {
+  if (Ht) e.adoptedStyleSheets = t.map((r) => r instanceof CSSStyleSheet ? r : r.styleSheet);
   else for (const r of t) {
-    const i = document.createElement("style"), a = Et.litNonce;
+    const i = document.createElement("style"), a = Mt.litNonce;
     a !== void 0 && i.setAttribute("nonce", a), i.textContent = r.cssText, e.appendChild(i);
   }
-}, te = qt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
+}, re = Ht ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let r = "";
   for (const i of t.cssRules) r += i.cssText;
-  return ce(r);
+  return de(r);
 })(e) : e;
-const { is: de, defineProperty: he, getOwnPropertyDescriptor: ue, getOwnPropertyNames: ve, getOwnPropertySymbols: ge, getPrototypeOf: me } = Object, Nt = globalThis, ee = Nt.trustedTypes, fe = ee ? ee.emptyScript : "", be = Nt.reactiveElementPolyfillSupport, vt = (e, t) => e, Dt = { toAttribute(e, t) {
+const { is: ue, defineProperty: ve, getOwnPropertyDescriptor: ge, getOwnPropertyNames: me, getOwnPropertySymbols: fe, getPrototypeOf: be } = Object, Ft = globalThis, ae = Ft.trustedTypes, ye = ae ? ae.emptyScript : "", xe = Ft.reactiveElementPolyfillSupport, mt = (e, t) => e, Tt = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
-      e = e ? fe : null;
+      e = e ? ye : null;
       break;
     case Object:
     case Array:
@@ -62,23 +62,23 @@ const { is: de, defineProperty: he, getOwnPropertyDescriptor: ue, getOwnProperty
       }
   }
   return r;
-} }, Ht = (e, t) => !de(e, t), re = { attribute: !0, type: String, converter: Dt, reflect: !1, useDefault: !1, hasChanged: Ht };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Nt.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class ut extends HTMLElement {
+} }, Wt = (e, t) => !ue(e, t), ie = { attribute: !0, type: String, converter: Tt, reflect: !1, useDefault: !1, hasChanged: Wt };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Ft.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+class gt 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, r = re) {
+  static createProperty(t, r = ie) {
     if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(t, r), !r.noAccessor) {
       const i = /* @__PURE__ */ Symbol(), a = this.getPropertyDescriptor(t, i, r);
-      a !== void 0 && he(this.prototype, t, a);
+      a !== void 0 && ve(this.prototype, t, a);
     }
   }
   static getPropertyDescriptor(t, r, i) {
-    const { get: a, set: s } = ue(this.prototype, t) ?? { get() {
+    const { get: a, set: s } = ge(this.prototype, t) ?? { get() {
       return this[r];
     }, set(o) {
       this[r] = o;
@@ -89,17 +89,17 @@ class ut extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? re;
+    return this.elementProperties.get(t) ?? ie;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(vt("elementProperties"))) return;
-    const t = me(this);
+    if (this.hasOwnProperty(mt("elementProperties"))) return;
+    const t = be(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(vt("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(vt("properties"))) {
-      const r = this.properties, i = [...ve(r), ...ge(r)];
+    if (this.hasOwnProperty(mt("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(mt("properties"))) {
+      const r = this.properties, i = [...me(r), ...fe(r)];
       for (const a of i) this.createProperty(a, r[a]);
     }
     const t = this[Symbol.metadata];
@@ -118,8 +118,8 @@ class ut extends HTMLElement {
     const r = [];
     if (Array.isArray(t)) {
       const i = new Set(t.flat(1 / 0).reverse());
-      for (const a of i) r.unshift(te(a));
-    } else t !== void 0 && r.push(te(t));
+      for (const a of i) r.unshift(re(a));
+    } else t !== void 0 && r.push(re(t));
     return r;
   }
   static _$Eu(t, r) {
@@ -145,7 +145,7 @@ class ut extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return pe(t, this.constructor.elementStyles), t;
+    return he(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((t) => t.hostConnected?.());
@@ -161,14 +161,14 @@ class ut extends HTMLElement {
   _$ET(t, r) {
     const i = this.constructor.elementProperties.get(t), a = this.constructor._$Eu(t, i);
     if (a !== void 0 && i.reflect === !0) {
-      const s = (i.converter?.toAttribute !== void 0 ? i.converter : Dt).toAttribute(r, i.type);
+      const s = (i.converter?.toAttribute !== void 0 ? i.converter : Tt).toAttribute(r, i.type);
       this._$Em = t, s == null ? this.removeAttribute(a) : this.setAttribute(a, s), this._$Em = null;
     }
   }
   _$AK(t, r) {
     const i = this.constructor, a = i._$Eh.get(t);
     if (a !== void 0 && this._$Em !== a) {
-      const s = i.getPropertyOptions(a), o = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : Dt;
+      const s = i.getPropertyOptions(a), o = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : Tt;
       this._$Em = a;
       const h = o.fromAttribute(r, s.type);
       this[a] = h ?? this._$Ej?.get(a) ?? h, this._$Em = null;
@@ -177,7 +177,7 @@ class ut extends HTMLElement {
   requestUpdate(t, r, i, a = !1, s) {
     if (t !== void 0) {
       const o = this.constructor;
-      if (a === !1 && (s = this[t]), i ??= o.getPropertyOptions(t), !((i.hasChanged ?? Ht)(s, r) || i.useDefault && i.reflect && s === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, i)))) return;
+      if (a === !1 && (s = this[t]), i ??= o.getPropertyOptions(t), !((i.hasChanged ?? Wt)(s, r) || i.useDefault && i.reflect && s === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, i)))) return;
       this.C(t, r, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -245,8 +245,8 @@ class ut extends HTMLElement {
   firstUpdated(t) {
   }
 }
-ut.elementStyles = [], ut.shadowRootOptions = { mode: "open" }, ut[vt("elementProperties")] = /* @__PURE__ */ new Map(), ut[vt("finalized")] = /* @__PURE__ */ new Map(), be?.({ ReactiveElement: ut }), (Nt.reactiveElementVersions ??= []).push("2.1.2");
-const ye = { attribute: !0, type: String, converter: Dt, reflect: !1, hasChanged: Ht }, xe = (e = ye, t, r) => {
+gt.elementStyles = [], gt.shadowRootOptions = { mode: "open" }, gt[mt("elementProperties")] = /* @__PURE__ */ new Map(), gt[mt("finalized")] = /* @__PURE__ */ new Map(), xe?.({ ReactiveElement: gt }), (Ft.reactiveElementVersions ??= []).push("2.1.2");
+const we = { attribute: !0, type: String, converter: Tt, reflect: !1, hasChanged: Wt }, ke = (e = we, t, r) => {
   const { kind: i, metadata: a } = r;
   let s = globalThis.litPropertyMetadata.get(a);
   if (s === void 0 && globalThis.litPropertyMetadata.set(a, s = /* @__PURE__ */ new Map()), i === "setter" && ((e = Object.create(e)).wrapped = !0), s.set(r.name, e), i === "accessor") {
@@ -268,7 +268,7 @@ const ye = { attribute: !0, type: String, converter: Dt, reflect: !1, hasChanged
   throw Error("Unsupported decorator location: " + i);
 };
 function n(e) {
-  return (t, r) => typeof r == "object" ? xe(e, t, r) : ((i, a, s) => {
+  return (t, r) => typeof r == "object" ? ke(e, t, r) : ((i, a, s) => {
     const o = a.hasOwnProperty(s);
     return a.constructor.createProperty(s, i), o ? Object.getOwnPropertyDescriptor(a, s) : void 0;
   })(e, t, r);
@@ -276,21 +276,21 @@ function n(e) {
 function u(e) {
   return n({ ...e, state: !0, attribute: !1 });
 }
-const we = (e, t, r) => (r.configurable = !0, r.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, r), r);
-function Wt(e, t) {
+const _e = (e, t, r) => (r.configurable = !0, r.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, r), r);
+function Kt(e, t) {
   return (r, i, a) => {
     const s = (o) => o.renderRoot?.querySelector(e) ?? null;
-    return we(r, i, { get() {
+    return _e(r, i, { get() {
       return s(this);
     } });
   };
 }
-var ke = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, Yt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? _e(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, Xt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? ze(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && ke(t, r, a), a;
+  return i && a && $e(t, r, a), a;
 };
-const ae = {
+const se = {
   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>',
@@ -345,16 +345,16 @@ const ae = {
   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>',
   unknown: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" fill="currentColor"/><text x="12" y="16" text-anchor="middle" font-size="14" fill="var(--crt-bg-dark)">?</text></svg>'
 };
-let gt = class extends p {
+let ft = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.size = "md";
   }
   render() {
-    const e = ae[this.name] ?? ae.unknown, t = new DOMParser().parseFromString(e, "image/svg+xml");
+    const e = se[this.name] ?? se.unknown, t = new DOMParser().parseFromString(e, "image/svg+xml");
     return l`<span class="icon" aria-hidden="true">${t.documentElement}</span>`;
   }
 };
-gt.styles = c`
+ft.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -371,19 +371,19 @@ gt.styles = c`
       height: 100%;
     }
   `;
-Yt([
+Xt([
   n()
-], gt.prototype, "name", 2);
-Yt([
+], ft.prototype, "name", 2);
+Xt([
   n()
-], gt.prototype, "size", 2);
-gt = Yt([
+], ft.prototype, "size", 2);
+ft = Xt([
   d("crt-icon")
-], gt);
-var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, I = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? ze(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], ft);
+var Ce = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, B = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Pe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && $e(t, r, a), a;
+  return i && a && Ce(t, r, a), a;
 };
 let _ = class extends p {
   constructor() {
@@ -553,39 +553,39 @@ _.styles = c`
       flex-shrink: 0;
     }
   `;
-I([
+B([
   n({ reflect: !0 })
 ], _.prototype, "size", 2);
-I([
+B([
   n({ reflect: !0 })
 ], _.prototype, "variant", 2);
-I([
+B([
   n({ type: Boolean })
 ], _.prototype, "disabled", 2);
-I([
+B([
   n()
 ], _.prototype, "type", 2);
-I([
+B([
   n({ attribute: "icon-only", type: Boolean })
 ], _.prototype, "iconOnly", 2);
-I([
+B([
   n({ attribute: "icon-left" })
 ], _.prototype, "iconLeft", 2);
-I([
+B([
   n({ attribute: "icon-right" })
 ], _.prototype, "iconRight", 2);
-I([
+B([
   n({ attribute: "aria-label" })
 ], _.prototype, "ariaLabel", 2);
-_ = I([
+_ = B([
   d("crt-button")
 ], _);
-var Ce = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, se = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Pe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Se = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, ne = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Oe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ce(t, r, a), a;
+  return i && a && Se(t, r, a), a;
 };
-let Tt = class extends p {
+let At = class extends p {
   constructor() {
     super(...arguments), this.variant = "primary";
   }
@@ -593,7 +593,7 @@ let Tt = class extends p {
     return l`<span class="badge"><slot></slot></span>`;
   }
 };
-Tt.styles = c`
+At.styles = c`
     :host {
       --badge-bg: transparent;
       --badge-color: var(--crt-primary);
@@ -633,18 +633,18 @@ Tt.styles = c`
       --badge-border: 1px solid var(--crt-info);
     }
   `;
-se([
+ne([
   n()
-], Tt.prototype, "variant", 2);
-Tt = se([
+], At.prototype, "variant", 2);
+At = ne([
   d("crt-badge")
-], Tt);
-var Se = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, Ut = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Oe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], At);
+var Ee = Object.defineProperty, De = Object.getOwnPropertyDescriptor, Vt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? De(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Se(t, r, a), a;
+  return i && a && Ee(t, r, a), a;
 };
-let Mt = class extends p {
+let jt = class extends p {
   constructor() {
     super(...arguments), this.level = 1;
   }
@@ -667,7 +667,7 @@ let Mt = class extends p {
     }
   }
 };
-Mt.styles = c`
+jt.styles = c`
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--crt-font-family);
       color: var(--crt-text-primary);
@@ -696,13 +696,13 @@ Mt.styles = c`
       font-size: var(--crt-font-size-base);
     }
   `;
-Ut([
+Vt([
   n({ type: Number })
-], Mt.prototype, "level", 2);
-Mt = Ut([
+], jt.prototype, "level", 2);
+jt = Vt([
   d("crt-heading")
-], Mt);
-let At = class extends p {
+], jt);
+let Lt = class extends p {
   constructor() {
     super(...arguments), this.muted = !1;
   }
@@ -710,7 +710,7 @@ let At = class extends p {
     return l`<p><slot></slot></p>`;
   }
 };
-At.styles = c`
+Lt.styles = c`
     p {
       font-family: var(--crt-font-family);
       color: var(--crt-text-secondary);
@@ -722,18 +722,18 @@ At.styles = c`
       color: var(--crt-text-muted);
     }
   `;
-Ut([
+Vt([
   n()
-], At.prototype, "muted", 2);
-At = Ut([
+], Lt.prototype, "muted", 2);
+Lt = Vt([
   d("crt-text")
-], At);
-var Ee = Object.defineProperty, De = Object.getOwnPropertyDescriptor, Kt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? De(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Lt);
+var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Gt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Te(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ee(t, r, a), a;
+  return i && a && Me(t, r, a), a;
 };
-let mt = class extends p {
+let bt = class extends p {
   constructor() {
     super(...arguments), this._id = `crt-tabs-${Math.random().toString(36).slice(2, 9)}`, this.activeTab = 0, this.tabs = [];
   }
@@ -783,7 +783,7 @@ let mt = class extends p {
     `;
   }
 };
-mt.styles = c`
+bt.styles = c`
     :host {
       display: block;
     }
@@ -847,21 +847,21 @@ mt.styles = c`
       font-family: var(--crt-font-family);
     }
   `;
-Kt([
+Gt([
   u()
-], mt.prototype, "activeTab", 2);
-Kt([
+], bt.prototype, "activeTab", 2);
+Gt([
   n({ type: Array })
-], mt.prototype, "tabs", 2);
-mt = Kt([
+], bt.prototype, "tabs", 2);
+bt = Gt([
   d("crt-tabs")
-], mt);
-var Te = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, P = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Me(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], bt);
+var Ae = Object.defineProperty, je = Object.getOwnPropertyDescriptor, P = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? je(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Te(t, r, a), a;
+  return i && a && Ae(t, r, a), a;
 };
-let K = class extends p {
+let X = class extends p {
   constructor() {
     super(...arguments), this.type = "text", this.placeholder = "", this.value = "", this.disabled = !1;
   }
@@ -879,7 +879,7 @@ let K = class extends p {
     `;
   }
 };
-K.styles = c`
+X.styles = c`
     :host {
       display: block;
     }
@@ -935,20 +935,20 @@ K.styles = c`
   `;
 P([
   n()
-], K.prototype, "type", 2);
+], X.prototype, "type", 2);
 P([
   n()
-], K.prototype, "placeholder", 2);
+], X.prototype, "placeholder", 2);
 P([
   n()
-], K.prototype, "value", 2);
+], X.prototype, "value", 2);
 P([
   n()
-], K.prototype, "disabled", 2);
-K = P([
+], X.prototype, "disabled", 2);
+X = P([
   d("crt-input")
-], K);
-let X = class extends p {
+], X);
+let G = class extends p {
   constructor() {
     super(...arguments), this.placeholder = "", this.value = "", this.disabled = !1, this.rows = 4;
   }
@@ -966,7 +966,7 @@ let X = class extends p {
     `;
   }
 };
-X.styles = c`
+G.styles = c`
     :host {
       display: block;
     }
@@ -1009,23 +1009,23 @@ X.styles = c`
   `;
 P([
   n()
-], X.prototype, "placeholder", 2);
+], G.prototype, "placeholder", 2);
 P([
   n()
-], X.prototype, "value", 2);
+], G.prototype, "value", 2);
 P([
   n()
-], X.prototype, "disabled", 2);
+], G.prototype, "disabled", 2);
 P([
   n()
-], X.prototype, "rows", 2);
-X = P([
+], G.prototype, "rows", 2);
+G = P([
   d("crt-textarea")
-], X);
-var Ae = Object.defineProperty, je = Object.getOwnPropertyDescriptor, ct = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? je(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], G);
+var Le = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, dt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ie(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ae(t, r, a), a;
+  return i && a && Le(t, r, a), a;
 };
 let N = class extends p {
   constructor() {
@@ -1073,30 +1073,30 @@ N.styles = c`
       color: var(--crt-primary-dark);
     }
   `;
-ct([
+dt([
   n({ type: String })
 ], N.prototype, "href", 2);
-ct([
+dt([
   n({ type: String })
 ], N.prototype, "target", 2);
-ct([
+dt([
   n({ type: Boolean })
 ], N.prototype, "iconLeft", 2);
-ct([
+dt([
   n({ type: Boolean })
 ], N.prototype, "iconRight", 2);
-ct([
+dt([
   n({ type: String })
 ], N.prototype, "icon", 2);
-N = ct([
+N = dt([
   d("crt-link")
 ], N);
-var Le = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, at = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ie(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Be = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, it = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Re(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Le(t, r, a), a;
+  return i && a && Be(t, r, a), a;
 };
-let T = class extends p {
+let M = class extends p {
   constructor() {
     super(...arguments), this.accept = "", this.multiple = !0, this.name = "", this.maxSize = 10485760, this.maxFiles = 10, this.files = [], this._handleFileSelect = (e) => {
       const t = e.target;
@@ -1238,7 +1238,7 @@ let T = class extends p {
     `;
   }
 };
-T.styles = c`
+M.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -1527,31 +1527,31 @@ T.styles = c`
       transition: width 0.3s ease;
     }
   `;
-at([
+it([
   n({ type: String })
-], T.prototype, "accept", 2);
-at([
+], M.prototype, "accept", 2);
+it([
   n({ type: Boolean })
-], T.prototype, "multiple", 2);
-at([
+], M.prototype, "multiple", 2);
+it([
   n({ type: String })
-], T.prototype, "name", 2);
-at([
+], M.prototype, "name", 2);
+it([
   n({ type: Number })
-], T.prototype, "maxSize", 2);
-at([
+], M.prototype, "maxSize", 2);
+it([
   n({ type: Number })
-], T.prototype, "maxFiles", 2);
-at([
+], M.prototype, "maxFiles", 2);
+it([
   u()
-], T.prototype, "files", 2);
-T = at([
+], M.prototype, "files", 2);
+M = it([
   d("crt-file-upload")
-], T);
-var Be = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, S = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Re(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], M);
+var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, S = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ne(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Be(t, r, a), a;
+  return i && a && Ue(t, r, a), a;
 };
 let y = class extends p {
   constructor() {
@@ -1644,10 +1644,10 @@ let y = class extends p {
       `);
     }
     for (let h = 1; h <= r; h++) {
-      const v = new Date(e, t, h), k = this._isToday(v), ne = this._isSelected(v);
+      const v = new Date(e, t, h), k = this._isToday(v), ce = this._isSelected(v);
       s.push(l`
         <div 
-          class="day ${k ? "today" : ""} ${ne ? "selected" : ""}"
+          class="day ${k ? "today" : ""} ${ce ? "selected" : ""}"
           @click="${() => this._selectDate(v)}"
         >
           ${h}
@@ -1958,12 +1958,12 @@ S([
 y = S([
   d("crt-calendar")
 ], y);
-var Ne = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, it = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ue(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Fe = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, st = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ve(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ne(t, r, a), a;
+  return i && a && Fe(t, r, a), a;
 };
-let M = class extends p {
+let T = class extends p {
   constructor() {
     super(...arguments), this._id = `crt-select-${Math.random().toString(36).slice(2, 9)}`, 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);
@@ -2057,7 +2057,7 @@ let M = class extends p {
     `;
   }
 };
-M.styles = c`
+T.styles = c`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -2213,31 +2213,31 @@ M.styles = c`
       background: var(--crt-primary);
     }
   `;
-it([
+st([
   n({ type: String })
-], M.prototype, "value", 2);
-it([
+], T.prototype, "value", 2);
+st([
   n({ type: String })
-], M.prototype, "placeholder", 2);
-it([
+], T.prototype, "placeholder", 2);
+st([
   n({ type: String })
-], M.prototype, "label", 2);
-it([
+], T.prototype, "label", 2);
+st([
   n({ type: Boolean })
-], M.prototype, "disabled", 2);
-it([
+], T.prototype, "disabled", 2);
+st([
   n({ type: Array })
-], M.prototype, "options", 2);
-it([
+], T.prototype, "options", 2);
+st([
   u()
-], M.prototype, "_isOpen", 2);
-M = it([
+], T.prototype, "_isOpen", 2);
+T = st([
   d("crt-select")
-], M);
-var Fe = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, z = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ve(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], T);
+var Ye = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, z = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? qe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Fe(t, r, a), a;
+  return i && a && Ye(t, r, a), a;
 };
 let f = class extends p {
   constructor() {
@@ -2459,12 +2459,12 @@ z([
 f = z([
   d("crt-search")
 ], f);
-var qe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, g = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? He(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var He = Object.defineProperty, We = Object.getOwnPropertyDescriptor, g = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? We(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && qe(t, r, a), a;
+  return i && a && He(t, r, a), a;
 };
-let U = class extends p {
+let F = class extends p {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.indeterminate = !1, this.label = "", this.value = "";
   }
@@ -2492,7 +2492,7 @@ let U = class extends p {
     `;
   }
 };
-U.styles = c`
+F.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2574,23 +2574,23 @@ U.styles = c`
   `;
 g([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "checked", 2);
+], F.prototype, "checked", 2);
 g([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "disabled", 2);
+], F.prototype, "disabled", 2);
 g([
   n({ type: Boolean })
-], U.prototype, "indeterminate", 2);
+], F.prototype, "indeterminate", 2);
 g([
   n({ type: String })
-], U.prototype, "label", 2);
+], F.prototype, "label", 2);
 g([
   n({ type: String })
-], U.prototype, "value", 2);
-U = g([
+], F.prototype, "value", 2);
+F = g([
   d("crt-checkbox")
-], U);
-let F = class extends p {
+], F);
+let V = class extends p {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.value = "", this.name = "";
   }
@@ -2619,7 +2619,7 @@ let F = class extends p {
     `;
   }
 };
-F.styles = c`
+V.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2693,23 +2693,23 @@ F.styles = c`
   `;
 g([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "checked", 2);
+], V.prototype, "checked", 2);
 g([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "disabled", 2);
+], V.prototype, "disabled", 2);
 g([
   n({ type: String })
-], F.prototype, "label", 2);
+], V.prototype, "label", 2);
 g([
   n({ type: String })
-], F.prototype, "value", 2);
+], V.prototype, "value", 2);
 g([
   n({ type: String })
-], F.prototype, "name", 2);
-F = g([
+], V.prototype, "name", 2);
+V = g([
   d("crt-radio")
-], F);
-let nt = class extends p {
+], V);
+let ct = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.horizontal = !1, this._handleChange = (e) => {
       const t = e.target;
@@ -2730,7 +2730,7 @@ let nt = class extends p {
     return l`<slot></slot>`;
   }
 };
-nt.styles = c`
+ct.styles = c`
     :host {
       display: flex;
       flex-direction: column;
@@ -2745,20 +2745,20 @@ nt.styles = c`
   `;
 g([
   n({ type: String })
-], nt.prototype, "name", 2);
+], ct.prototype, "name", 2);
 g([
   n({ type: String })
-], nt.prototype, "value", 2);
+], ct.prototype, "value", 2);
 g([
   n({ type: Boolean, reflect: !0 })
-], nt.prototype, "horizontal", 2);
-nt = g([
+], ct.prototype, "horizontal", 2);
+ct = g([
   d("crt-radio-group")
-], nt);
-var We = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, O = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ye(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], ct);
+var Ke = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, O = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Xe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && We(t, r, a), a;
+  return i && a && Ke(t, r, a), a;
 };
 let x = class extends p {
   constructor() {
@@ -2938,12 +2938,12 @@ O([
 x = O([
   d("crt-progress")
 ], x);
-var Ke = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, kt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Xe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Ge = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, $t = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Qe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ke(t, r, a), a;
+  return i && a && Ge(t, r, a), a;
 };
-let G = class extends p {
+let Q = class extends p {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
   }
@@ -2972,7 +2972,7 @@ let G = class extends p {
     `;
   }
 };
-G.styles = c`
+Q.styles = c`
     :host {
       display: inline-block;
       position: relative;
@@ -3080,27 +3080,27 @@ G.styles = c`
       border-right-color: var(--crt-primary);
     }
   `;
-kt([
+$t([
   n({ type: String })
-], G.prototype, "text", 2);
-kt([
+], Q.prototype, "text", 2);
+$t([
   n({ type: String, reflect: !0 })
-], G.prototype, "position", 2);
-kt([
+], Q.prototype, "position", 2);
+$t([
   n({ type: Number })
-], G.prototype, "delay", 2);
-kt([
+], Q.prototype, "delay", 2);
+$t([
   u()
-], G.prototype, "_visible", 2);
-G = kt([
+], Q.prototype, "_visible", 2);
+Q = $t([
   d("crt-tooltip")
-], G);
-var Ge = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, Xt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Qe(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Q);
+var Ze = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, Qt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Je(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ge(t, r, a), a;
+  return i && a && Ze(t, r, a), a;
 };
-let ft = class extends p {
+let yt = class extends p {
   constructor() {
     super(...arguments), this.items = [], this.separator = ">";
   }
@@ -3118,7 +3118,7 @@ let ft = class extends p {
     `;
   }
 };
-ft.styles = c`
+yt.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3165,21 +3165,21 @@ ft.styles = c`
       font-size: var(--crt-font-size-sm);
     }
   `;
-Xt([
+Qt([
   n({ type: Array })
-], ft.prototype, "items", 2);
-Xt([
+], yt.prototype, "items", 2);
+Qt([
   n({ type: String })
-], ft.prototype, "separator", 2);
-ft = Xt([
+], yt.prototype, "separator", 2);
+yt = Qt([
   d("crt-breadcrumb")
-], ft);
-var Ze = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, _t = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Je(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], yt);
+var tr = Object.defineProperty, er = Object.getOwnPropertyDescriptor, zt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? er(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ze(t, r, a), a;
+  return i && a && tr(t, r, a), a;
 };
-let Q = class extends p {
+let Z = class extends p {
   constructor() {
     super(...arguments), this.current = 1, this.total = 1, this.siblings = 1, this.showInfo = !0;
   }
@@ -3241,7 +3241,7 @@ let Q = class extends p {
     `;
   }
 };
-Q.styles = c`
+Z.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3294,25 +3294,25 @@ Q.styles = c`
       margin-left: var(--crt-spacing-md);
     }
   `;
-_t([
+zt([
   n({ type: Number })
-], Q.prototype, "current", 2);
-_t([
+], Z.prototype, "current", 2);
+zt([
   n({ type: Number })
-], Q.prototype, "total", 2);
-_t([
+], Z.prototype, "total", 2);
+zt([
   n({ type: Number })
-], Q.prototype, "siblings", 2);
-_t([
+], Z.prototype, "siblings", 2);
+zt([
   n({ type: Boolean })
-], Q.prototype, "showInfo", 2);
-Q = _t([
+], Z.prototype, "showInfo", 2);
+Z = zt([
   d("crt-pagination")
-], Q);
-var tr = Object.defineProperty, er = Object.getOwnPropertyDescriptor, E = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? er(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Z);
+var rr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, E = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? ar(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && tr(t, r, a), a;
+  return i && a && rr(t, r, a), a;
 };
 let w = class extends p {
   constructor() {
@@ -3534,10 +3534,10 @@ E([
 w = E([
   d("crt-slider")
 ], w);
-var rr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, st = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? ar(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var ir = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, ot = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? sr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && rr(t, r, a), a;
+  return i && a && ir(t, r, a), a;
 };
 let A = class extends p {
   constructor() {
@@ -3682,31 +3682,31 @@ A.styles = c`
       --label-size: 11px;
     }
   `;
-st([
+ot([
   n({ type: Boolean, reflect: !0 })
 ], A.prototype, "checked", 2);
-st([
+ot([
   n({ type: Boolean, reflect: !0 })
 ], A.prototype, "disabled", 2);
-st([
+ot([
   n({ type: String })
 ], A.prototype, "label", 2);
-st([
+ot([
   n({ type: String })
 ], A.prototype, "onLabel", 2);
-st([
+ot([
   n({ type: String })
 ], A.prototype, "offLabel", 2);
-st([
+ot([
   n({ type: String, reflect: !0 })
 ], A.prototype, "size", 2);
-A = st([
+A = ot([
   d("crt-toggle")
 ], A);
-var ir = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, B = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? sr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, R = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? nr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && ir(t, r, a), a;
+  return i && a && or(t, r, a), a;
 };
 let j = class extends p {
   constructor() {
@@ -3864,28 +3864,28 @@ j.styles = c`
       border-color: var(--crt-bg-dark);
     }
   `;
-B([
+R([
   n({ type: String })
 ], j.prototype, "src", 2);
-B([
+R([
   n({ type: String })
 ], j.prototype, "alt", 2);
-B([
+R([
   n({ type: String })
 ], j.prototype, "name", 2);
-B([
+R([
   n({ type: String, reflect: !0 })
 ], j.prototype, "size", 2);
-B([
+R([
   n({ type: String, reflect: !0 })
 ], j.prototype, "shape", 2);
-B([
+R([
   n({ type: String, reflect: !0 })
 ], j.prototype, "status", 2);
-j = B([
+j = R([
   d("crt-avatar")
 ], j);
-let jt = class extends p {
+let It = class extends p {
   constructor() {
     super(...arguments), this.max = 5;
   }
@@ -3895,7 +3895,7 @@ let jt = class extends p {
     `;
   }
 };
-jt.styles = c`
+It.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3923,18 +3923,18 @@ jt.styles = c`
       margin-left: -12px;
     }
   `;
-B([
+R([
   n({ type: Number })
-], jt.prototype, "max", 2);
-jt = B([
+], It.prototype, "max", 2);
+It = R([
   d("crt-avatar-group")
-], jt);
-var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, D = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? nr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], It);
+var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, D = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? cr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && or(t, r, a), a;
+  return i && a && lr(t, r, a), a;
 };
-let V = class extends p {
+let Y = class extends p {
   constructor() {
     super(...arguments), this.variant = "rectangular", this.animation = "shimmer", this.width = "100%", this.height = "20px", this.effect = !1;
   }
@@ -3947,7 +3947,7 @@ let V = class extends p {
     `;
   }
 };
-V.styles = c`
+Y.styles = c`
     :host {
       display: block;
     }
@@ -4064,23 +4064,23 @@ V.styles = c`
   `;
 D([
   n({ type: String, reflect: !0 })
-], V.prototype, "variant", 2);
+], Y.prototype, "variant", 2);
 D([
   n({ type: String, reflect: !0 })
-], V.prototype, "animation", 2);
+], Y.prototype, "animation", 2);
 D([
   n({ type: String })
-], V.prototype, "width", 2);
+], Y.prototype, "width", 2);
 D([
   n({ type: String })
-], V.prototype, "height", 2);
+], Y.prototype, "height", 2);
 D([
   n({ type: Boolean, reflect: !0 })
-], V.prototype, "effect", 2);
-V = D([
+], Y.prototype, "effect", 2);
+Y = D([
   d("crt-skeleton")
-], V);
-let Lt = class extends p {
+], Y);
+let Bt = class extends p {
   constructor() {
     super(...arguments), this.lines = 3;
   }
@@ -4092,7 +4092,7 @@ let Lt = class extends p {
     `;
   }
 };
-Lt.styles = c`
+Bt.styles = c`
     :host {
       display: block;
     }
@@ -4126,11 +4126,11 @@ Lt.styles = c`
   `;
 D([
   n({ type: Number })
-], Lt.prototype, "lines", 2);
-Lt = D([
+], Bt.prototype, "lines", 2);
+Bt = D([
   d("crt-skeleton-text")
-], Lt);
-let It = class extends p {
+], Bt);
+let Rt = class extends p {
   constructor() {
     super(...arguments), this.hideImage = !1;
   }
@@ -4146,7 +4146,7 @@ let It = class extends p {
     `;
   }
 };
-It.styles = c`
+Rt.styles = c`
     :host {
       display: block;
     }
@@ -4199,14 +4199,14 @@ It.styles = c`
   `;
 D([
   n({ type: Boolean })
-], It.prototype, "hideImage", 2);
-It = D([
+], Rt.prototype, "hideImage", 2);
+Rt = D([
   d("crt-skeleton-card")
-], It);
-var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, R = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? cr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Rt);
+var pr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, U = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? dr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && lr(t, r, a), a;
+  return i && a && pr(t, r, a), a;
 };
 let $ = class extends p {
   constructor() {
@@ -4409,39 +4409,39 @@ $.styles = c`
       border-top: none;
     }
   `;
-R([
+U([
   n({ type: String, reflect: !0 })
 ], $.prototype, "variant", 2);
-R([
+U([
   n({ type: String })
 ], $.prototype, "title", 2);
-R([
+U([
   n({ type: Boolean, reflect: !0 })
 ], $.prototype, "closable", 2);
-R([
+U([
   n({ type: Boolean, reflect: !0 })
 ], $.prototype, "filled", 2);
-R([
+U([
   n({ type: Boolean, reflect: !0 })
 ], $.prototype, "outlined", 2);
-R([
+U([
   n({ type: Boolean, reflect: !0 })
 ], $.prototype, "banner", 2);
-R([
+U([
   n({ type: Boolean, reflect: !0 })
 ], $.prototype, "animated", 2);
-R([
+U([
   n({ type: String })
 ], $.prototype, "icon", 2);
-$ = R([
+$ = U([
   d("crt-alert")
 ], $);
-var pr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, $t = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? dr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var hr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Ct = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? ur(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && pr(t, r, a), a;
+  return i && a && hr(t, r, a), a;
 };
-let Z = class extends p {
+let J = class extends p {
   constructor() {
     super(...arguments), this.open = !1, this.message = "LOADING...", this.size = "md", this.fullscreen = !1;
   }
@@ -4458,7 +4458,7 @@ let Z = class extends p {
     ` : l``;
   }
 };
-Z.styles = c`
+J.styles = c`
     :host {
       --crt-spinner-size: 12px;
       display: none;
@@ -4525,27 +4525,27 @@ Z.styles = c`
       50% { opacity: 0.4; }
     }
   `;
-$t([
+Ct([
   n({ type: Boolean, reflect: !0 })
-], Z.prototype, "open", 2);
-$t([
+], J.prototype, "open", 2);
+Ct([
   n({ type: String })
-], Z.prototype, "message", 2);
-$t([
+], J.prototype, "message", 2);
+Ct([
   n({ type: String, reflect: !0 })
-], Z.prototype, "size", 2);
-$t([
+], J.prototype, "size", 2);
+Ct([
   n({ type: Boolean, reflect: !0 })
-], Z.prototype, "fullscreen", 2);
-Z = $t([
+], J.prototype, "fullscreen", 2);
+J = Ct([
   d("crt-spinner")
-], Z);
-var hr = Object.getOwnPropertyDescriptor, ur = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? hr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], J);
+var vr = Object.getOwnPropertyDescriptor, gr = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? vr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = o(a) || a);
   return a;
 };
-let Vt = class extends p {
+let qt = class extends p {
   render() {
     return l`
       <div class="card">
@@ -4562,7 +4562,7 @@ let Vt = class extends p {
     `;
   }
 };
-Vt.styles = c`
+qt.styles = c`
     :host {
       /* Make the card element act like a normal block-level container
          so external width/height styles can be applied responsively. */
@@ -4600,13 +4600,13 @@ Vt.styles = c`
       margin-top: var(--crt-spacing-md);
     }
   `;
-Vt = ur([
+qt = gr([
   d("crt-card")
-], Vt);
-var vr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, pt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? gr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], qt);
+var mr = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, ht = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? fr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && vr(t, r, a), a;
+  return i && a && mr(t, r, a), a;
 };
 let q = class extends p {
   constructor() {
@@ -4692,30 +4692,30 @@ q.styles = c`
       border-bottom: none;
     }
   `;
-pt([
+ht([
   n({ type: Array })
 ], q.prototype, "headers", 2);
-pt([
+ht([
   n({ type: Array })
 ], q.prototype, "rows", 2);
-pt([
+ht([
   n({ type: Number })
 ], q.prototype, "page", 2);
-pt([
+ht([
   n({ type: Number, attribute: "page-size" })
 ], q.prototype, "pageSize", 2);
-pt([
+ht([
   n({ type: Boolean, attribute: "show-pagination" })
 ], q.prototype, "showPagination", 2);
-q = pt([
+q = ht([
   d("crt-table")
 ], q);
-var mr = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, Gt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? fr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var br = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, Zt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? yr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && mr(t, r, a), a;
+  return i && a && br(t, r, a), a;
 };
-let bt = class extends p {
+let xt = class extends p {
   constructor() {
     super(...arguments), this.columns = 3, this.gap = "var(--crt-spacing-lg)";
   }
@@ -4733,7 +4733,7 @@ let bt = class extends p {
     `;
   }
 };
-bt.styles = c`
+xt.styles = c`
     :host {
       display: block;
     }
@@ -4762,19 +4762,19 @@ bt.styles = c`
       }
     }
   `;
-Gt([
+Zt([
   n({ type: Number })
-], bt.prototype, "columns", 2);
-Gt([
+], xt.prototype, "columns", 2);
+Zt([
   n({ type: String })
-], bt.prototype, "gap", 2);
-bt = Gt([
+], xt.prototype, "gap", 2);
+xt = Zt([
   d("crt-grid")
-], bt);
-var br = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, dt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? yr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], xt);
+var xr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, ut = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? wr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && br(t, r, a), a;
+  return i && a && xr(t, r, a), a;
 };
 let H = class extends p {
   constructor() {
@@ -4980,30 +4980,30 @@ H.styles = c`
       color: var(--crt-bg-dark);
     }
   `;
-dt([
+ut([
   n()
 ], H.prototype, "title", 2);
-dt([
+ut([
   n()
 ], H.prototype, "description", 2);
-dt([
+ut([
   n()
 ], H.prototype, "code", 2);
-dt([
+ut([
   u()
 ], H.prototype, "activeTab", 2);
-dt([
+ut([
   u()
 ], H.prototype, "copied", 2);
-H = dt([
+H = ut([
   d("crt-code-example")
 ], H);
-var xr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, zt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? wr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var kr = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, Pt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? _r(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && xr(t, r, a), a;
+  return i && a && kr(t, r, a), a;
 };
-let J = class extends p {
+let tt = class extends p {
   constructor() {
     super(...arguments), this.open = !1, this.title = "Modal", this.size = "medium", this.preventBackdropClose = !1, this._handleKeydown = (e) => {
       e.key === "Escape" && this.open && this.close("escape");
@@ -5044,7 +5044,7 @@ let J = class extends p {
     `;
   }
 };
-J.styles = c`
+tt.styles = c`
     :host {
       display: none;
     }
@@ -5167,25 +5167,25 @@ J.styles = c`
       height: calc(95vh - 120px);
     }
   `;
-zt([
+Pt([
   n({ type: Boolean, reflect: !0 })
-], J.prototype, "open", 2);
-zt([
+], tt.prototype, "open", 2);
+Pt([
   n({ type: String })
-], J.prototype, "title", 2);
-zt([
+], tt.prototype, "title", 2);
+Pt([
   n({ type: String })
-], J.prototype, "size", 2);
-zt([
+], tt.prototype, "size", 2);
+Pt([
   n({ type: Boolean, reflect: !0 })
-], J.prototype, "preventBackdropClose", 2);
-J = zt([
+], tt.prototype, "preventBackdropClose", 2);
+tt = Pt([
   d("crt-modal")
-], J);
-var kr = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, ot = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? _r(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], tt);
+var $r = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, nt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? zr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && kr(t, r, a), a;
+  return i && a && $r(t, r, a), a;
 };
 let L = class extends p {
   constructor() {
@@ -5419,33 +5419,33 @@ L.styles = c`
       to { width: 0%; }
     }
   `;
-ot([
+nt([
   n({ type: String, reflect: !0 })
 ], L.prototype, "position", 2);
-ot([
+nt([
   n({ type: String })
 ], L.prototype, "message", 2);
-ot([
+nt([
   n({ type: String })
 ], L.prototype, "title", 2);
-ot([
+nt([
   n({ type: String })
 ], L.prototype, "variant", 2);
-ot([
+nt([
   n({ type: Number })
 ], L.prototype, "duration", 2);
-ot([
+nt([
   u()
 ], L.prototype, "_toasts", 2);
-L = ot([
+L = nt([
   d("crt-toast")
 ], L);
-var $r = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, Ct = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? zr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Cr = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, St = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Pr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && $r(t, r, a), a;
+  return i && a && Cr(t, r, a), a;
 };
-let yt = class extends p {
+let wt = class extends p {
   constructor() {
     super(...arguments), this.header = "", this.open = !1;
   }
@@ -5474,7 +5474,7 @@ let yt = class extends p {
     `;
   }
 };
-yt.styles = c`
+wt.styles = c`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -5545,16 +5545,16 @@ yt.styles = c`
       color: var(--crt-text-secondary);
     }
   `;
-Ct([
+St([
   n({ type: String })
-], yt.prototype, "header", 2);
-Ct([
+], wt.prototype, "header", 2);
+St([
   n({ type: Boolean, reflect: !0 })
-], yt.prototype, "open", 2);
-yt = Ct([
+], wt.prototype, "open", 2);
+wt = St([
   d("crt-accordion-item")
-], yt);
-let Bt = class extends p {
+], wt);
+let Ut = class extends p {
   constructor() {
     super(...arguments), this.multiple = !1, this._handleToggle = (e) => {
       !this.multiple && e.detail.open && this.querySelectorAll("crt-accordion-item").forEach((t) => {
@@ -5572,23 +5572,23 @@ let Bt = class extends p {
     return l`<slot></slot>`;
   }
 };
-Bt.styles = c`
+Ut.styles = c`
     :host {
       display: block;
     }
   `;
-Ct([
+St([
   n({ type: Boolean })
-], Bt.prototype, "multiple", 2);
-Bt = Ct([
+], Ut.prototype, "multiple", 2);
+Ut = St([
   d("crt-accordion")
-], Bt);
-var Cr = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, Pt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Pr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Ut);
+var Sr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, Ot = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Or(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Cr(t, r, a), a;
+  return i && a && Sr(t, r, a), a;
 };
-let tt = class extends p {
+let et = 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;
@@ -5646,7 +5646,7 @@ let tt = class extends p {
     `;
   }
 };
-tt.styles = c`
+et.styles = c`
     :host {
       display: block;
     }
@@ -5718,27 +5718,27 @@ tt.styles = c`
       animation: none;
     }
   `;
-Pt([
+Ot([
   n({ type: Number })
-], tt.prototype, "bars", 2);
-Pt([
+], et.prototype, "bars", 2);
+Ot([
   n({ type: Number })
-], tt.prototype, "mode", 2);
-Pt([
+], et.prototype, "mode", 2);
+Ot([
   u()
-], tt.prototype, "barHeights", 2);
-Pt([
+], et.prototype, "barHeights", 2);
+Ot([
   u()
-], tt.prototype, "isActive", 2);
-tt = Pt([
+], et.prototype, "isActive", 2);
+et = Ot([
   d("crt-visualizer")
-], tt);
-var Sr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, Qt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Or(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], et);
+var Er = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, Jt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Dr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Sr(t, r, a), a;
+  return i && a && Er(t, r, a), a;
 };
-let xt = class extends p {
+let kt = class extends p {
   constructor() {
     super(...arguments), this.tracks = [], this.currentIndex = 0;
   }
@@ -5807,7 +5807,7 @@ let xt = class extends p {
     `;
   }
 };
-xt.styles = c`
+kt.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -5969,19 +5969,19 @@ xt.styles = c`
       background: rgba(0, 255, 0, 0.5);
     }
   `;
-Qt([
+Jt([
   n({ type: Array })
-], xt.prototype, "tracks", 2);
-Qt([
+], kt.prototype, "tracks", 2);
+Jt([
   n({ type: Number })
-], xt.prototype, "currentIndex", 2);
-xt = Qt([
+], kt.prototype, "currentIndex", 2);
+kt = Jt([
   d("crt-playlist")
-], xt);
-var Er = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, b = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Dr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], kt);
+var Mr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, b = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Tr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Er(t, r, a), a;
+  return i && a && Mr(t, r, a), a;
 };
 let m = class extends p {
   constructor() {
@@ -6408,18 +6408,18 @@ b([
   u()
 ], m.prototype, "lyricsOpen", 2);
 b([
-  Wt("audio")
+  Kt("audio")
 ], m.prototype, "audio", 2);
 b([
-  Wt("crt-visualizer")
+  Kt("crt-visualizer")
 ], m.prototype, "visualizer", 2);
 m = b([
   d("crt-music-player")
 ], m);
-var Tr = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, ht = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Mr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Ar = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, vt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? jr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Tr(t, r, a), a;
+  return i && a && Ar(t, r, a), a;
 };
 let W = class extends p {
   constructor() {
@@ -6560,30 +6560,30 @@ W.styles = c`
     .fake-input .input-text { display:inline-block; white-space:pre; line-height: 1.4; }
     .muted { opacity: 0.7; font-size: 0.9em; }
   `;
-ht([
+vt([
   n({ type: Number })
 ], W.prototype, "rows", 2);
-ht([
+vt([
   n({ type: String })
 ], W.prototype, "prompt", 2);
-ht([
+vt([
   n({ type: Boolean, reflect: !0 })
 ], W.prototype, "disabled", 2);
-ht([
+vt([
   u()
 ], W.prototype, "outputs", 2);
-ht([
+vt([
   u()
 ], W.prototype, "input", 2);
-W = ht([
+W = vt([
   d("crt-terminal")
 ], W);
-var Ar = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, St = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? jr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+var Lr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, Et = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ir(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Ar(t, r, a), a;
+  return i && a && Lr(t, r, a), a;
 };
-let et = class extends p {
+let rt = class extends p {
   constructor() {
     super(...arguments), this.items = [], this.brand = "", this._open = !1;
   }
@@ -6665,7 +6665,7 @@ let et = class extends p {
     `;
   }
 };
-et.styles = c`
+rt.styles = c`
     :host { display: block; font-family: var(--crt-font-family); }
     .nav {
       position: relative;
@@ -6749,55 +6749,47 @@ et.styles = c`
       .brand { justify-content: space-between; width: 100%; }
     }
   `;
-St([
+Et([
   n({ type: Array })
-], et.prototype, "items", 2);
-St([
+], rt.prototype, "items", 2);
+Et([
   n({ type: String })
-], et.prototype, "brand", 2);
-St([
+], rt.prototype, "brand", 2);
+Et([
   u()
-], et.prototype, "_open", 2);
-St([
+], rt.prototype, "_open", 2);
+Et([
   n({ type: Number })
-], et.prototype, "maxVisible", 2);
-et = St([
+], rt.prototype, "maxVisible", 2);
+rt = Et([
   d("crt-navbar")
-], et);
-var Lr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, Ft = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ir(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], rt);
+var Br = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, Yt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Rr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Lr(t, r, a), a;
+  return i && a && Br(t, r, a), a;
 };
-let lt = class extends p {
+let pt = class extends p {
   constructor() {
-    super(...arguments), this.title = "", this.screenActive = !1, this.currentColor = "green";
+    super(...arguments), this.title = "", this.overlayActive = !1, this.currentColor = "green";
   }
-  toggleScreenWithColor(e) {
-    this.currentColor = e, this.screenActive = !0, this.changeColor(e), this.dispatchEvent(new CustomEvent("screen-toggle", {
-      detail: { active: !0, color: e },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  disableScreen() {
-    this.screenActive = !1, this.dispatchEvent(new CustomEvent("screen-toggle", {
-      detail: { active: !1 },
+  toggleOverlay() {
+    this.overlayActive = !this.overlayActive, this.dispatchEvent(new CustomEvent("overlay-toggle", {
+      detail: { active: this.overlayActive },
       bubbles: !0,
       composed: !0
     }));
   }
   changeColor(e) {
+    this.currentColor = e, document.documentElement.setAttribute("data-crt-theme", e);
     const r = {
       green: { primary: "#8aff8a", light: "#b4ffb4", dark: "#33ff33", textPrimary: "#8aff8a", textSecondary: "rgba(138, 255, 138, 0.7)", textMuted: "rgba(138, 255, 138, 0.5)" },
       amber: { primary: "#ffd700", light: "#ffe680", dark: "#ffb000", textPrimary: "#ffd700", textSecondary: "rgba(255, 215, 0, 0.7)", textMuted: "rgba(255, 215, 0, 0.5)" },
       blue: { primary: "#66ffff", light: "#99ffff", dark: "#00cccc", textPrimary: "#66ffff", textSecondary: "rgba(102, 255, 255, 0.7)", textMuted: "rgba(102, 255, 255, 0.5)" }
     }[e];
-    document.documentElement.style.setProperty("--crt-primary", r.primary), document.documentElement.style.setProperty("--crt-primary-light", r.light), document.documentElement.style.setProperty("--crt-primary-dark", r.dark), document.documentElement.style.setProperty("--crt-text-primary", r.textPrimary), document.documentElement.style.setProperty("--crt-text-secondary", r.textSecondary), document.documentElement.style.setProperty("--crt-text-muted", r.textMuted), document.documentElement.style.setProperty("--crt-border-color", r.primary), document.documentElement.style.setProperty("--crt-glow-sm", "none"), document.documentElement.style.setProperty("--crt-glow", "none"), document.documentElement.style.setProperty("--crt-glow-lg", "none"), document.documentElement.style.setProperty("--crt-glow-inset", "none");
+    document.documentElement.style.setProperty("--crt-primary", r.primary), document.documentElement.style.setProperty("--crt-primary-light", r.light), document.documentElement.style.setProperty("--crt-primary-dark", r.dark), document.documentElement.style.setProperty("--crt-text-primary", r.textPrimary), document.documentElement.style.setProperty("--crt-text-secondary", r.textSecondary), document.documentElement.style.setProperty("--crt-text-muted", r.textMuted), document.documentElement.style.setProperty("--crt-border-color", r.primary);
     const i = r.primary.replace("#", "%23"), a = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="16" fill="${i}"/></svg>'), auto`, s = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="${i}"/></svg>') 6 6, pointer`, o = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><rect x="2" y="0" width="12" height="2" fill="${i}"/><rect x="7" y="2" width="2" height="20" fill="${i}"/><rect x="2" y="22" width="12" height="2" fill="${i}"/></svg>') 8 12, text`;
-    document.documentElement.style.setProperty("--crt-cursor-default", a), document.documentElement.style.setProperty("--crt-cursor-pointer", s), document.documentElement.style.setProperty("--crt-cursor-text", o), document.querySelectorAll("crt-screen").forEach((v) => {
-      v.color = e;
-    }), this.dispatchEvent(new CustomEvent("color-change", {
+    document.documentElement.style.setProperty("--crt-cursor-default", a), document.documentElement.style.setProperty("--crt-cursor-pointer", s), document.documentElement.style.setProperty("--crt-cursor-text", o), this.dispatchEvent(new CustomEvent("color-change", {
       detail: { color: e },
       bubbles: !0,
       composed: !0
@@ -6816,46 +6808,47 @@ let lt = class extends p {
         </div>
 
         <div class="actions">
-          <!-- CRT Screen Buttons with Colors -->
+          <!-- CRT Overlay Toggle -->
           <div class="switcher-block">
             <span class="switcher-title">CRT</span>
             <button
-              class="power-btn ${this.screenActive ? "active" : ""}"
-              @click="${() => this.screenActive ? this.disableScreen() : this.toggleScreenWithColor(this.currentColor)}"
-              aria-label="Toggle CRT power"
+              class="power-btn ${this.overlayActive ? "active" : ""}"
+              @click="${this.toggleOverlay}"
+              aria-label="Toggle CRT overlay"
             >
               POWER
             </button>
-            <span class="power-led ${this.screenActive ? "on" : ""}" aria-hidden="true"></span>
+            <span class="power-led ${this.overlayActive ? "on" : ""}" aria-hidden="true"></span>
           </div>
 
+          <!-- Color Theme Switcher -->
           <div class="crt-switcher">
-            <crt-tooltip text="${this.screenActive && this.currentColor === "green" ? "Disable CRT" : "Green CRT Screen"}" position="bottom">
+            <crt-tooltip text="Green theme" position="bottom">
               <div class="color-chip">
                 <button 
-                  class="color-btn green ${this.screenActive && this.currentColor === "green" ? "active" : ""}" 
-                  @click="${() => this.screenActive && this.currentColor === "green" ? this.disableScreen() : this.toggleScreenWithColor("green")}" 
-                  aria-label="Green CRT Screen">
+                  class="color-btn green ${this.currentColor === "green" ? "active" : ""}" 
+                  @click="${() => this.changeColor("green")}" 
+                  aria-label="Green theme">
                 </button>
                 <span class="color-label">GREEN</span>
               </div>
             </crt-tooltip>
-            <crt-tooltip text="${this.screenActive && this.currentColor === "amber" ? "Disable CRT" : "Amber CRT Screen"}" position="bottom">
+            <crt-tooltip text="Amber theme" position="bottom">
               <div class="color-chip">
                 <button 
-                  class="color-btn amber ${this.screenActive && this.currentColor === "amber" ? "active" : ""}" 
-                  @click="${() => this.screenActive && this.currentColor === "amber" ? this.disableScreen() : this.toggleScreenWithColor("amber")}" 
-                  aria-label="Amber CRT Screen">
+                  class="color-btn amber ${this.currentColor === "amber" ? "active" : ""}" 
+                  @click="${() => this.changeColor("amber")}" 
+                  aria-label="Amber theme">
                 </button>
                 <span class="color-label">AMBER</span>
               </div>
             </crt-tooltip>
-            <crt-tooltip text="${this.screenActive && this.currentColor === "blue" ? "Disable CRT" : "Blue CRT Screen"}" position="bottom">
+            <crt-tooltip text="Blue theme" position="bottom">
               <div class="color-chip">
                 <button 
-                  class="color-btn blue ${this.screenActive && this.currentColor === "blue" ? "active" : ""}" 
-                  @click="${() => this.screenActive && this.currentColor === "blue" ? this.disableScreen() : this.toggleScreenWithColor("blue")}" 
-                  aria-label="Blue CRT Screen">
+                  class="color-btn blue ${this.currentColor === "blue" ? "active" : ""}" 
+                  @click="${() => this.changeColor("blue")}" 
+                  aria-label="Blue theme">
                 </button>
                 <span class="color-label">BLUE</span>
               </div>
@@ -6871,7 +6864,7 @@ let lt = class extends p {
     `;
   }
 };
-lt.styles = c`
+pt.styles = c`
     :host { display: block; }
     .header-wrap {
       background: transparent;
@@ -6992,24 +6985,24 @@ lt.styles = c`
       .actions { justify-content: flex-end; width: 100%; }
     }
   `;
-Ft([
+Yt([
   n({ type: String })
-], lt.prototype, "title", 2);
-Ft([
+], pt.prototype, "title", 2);
+Yt([
   n({ type: Boolean })
-], lt.prototype, "screenActive", 2);
-Ft([
+], pt.prototype, "overlayActive", 2);
+Yt([
   n({ type: String })
-], lt.prototype, "currentColor", 2);
-lt = Ft([
+], pt.prototype, "currentColor", 2);
+pt = Yt([
   d("crt-header")
-], lt);
-var Br = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, oe = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Rr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], pt);
+var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, le = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Nr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Br(t, r, a), a;
+  return i && a && Ur(t, r, a), a;
 };
-let Rt = class extends p {
+let Nt = class extends p {
   constructor() {
     super(...arguments), this.copyright = "";
   }
@@ -7022,7 +7015,7 @@ let Rt = class extends p {
     `;
   }
 };
-Rt.styles = c`
+Nt.styles = c`
     :host { display: block; }
     .footer {
       padding: var(--crt-spacing-md) var(--crt-spacing-lg);
@@ -7037,18 +7030,18 @@ Rt.styles = c`
       font-size: var(--crt-font-size-sm);
     }
   `;
-oe([
+le([
   n({ type: String })
-], Rt.prototype, "copyright", 2);
-Rt = oe([
+], Nt.prototype, "copyright", 2);
+Nt = le([
   d("crt-footer")
-], Rt);
-var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, Ot = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Ur(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], Nt);
+var Fr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, Dt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Vr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Nr(t, r, a), a;
+  return i && a && Fr(t, r, a), a;
 };
-let rt = class extends p {
+let at = 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()));
@@ -7126,7 +7119,7 @@ let rt = class extends p {
     `;
   }
 };
-rt.styles = c`
+at.styles = c`
     :host { display: inline-block; position: relative; font-family: var(--crt-font-family); }
     button.trigger {
       background: transparent;
@@ -7165,27 +7158,27 @@ rt.styles = c`
       color: var(--crt-bg-dark);
     }
   `;
-Ot([
+Dt([
   n({ type: Array })
-], rt.prototype, "items", 2);
-Ot([
+], at.prototype, "items", 2);
+Dt([
   n({ type: Boolean, reflect: !0 })
-], rt.prototype, "open", 2);
-Ot([
+], at.prototype, "open", 2);
+Dt([
   n({ type: String })
-], rt.prototype, "label", 2);
-Ot([
+], at.prototype, "label", 2);
+Dt([
   u()
-], rt.prototype, "_active", 2);
-rt = Ot([
+], at.prototype, "_active", 2);
+at = Dt([
   d("crt-menu")
-], rt);
-var Fr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, Zt = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Vr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], at);
+var Yr = Object.defineProperty, qr = Object.getOwnPropertyDescriptor, te = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? qr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && Fr(t, r, a), a;
+  return i && a && Yr(t, r, a), a;
 };
-let wt = class extends p {
+let _t = class extends p {
   constructor() {
     super(...arguments), this.active = !0, this.color = "green";
   }
@@ -7206,7 +7199,7 @@ let wt = class extends p {
     `;
   }
 };
-wt.styles = c`
+_t.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -7478,19 +7471,411 @@ wt.styles = c`
       }
     }
   `;
-Zt([
+te([
   n({ type: Boolean })
-], wt.prototype, "active", 2);
-Zt([
+], _t.prototype, "active", 2);
+te([
   n({ type: String, reflect: !0 })
-], wt.prototype, "color", 2);
-wt = Zt([
+], _t.prototype, "color", 2);
+_t = te([
   d("crt-screen")
-], wt);
-var qr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, Y = (e, t, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? Hr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+], _t);
+var Hr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, lt = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Wr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
+  return i && a && Hr(t, r, a), a;
+};
+let I = class extends p {
+  constructor() {
+    super(...arguments), this.active = !0, this.scanlines = !0, this.vignette = !0, this.flicker = !0, this.contained = !1, this._powerState = "idle", this._isFirstRender = !0, this._hasBeenActivated = !1;
+  }
+  firstUpdated() {
+    this.active && (this._hasBeenActivated = !0, this._powerState = "power-on", this.requestUpdate(), setTimeout(() => {
+      this._powerState = "idle", this.requestUpdate();
+    }, 4e3)), this._isFirstRender = !1;
+  }
+  updated(e) {
+    if (super.updated(e), e.has("active") && !this._isFirstRender) {
+      const t = e.get("active");
+      t !== void 0 && t !== this.active && (this.active ? (this._hasBeenActivated = !0, this._powerState = "power-on", setTimeout(() => {
+        this._powerState = "idle", this.requestUpdate();
+      }, 4e3)) : (this._powerState = "power-off", setTimeout(() => {
+        this._powerState = "idle", this._hasBeenActivated = !1, this.requestUpdate();
+      }, 1100)), this.requestUpdate());
+    }
+  }
+  render() {
+    const e = this._powerState === "power-on", t = this.active || e, r = e ? "overlay vignette fade-in" : "overlay vignette", i = e ? "overlay scanlines fade-in" : "overlay scanlines" + (this.active ? " active" : ""), a = e ? "scan-line fade-in" : "scan-line" + (this.active ? " active" : ""), s = e ? "overlay flicker fade-in" : "overlay flicker" + (this.active ? " active" : ""), o = this._powerState !== "idle", h = !this.active && this._powerState === "idle" && this._hasBeenActivated;
+    return l`
+      ${this.vignette && t ? l`<div class="${r}"></div>` : ""}
+      ${this.scanlines && t ? l`<div class="${i}"></div>` : ""}
+      ${this.scanlines && t ? l`<div class="${a}"></div>` : ""}
+      ${this.flicker && t ? l`<div class="${s}"></div>` : ""}
+      ${o ? l`
+        <div class="power-container ${this._powerState}">
+          ${this._powerState === "power-on" ? l`
+            <div class="power-layer"></div>
+          ` : l`
+            <div class="power-bar-top"></div>
+            <div class="power-bar-bottom"></div>
+            <div class="power-line"></div>
+          `}
+        </div>
+      ` : ""}
+      ${h ? l`<div class="power-layer" style="opacity: 1;"></div>` : ""}
+    `;
+  }
+};
+I.styles = c`
+    :host {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 100vh;
+      pointer-events: none;
+      z-index: 2147483647;
+      overflow: hidden;
+    }
+
+    /* Container mode - absolute positioning */
+    :host([contained]) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100% !important;
+      height: 100% !important;
+      z-index: 100;
+    }
+
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Vignette - Abgedunkelte Ecken (identisch zu crt-screen) */
+    .vignette {
+      background: radial-gradient(
+        ellipse at center,
+        transparent 0%,
+        transparent 60%,
+        rgba(0, 0, 0, 0.3) 90%,
+        rgba(0, 0, 0, 0.6) 100%
+      );
+    }
+
+    .vignette.fade-in {
+      animation: effects-fade-in 4s forwards linear;
+    }
+
+    /* Static Scanlines - Horizontale Linien (identisch zu crt-screen) */
+    .scanlines {
+      background: linear-gradient(
+        to bottom,
+        transparent 50%,
+        rgba(0, 0, 0, 0.25) 51%
+      );
+      background-size: 100% 0.4rem;
+    }
+
+    .scanlines.active {
+      animation: scan-crt 1s steps(60) infinite;
+    }
+
+    .scanlines.fade-in {
+      animation: effects-fade-in 4s forwards linear, scan-crt 1s steps(60) infinite;
+    }
+
+    /* Moving Scanline - Bewegliche Linie (identisch zu crt-screen) */
+    .scan-line {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      opacity: 0;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .scan-line.active {
+      opacity: 0.5;
+      animation: scan-moving 6s linear infinite;
+    }
+
+    .scan-line.fade-in {
+      animation: scanline-fade-in 4s forwards linear, scan-moving 6s linear infinite;
+    }
+
+    /* Flicker Layer (identisch zu crt-screen) */
+    .flicker {
+      background: transparent;
+    }
+
+    .flicker.active {
+      animation: crt-flicker 0.1s infinite;
+    }
+
+    .flicker.fade-in {
+      animation: effects-fade-in 4s forwards linear, crt-flicker 0.1s infinite;
+    }
+
+    /* Power Animation Container */
+    .power-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      overflow: hidden;
+    }
+
+    /* Power-On: Einfaches schwarzes Layer das ausfaded */
+    .power-layer {
+      position: absolute;
+      inset: 0;
+      background: var(--crt-bg-darker, #000000);
+      z-index: 10;
+    }
+
+    .power-on .power-layer {
+      animation: overlay-power-on 4s forwards linear;
+    }
+
+    /* Power-Off: Zwei Balken die sich zur Mitte bewegen */
+    .power-bar-top,
+    .power-bar-bottom {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      background: var(--crt-bg-darker, #000000);
+    }
+
+    .power-bar-top {
+      top: 0;
+      transform-origin: center top;
+    }
+
+    .power-bar-bottom {
+      bottom: 0;
+      transform-origin: center bottom;
+    }
+
+    .power-off .power-bar-top {
+      animation: bar-top-close 1s forwards ease-in-out;
+    }
+
+    .power-off .power-bar-bottom {
+      animation: bar-bottom-close 1s forwards ease-in-out;
+    }
+
+    /* Heller Streifen in der Mitte beim Power-Off */
+    .power-line {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      transform: translateY(-50%);
+      background: var(--crt-primary, #8aff8a);
+      box-shadow: 0 0 20px var(--crt-primary, #8aff8a),
+                  0 0 40px var(--crt-primary, #8aff8a),
+                  0 0 60px var(--crt-primary, #8aff8a);
+    }
+
+    .power-off .power-line {
+      animation: power-line-shrink 1s forwards ease-in-out;
+    }
+
+    /* Animationen (identisch zu crt-screen) */
+    @keyframes scan-moving {
+      0% {
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        transform: translate3d(0, 100vh, 0);
+      }
+    }
+
+    @keyframes scan-crt {
+      0% {
+        background-position: 0 50%;
+      }
+    }
+
+    @keyframes crt-flicker {
+      0% {
+        opacity: 0.95;
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.97;
+      }
+    }
+
+    /* 
+     * Power-On Animation für Overlay
+     * Timing exakt wie crt-screen:
+     * - 0-11%: Schnelle Bewegungen, heller Blitz
+     * - 11%: Bildschirm wird schwarz
+     * - 11-100%: Inhalt faded langsam ein (= schwarzes Layer faded aus)
+     */
+    @keyframes overlay-power-on {
+      0% {
+        opacity: 1;
+        filter: brightness(30);
+      }
+      3.5% {
+        opacity: 1;
+        filter: brightness(20);
+      }
+      9% {
+        opacity: 1;
+        filter: brightness(10);
+      }
+      11% {
+        opacity: 1;
+        filter: brightness(0);
+      }
+      100% {
+        opacity: 0;
+        filter: brightness(1);
+      }
+    }
+
+    /* Effekte (Vignette, Scanlines, Flicker) faden synchron mit dem Inhalt ein */
+    @keyframes effects-fade-in {
+      0% {
+        opacity: 0;
+      }
+      11% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    /* Scanline faded von 0 auf 0.5 */
+    @keyframes scanline-fade-in {
+      0% {
+        opacity: 0;
+      }
+      11% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 0.5;
+      }
+    }
+
+    /* Power-Off: Oberer Balken kommt von oben, dann fade-out */
+    @keyframes bar-top-close {
+      0% {
+        transform: scaleY(0);
+        opacity: 1;
+      }
+      40% {
+        transform: scaleY(1);
+        opacity: 1;
+      }
+      70% {
+        transform: scaleY(1);
+        opacity: 1;
+      }
+      100% {
+        transform: scaleY(1);
+        opacity: 0;
+      }
+    }
+
+    /* Power-Off: Unterer Balken kommt von unten, dann fade-out */
+    @keyframes bar-bottom-close {
+      0% {
+        transform: scaleY(0);
+        opacity: 1;
+      }
+      40% {
+        transform: scaleY(1);
+        opacity: 1;
+      }
+      70% {
+        transform: scaleY(1);
+        opacity: 1;
+      }
+      100% {
+        transform: scaleY(1);
+        opacity: 0;
+      }
+    }
+
+    /* Power-Off: Heller Streifen schrumpft und verschwindet */
+    @keyframes power-line-shrink {
+      0% {
+        opacity: 0;
+        transform: translateY(-50%) scaleX(1);
+      }
+      10% {
+        opacity: 1;
+        transform: translateY(-50%) scaleX(1.3);
+        filter: brightness(1);
+      }
+      40% {
+        opacity: 1;
+        transform: translateY(-50%) scaleX(0);
+        filter: brightness(10);
+      }
+      50% {
+        opacity: 0;
+        transform: translateY(-50%) scaleX(0);
+        filter: brightness(50);
+      }
+      100% {
+        opacity: 0;
+        transform: translateY(-50%) scaleX(0);
+      }
+    }
+  `;
+lt([
+  n({ type: Boolean })
+], I.prototype, "active", 2);
+lt([
+  n({ type: Boolean })
+], I.prototype, "scanlines", 2);
+lt([
+  n({ type: Boolean })
+], I.prototype, "vignette", 2);
+lt([
+  n({ type: Boolean })
+], I.prototype, "flicker", 2);
+lt([
+  n({ type: Boolean, reflect: !0 })
+], I.prototype, "contained", 2);
+lt([
+  u()
+], I.prototype, "_powerState", 2);
+I = lt([
+  d("crt-overlay")
+], I);
+var Kr = Object.defineProperty, Xr = Object.getOwnPropertyDescriptor, K = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Xr(t, r) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (a = (i ? o(t, r, a) : o(a)) || a);
-  return i && a && qr(t, r, a), a;
+  return i && a && Kr(t, r, a), a;
 };
 let C = class extends p {
   constructor() {
@@ -7670,76 +8055,77 @@ C.styles = c`
       padding-top: var(--crt-spacing-md);
     }
   `;
-Y([
+K([
   n({ type: Boolean })
 ], C.prototype, "autoplay", 2);
-Y([
+K([
   n({ type: Number })
 ], C.prototype, "autoplayDelay", 2);
-Y([
+K([
   n({ type: Boolean, attribute: "preload-default" })
 ], C.prototype, "preloadDefault", 2);
-Y([
+K([
   n({ type: Array })
 ], C.prototype, "tracks", 2);
-Y([
+K([
   u()
 ], C.prototype, "currentIndex", 2);
-Y([
+K([
   u()
 ], C.prototype, "showUploadModal", 2);
-Y([
-  Wt("crt-file-upload")
+K([
+  Kt("crt-file-upload")
 ], C.prototype, "fileUpload", 2);
-C = Y([
+C = K([
   d("crt-music-station")
 ], C);
 export {
-  Bt as Accordion,
-  yt as AccordionItem,
+  Ut as Accordion,
+  wt as AccordionItem,
   $ as Alert,
   j as Avatar,
-  jt as AvatarGroup,
-  Tt as Badge,
-  ft as Breadcrumb,
+  It as AvatarGroup,
+  At as Badge,
+  yt as Breadcrumb,
   _ as Button,
-  wt as CRTScreen,
+  I as CRTOverlay,
+  _t as CRTScreen,
   y as Calendar,
-  Vt as Card,
-  U as Checkbox,
+  qt as Card,
+  F as Checkbox,
   H as CodeExample,
-  T as FileUpload,
-  Rt as Footer,
-  bt as Grid,
-  lt as Header,
-  Mt as Heading,
-  gt as Icon,
-  K as Input,
+  M as FileUpload,
+  Nt as Footer,
+  xt as Grid,
+  pt as Header,
+  jt as Heading,
+  ft as Icon,
+  X as Input,
   N as Link,
-  rt as Menu,
-  J as Modal,
+  at as Menu,
+  tt as Modal,
   m as MusicPlayer,
   C as MusicStation,
-  et as Navbar,
-  Q as Pagination,
-  xt as Playlist,
+  rt as Navbar,
+  Z as Pagination,
+  kt as Playlist,
   x as Progress,
-  F as Radio,
-  nt as RadioGroup,
+  V as Radio,
+  ct as RadioGroup,
   f as Search,
-  M as Select,
-  V as Skeleton,
-  It as SkeletonCard,
-  Lt as SkeletonText,
+  T as Select,
+  Y as Skeleton,
+  Rt as SkeletonCard,
+  Bt as SkeletonText,
   w as Slider,
-  Z as Spinner,
+  J as Spinner,
   q as Table,
-  mt as Tabs,
+  bt as Tabs,
   W as Terminal,
-  At as Text,
-  X as Textarea,
+  Lt as Text,
+  G as Textarea,
   L as Toast,
   A as Toggle,
-  G as Tooltip,
-  tt as Visualizer
+  Q as Tooltip,
+  et as Visualizer
 };