@patimweb/crtstyleguide 1.0.6 → 1.0.8

package/dist/lib/index.js

@@ -4,10 +4,10 @@ const d = (r) => (t, a) => {
     customElements.define(r, t);
   }) : customElements.define(r, t);
 };
-const ft = globalThis, Dt = ft.ShadowRoot && (ft.ShadyCSS === void 0 || ft.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Xt = /* @__PURE__ */ Symbol(), Rt = /* @__PURE__ */ new WeakMap();
+const bt = globalThis, Dt = bt.ShadowRoot && (bt.ShadyCSS === void 0 || bt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Vt = /* @__PURE__ */ Symbol(), Rt = /* @__PURE__ */ new WeakMap();
 let Wt = class {
   constructor(t, a, s) {
-    if (this._$cssResult$ = !0, s !== Xt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== Vt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = a;
   }
   get styleSheet() {
@@ -23,10 +23,10 @@ let Wt = class {
     return this.cssText;
   }
 };
-const Ht = (r) => new Wt(typeof r == "string" ? r : r + "", void 0, Xt), Kt = (r, t) => {
+const Ht = (r) => new Wt(typeof r == "string" ? r : r + "", void 0, Vt), Kt = (r, t) => {
   if (Dt) r.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
   else for (const a of t) {
-    const s = document.createElement("style"), e = ft.litNonce;
+    const s = document.createElement("style"), e = bt.litNonce;
     e !== void 0 && s.setAttribute("nonce", e), s.textContent = a.cssText, r.appendChild(s);
   }
 }, Ft = Dt ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
@@ -34,7 +34,7 @@ const Ht = (r) => new Wt(typeof r == "string" ? r : r + "", void 0, Xt), Kt = (r
   for (const s of t.cssRules) a += s.cssText;
   return Ht(a);
 })(r) : r;
-const { is: Gt, defineProperty: Jt, getOwnPropertyDescriptor: Zt, getOwnPropertyNames: Qt, getOwnPropertySymbols: tr, getPrototypeOf: rr } = Object, Ot = globalThis, Bt = Ot.trustedTypes, er = Bt ? Bt.emptyScript : "", ar = Ot.reactiveElementPolyfillSupport, at = (r, t) => r, bt = { toAttribute(r, t) {
+const { is: Gt, defineProperty: Jt, getOwnPropertyDescriptor: Zt, getOwnPropertyNames: Qt, getOwnPropertySymbols: tr, getPrototypeOf: rr } = Object, Ot = globalThis, Bt = Ot.trustedTypes, er = Bt ? Bt.emptyScript : "", ar = Ot.reactiveElementPolyfillSupport, at = (r, t) => r, ft = { toAttribute(r, t) {
   switch (t) {
     case Boolean:
       r = r ? er : null;
@@ -62,7 +62,7 @@ const { is: Gt, defineProperty: Jt, getOwnPropertyDescriptor: Zt, getOwnProperty
       }
   }
   return a;
-} }, Et = (r, t) => !Gt(r, t), Yt = { attribute: !0, type: String, converter: bt, reflect: !1, useDefault: !1, hasChanged: Et };
+} }, Et = (r, t) => !Gt(r, t), Yt = { attribute: !0, type: String, converter: ft, reflect: !1, useDefault: !1, hasChanged: Et };
 Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Ot.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 class et extends HTMLElement {
   static addInitializer(t) {
@@ -161,14 +161,14 @@ class et extends HTMLElement {
   _$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 : bt).toAttribute(a, s.type);
+      const i = (s.converter?.toAttribute !== void 0 ? s.converter : ft).toAttribute(a, s.type);
       this._$Em = t, i == null ? this.removeAttribute(e) : this.setAttribute(e, i), 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 : bt;
+      const i = s.getPropertyOptions(e), o = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : ft;
       this._$Em = e;
       const h = o.fromAttribute(a, i.type);
       this[e] = h ?? this._$Ej?.get(e) ?? h, this._$Em = null;
@@ -246,7 +246,7 @@ class et extends HTMLElement {
   }
 }
 et.elementStyles = [], et.shadowRootOptions = { mode: "open" }, et[at("elementProperties")] = /* @__PURE__ */ new Map(), et[at("finalized")] = /* @__PURE__ */ new Map(), ar?.({ ReactiveElement: et }), (Ot.reactiveElementVersions ??= []).push("2.1.2");
-const sr = { attribute: !0, type: String, converter: bt, reflect: !1, hasChanged: Et }, ir = (r = sr, t, a) => {
+const sr = { attribute: !0, type: String, converter: ft, reflect: !1, hasChanged: Et }, ir = (r = sr, 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") {
@@ -273,7 +273,7 @@ function n(r) {
     return e.constructor.createProperty(i, s), o ? Object.getOwnPropertyDescriptor(e, i) : void 0;
   })(r, t, a);
 }
-function g(r) {
+function v(r) {
   return n({ ...r, state: !0, attribute: !1 });
 }
 const or = (r, t, a) => (a.configurable = !0, a.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(r, t, a), a);
@@ -569,7 +569,7 @@ F([
 w = F([
   d("crt-button")
 ], w);
-var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, Vt = (r, t, a, s) => {
+var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, Xt = (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 && dr(t, a, e), e;
@@ -623,16 +623,16 @@ yt.styles = l`
       --badge-border: 1px solid var(--crt-info);
     }
   `;
-Vt([
+Xt([
   n()
 ], yt.prototype, "variant", 2);
-yt = Vt([
+yt = Xt([
   d("crt-badge")
 ], yt);
-var gr = Object.defineProperty, vr = Object.getOwnPropertyDescriptor, Pt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? vr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
+var vr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, Pt = (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 && gr(t, a, e), e;
+  return s && e && vr(t, a, e), e;
 };
 let xt = class extends p {
   constructor() {
@@ -748,7 +748,7 @@ let it = class extends p {
         ${this.tabs.map(
       (r, t) => c`
             <div class="tab-pane ${t === this.activeTab ? "active" : ""}">
-              ${r.label.toLowerCase() === "code" ? c`<pre><code>${r.content}</code></pre>` : c`<div>${fr(r.content)}</div>`}
+              ${r.label.toLowerCase() === "code" ? c`<pre><code>${r.content}</code></pre>` : c`<div>${br(r.content)}</div>`}
             </div>
           `
     )}
@@ -824,7 +824,7 @@ it.styles = l`
     }
   `;
 At([
-  g()
+  v()
 ], it.prototype, "activeTab", 2);
 At([
   n({ type: Array })
@@ -832,16 +832,16 @@ At([
 it = At([
   d("crt-tabs")
 ], it);
-function fr(r) {
+function br(r) {
   const t = document.createElement("div");
   return t.innerHTML = r, t;
 }
-var br = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, $ = (r, t, a, s) => {
+var fr = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, k = (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 && br(t, a, e), e;
+  return s && e && fr(t, a, e), e;
 };
-let Y = class extends p {
+let B = class extends p {
   constructor() {
     super(...arguments), this.type = "text", this.placeholder = "", this.value = "", this.disabled = !1;
   }
@@ -859,7 +859,7 @@ let Y = class extends p {
     `;
   }
 };
-Y.styles = l`
+B.styles = l`
     :host {
       display: block;
     }
@@ -905,22 +905,22 @@ Y.styles = l`
       padding-right: var(--crt-spacing-lg);
     }
   `;
-$([
+k([
   n()
-], Y.prototype, "type", 2);
-$([
+], B.prototype, "type", 2);
+k([
   n()
-], Y.prototype, "placeholder", 2);
-$([
+], B.prototype, "placeholder", 2);
+k([
   n()
-], Y.prototype, "value", 2);
-$([
+], B.prototype, "value", 2);
+k([
   n()
-], Y.prototype, "disabled", 2);
-Y = $([
+], B.prototype, "disabled", 2);
+B = k([
   d("crt-input")
-], Y);
-let X = class extends p {
+], B);
+let Y = class extends p {
   constructor() {
     super(...arguments), this.placeholder = "", this.value = "", this.disabled = !1, this.rows = 4;
   }
@@ -939,7 +939,7 @@ ${this.value}</textarea
     `;
   }
 };
-X.styles = l`
+Y.styles = l`
     :host {
       display: block;
     }
@@ -981,21 +981,21 @@ X.styles = l`
       border-style: dashed;
     }
   `;
-$([
+k([
   n()
-], X.prototype, "placeholder", 2);
-$([
+], Y.prototype, "placeholder", 2);
+k([
   n()
-], X.prototype, "value", 2);
-$([
+], Y.prototype, "value", 2);
+k([
   n()
-], X.prototype, "disabled", 2);
-$([
+], Y.prototype, "disabled", 2);
+k([
   n()
-], X.prototype, "rows", 2);
-X = $([
+], Y.prototype, "rows", 2);
+Y = k([
   d("crt-textarea")
-], X);
+], Y);
 var xr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, tt = (r, t, a, s) => {
   for (var e = s > 1 ? void 0 : s ? wr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
     (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
@@ -1059,25 +1059,14 @@ tt([
 I = tt([
   d("crt-link")
 ], I);
-var kr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, B = (r, t, a, s) => {
+var kr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, H = (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 && kr(t, a, e), e;
 };
-let k = class extends p {
+let P = class extends p {
   constructor() {
-    super(...arguments), this.accept = "", this.multiple = !0, this.name = "", this.maxSize = 10485760, this.maxFiles = 10, this.files = [], this.isDragging = !1, this._preventDefaults = (r) => {
-      r.preventDefault(), r.stopPropagation();
-    }, this._handleDragEnter = () => {
-      this.isDragging = !0;
-    }, this._handleDragLeave = (r) => {
-      const t = r.currentTarget.getBoundingClientRect();
-      (r.clientX < t.left || r.clientX >= t.right || r.clientY < t.top || r.clientY >= t.bottom) && (this.isDragging = !1);
-    }, this._handleDrop = (r) => {
-      this.isDragging = !1;
-      const t = r.dataTransfer?.files;
-      t && this._addFiles(Array.from(t));
-    }, this._handleFileSelect = (r) => {
+    super(...arguments), this.accept = "", this.multiple = !0, this.name = "", this.maxSize = 10485760, this.maxFiles = 10, this.files = [], this._handleFileSelect = (r) => {
       const t = r.target;
       t.files && (this._addFiles(Array.from(t.files)), t.value = "");
     }, this._handleUploadClick = () => {
@@ -1093,14 +1082,10 @@ let k = class extends p {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), ["dragenter", "dragover", "dragleave", "drop"].forEach((r) => {
-      window.addEventListener(r, this._preventDefaults, !1);
-    });
+    super.connectedCallback();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), ["dragenter", "dragover", "dragleave", "drop"].forEach((r) => {
-      window.removeEventListener(r, this._preventDefaults, !1);
-    });
+    super.disconnectedCallback();
   }
   _generateId() {
     return Math.random().toString(36).substring(2, 9);
@@ -1110,8 +1095,8 @@ let k = class extends p {
       if (e.size > this.maxSize)
         return console.warn(`File ${e.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))
+        const i = this.accept.split(",").map((O) => O.trim()), o = e.type, h = "." + e.name.split(".").pop()?.toLowerCase();
+        if (!i.some((O) => O.startsWith(".") ? h === O.toLowerCase() : O.endsWith("/*") ? o.startsWith(O.replace("/*", "/")) : o === O))
           return console.warn(`File ${e.name} type not accepted`), !1;
       }
       return !0;
@@ -1154,15 +1139,8 @@ let k = class extends p {
           </span>
         </div>
 
-        <!-- Drop Zone -->
-        <div 
-          class="drop-zone ${this.isDragging ? "dragging" : ""}"
-          @click="${this._handleUploadClick}"
-          @dragenter="${this._handleDragEnter}"
-          @dragover="${this._handleDragEnter}"
-          @dragleave="${this._handleDragLeave}"
-          @drop="${this._handleDrop}"
-        >
+        <!-- File input (click only) -->
+        <div>
           <input
             class="upload-input"
             type="file"
@@ -1171,13 +1149,6 @@ let k = class extends p {
             name="${this.name}"
             @change="${this._handleFileSelect}"
           />
-          <span class="drop-zone-icon">${this.isDragging ? "[+]" : "[^]"}</span>
-          <span class="drop-zone-text">
-            ${this.isDragging ? "DROP FILES HERE" : "DRAG & DROP FILES OR CLICK TO BROWSE"}
-          </span>
-          <span class="drop-zone-hint">
-            MAX ${this._formatFileSize(this.maxSize)} PER FILE | ${this.accept || "ALL FILES"}
-          </span>
         </div>
 
         <!-- File List -->
@@ -1234,7 +1205,7 @@ let k = class extends p {
     `;
   }
 };
-k.styles = l`
+P.styles = l`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -1508,31 +1479,28 @@ k.styles = l`
       transition: width 0.3s ease;
     }
   `;
-B([
+H([
   n({ type: String })
-], k.prototype, "accept", 2);
-B([
+], P.prototype, "accept", 2);
+H([
   n({ type: Boolean })
-], k.prototype, "multiple", 2);
-B([
+], P.prototype, "multiple", 2);
+H([
   n({ type: String })
-], k.prototype, "name", 2);
-B([
+], P.prototype, "name", 2);
+H([
   n({ type: Number })
-], k.prototype, "maxSize", 2);
-B([
+], P.prototype, "maxSize", 2);
+H([
   n({ type: Number })
-], k.prototype, "maxFiles", 2);
-B([
-  g()
-], k.prototype, "files", 2);
-B([
-  g()
-], k.prototype, "isDragging", 2);
-k = B([
+], P.prototype, "maxFiles", 2);
+H([
+  v()
+], P.prototype, "files", 2);
+P = H([
   d("crt-file-upload")
-], k);
-var _r = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, _ = (r, t, a, s) => {
+], P);
+var _r = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, $ = (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 = (s ? o(t, a, e) : o(e)) || e);
   return s && e && _r(t, a, e), e;
@@ -1628,10 +1596,10 @@ let m = class extends p {
       `);
     }
     for (let h = 1; h <= a; h++) {
-      const u = new Date(r, t, h), P = this._isToday(u), qt = this._isSelected(u);
+      const u = new Date(r, t, h), O = this._isToday(u), qt = this._isSelected(u);
       i.push(c`
         <div 
-          class="day ${P ? "today" : ""} ${qt ? "selected" : ""}"
+          class="day ${O ? "today" : ""} ${qt ? "selected" : ""}"
           @click="${() => this._selectDate(u)}"
         >
           ${h}
@@ -1901,34 +1869,34 @@ m.styles = l`
       color: var(--crt-bg-dark);
     }
   `;
-_([
+$([
   n({ type: String })
 ], m.prototype, "value", 2);
-_([
+$([
   n({ type: String })
 ], m.prototype, "placeholder", 2);
-_([
+$([
   n({ type: String })
 ], m.prototype, "format", 2);
-_([
+$([
   n({ type: String })
 ], m.prototype, "min", 2);
-_([
+$([
   n({ type: String })
 ], m.prototype, "max", 2);
-_([
+$([
   n({ type: Boolean })
 ], m.prototype, "disabled", 2);
-_([
-  g()
+$([
+  v()
 ], m.prototype, "_isOpen", 2);
-_([
-  g()
+$([
+  v()
 ], m.prototype, "_viewDate", 2);
-_([
-  g()
+$([
+  v()
 ], m.prototype, "_selectedDate", 2);
-m = _([
+m = $([
   d("crt-calendar")
 ], m);
 var Or = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, K = (r, t, a, s) => {
@@ -2190,12 +2158,12 @@ K([
   n({ type: Array })
 ], C.prototype, "options", 2);
 K([
-  g()
+  v()
 ], C.prototype, "_isOpen", 2);
 C = K([
   d("crt-select")
 ], C);
-var Cr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, v = (r, t, a, s) => {
+var Cr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, g = (r, t, a, s) => {
   for (var e = s > 1 ? void 0 : s ? Sr(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;
@@ -2310,22 +2278,22 @@ L.styles = l`
       transform: scale(1);
     }
   `;
-v([
+g([
   n({ type: Boolean, reflect: !0 })
 ], L.prototype, "checked", 2);
-v([
+g([
   n({ type: Boolean, reflect: !0 })
 ], L.prototype, "disabled", 2);
-v([
+g([
   n({ type: Boolean })
 ], L.prototype, "indeterminate", 2);
-v([
+g([
   n({ type: String })
 ], L.prototype, "label", 2);
-v([
+g([
   n({ type: String })
 ], L.prototype, "value", 2);
-L = v([
+L = g([
   d("crt-checkbox")
 ], L);
 let U = class extends p {
@@ -2431,22 +2399,22 @@ U.styles = l`
       user-select: none;
     }
   `;
-v([
+g([
   n({ type: Boolean, reflect: !0 })
 ], U.prototype, "checked", 2);
-v([
+g([
   n({ type: Boolean, reflect: !0 })
 ], U.prototype, "disabled", 2);
-v([
+g([
   n({ type: String })
 ], U.prototype, "label", 2);
-v([
+g([
   n({ type: String })
 ], U.prototype, "value", 2);
-v([
+g([
   n({ type: String })
 ], U.prototype, "name", 2);
-U = v([
+U = g([
   d("crt-radio")
 ], U);
 let Z = class extends p {
@@ -2483,24 +2451,24 @@ Z.styles = l`
       gap: var(--crt-spacing-lg);
     }
   `;
-v([
+g([
   n({ type: String })
 ], Z.prototype, "name", 2);
-v([
+g([
   n({ type: String })
 ], Z.prototype, "value", 2);
-v([
+g([
   n({ type: Boolean, reflect: !0 })
 ], Z.prototype, "horizontal", 2);
-Z = v([
+Z = g([
   d("crt-radio-group")
 ], Z);
-var Dr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, z = (r, t, a, s) => {
+var Dr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, _ = (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 && Dr(t, a, e), e;
 };
-let f = class extends p {
+let b = 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;
   }
@@ -2526,7 +2494,7 @@ let f = class extends p {
     `;
   }
 };
-f.styles = l`
+b.styles = l`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2650,36 +2618,36 @@ f.styles = l`
       );
     }
   `;
-z([
+_([
   n({ type: Number })
-], f.prototype, "value", 2);
-z([
+], b.prototype, "value", 2);
+_([
   n({ type: Number })
-], f.prototype, "max", 2);
-z([
+], b.prototype, "max", 2);
+_([
   n({ type: String })
-], f.prototype, "label", 2);
-z([
+], b.prototype, "label", 2);
+_([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "animated", 2);
-z([
+], b.prototype, "animated", 2);
+_([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "indeterminate", 2);
-z([
+], b.prototype, "indeterminate", 2);
+_([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "segmented", 2);
-z([
+], b.prototype, "segmented", 2);
+_([
   n({ type: String, reflect: !0 })
-], f.prototype, "size", 2);
-z([
+], b.prototype, "size", 2);
+_([
   n({ type: String, reflect: !0 })
-], f.prototype, "variant", 2);
-z([
+], b.prototype, "variant", 2);
+_([
   n({ type: Boolean })
-], f.prototype, "showValue", 2);
-f = z([
+], b.prototype, "showValue", 2);
+b = _([
   d("crt-progress")
-], f);
+], b);
 var Tr = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, ht = (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);
@@ -2831,7 +2799,7 @@ ht([
   n({ type: Number })
 ], V.prototype, "delay", 2);
 ht([
-  g()
+  v()
 ], V.prototype, "_visible", 2);
 V = ht([
   d("crt-tooltip")
@@ -2917,12 +2885,12 @@ Mt([
 ot = Mt([
   d("crt-breadcrumb")
 ], ot);
-var Ir = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, gt = (r, t, a, s) => {
+var Ir = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, vt = (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 && Ir(t, a, e), e;
 };
-let q = class extends p {
+let X = class extends p {
   constructor() {
     super(...arguments), this.current = 1, this.total = 1, this.siblings = 1, this.showInfo = !0;
   }
@@ -2981,7 +2949,7 @@ let q = class extends p {
     `;
   }
 };
-q.styles = l`
+X.styles = l`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3036,27 +3004,27 @@ q.styles = l`
       margin-left: var(--crt-spacing-md);
     }
   `;
-gt([
+vt([
   n({ type: Number })
-], q.prototype, "current", 2);
-gt([
+], X.prototype, "current", 2);
+vt([
   n({ type: Number })
-], q.prototype, "total", 2);
-gt([
+], X.prototype, "total", 2);
+vt([
   n({ type: Number })
-], q.prototype, "siblings", 2);
-gt([
+], X.prototype, "siblings", 2);
+vt([
   n({ type: Boolean })
-], q.prototype, "showInfo", 2);
-q = gt([
+], X.prototype, "showInfo", 2);
+X = vt([
   d("crt-pagination")
-], q);
+], X);
 var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, T = (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;
 };
-let b = class extends p {
+let f = 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 = "";
   }
@@ -3109,7 +3077,7 @@ let b = class extends p {
     `;
   }
 };
-b.styles = l`
+f.styles = l`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3237,31 +3205,31 @@ b.styles = l`
   `;
 T([
   n({ type: Number })
-], b.prototype, "value", 2);
+], f.prototype, "value", 2);
 T([
   n({ type: Number })
-], b.prototype, "min", 2);
+], f.prototype, "min", 2);
 T([
   n({ type: Number })
-], b.prototype, "max", 2);
+], f.prototype, "max", 2);
 T([
   n({ type: Number })
-], b.prototype, "step", 2);
+], f.prototype, "step", 2);
 T([
   n({ type: String })
-], b.prototype, "label", 2);
+], f.prototype, "label", 2);
 T([
   n({ type: Boolean, reflect: !0 })
-], b.prototype, "disabled", 2);
+], f.prototype, "disabled", 2);
 T([
   n({ type: Boolean })
-], b.prototype, "showMarks", 2);
+], f.prototype, "showMarks", 2);
 T([
   n({ type: String })
-], b.prototype, "unit", 2);
-b = T([
+], f.prototype, "unit", 2);
+f = T([
   d("crt-slider")
-], b);
+], f);
 var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, G = (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);
@@ -3673,10 +3641,10 @@ j([
 kt = j([
   d("crt-avatar-group")
 ], kt);
-var Xr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, O = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? Vr(t, a) : t, i = r.length - 1, o; i >= 0; i--)
+var Vr = Object.defineProperty, Xr = Object.getOwnPropertyDescriptor, z = (r, t, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? Xr(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;
+  return s && e && Vr(t, a, e), e;
 };
 let N = class extends p {
   constructor() {
@@ -3806,22 +3774,22 @@ N.styles = l`
       pointer-events: none;
     }
   `;
-O([
+z([
   n({ type: String, reflect: !0 })
 ], N.prototype, "variant", 2);
-O([
+z([
   n({ type: String, reflect: !0 })
 ], N.prototype, "animation", 2);
-O([
+z([
   n({ type: String })
 ], N.prototype, "width", 2);
-O([
+z([
   n({ type: String })
 ], N.prototype, "height", 2);
-O([
+z([
   n({ type: Boolean, reflect: !0 })
 ], N.prototype, "effect", 2);
-N = O([
+N = z([
   d("crt-skeleton")
 ], N);
 let $t = class extends p {
@@ -3868,10 +3836,10 @@ $t.styles = l`
       }
     }
   `;
-O([
+z([
   n({ type: Number })
 ], $t.prototype, "lines", 2);
-$t = O([
+$t = z([
   d("crt-skeleton-text")
 ], $t);
 let _t = class extends p {
@@ -3941,10 +3909,10 @@ _t.styles = l`
       }
     }
   `;
-O([
+z([
   n({ type: Boolean })
 ], _t.prototype, "hideImage", 2);
-_t = O([
+_t = z([
   d("crt-skeleton-card")
 ], _t);
 var qr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, A = (r, t, a, s) => {
@@ -4847,10 +4815,10 @@ rt([
   n()
 ], R.prototype, "code", 2);
 rt([
-  g()
+  v()
 ], R.prototype, "activeTab", 2);
 rt([
-  g()
+  v()
 ], R.prototype, "copied", 2);
 R = rt([
   d("crt-code-example")
@@ -5289,12 +5257,12 @@ J([
   n({ type: Number })
 ], E.prototype, "duration", 2);
 J([
-  g()
+  v()
 ], E.prototype, "_toasts", 2);
 E = J([
   d("crt-toast")
 ], E);
-var ce = Object.defineProperty, le = Object.getOwnPropertyDescriptor, vt = (r, t, a, s) => {
+var ce = Object.defineProperty, le = Object.getOwnPropertyDescriptor, gt = (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 && ce(t, a, e), e;
@@ -5399,13 +5367,13 @@ pt.styles = l`
       color: var(--crt-text-secondary);
     }
   `;
-vt([
+gt([
   n({ type: String })
 ], pt.prototype, "header", 2);
-vt([
+gt([
   n({ type: Boolean, reflect: !0 })
 ], pt.prototype, "open", 2);
-pt = vt([
+pt = gt([
   d("crt-accordion-item")
 ], pt);
 let zt = class extends p {
@@ -5431,10 +5399,10 @@ zt.styles = l`
       display: block;
     }
   `;
-vt([
+gt([
   n({ type: Boolean })
 ], zt.prototype, "multiple", 2);
-zt = vt([
+zt = gt([
   d("crt-accordion")
 ], zt);
 var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, ut = (r, t, a, s) => {
@@ -5442,7 +5410,7 @@ var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, ut = (r, t
     (o = r[i]) && (e = (s ? o(t, a, e) : o(e)) || e);
   return s && e && pe(t, a, e), e;
 };
-let W = class extends p {
+let q = 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;
@@ -5495,7 +5463,7 @@ let W = class extends p {
     `;
   }
 };
-W.styles = l`
+q.styles = l`
     :host {
       display: block;
     }
@@ -5563,21 +5531,21 @@ W.styles = l`
   `;
 ut([
   n({ type: Number })
-], W.prototype, "bars", 2);
+], q.prototype, "bars", 2);
 ut([
   n({ type: Number })
-], W.prototype, "mode", 2);
+], q.prototype, "mode", 2);
 ut([
-  g()
-], W.prototype, "barHeights", 2);
+  v()
+], q.prototype, "barHeights", 2);
 ut([
-  g()
-], W.prototype, "isActive", 2);
-W = ut([
+  v()
+], q.prototype, "isActive", 2);
+q = ut([
   d("crt-visualizer")
-], W);
-var he = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, Nt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? ge(t, a) : t, i = r.length - 1, o; i >= 0; i--)
+], q);
+var he = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, Nt = (r, t, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? ve(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 && he(t, a, e), e;
 };
@@ -5800,10 +5768,10 @@ Nt([
 dt = Nt([
   d("crt-playlist")
 ], dt);
-var ve = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, M = (r, t, a, s) => {
+var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, M = (r, t, a, s) => {
   for (var e = s > 1 ? void 0 : s ? ue(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;
+  return s && e && ge(t, a, e), e;
 };
 let x = class extends p {
   constructor() {
@@ -5839,13 +5807,18 @@ let x = class extends p {
   }
   loadTrack(r) {
     if (r < 0 || r >= this.tracks.length) return;
-    const t = this.isPlaying;
-    this.isPlaying && (this.audio?.pause(), this.visualizer?.stop()), this.currentIndex = r, this.currentTime = 0, this.audio && (this.audio.src = this.tracks[r].url, this.audio.load()), t && this.audio?.addEventListener("canplay", () => this.play(), { once: !0 }), this.dispatchEvent(new CustomEvent("track-change", {
+    const t = this.tracks[r];
+    if (!t?.url) {
+      this.currentIndex = r;
+      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] }
     }));
   }
   play() {
-    !this.audio?.src || this.tracks.length === 0 || (this.visualizer?.connectAudio(this.audio), this.audio.play(), this.isPlaying = !0, this.visualizer?.start());
+    !this.tracks[this.currentIndex]?.url || this.tracks.length === 0 || this.audio?.src && (this.visualizer?.connectAudio(this.audio), this.audio.play(), this.isPlaying = !0, this.visualizer?.start());
   }
   pause() {
     this.audio?.pause(), this.isPlaying = !1, this.visualizer?.stop();
@@ -6076,16 +6049,16 @@ M([
   n({ type: Number })
 ], x.prototype, "currentIndex", 2);
 M([
-  g()
+  v()
 ], x.prototype, "isPlaying", 2);
 M([
-  g()
+  v()
 ], x.prototype, "currentTime", 2);
 M([
-  g()
+  v()
 ], x.prototype, "duration", 2);
 M([
-  g()
+  v()
 ], x.prototype, "volume", 2);
 M([
   Tt("audio")
@@ -6096,12 +6069,12 @@ M([
 x = M([
   d("crt-music-player")
 ], x);
-var me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, mt = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? fe(t, a) : t, i = r.length - 1, o; i >= 0; i--)
+var me = Object.defineProperty, be = Object.getOwnPropertyDescriptor, mt = (r, t, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? be(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 && me(t, a, e), e;
 };
-let H = class extends p {
+let W = class extends p {
   constructor() {
     super(...arguments), 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) => {
@@ -6189,7 +6162,7 @@ let H = class extends p {
     `;
   }
 };
-H.styles = l`
+W.styles = l`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6263,20 +6236,20 @@ H.styles = l`
     }
   `;
 mt([
-  g()
-], H.prototype, "tracks", 2);
+  v()
+], W.prototype, "tracks", 2);
 mt([
-  g()
-], H.prototype, "currentIndex", 2);
+  v()
+], W.prototype, "currentIndex", 2);
 mt([
-  g()
-], H.prototype, "showUploadModal", 2);
+  v()
+], W.prototype, "showUploadModal", 2);
 mt([
   Tt("crt-file-upload")
-], H.prototype, "fileUpload", 2);
-H = mt([
+], W.prototype, "fileUpload", 2);
+W = mt([
   d("crt-music-station")
-], H);
+], W);
 export {
   zt as Accordion,
   pt as AccordionItem,
@@ -6290,32 +6263,32 @@ export {
   St as Card,
   L as Checkbox,
   R as CodeExample,
-  k as FileUpload,
+  P as FileUpload,
   lt as Grid,
   xt as Heading,
   st as Icon,
-  Y as Input,
+  B as Input,
   I as Link,
   Q as Modal,
   x as MusicPlayer,
-  H as MusicStation,
-  q as Pagination,
+  W as MusicStation,
+  X as Pagination,
   dt as Playlist,
-  f as Progress,
+  b as Progress,
   U as Radio,
   Z as RadioGroup,
   C as Select,
   N as Skeleton,
   _t as SkeletonCard,
   $t as SkeletonText,
-  b as Slider,
+  f as Slider,
   nt as Spinner,
   ct as Table,
   it as Tabs,
   wt as Text,
-  X as Textarea,
+  Y as Textarea,
   E as Toast,
   S as Toggle,
   V as Tooltip,
-  W as Visualizer
+  q as Visualizer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patimweb/crtstyleguide",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "CRT Style Guide - Retro Lit component library",
   "type": "module",
   "main": "dist/lib/index.js",