@patimweb/crtstyleguide 1.0.11 → 1.0.13

package/dist/lib/index.js

@@ -5,7 +5,7 @@ const v = (e) => (t, a) => {
   }) : customElements.define(e, t);
 };
 const Tt = globalThis, Jt = Tt.ShadowRoot && (Tt.ShadyCSS === void 0 || Tt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ke = /* @__PURE__ */ Symbol(), de = /* @__PURE__ */ new WeakMap();
-let Pe = class {
+let Oe = class {
   constructor(t, a, s) {
     if (this._$cssResult$ = !0, s !== ke) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = a;
@@ -23,7 +23,7 @@ let Pe = class {
     return this.cssText;
   }
 };
-const Ae = (e) => new Pe(typeof e == "string" ? e : e + "", void 0, ke), Se = (e, t) => {
+const Ae = (e) => new Oe(typeof e == "string" ? e : e + "", void 0, ke), Se = (e, t) => {
   if (Jt) e.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
   else for (const a of t) {
     const s = document.createElement("style"), r = Tt.litNonce;
@@ -34,7 +34,7 @@ const Ae = (e) => new Pe(typeof e == "string" ? e : e + "", void 0, ke), Se = (e
   for (const s of t.cssRules) a += s.cssText;
   return Ae(a);
 })(e) : e;
-const { is: Ee, defineProperty: De, getOwnPropertyDescriptor: Me, getOwnPropertyNames: Te, getOwnPropertySymbols: je, getPrototypeOf: Le } = Object, Vt = globalThis, ve = Vt.trustedTypes, Ie = ve ? ve.emptyScript : "", Be = Vt.reactiveElementPolyfillSupport, ft = (e, t) => e, jt = { toAttribute(e, t) {
+const { is: Ee, defineProperty: Me, getOwnPropertyDescriptor: De, getOwnPropertyNames: Te, getOwnPropertySymbols: je, getPrototypeOf: Le } = Object, Vt = globalThis, ve = Vt.trustedTypes, Ie = ve ? ve.emptyScript : "", Be = Vt.reactiveElementPolyfillSupport, bt = (e, t) => e, jt = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? Ie : null;
@@ -62,23 +62,23 @@ const { is: Ee, defineProperty: De, getOwnPropertyDescriptor: Me, getOwnProperty
       }
   }
   return a;
-} }, te = (e, t) => !Ee(e, t), ge = { attribute: !0, type: String, converter: jt, reflect: !1, useDefault: !1, hasChanged: te };
+} }, te = (e, t) => !Ee(e, t), ue = { attribute: !0, type: String, converter: jt, reflect: !1, useDefault: !1, hasChanged: te };
 Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Vt.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-let ut = class extends HTMLElement {
+let mt = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, a = ge) {
+  static createProperty(t, a = ue) {
     if (a.state && (a.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((a = Object.create(a)).wrapped = !0), this.elementProperties.set(t, a), !a.noAccessor) {
       const s = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(t, s, a);
-      r !== void 0 && De(this.prototype, t, r);
+      r !== void 0 && Me(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, a, s) {
-    const { get: r, set: i } = Me(this.prototype, t) ?? { get() {
+    const { get: r, set: i } = De(this.prototype, t) ?? { get() {
       return this[a];
     }, set(o) {
       this[a] = o;
@@ -89,16 +89,16 @@ let ut = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? ge;
+    return this.elementProperties.get(t) ?? ue;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(ft("elementProperties"))) return;
+    if (this.hasOwnProperty(bt("elementProperties"))) return;
     const t = Le(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(ft("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ft("properties"))) {
+    if (this.hasOwnProperty(bt("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(bt("properties"))) {
       const a = this.properties, s = [...Te(a), ...je(a)];
       for (const r of s) this.createProperty(r, a[r]);
     }
@@ -245,7 +245,7 @@ let ut = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-ut.elementStyles = [], ut.shadowRootOptions = { mode: "open" }, ut[ft("elementProperties")] = /* @__PURE__ */ new Map(), ut[ft("finalized")] = /* @__PURE__ */ new Map(), Be?.({ ReactiveElement: ut }), (Vt.reactiveElementVersions ??= []).push("2.1.2");
+mt.elementStyles = [], mt.shadowRootOptions = { mode: "open" }, mt[bt("elementProperties")] = /* @__PURE__ */ new Map(), mt[bt("finalized")] = /* @__PURE__ */ new Map(), Be?.({ ReactiveElement: mt }), (Vt.reactiveElementVersions ??= []).push("2.1.2");
 const Ne = { attribute: !0, type: String, converter: jt, reflect: !1, hasChanged: te }, Ue = (e = Ne, t, a) => {
   const { kind: s, metadata: r } = a;
   let i = globalThis.litPropertyMetadata.get(r);
@@ -285,67 +285,67 @@ function ee(e, t) {
     } });
   };
 }
-const re = globalThis, ue = (e) => e, Lt = re.trustedTypes, me = Lt ? Lt.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, $e = "$lit$", R = `lit$${Math.random().toFixed(9).slice(2)}$`, _e = "?" + R, Fe = `<${_e}>`, Z = document, It = () => Z.createComment(""), bt = (e) => e === null || typeof e != "object" && typeof e != "function", ae = Array.isArray, He = (e) => ae(e) || typeof e?.[Symbol.iterator] == "function", Gt = `[ 	
-\f\r]`, mt = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, fe = /-->/g, be = />/g, K = RegExp(`>|${Gt}(?:([^\\s"'>=/]+)(${Gt}*=${Gt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, xe = /"/g, ze = /^(?:script|style|textarea|title)$/i, lt = /* @__PURE__ */ Symbol.for("lit-noChange"), f = /* @__PURE__ */ Symbol.for("lit-nothing"), we = /* @__PURE__ */ new WeakMap(), G = Z.createTreeWalker(Z, 129);
+const re = globalThis, ge = (e) => e, Lt = re.trustedTypes, me = Lt ? Lt.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, $e = "$lit$", F = `lit$${Math.random().toFixed(9).slice(2)}$`, _e = "?" + F, Fe = `<${_e}>`, Q = document, It = () => Q.createComment(""), yt = (e) => e === null || typeof e != "object" && typeof e != "function", ae = Array.isArray, He = (e) => ae(e) || typeof e?.[Symbol.iterator] == "function", Gt = `[ 	
+\f\r]`, ft = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, fe = /-->/g, be = />/g, G = RegExp(`>|${Gt}(?:([^\\s"'>=/]+)(${Gt}*=${Gt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, xe = /"/g, ze = /^(?:script|style|textarea|title)$/i, ct = /* @__PURE__ */ Symbol.for("lit-noChange"), f = /* @__PURE__ */ Symbol.for("lit-nothing"), we = /* @__PURE__ */ new WeakMap(), Z = Q.createTreeWalker(Q, 129);
 function Ce(e, t) {
   if (!ae(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return me !== void 0 ? me.createHTML(t) : t;
 }
 const Ye = (e, t) => {
   const a = e.length - 1, s = [];
-  let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = mt;
+  let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = ft;
   for (let c = 0; c < a; c++) {
     const p = e[c];
-    let g, b, u = -1, S = 0;
-    for (; S < p.length && (o.lastIndex = S, b = o.exec(p), b !== null); ) S = o.lastIndex, o === mt ? b[1] === "!--" ? o = fe : b[1] !== void 0 ? o = be : b[2] !== void 0 ? (ze.test(b[2]) && (r = RegExp("</" + b[2], "g")), o = K) : b[3] !== void 0 && (o = K) : o === K ? b[0] === ">" ? (o = r ?? mt, u = -1) : b[1] === void 0 ? u = -2 : (u = o.lastIndex - b[2].length, g = b[1], o = b[3] === void 0 ? K : b[3] === '"' ? xe : ye) : o === xe || o === ye ? o = K : o === fe || o === be ? o = mt : (o = K, r = void 0);
-    const U = o === K && e[c + 1].startsWith("/>") ? " " : "";
-    i += o === mt ? p + Fe : u >= 0 ? (s.push(g), p.slice(0, u) + $e + p.slice(u) + R + U) : p + R + (u === -2 ? c : U);
+    let u, b, g = -1, E = 0;
+    for (; E < p.length && (o.lastIndex = E, b = o.exec(p), b !== null); ) E = o.lastIndex, o === ft ? b[1] === "!--" ? o = fe : b[1] !== void 0 ? o = be : b[2] !== void 0 ? (ze.test(b[2]) && (r = RegExp("</" + b[2], "g")), o = G) : b[3] !== void 0 && (o = G) : o === G ? b[0] === ">" ? (o = r ?? ft, g = -1) : b[1] === void 0 ? g = -2 : (g = o.lastIndex - b[2].length, u = b[1], o = b[3] === void 0 ? G : b[3] === '"' ? xe : ye) : o === xe || o === ye ? o = G : o === fe || o === be ? o = ft : (o = G, r = void 0);
+    const R = o === G && e[c + 1].startsWith("/>") ? " " : "";
+    i += o === ft ? p + Fe : g >= 0 ? (s.push(u), p.slice(0, g) + $e + p.slice(g) + F + R) : p + F + (g === -2 ? c : R);
   }
   return [Ce(e, i + (e[a] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
-class yt {
+class xt {
   constructor({ strings: t, _$litType$: a }, s) {
     let r;
     this.parts = [];
     let i = 0, o = 0;
-    const c = t.length - 1, p = this.parts, [g, b] = Ye(t, a);
-    if (this.el = yt.createElement(g, s), G.currentNode = this.el.content, a === 2 || a === 3) {
-      const u = this.el.content.firstChild;
-      u.replaceWith(...u.childNodes);
+    const c = t.length - 1, p = this.parts, [u, b] = Ye(t, a);
+    if (this.el = xt.createElement(u, s), Z.currentNode = this.el.content, a === 2 || a === 3) {
+      const g = this.el.content.firstChild;
+      g.replaceWith(...g.childNodes);
     }
-    for (; (r = G.nextNode()) !== null && p.length < c; ) {
+    for (; (r = Z.nextNode()) !== null && p.length < c; ) {
       if (r.nodeType === 1) {
-        if (r.hasAttributes()) for (const u of r.getAttributeNames()) if (u.endsWith($e)) {
-          const S = b[o++], U = r.getAttribute(u).split(R), Mt = /([.?@])?(.*)/.exec(S);
-          p.push({ type: 1, index: i, name: Mt[2], strings: U, ctor: Mt[1] === "." ? qe : Mt[1] === "?" ? We : Mt[1] === "@" ? Xe : Wt }), r.removeAttribute(u);
-        } else u.startsWith(R) && (p.push({ type: 6, index: i }), r.removeAttribute(u));
+        if (r.hasAttributes()) for (const g of r.getAttributeNames()) if (g.endsWith($e)) {
+          const E = b[o++], R = r.getAttribute(g).split(F), Dt = /([.?@])?(.*)/.exec(E);
+          p.push({ type: 1, index: i, name: Dt[2], strings: R, ctor: Dt[1] === "." ? qe : Dt[1] === "?" ? We : Dt[1] === "@" ? Xe : Wt }), r.removeAttribute(g);
+        } else g.startsWith(F) && (p.push({ type: 6, index: i }), r.removeAttribute(g));
         if (ze.test(r.tagName)) {
-          const u = r.textContent.split(R), S = u.length - 1;
-          if (S > 0) {
+          const g = r.textContent.split(F), E = g.length - 1;
+          if (E > 0) {
             r.textContent = Lt ? Lt.emptyScript : "";
-            for (let U = 0; U < S; U++) r.append(u[U], It()), G.nextNode(), p.push({ type: 2, index: ++i });
-            r.append(u[S], It());
+            for (let R = 0; R < E; R++) r.append(g[R], It()), Z.nextNode(), p.push({ type: 2, index: ++i });
+            r.append(g[E], It());
           }
         }
       } else if (r.nodeType === 8) if (r.data === _e) p.push({ type: 2, index: i });
       else {
-        let u = -1;
-        for (; (u = r.data.indexOf(R, u + 1)) !== -1; ) p.push({ type: 7, index: i }), u += R.length - 1;
+        let g = -1;
+        for (; (g = r.data.indexOf(F, g + 1)) !== -1; ) p.push({ type: 7, index: i }), g += F.length - 1;
       }
       i++;
     }
   }
   static createElement(t, a) {
-    const s = Z.createElement("template");
+    const s = Q.createElement("template");
     return s.innerHTML = t, s;
   }
 }
-function ct(e, t, a = e, s) {
-  if (t === lt) return t;
+function pt(e, t, a = e, s) {
+  if (t === ct) return t;
   let r = s !== void 0 ? a._$Co?.[s] : a._$Cl;
-  const i = bt(t) ? void 0 : t._$litDirective$;
-  return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(e), r._$AT(e, a, s)), s !== void 0 ? (a._$Co ??= [])[s] = r : a._$Cl = r), r !== void 0 && (t = ct(e, r._$AS(e, t.values), r, s)), t;
+  const i = yt(t) ? void 0 : t._$litDirective$;
+  return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(e), r._$AT(e, a, s)), s !== void 0 ? (a._$Co ??= [])[s] = r : a._$Cl = r), r !== void 0 && (t = pt(e, r._$AS(e, t.values), r, s)), t;
 }
 class Ve {
   constructor(t, a) {
@@ -358,17 +358,17 @@ class Ve {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: a }, parts: s } = this._$AD, r = (t?.creationScope ?? Z).importNode(a, !0);
-    G.currentNode = r;
-    let i = G.nextNode(), o = 0, c = 0, p = s[0];
+    const { el: { content: a }, parts: s } = this._$AD, r = (t?.creationScope ?? Q).importNode(a, !0);
+    Z.currentNode = r;
+    let i = Z.nextNode(), o = 0, c = 0, p = s[0];
     for (; p !== void 0; ) {
       if (o === p.index) {
-        let g;
-        p.type === 2 ? g = new qt(i, i.nextSibling, this, t) : p.type === 1 ? g = new p.ctor(i, p.name, p.strings, this, t) : p.type === 6 && (g = new Ke(i, this, t)), this._$AV.push(g), p = s[++c];
+        let u;
+        p.type === 2 ? u = new qt(i, i.nextSibling, this, t) : p.type === 1 ? u = new p.ctor(i, p.name, p.strings, this, t) : p.type === 6 && (u = new Ke(i, this, t)), this._$AV.push(u), p = s[++c];
       }
-      o !== p?.index && (i = G.nextNode(), o++);
+      o !== p?.index && (i = Z.nextNode(), o++);
     }
-    return G.currentNode = Z, r;
+    return Z.currentNode = Q, r;
   }
   p(t) {
     let a = 0;
@@ -394,7 +394,7 @@ class qt {
     return this._$AB;
   }
   _$AI(t, a = this) {
-    t = ct(this, t, a), bt(t) ? t === f || t == null || t === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : t !== this._$AH && t !== lt && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : He(t) ? this.k(t) : this._(t);
+    t = pt(this, t, a), yt(t) ? t === f || t == null || t === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : t !== this._$AH && t !== ct && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : He(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -403,10 +403,10 @@ class qt {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== f && bt(this._$AH) ? this._$AA.nextSibling.data = t : this.T(Z.createTextNode(t)), this._$AH = t;
+    this._$AH !== f && yt(this._$AH) ? this._$AA.nextSibling.data = t : this.T(Q.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    const { values: a, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = yt.createElement(Ce(s.h, s.h[0]), this.options)), s);
+    const { values: a, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = xt.createElement(Ce(s.h, s.h[0]), this.options)), s);
     if (this._$AH?._$AD === r) this._$AH.p(a);
     else {
       const i = new Ve(r, this), o = i.u(this.options);
@@ -415,7 +415,7 @@ class qt {
   }
   _$AC(t) {
     let a = we.get(t.strings);
-    return a === void 0 && we.set(t.strings, a = new yt(t)), a;
+    return a === void 0 && we.set(t.strings, a = new xt(t)), a;
   }
   k(t) {
     ae(this._$AH) || (this._$AH = [], this._$AR());
@@ -426,8 +426,8 @@ class qt {
   }
   _$AR(t = this._$AA.nextSibling, a) {
     for (this._$AP?.(!1, !0, a); t !== this._$AB; ) {
-      const s = ue(t).nextSibling;
-      ue(t).remove(), t = s;
+      const s = ge(t).nextSibling;
+      ge(t).remove(), t = s;
     }
   }
   setConnected(t) {
@@ -447,11 +447,11 @@ class Wt {
   _$AI(t, a = this, s, r) {
     const i = this.strings;
     let o = !1;
-    if (i === void 0) t = ct(this, t, a, 0), o = !bt(t) || t !== this._$AH && t !== lt, o && (this._$AH = t);
+    if (i === void 0) t = pt(this, t, a, 0), o = !yt(t) || t !== this._$AH && t !== ct, o && (this._$AH = t);
     else {
       const c = t;
-      let p, g;
-      for (t = i[0], p = 0; p < i.length - 1; p++) g = ct(this, c[s + p], a, p), g === lt && (g = this._$AH[p]), o ||= !bt(g) || g !== this._$AH[p], g === f ? t = f : t !== f && (t += (g ?? "") + i[p + 1]), this._$AH[p] = g;
+      let p, u;
+      for (t = i[0], p = 0; p < i.length - 1; p++) u = pt(this, c[s + p], a, p), u === ct && (u = this._$AH[p]), o ||= !yt(u) || u !== this._$AH[p], u === f ? t = f : t !== f && (t += (u ?? "") + i[p + 1]), this._$AH[p] = u;
     }
     o && !r && this.j(t);
   }
@@ -480,7 +480,7 @@ class Xe extends Wt {
     super(t, a, s, r, i), this.type = 5;
   }
   _$AI(t, a = this) {
-    if ((t = ct(this, t, a, 0) ?? f) === lt) return;
+    if ((t = pt(this, t, a, 0) ?? f) === ct) return;
     const s = this._$AH, r = t === f && s !== f || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, i = t !== f && (s === f || r);
     r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -496,11 +496,11 @@ class Ke {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    ct(this, t);
+    pt(this, t);
   }
 }
 const Ge = re.litHtmlPolyfillSupport;
-Ge?.(yt, qt), (re.litHtmlVersions ??= []).push("3.3.2");
+Ge?.(xt, qt), (re.litHtmlVersions ??= []).push("3.3.2");
 const Ze = { CHILD: 2 }, Qe = (e) => (...t) => ({ _$litDirective$: e, values: t });
 class Je {
   constructor(t) {
@@ -524,7 +524,7 @@ class Zt extends Je {
   }
   render(t) {
     if (t === f || t == null) return this._t = void 0, this.it = t;
-    if (t === lt) return t;
+    if (t === ct) return t;
     if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (t === this.it) return this._t;
     this.it = t;
@@ -577,7 +577,7 @@ const ar = {
   "volume-mute": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/></svg>',
   music: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'
 };
-let xt = class extends h {
+let wt = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.size = "md";
   }
@@ -586,7 +586,7 @@ let xt = class extends h {
     return l`<span class="icon" aria-hidden="true">${tr(e)}</span>`;
   }
 };
-xt.styles = d`
+wt.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -605,19 +605,19 @@ xt.styles = d`
   `;
 se([
   n()
-], xt.prototype, "name", 2);
+], wt.prototype, "name", 2);
 se([
   n()
-], xt.prototype, "size", 2);
-xt = se([
+], wt.prototype, "size", 2);
+wt = se([
   v("crt-icon")
-], xt);
-var sr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, X = (e, t, a, s) => {
+], wt);
+var sr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, K = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? ir(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && sr(t, a, r), r;
 };
-let z = class extends h {
+let C = class extends h {
   constructor() {
     super(), this.size = "medium", this.variant = "primary", this.disabled = !1, this.type = "button", this.iconOnly = !1, this.iconLeft = "", this.iconRight = "", console.log("Button constructor called");
   }
@@ -642,7 +642,7 @@ let z = class extends h {
     `;
   }
 };
-z.styles = d`
+C.styles = d`
     :host {
       display: inline-block;
     }
@@ -798,31 +798,31 @@ z.styles = d`
       flex-shrink: 0;
     }
   `;
-X([
+K([
   n({ reflect: !0 })
-], z.prototype, "size", 2);
-X([
+], C.prototype, "size", 2);
+K([
   n({ reflect: !0 })
-], z.prototype, "variant", 2);
-X([
+], C.prototype, "variant", 2);
+K([
   n({ type: Boolean })
-], z.prototype, "disabled", 2);
-X([
+], C.prototype, "disabled", 2);
+K([
   n()
-], z.prototype, "type", 2);
-X([
+], C.prototype, "type", 2);
+K([
   n({ attribute: "icon-only", type: Boolean })
-], z.prototype, "iconOnly", 2);
-X([
+], C.prototype, "iconOnly", 2);
+K([
   n({ attribute: "icon-left" })
-], z.prototype, "iconLeft", 2);
-X([
+], C.prototype, "iconLeft", 2);
+K([
   n({ attribute: "icon-right" })
-], z.prototype, "iconRight", 2);
-z = X([
+], C.prototype, "iconRight", 2);
+C = K([
   v("crt-button")
-], z);
-var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, Oe = (e, t, a, s) => {
+], C);
+var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, Pe = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? nr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && or(t, a, r), r;
@@ -876,10 +876,10 @@ Bt.styles = d`
       --badge-border: 1px solid var(--crt-info);
     }
   `;
-Oe([
+Pe([
   n()
 ], Bt.prototype, "variant", 2);
-Bt = Oe([
+Bt = Pe([
   v("crt-badge")
 ], Bt);
 var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Xt = (e, t, a, s) => {
@@ -976,7 +976,7 @@ var pr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, ie = (e, t
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && pr(t, a, r), r;
 };
-let wt = class extends h {
+let kt = class extends h {
   constructor() {
     super(...arguments), this.activeTab = 0, this.tabs = [];
   }
@@ -1009,7 +1009,7 @@ let wt = class extends h {
     `;
   }
 };
-wt.styles = d`
+kt.styles = d`
     :host {
       display: block;
     }
@@ -1078,23 +1078,23 @@ wt.styles = d`
   `;
 ie([
   m()
-], wt.prototype, "activeTab", 2);
+], kt.prototype, "activeTab", 2);
 ie([
   n({ type: Array })
-], wt.prototype, "tabs", 2);
-wt = ie([
+], kt.prototype, "tabs", 2);
+kt = ie([
   v("crt-tabs")
-], wt);
+], kt);
 function hr(e) {
   const t = document.createElement("div");
   return t.innerHTML = e, t;
 }
-var vr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, C = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? gr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+var vr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, P = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ur(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && vr(t, a, r), r;
 };
-let Q = class extends h {
+let J = class extends h {
   constructor() {
     super(...arguments), this.type = "text", this.placeholder = "", this.value = "", this.disabled = !1;
   }
@@ -1112,7 +1112,7 @@ let Q = class extends h {
     `;
   }
 };
-Q.styles = d`
+J.styles = d`
     :host {
       display: block;
     }
@@ -1158,41 +1158,40 @@ Q.styles = d`
       padding-right: var(--crt-spacing-lg);
     }
   `;
-C([
+P([
   n()
-], Q.prototype, "type", 2);
-C([
+], J.prototype, "type", 2);
+P([
   n()
-], Q.prototype, "placeholder", 2);
-C([
+], J.prototype, "placeholder", 2);
+P([
   n()
-], Q.prototype, "value", 2);
-C([
+], J.prototype, "value", 2);
+P([
   n()
-], Q.prototype, "disabled", 2);
-Q = C([
+], J.prototype, "disabled", 2);
+J = P([
   v("crt-input")
-], Q);
-let J = class extends h {
+], J);
+let tt = class extends h {
   constructor() {
     super(...arguments), this.placeholder = "", this.value = "", this.disabled = !1, this.rows = 4;
   }
   render() {
     return l`
       <textarea
+        .value=${this.value}
         placeholder="${this.placeholder}"
         rows="${this.rows}"
         ?disabled="${this.disabled}"
         @input="${(e) => {
       this.value = e.target.value;
     }}"
-      >
-${this.value}</textarea
-      >
+      ></textarea>
     `;
   }
 };
-J.styles = d`
+tt.styles = d`
     :host {
       display: block;
     }
@@ -1234,27 +1233,27 @@ J.styles = d`
       border-style: dashed;
     }
   `;
-C([
+P([
   n()
-], J.prototype, "placeholder", 2);
-C([
+], tt.prototype, "placeholder", 2);
+P([
   n()
-], J.prototype, "value", 2);
-C([
+], tt.prototype, "value", 2);
+P([
   n()
-], J.prototype, "disabled", 2);
-C([
+], tt.prototype, "disabled", 2);
+P([
   n()
-], J.prototype, "rows", 2);
-J = C([
+], tt.prototype, "rows", 2);
+tt = P([
   v("crt-textarea")
-], J);
-var ur = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, ht = (e, t, a, s) => {
+], tt);
+var gr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, vt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? mr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
-  return s && r && ur(t, a, r), r;
+  return s && r && gr(t, a, r), r;
 };
-let F = class extends h {
+let H = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.target = "", this.iconLeft = !1, this.iconRight = !1, this.icon = "";
   }
@@ -1268,7 +1267,7 @@ let F = class extends h {
     `;
   }
 };
-F.styles = d`
+H.styles = d`
     :host {
       --crt-link-color: var(--crt-primary);
     }
@@ -1294,30 +1293,30 @@ F.styles = d`
       color: var(--crt-primary-dark);
     }
   `;
-ht([
+vt([
   n({ type: String })
-], F.prototype, "href", 2);
-ht([
+], H.prototype, "href", 2);
+vt([
   n({ type: String })
-], F.prototype, "target", 2);
-ht([
+], H.prototype, "target", 2);
+vt([
   n({ type: Boolean })
-], F.prototype, "iconLeft", 2);
-ht([
+], H.prototype, "iconLeft", 2);
+vt([
   n({ type: Boolean })
-], F.prototype, "iconRight", 2);
-ht([
+], H.prototype, "iconRight", 2);
+vt([
   n({ type: String })
-], F.prototype, "icon", 2);
-F = ht([
+], H.prototype, "icon", 2);
+H = vt([
   v("crt-link")
-], F);
+], H);
 var fr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, st = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? br(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && fr(t, a, r), r;
 };
-let E = class extends h {
+let M = class extends h {
   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;
@@ -1348,8 +1347,8 @@ let E = class extends h {
       if (r.size > this.maxSize)
         return console.warn(`File ${r.name} exceeds max size`), !1;
       if (this.accept) {
-        const i = this.accept.split(",").map((g) => g.trim()), o = r.type, c = "." + r.name.split(".").pop()?.toLowerCase();
-        if (!i.some((g) => g.startsWith(".") ? c === g.toLowerCase() : g.endsWith("/*") ? o.startsWith(g.replace("/*", "/")) : o === g))
+        const i = this.accept.split(",").map((u) => u.trim()), o = r.type, c = "." + r.name.split(".").pop()?.toLowerCase();
+        if (!i.some((u) => u.startsWith(".") ? c === u.toLowerCase() : u.endsWith("/*") ? o.startsWith(u.replace("/*", "/")) : o === u))
           return console.warn(`File ${r.name} type not accepted`), !1;
       }
       return !0;
@@ -1458,7 +1457,7 @@ let E = class extends h {
     `;
   }
 };
-E.styles = d`
+M.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -1755,31 +1754,31 @@ E.styles = d`
   `;
 st([
   n({ type: String })
-], E.prototype, "accept", 2);
+], M.prototype, "accept", 2);
 st([
   n({ type: Boolean })
-], E.prototype, "multiple", 2);
+], M.prototype, "multiple", 2);
 st([
   n({ type: String })
-], E.prototype, "name", 2);
+], M.prototype, "name", 2);
 st([
   n({ type: Number })
-], E.prototype, "maxSize", 2);
+], M.prototype, "maxSize", 2);
 st([
   n({ type: Number })
-], E.prototype, "maxFiles", 2);
+], M.prototype, "maxFiles", 2);
 st([
   m()
-], E.prototype, "files", 2);
-E = st([
+], M.prototype, "files", 2);
+M = st([
   v("crt-file-upload")
-], E);
+], M);
 var yr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, O = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? xr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && yr(t, a, r), r;
 };
-let x = class extends h {
+let w = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select date...", this.format = "DD.MM.YYYY", this.min = "", this.max = "", this.disabled = !1, this._isOpen = !1, this._viewDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"], this._months = [
       "Januar",
@@ -1870,10 +1869,10 @@ let x = class extends h {
       `);
     }
     for (let c = 1; c <= a; c++) {
-      const p = new Date(e, t, c), g = this._isToday(p), b = this._isSelected(p);
+      const p = new Date(e, t, c), u = this._isToday(p), b = this._isSelected(p);
       i.push(l`
         <div 
-          class="day ${g ? "today" : ""} ${b ? "selected" : ""}"
+          class="day ${u ? "today" : ""} ${b ? "selected" : ""}"
           @click="${() => this._selectDate(p)}"
         >
           ${c}
@@ -1938,7 +1937,7 @@ let x = class extends h {
     `;
   }
 };
-x.styles = d`
+w.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -2145,34 +2144,34 @@ x.styles = d`
   `;
 O([
   n({ type: String })
-], x.prototype, "value", 2);
+], w.prototype, "value", 2);
 O([
   n({ type: String })
-], x.prototype, "placeholder", 2);
+], w.prototype, "placeholder", 2);
 O([
   n({ type: String })
-], x.prototype, "format", 2);
+], w.prototype, "format", 2);
 O([
   n({ type: String })
-], x.prototype, "min", 2);
+], w.prototype, "min", 2);
 O([
   n({ type: String })
-], x.prototype, "max", 2);
+], w.prototype, "max", 2);
 O([
   n({ type: Boolean })
-], x.prototype, "disabled", 2);
+], w.prototype, "disabled", 2);
 O([
   m()
-], x.prototype, "_isOpen", 2);
+], w.prototype, "_isOpen", 2);
 O([
   m()
-], x.prototype, "_viewDate", 2);
+], w.prototype, "_viewDate", 2);
 O([
   m()
-], x.prototype, "_selectedDate", 2);
-x = O([
+], w.prototype, "_selectedDate", 2);
+w = O([
   v("crt-calendar")
-], x);
+], w);
 var wr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, it = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? kr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
@@ -2442,7 +2441,7 @@ var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, y = (e, t,
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && $r(t, a, r), r;
 };
-let H = class extends h {
+let Y = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.indeterminate = !1, this.label = "", this.value = "";
   }
@@ -2470,7 +2469,7 @@ let H = class extends h {
     `;
   }
 };
-H.styles = d`
+Y.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2554,23 +2553,23 @@ H.styles = d`
   `;
 y([
   n({ type: Boolean, reflect: !0 })
-], H.prototype, "checked", 2);
+], Y.prototype, "checked", 2);
 y([
   n({ type: Boolean, reflect: !0 })
-], H.prototype, "disabled", 2);
+], Y.prototype, "disabled", 2);
 y([
   n({ type: Boolean })
-], H.prototype, "indeterminate", 2);
+], Y.prototype, "indeterminate", 2);
 y([
   n({ type: String })
-], H.prototype, "label", 2);
+], Y.prototype, "label", 2);
 y([
   n({ type: String })
-], H.prototype, "value", 2);
-H = y([
+], Y.prototype, "value", 2);
+Y = y([
   v("crt-checkbox")
-], H);
-let Y = class extends h {
+], Y);
+let V = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.value = "", this.name = "";
   }
@@ -2599,7 +2598,7 @@ let Y = class extends h {
     `;
   }
 };
-Y.styles = d`
+V.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2675,23 +2674,23 @@ Y.styles = d`
   `;
 y([
   n({ type: Boolean, reflect: !0 })
-], Y.prototype, "checked", 2);
+], V.prototype, "checked", 2);
 y([
   n({ type: Boolean, reflect: !0 })
-], Y.prototype, "disabled", 2);
+], V.prototype, "disabled", 2);
 y([
   n({ type: String })
-], Y.prototype, "label", 2);
+], V.prototype, "label", 2);
 y([
   n({ type: String })
-], Y.prototype, "value", 2);
+], V.prototype, "value", 2);
 y([
   n({ type: String })
-], Y.prototype, "name", 2);
-Y = y([
+], V.prototype, "name", 2);
+V = y([
   v("crt-radio")
-], Y);
-let pt = class extends h {
+], V);
+let dt = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.horizontal = !1, this._handleChange = (e) => {
       const t = e.target;
@@ -2712,7 +2711,7 @@ let pt = class extends h {
     return l`<slot></slot>`;
   }
 };
-pt.styles = d`
+dt.styles = d`
     :host {
       display: flex;
       flex-direction: column;
@@ -2727,22 +2726,22 @@ pt.styles = d`
   `;
 y([
   n({ type: String })
-], pt.prototype, "name", 2);
+], dt.prototype, "name", 2);
 y([
   n({ type: String })
-], pt.prototype, "value", 2);
+], dt.prototype, "value", 2);
 y([
   n({ type: Boolean, reflect: !0 })
-], pt.prototype, "horizontal", 2);
-pt = y([
+], dt.prototype, "horizontal", 2);
+dt = y([
   v("crt-radio-group")
-], pt);
-var zr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, P = (e, t, a, s) => {
+], dt);
+var zr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, A = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Cr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && zr(t, a, r), r;
 };
-let w = class extends h {
+let k = class extends h {
   constructor() {
     super(...arguments), this.value = 0, this.max = 100, this.label = "", this.animated = !1, this.indeterminate = !1, this.segmented = !1, this.size = "medium", this.variant = "default", this.showValue = !0;
   }
@@ -2768,7 +2767,7 @@ let w = class extends h {
     `;
   }
 };
-w.styles = d`
+k.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -2892,42 +2891,42 @@ w.styles = d`
       );
     }
   `;
-P([
+A([
   n({ type: Number })
-], w.prototype, "value", 2);
-P([
+], k.prototype, "value", 2);
+A([
   n({ type: Number })
-], w.prototype, "max", 2);
-P([
+], k.prototype, "max", 2);
+A([
   n({ type: String })
-], w.prototype, "label", 2);
-P([
+], k.prototype, "label", 2);
+A([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "animated", 2);
-P([
+], k.prototype, "animated", 2);
+A([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "indeterminate", 2);
-P([
+], k.prototype, "indeterminate", 2);
+A([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "segmented", 2);
-P([
+], k.prototype, "segmented", 2);
+A([
   n({ type: String, reflect: !0 })
-], w.prototype, "size", 2);
-P([
+], k.prototype, "size", 2);
+A([
   n({ type: String, reflect: !0 })
-], w.prototype, "variant", 2);
-P([
+], k.prototype, "variant", 2);
+A([
   n({ type: Boolean })
-], w.prototype, "showValue", 2);
-w = P([
+], k.prototype, "showValue", 2);
+k = A([
   v("crt-progress")
-], w);
-var Or = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, Pt = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? Pr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+], k);
+var Pr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, At = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Or(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
-  return s && r && Or(t, a, r), r;
+  return s && r && Pr(t, a, r), r;
 };
-let tt = class extends h {
+let et = class extends h {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
   }
@@ -2956,7 +2955,7 @@ let tt = class extends h {
     `;
   }
 };
-tt.styles = d`
+et.styles = d`
     :host {
       display: inline-block;
       position: relative;
@@ -3063,27 +3062,27 @@ tt.styles = d`
       border-right-color: var(--crt-primary);
     }
   `;
-Pt([
+At([
   n({ type: String })
-], tt.prototype, "text", 2);
-Pt([
+], et.prototype, "text", 2);
+At([
   n({ type: String, reflect: !0 })
-], tt.prototype, "position", 2);
-Pt([
+], et.prototype, "position", 2);
+At([
   n({ type: Number })
-], tt.prototype, "delay", 2);
-Pt([
+], et.prototype, "delay", 2);
+At([
   m()
-], tt.prototype, "_visible", 2);
-tt = Pt([
+], et.prototype, "_visible", 2);
+et = At([
   v("crt-tooltip")
-], tt);
+], et);
 var Ar = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, oe = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Sr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Ar(t, a, r), r;
 };
-let kt = class extends h {
+let $t = class extends h {
   constructor() {
     super(...arguments), this.items = [], this.separator = ">";
   }
@@ -3101,7 +3100,7 @@ let kt = class extends h {
     `;
   }
 };
-kt.styles = d`
+$t.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3152,19 +3151,19 @@ kt.styles = d`
   `;
 oe([
   n({ type: Array })
-], kt.prototype, "items", 2);
+], $t.prototype, "items", 2);
 oe([
   n({ type: String })
-], kt.prototype, "separator", 2);
-kt = oe([
+], $t.prototype, "separator", 2);
+$t = oe([
   v("crt-breadcrumb")
-], kt);
-var Er = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, At = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? Dr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+], $t);
+var Er = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, St = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Mr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Er(t, a, r), r;
 };
-let et = class extends h {
+let rt = class extends h {
   constructor() {
     super(...arguments), this.current = 1, this.total = 1, this.siblings = 1, this.showInfo = !0;
   }
@@ -3223,7 +3222,7 @@ let et = class extends h {
     `;
   }
 };
-et.styles = d`
+rt.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3278,40 +3277,44 @@ et.styles = d`
       margin-left: var(--crt-spacing-md);
     }
   `;
-At([
+St([
   n({ type: Number })
-], et.prototype, "current", 2);
-At([
+], rt.prototype, "current", 2);
+St([
   n({ type: Number })
-], et.prototype, "total", 2);
-At([
+], rt.prototype, "total", 2);
+St([
   n({ type: Number })
-], et.prototype, "siblings", 2);
-At([
+], rt.prototype, "siblings", 2);
+St([
   n({ type: Boolean })
-], et.prototype, "showInfo", 2);
-et = At([
+], rt.prototype, "showInfo", 2);
+rt = St([
   v("crt-pagination")
-], et);
-var Mr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, L = (e, t, a, s) => {
+], rt);
+var Dr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, B = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Tr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
-  return s && r && Mr(t, a, r), r;
+  return s && r && Dr(t, a, r), r;
 };
-let k = class extends h {
+let _ = class extends h {
   constructor() {
     super(...arguments), this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showMarks = !1, this.unit = "";
   }
   _handleInput(e) {
     const t = e.target;
     this.value = Number(t.value), this.dispatchEvent(new CustomEvent("input", {
-      detail: { value: this.value }
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
     }));
   }
   _handleChange(e) {
     const t = e.target;
     this.value = Number(t.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: { value: this.value }
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
     }));
   }
   _getFillWidth() {
@@ -3351,7 +3354,7 @@ let k = class extends h {
     `;
   }
 };
-k.styles = d`
+_.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -3485,39 +3488,39 @@ k.styles = d`
       cursor: not-allowed;
     }
   `;
-L([
+B([
   n({ type: Number })
-], k.prototype, "value", 2);
-L([
+], _.prototype, "value", 2);
+B([
   n({ type: Number })
-], k.prototype, "min", 2);
-L([
+], _.prototype, "min", 2);
+B([
   n({ type: Number })
-], k.prototype, "max", 2);
-L([
+], _.prototype, "max", 2);
+B([
   n({ type: Number })
-], k.prototype, "step", 2);
-L([
+], _.prototype, "step", 2);
+B([
   n({ type: String })
-], k.prototype, "label", 2);
-L([
+], _.prototype, "label", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], k.prototype, "disabled", 2);
-L([
+], _.prototype, "disabled", 2);
+B([
   n({ type: Boolean })
-], k.prototype, "showMarks", 2);
-L([
+], _.prototype, "showMarks", 2);
+B([
   n({ type: String })
-], k.prototype, "unit", 2);
-k = L([
+], _.prototype, "unit", 2);
+_ = B([
   v("crt-slider")
-], k);
+], _);
 var jr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ot = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Lr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && jr(t, a, r), r;
 };
-let M = class extends h {
+let T = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.onLabel = "1", this.offLabel = "0", this.size = "medium";
   }
@@ -3548,7 +3551,7 @@ let M = class extends h {
     `;
   }
 };
-M.styles = d`
+T.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3672,31 +3675,31 @@ M.styles = d`
   `;
 ot([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "checked", 2);
+], T.prototype, "checked", 2);
 ot([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "disabled", 2);
+], T.prototype, "disabled", 2);
 ot([
   n({ type: String })
-], M.prototype, "label", 2);
+], T.prototype, "label", 2);
 ot([
   n({ type: String })
-], M.prototype, "onLabel", 2);
+], T.prototype, "onLabel", 2);
 ot([
   n({ type: String })
-], M.prototype, "offLabel", 2);
+], T.prototype, "offLabel", 2);
 ot([
   n({ type: String, reflect: !0 })
-], M.prototype, "size", 2);
-M = ot([
+], T.prototype, "size", 2);
+T = ot([
   v("crt-toggle")
-], M);
-var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, I = (e, t, a, s) => {
+], T);
+var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, N = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Br(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Ir(t, a, r), r;
 };
-let T = class extends h {
+let j = class extends h {
   constructor() {
     super(...arguments), this.src = "", this.alt = "", this.name = "", this.size = "md", this.shape = "square", this.status = "";
   }
@@ -3729,7 +3732,7 @@ let T = class extends h {
     `;
   }
 };
-T.styles = d`
+j.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -3857,27 +3860,27 @@ T.styles = d`
       border-color: var(--crt-bg-dark);
     }
   `;
-I([
+N([
   n({ type: String })
-], T.prototype, "src", 2);
-I([
+], j.prototype, "src", 2);
+N([
   n({ type: String })
-], T.prototype, "alt", 2);
-I([
+], j.prototype, "alt", 2);
+N([
   n({ type: String })
-], T.prototype, "name", 2);
-I([
+], j.prototype, "name", 2);
+N([
   n({ type: String, reflect: !0 })
-], T.prototype, "size", 2);
-I([
+], j.prototype, "size", 2);
+N([
   n({ type: String, reflect: !0 })
-], T.prototype, "shape", 2);
-I([
+], j.prototype, "shape", 2);
+N([
   n({ type: String, reflect: !0 })
-], T.prototype, "status", 2);
-T = I([
+], j.prototype, "status", 2);
+j = N([
   v("crt-avatar")
-], T);
+], j);
 let Rt = class extends h {
   constructor() {
     super(...arguments), this.max = 5;
@@ -3917,18 +3920,18 @@ Rt.styles = d`
       box-shadow: var(--crt-glow-sm);
     }
   `;
-I([
+N([
   n({ type: Number })
 ], Rt.prototype, "max", 2);
-Rt = I([
+Rt = N([
   v("crt-avatar-group")
 ], Rt);
-var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, A = (e, t, a, s) => {
+var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, S = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Ur(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Nr(t, a, r), r;
 };
-let V = class extends h {
+let q = class extends h {
   constructor() {
     super(...arguments), this.variant = "rectangular", this.animation = "shimmer", this.width = "100%", this.height = "20px", this.effect = !1;
   }
@@ -3941,7 +3944,7 @@ let V = class extends h {
     `;
   }
 };
-V.styles = d`
+q.styles = d`
     :host {
       display: block;
     }
@@ -4056,24 +4059,24 @@ V.styles = d`
       pointer-events: none;
     }
   `;
-A([
+S([
   n({ type: String, reflect: !0 })
-], V.prototype, "variant", 2);
-A([
+], q.prototype, "variant", 2);
+S([
   n({ type: String, reflect: !0 })
-], V.prototype, "animation", 2);
-A([
+], q.prototype, "animation", 2);
+S([
   n({ type: String })
-], V.prototype, "width", 2);
-A([
+], q.prototype, "width", 2);
+S([
   n({ type: String })
-], V.prototype, "height", 2);
-A([
+], q.prototype, "height", 2);
+S([
   n({ type: Boolean, reflect: !0 })
-], V.prototype, "effect", 2);
-V = A([
+], q.prototype, "effect", 2);
+q = S([
   v("crt-skeleton")
-], V);
+], q);
 let Ft = class extends h {
   constructor() {
     super(...arguments), this.lines = 3;
@@ -4118,10 +4121,10 @@ Ft.styles = d`
       }
     }
   `;
-A([
+S([
   n({ type: Number })
 ], Ft.prototype, "lines", 2);
-Ft = A([
+Ft = S([
   v("crt-skeleton-text")
 ], Ft);
 let Ht = class extends h {
@@ -4191,18 +4194,18 @@ Ht.styles = d`
       }
     }
   `;
-A([
+S([
   n({ type: Boolean })
 ], Ht.prototype, "hideImage", 2);
-Ht = A([
+Ht = S([
   v("crt-skeleton-card")
 ], Ht);
-var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, B = (e, t, a, s) => {
+var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, U = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Fr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Rr(t, a, r), r;
 };
-let $ = class extends h {
+let z = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.title = "", this.closable = !1, this.filled = !1, this.outlined = !1, this.banner = !1, this.animated = !1, this.icon = "";
   }
@@ -4237,7 +4240,7 @@ let $ = class extends h {
     `;
   }
 };
-$.styles = d`
+z.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -4402,39 +4405,39 @@ $.styles = d`
       border-top: none;
     }
   `;
-B([
+U([
   n({ type: String, reflect: !0 })
-], $.prototype, "variant", 2);
-B([
+], z.prototype, "variant", 2);
+U([
   n({ type: String })
-], $.prototype, "title", 2);
-B([
+], z.prototype, "title", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "closable", 2);
-B([
+], z.prototype, "closable", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "filled", 2);
-B([
+], z.prototype, "filled", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "outlined", 2);
-B([
+], z.prototype, "outlined", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "banner", 2);
-B([
+], z.prototype, "banner", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "animated", 2);
-B([
+], z.prototype, "animated", 2);
+U([
   n({ type: String })
-], $.prototype, "icon", 2);
-$ = B([
+], z.prototype, "icon", 2);
+z = U([
   v("crt-alert")
-], $);
+], z);
 var Hr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, ne = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Yr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Hr(t, a, r), r;
 };
-let $t = class extends h {
+let _t = class extends h {
   constructor() {
     super(...arguments), this.open = !1, this.message = "LOADING...";
   }
@@ -4458,7 +4461,7 @@ let $t = class extends h {
     ` : l``;
   }
 };
-$t.styles = d`
+_t.styles = d`
     :host {
       display: block;
     }
@@ -4682,13 +4685,13 @@ $t.styles = d`
   `;
 ne([
   n({ type: Boolean, reflect: !0 })
-], $t.prototype, "open", 2);
+], _t.prototype, "open", 2);
 ne([
   n({ type: String })
-], $t.prototype, "message", 2);
-$t = ne([
+], _t.prototype, "message", 2);
+_t = ne([
   v("crt-spinner")
-], $t);
+], _t);
 var Vr = Object.getOwnPropertyDescriptor, qr = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Vr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = o(r) || r);
@@ -4712,7 +4715,17 @@ let Qt = class extends h {
   }
 };
 Qt.styles = d`
+    :host {
+      /* Make the card element act like a normal block-level container
+         so external width/height styles can be applied responsively. */
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
     .card {
+      width: 100%;
+      box-sizing: border-box;
       border: 3px double var(--crt-primary);
       padding: var(--crt-spacing-lg);
       background-color: var(--crt-bg-dark);
@@ -4751,7 +4764,7 @@ var Wr = Object.defineProperty, Xr = Object.getOwnPropertyDescriptor, le = (e, t
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Wr(t, a, r), r;
 };
-let _t = class extends h {
+let zt = class extends h {
   constructor() {
     super(...arguments), this.headers = [], this.rows = [];
   }
@@ -4770,7 +4783,7 @@ let _t = class extends h {
     `;
   }
 };
-_t.styles = d`
+zt.styles = d`
     :host {
       display: block;
     }
@@ -4824,19 +4837,19 @@ _t.styles = d`
   `;
 le([
   n({ type: Array })
-], _t.prototype, "headers", 2);
+], zt.prototype, "headers", 2);
 le([
   n({ type: Array })
-], _t.prototype, "rows", 2);
-_t = le([
+], zt.prototype, "rows", 2);
+zt = le([
   v("crt-table")
-], _t);
+], zt);
 var Kr = Object.defineProperty, Gr = Object.getOwnPropertyDescriptor, ce = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Gr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Kr(t, a, r), r;
 };
-let zt = class extends h {
+let Ct = class extends h {
   constructor() {
     super(...arguments), this.columns = 3, this.gap = "var(--crt-spacing-lg)";
   }
@@ -4854,7 +4867,7 @@ let zt = class extends h {
     `;
   }
 };
-zt.styles = d`
+Ct.styles = d`
     :host {
       display: block;
     }
@@ -4885,19 +4898,19 @@ zt.styles = d`
   `;
 ce([
   n({ type: Number })
-], zt.prototype, "columns", 2);
+], Ct.prototype, "columns", 2);
 ce([
   n({ type: String })
-], zt.prototype, "gap", 2);
-zt = ce([
+], Ct.prototype, "gap", 2);
+Ct = ce([
   v("crt-grid")
-], zt);
-var Zr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, vt = (e, t, a, s) => {
+], Ct);
+var Zr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, ut = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Qr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Zr(t, a, r), r;
 };
-let q = class extends h {
+let W = class extends h {
   constructor() {
     super(...arguments), this.title = "", this.description = "", this.code = "", this.activeTab = "preview", this.copied = !1;
   }
@@ -4954,10 +4967,13 @@ let q = class extends h {
     `;
   }
 };
-q.styles = d`
+W.styles = d`
     :host {
       display: block;
       margin-bottom: var(--crt-spacing-xl);
+      width: 100%;
+      max-width: none;
+      box-sizing: border-box;
     }
 
     .example-header {
@@ -4985,6 +5001,8 @@ q.styles = d`
       border: 2px solid var(--crt-primary);
       background: var(--crt-bg-light);
       box-shadow: var(--crt-glow-inset);
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .tab-header {
@@ -5029,6 +5047,17 @@ q.styles = d`
       flex-wrap: wrap;
       gap: var(--crt-spacing-md);
       align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Ensure embedded demo components stretch to the available width
+       so examples don't get stuck at an intrinsic/narrow width. */
+    .preview-pane > * {
+      flex: 1 1 100%;
+      min-width: 0; /* allow children to shrink below their content width */
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .code-pane {
@@ -5087,30 +5116,30 @@ q.styles = d`
       color: var(--crt-bg-dark);
     }
   `;
-vt([
+ut([
   n()
-], q.prototype, "title", 2);
-vt([
+], W.prototype, "title", 2);
+ut([
   n()
-], q.prototype, "description", 2);
-vt([
+], W.prototype, "description", 2);
+ut([
   n()
-], q.prototype, "code", 2);
-vt([
+], W.prototype, "code", 2);
+ut([
   m()
-], q.prototype, "activeTab", 2);
-vt([
+], W.prototype, "activeTab", 2);
+ut([
   m()
-], q.prototype, "copied", 2);
-q = vt([
+], W.prototype, "copied", 2);
+W = ut([
   v("crt-code-example")
-], q);
+], W);
 var Jr = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, Kt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? ta(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Jr(t, a, r), r;
 };
-let dt = class extends h {
+let ht = class extends h {
   constructor() {
     super(...arguments), this.open = !1, this.title = "Modal", this.size = "medium", this._handleKeydown = (e) => {
       e.key === "Escape" && this.open && this.close();
@@ -5147,7 +5176,7 @@ let dt = class extends h {
     `;
   }
 };
-dt.styles = d`
+ht.styles = d`
     :host {
       display: none;
     }
@@ -5276,22 +5305,22 @@ dt.styles = d`
   `;
 Kt([
   n({ type: Boolean, reflect: !0 })
-], dt.prototype, "open", 2);
+], ht.prototype, "open", 2);
 Kt([
   n({ type: String })
-], dt.prototype, "title", 2);
+], ht.prototype, "title", 2);
 Kt([
   n({ type: String })
-], dt.prototype, "size", 2);
-dt = Kt([
+], ht.prototype, "size", 2);
+ht = Kt([
   v("crt-modal")
-], dt);
+], ht);
 var ea = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, nt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? ra(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && ea(t, a, r), r;
 };
-let j = class extends h {
+let L = class extends h {
   constructor() {
     super(...arguments), this.position = "top-right", this.message = "", this.title = "", this.variant = "default", this.duration = 4e3, this._toasts = [], this._counter = 0, this._initialized = !1;
   }
@@ -5356,7 +5385,7 @@ let j = class extends h {
     `;
   }
 };
-j.styles = d`
+L.styles = d`
     :host {
       position: fixed;
       z-index: 10001;
@@ -5525,31 +5554,31 @@ j.styles = d`
   `;
 nt([
   n({ type: String, reflect: !0 })
-], j.prototype, "position", 2);
+], L.prototype, "position", 2);
 nt([
   n({ type: String })
-], j.prototype, "message", 2);
+], L.prototype, "message", 2);
 nt([
   n({ type: String })
-], j.prototype, "title", 2);
+], L.prototype, "title", 2);
 nt([
   n({ type: String })
-], j.prototype, "variant", 2);
+], L.prototype, "variant", 2);
 nt([
   n({ type: Number })
-], j.prototype, "duration", 2);
+], L.prototype, "duration", 2);
 nt([
   m()
-], j.prototype, "_toasts", 2);
-j = nt([
+], L.prototype, "_toasts", 2);
+L = nt([
   v("crt-toast")
-], j);
-var aa = Object.defineProperty, sa = Object.getOwnPropertyDescriptor, St = (e, t, a, s) => {
+], L);
+var aa = Object.defineProperty, sa = Object.getOwnPropertyDescriptor, Et = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? sa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && aa(t, a, r), r;
 };
-let Ct = class extends h {
+let Pt = class extends h {
   constructor() {
     super(...arguments), this.header = "", this.open = !1;
   }
@@ -5578,7 +5607,7 @@ let Ct = class extends h {
     `;
   }
 };
-Ct.styles = d`
+Pt.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -5649,15 +5678,15 @@ Ct.styles = d`
       color: var(--crt-text-secondary);
     }
   `;
-St([
+Et([
   n({ type: String })
-], Ct.prototype, "header", 2);
-St([
+], Pt.prototype, "header", 2);
+Et([
   n({ type: Boolean, reflect: !0 })
-], Ct.prototype, "open", 2);
-Ct = St([
+], Pt.prototype, "open", 2);
+Pt = Et([
   v("crt-accordion-item")
-], Ct);
+], Pt);
 let Yt = class extends h {
   constructor() {
     super(...arguments), this.multiple = !1, this._handleToggle = (e) => {
@@ -5681,18 +5710,18 @@ Yt.styles = d`
       display: block;
     }
   `;
-St([
+Et([
   n({ type: Boolean })
 ], Yt.prototype, "multiple", 2);
-Yt = St([
+Yt = Et([
   v("crt-accordion")
 ], Yt);
-var ia = Object.defineProperty, oa = Object.getOwnPropertyDescriptor, Et = (e, t, a, s) => {
+var ia = Object.defineProperty, oa = Object.getOwnPropertyDescriptor, Mt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? oa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && ia(t, a, r), r;
 };
-let rt = class extends h {
+let at = class extends h {
   constructor() {
     super(...arguments), this.bars = 20, this.mode = 1, this.barHeights = [], this.isActive = !1, this.visualize = () => {
       if (!this.isActive || !this.analyser || !this.dataArray) return;
@@ -5745,7 +5774,7 @@ let rt = class extends h {
     `;
   }
 };
-rt.styles = d`
+at.styles = d`
     :host {
       display: block;
     }
@@ -5820,21 +5849,21 @@ rt.styles = d`
       animation: none;
     }
   `;
-Et([
+Mt([
   n({ type: Number })
-], rt.prototype, "bars", 2);
-Et([
+], at.prototype, "bars", 2);
+Mt([
   n({ type: Number })
-], rt.prototype, "mode", 2);
-Et([
+], at.prototype, "mode", 2);
+Mt([
   m()
-], rt.prototype, "barHeights", 2);
-Et([
+], at.prototype, "barHeights", 2);
+Mt([
   m()
-], rt.prototype, "isActive", 2);
-rt = Et([
+], at.prototype, "isActive", 2);
+at = Mt([
   v("crt-visualizer")
-], rt);
+], at);
 var na = Object.defineProperty, la = Object.getOwnPropertyDescriptor, pe = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? la(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
@@ -5912,6 +5941,8 @@ let Ot = class extends h {
 Ot.styles = d`
     :host {
       display: block;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     /* Table Styles */
@@ -5994,10 +6025,12 @@ Ot.styles = d`
     }
 
     td.track-title {
-      white-space: nowrap;
+      /* Allow titles to wrap on narrow screens to avoid forcing huge action column widths */
+      white-space: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       min-width: 0;
+      word-break: break-word;
     }
 
     td.track-artist {
@@ -6009,7 +6042,8 @@ Ot.styles = d`
     }
 
     .remove-btn {
-      opacity: 0;
+      /* Visible by default at low opacity so touch devices can see it */
+      opacity: 0.65;
       transition: var(--crt-transition);
     }
 
@@ -6023,6 +6057,13 @@ Ot.styles = d`
       text-align: center;
       padding: var(--crt-spacing-xl);
       transition: var(--crt-transition);
+      /* Ensure the empty preview stretches to the container width */
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
 
     .empty-state:hover {
@@ -6047,8 +6088,9 @@ Ot.styles = d`
 
     /* Responsive: hide artist on narrow screens and allow horizontal scroll fallback */
     @media (max-width: 520px) {
-      td.track-artist { display: none; }
-      td.track-title { max-width: 140px; min-width: 0; }
+      /* Keep artist visible on narrow screens but allow wrapping */
+      td.track-artist { display: table-cell; max-width: 120px; white-space: normal; word-break: break-word; }
+      td.track-title { max-width: 140px; min-width: 0; white-space: normal; }
       .table-wrapper { overflow-x: auto; min-width: 0; }
     }
 
@@ -6075,15 +6117,15 @@ pe([
 Ot = pe([
   v("crt-playlist")
 ], Ot);
-var ca = Object.defineProperty, pa = Object.getOwnPropertyDescriptor, N = (e, t, a, s) => {
+var ca = Object.defineProperty, pa = Object.getOwnPropertyDescriptor, $ = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? pa(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && ca(t, a, r), r;
 };
-let _ = class extends h {
+let x = class extends h {
   constructor() {
-    super(...arguments), this.tracks = [], this.currentIndex = 0, this.isPlaying = !1, this.currentTime = 0, this.duration = 0, this.volume = 80, this.togglePlay = () => {
-      this.isPlaying ? this.pause() : this.play();
+    super(...arguments), this.tracks = [], this.currentIndex = 0, this.autoplay = !1, this.autoplayDelay = 500, this.isPlaying = !1, this.currentTime = 0, this.duration = 0, this.volume = 80, this.autoplayMuted = !1, this.togglePlay = async () => {
+      this.isPlaying ? this.pause() : await this.play();
     }, this.previousTrack = () => {
       this.tracks.length !== 0 && this.loadTrack((this.currentIndex - 1 + this.tracks.length) % this.tracks.length);
     }, this.nextTrack = () => {
@@ -6110,7 +6152,12 @@ let _ = class extends h {
     this.audio && (this.audio.volume = this.volume / 100);
   }
   updated(e) {
-    e.has("tracks") && this.tracks.length > 0 && (e.get("tracks") === void 0 || e.get("tracks")?.length === 0) && this.loadTrack(0);
+    if (e.has("tracks") && this.tracks.length > 0 && ((e.get("tracks") === void 0 || e.get("tracks")?.length === 0) && this.loadTrack(0), this.autoplay && this.tracks.length > 0)) {
+      const t = Math.max(0, Number(this.autoplayDelay) || 0);
+      setTimeout(() => {
+        this.isPlaying || this.play();
+      }, t);
+    }
   }
   loadTrack(e) {
     if (e < 0 || e >= this.tracks.length) return;
@@ -6124,12 +6171,45 @@ let _ = class extends h {
       detail: { index: e, track: this.tracks[e] }
     }));
   }
-  play() {
-    !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());
+  async play() {
+    if (!(!this.tracks[this.currentIndex]?.url || this.tracks.length === 0) && this.audio) {
+      this.visualizer?.connectAudio(this.audio);
+      try {
+        const t = this.audio.play();
+        t instanceof Promise && await t, this.isPlaying = !0, this.autoplayMuted = !1, this.visualizer?.start();
+        try {
+          this.audio.muted = !1;
+        } catch {
+        }
+      } catch (t) {
+        console.warn("Playback failed:", t);
+        try {
+          this.audio.muted = !0;
+          const a = this.audio.play();
+          a instanceof Promise && await a, this.isPlaying = !0, this.autoplayMuted = !0, this.visualizer?.start(), console.info("Muted autoplay succeeded as fallback.");
+        } catch (a) {
+          console.warn("Muted autoplay also failed:", a), this.isPlaying = !1, this.visualizer?.stop();
+        }
+      }
+    }
   }
   pause() {
     this.audio?.pause(), this.isPlaying = !1, this.visualizer?.stop();
   }
+  async unmuteAndResume() {
+    if (this.audio)
+      try {
+        this.audio.muted = !1;
+        try {
+          this.visualizer?.audioContext?.resume?.();
+        } catch {
+        }
+        const e = this.audio.play();
+        e instanceof Promise && await e, this.autoplayMuted = !1, this.isPlaying = !0;
+      } catch (e) {
+        console.warn("Unmute / resume failed:", e);
+      }
+  }
   formatTime(e) {
     if (!e || isNaN(e)) return "00:00";
     const t = Math.floor(e / 60), a = Math.floor(e % 60);
@@ -6199,6 +6279,12 @@ let _ = class extends h {
                   @change="${this.handleVolumeChange}"
                 ></crt-slider>
               </div>
+              ${this.autoplayMuted ? l`
+                <div style="display:flex;align-items:center;gap:8px;">
+                  <crt-button variant="success" @click="${() => this.unmuteAndResume()}">UNMUTE</crt-button>
+                  <crt-text muted style="font-size:12px;">Autoplay started muted — click to unmute</crt-text>
+                </div>
+              ` : ""}
             </div>
           </div>
         ` : l`
@@ -6220,7 +6306,7 @@ let _ = class extends h {
     `;
   }
 };
-_.styles = d`
+x.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6373,39 +6459,48 @@ _.styles = d`
       opacity: 0.5;
     }
   `;
-N([
+$([
   n({ type: Array })
-], _.prototype, "tracks", 2);
-N([
+], x.prototype, "tracks", 2);
+$([
   n({ type: Number })
-], _.prototype, "currentIndex", 2);
-N([
+], x.prototype, "currentIndex", 2);
+$([
+  n({ type: Boolean })
+], x.prototype, "autoplay", 2);
+$([
+  n({ type: Number })
+], x.prototype, "autoplayDelay", 2);
+$([
   m()
-], _.prototype, "isPlaying", 2);
-N([
+], x.prototype, "isPlaying", 2);
+$([
   m()
-], _.prototype, "currentTime", 2);
-N([
+], x.prototype, "currentTime", 2);
+$([
   m()
-], _.prototype, "duration", 2);
-N([
+], x.prototype, "duration", 2);
+$([
   m()
-], _.prototype, "volume", 2);
-N([
+], x.prototype, "volume", 2);
+$([
+  m()
+], x.prototype, "autoplayMuted", 2);
+$([
   ee("audio")
-], _.prototype, "audio", 2);
-N([
+], x.prototype, "audio", 2);
+$([
   ee("crt-visualizer")
-], _.prototype, "visualizer", 2);
-_ = N([
+], x.prototype, "visualizer", 2);
+x = $([
   v("crt-music-player")
-], _);
+], x);
 var da = Object.defineProperty, ha = Object.getOwnPropertyDescriptor, gt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? ha(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && da(t, a, r), r;
 };
-let W = class extends h {
+let X = class extends h {
   constructor() {
     super(), this.rows = 10, this.prompt = "$", this.disabled = !1, this.outputs = [], this.input = "", this.handleFocus = () => {
       this.disabled || this.focus();
@@ -6490,9 +6585,11 @@ let W = class extends h {
     `;
   }
 };
-W.styles = d`
-    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
+X.styles = d`
+    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; width: 100%; max-width: none; box-sizing: border-box; min-width: 0; }
     .term {
+      width: 100%;
+      max-width: none;
       background: #0b0f0b;
       color: #8aff8a;
       padding: 12px;
@@ -6530,30 +6627,30 @@ W.styles = d`
   `;
 gt([
   n({ type: Number })
-], W.prototype, "rows", 2);
+], X.prototype, "rows", 2);
 gt([
   n({ type: String })
-], W.prototype, "prompt", 2);
+], X.prototype, "prompt", 2);
 gt([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "disabled", 2);
+], X.prototype, "disabled", 2);
 gt([
   m()
-], W.prototype, "outputs", 2);
+], X.prototype, "outputs", 2);
 gt([
   m()
-], W.prototype, "input", 2);
-W = gt([
+], X.prototype, "input", 2);
+X = gt([
   v("crt-terminal")
-], W);
-var va = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, Dt = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? ga(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+], X);
+var va = Object.defineProperty, ua = Object.getOwnPropertyDescriptor, lt = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? ua(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && va(t, a, r), r;
 };
-let at = class extends h {
+let I = class extends h {
   constructor() {
-    super(...arguments), this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (e) => {
+    super(...arguments), this.autoplay = !1, this.autoplayDelay = 500, this.tracks = [], this.currentIndex = 0, this.showUploadModal = !1, this.handleFilesChanged = (e) => {
       const a = e.detail.files.filter((s) => s.type.startsWith("audio/") || s.name.endsWith(".mp3") || s.name.endsWith(".wav") || s.name.endsWith(".ogg") || s.name.endsWith(".flac")).map((s) => {
         const r = s.name.replace(/\.[^/.]+$/, "");
         let i = "UNKNOWN ARTIST", o = r.toUpperCase();
@@ -6599,6 +6696,8 @@ let at = class extends h {
             <crt-music-player
               .tracks="${this.tracks}"
               .currentIndex="${this.currentIndex}"
+              .autoplay="${this.autoplay}"
+              .autoplayDelay="${this.autoplayDelay}"
               @track-change="${this.handleTrackChange}"
             ></crt-music-player>
           </div>
@@ -6639,7 +6738,7 @@ let at = class extends h {
     `;
   }
 };
-at.styles = d`
+I.styles = d`
     :host {
       display: block;
       font-family: var(--crt-font-family);
@@ -6712,61 +6811,67 @@ at.styles = d`
       padding-top: var(--crt-spacing-md);
     }
   `;
-Dt([
+lt([
+  n({ type: Boolean })
+], I.prototype, "autoplay", 2);
+lt([
+  n({ type: Number })
+], I.prototype, "autoplayDelay", 2);
+lt([
   m()
-], at.prototype, "tracks", 2);
-Dt([
+], I.prototype, "tracks", 2);
+lt([
   m()
-], at.prototype, "currentIndex", 2);
-Dt([
+], I.prototype, "currentIndex", 2);
+lt([
   m()
-], at.prototype, "showUploadModal", 2);
-Dt([
+], I.prototype, "showUploadModal", 2);
+lt([
   ee("crt-file-upload")
-], at.prototype, "fileUpload", 2);
-at = Dt([
+], I.prototype, "fileUpload", 2);
+I = lt([
   v("crt-music-station")
-], at);
+], I);
 export {
   Yt as Accordion,
-  Ct as AccordionItem,
-  $ as Alert,
-  T as Avatar,
+  Pt as AccordionItem,
+  z as Alert,
+  j as Avatar,
   Rt as AvatarGroup,
   Bt as Badge,
-  kt as Breadcrumb,
-  z as Button,
-  x as Calendar,
+  $t as Breadcrumb,
+  C as Button,
+  w as Calendar,
   Qt as Card,
-  H as Checkbox,
-  q as CodeExample,
-  E as FileUpload,
-  zt as Grid,
+  Y as Checkbox,
+  W as CodeExample,
+  M as FileUpload,
+  Ct as Grid,
   Nt as Heading,
-  xt as Icon,
-  Q as Input,
-  F as Link,
-  dt as Modal,
-  _ as MusicPlayer,
-  at as MusicStation,
-  et as Pagination,
+  wt as Icon,
+  J as Input,
+  H as Link,
+  ht as Modal,
+  x as MusicPlayer,
+  I as MusicStation,
+  rt as Pagination,
   Ot as Playlist,
-  w as Progress,
-  Y as Radio,
-  pt as RadioGroup,
+  k as Progress,
+  V as Radio,
+  dt as RadioGroup,
   D as Select,
-  V as Skeleton,
+  q as Skeleton,
   Ht as SkeletonCard,
   Ft as SkeletonText,
-  k as Slider,
-  $t as Spinner,
-  _t as Table,
-  wt as Tabs,
-  W as Terminal,
+  _ as Slider,
+  _t as Spinner,
+  zt as Table,
+  kt as Tabs,
+  X as Terminal,
   Ut as Text,
-  J as Textarea,
-  j as Toast,
-  M as Toggle,
-  tt as Tooltip,
-  rt as Visualizer
+  tt as Textarea,
+  L as Toast,
+  T as Toggle,
+  et as Tooltip,
+  at as Visualizer
 };