@patimweb/crtstyleguide 1.0.21 → 1.0.22

package/dist/lib/assets/styles.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Thin.ttf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Light.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}:root{--crt-primary: #33ff33;--crt-primary-light: #44ff44;--crt-primary-dark: #22cc22;--crt-bg-dark: #0a0a0a;--crt-bg-darker: #000000;--crt-bg-light: #1a1a1a;--crt-text-primary: #33ff33;--crt-text-secondary: rgba(51, 255, 51, .7);--crt-text-muted: rgba(51, 255, 51, .5);--crt-success: #00ff00;--crt-warning: #ffff00;--crt-error: #ff0000;--crt-info: #00ffff;--crt-border-width: 2px;--crt-border-color: var(--crt-primary);--crt-border: var(--crt-border-width) solid var(--crt-border-color);--crt-radius: 0px;--crt-glow-sm: 0 0 5px rgba(51, 255, 51, .3);--crt-glow: 0 0 10px rgba(51, 255, 51, .5);--crt-glow-lg: 0 0 20px rgba(51, 255, 51, .7);--crt-glow-inset: inset 0 0 10px rgba(51, 255, 51, .1);--crt-component-glow-sm: none;--crt-component-glow: none;--crt-component-glow-lg: none;--crt-component-glow-inset: none;--crt-font-family: "IBM Plex Mono", "Monaco", "Courier New", monospace;--crt-font-size-xs: .75rem;--crt-font-size-sm: .9rem;--crt-font-size-base: 1rem;--crt-font-size-lg: 1.25rem;--crt-font-size-xl: 1.5rem;--crt-font-size-2xl: 2rem;--crt-font-size-3xl: 2.5rem;--crt-line-height: 1.4;--crt-letter-spacing: 2px;--crt-spacing-xs: 4px;--crt-spacing-sm: 8px;--crt-spacing-md: 16px;--crt-spacing-lg: 24px;--crt-spacing-xl: 32px;--crt-spacing-2xl: 48px;--crt-transition: all .3s ease;--crt-cursor-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="16" fill="%2333ff33"/></svg>'), auto;--crt-cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%2333ff33"/></svg>') 6 6, pointer;--crt-cursor-pointer-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%230a0a0a"/></svg>') 6 6, pointer;--crt-cursor-text: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><rect x="2" y="0" width="12" height="2" fill="%2333ff33"/><rect x="7" y="2" width="2" height="20" fill="%2333ff33"/><rect x="2" y="22" width="12" height="2" fill="%2333ff33"/></svg>') 8 12, text}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--crt-font-family);font-size:var(--crt-font-size-base);line-height:var(--crt-line-height);background-color:var(--crt-bg-dark);color:var(--crt-text-primary);text-shadow:0 0 3px var(--crt-primary)}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:none!important;pointer-events:none;z-index:9999}body:after{animation:none!important;opacity:0!important}@keyframes crt-flicker{0%,to{opacity:1}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--crt-bg-dark);border:1px solid var(--crt-primary)}::-webkit-scrollbar-thumb{background:var(--crt-primary);border:1px solid var(--crt-bg-dark);box-shadow:var(--crt-glow)}::-webkit-scrollbar-thumb:hover{background:var(--crt-primary-light);box-shadow:var(--crt-glow-lg)}*{scrollbar-width:thin;scrollbar-color:var(--crt-primary) var(--crt-bg-dark)}.m-xs{margin:var(--crt-spacing-xs)}.m-sm{margin:var(--crt-spacing-sm)}.m-md{margin:var(--crt-spacing-md)}.m-lg{margin:var(--crt-spacing-lg)}.m-xl{margin:var(--crt-spacing-xl)}.m-2xl{margin:var(--crt-spacing-2xl)}.mt-xs{margin-top:var(--crt-spacing-xs)}.mt-sm{margin-top:var(--crt-spacing-sm)}.mt-md{margin-top:var(--crt-spacing-md)}.mt-lg{margin-top:var(--crt-spacing-lg)}.mt-xl{margin-top:var(--crt-spacing-xl)}.mt-2xl{margin-top:var(--crt-spacing-2xl)}.mr-xs{margin-right:var(--crt-spacing-xs)}.mr-sm{margin-right:var(--crt-spacing-sm)}.mr-md{margin-right:var(--crt-spacing-md)}.mr-lg{margin-right:var(--crt-spacing-lg)}.mr-xl{margin-right:var(--crt-spacing-xl)}.mr-2xl{margin-right:var(--crt-spacing-2xl)}.mb-xs{margin-bottom:var(--crt-spacing-xs)}.mb-sm{margin-bottom:var(--crt-spacing-sm)}.mb-md{margin-bottom:var(--crt-spacing-md)}.mb-lg{margin-bottom:var(--crt-spacing-lg)}.mb-xl{margin-bottom:var(--crt-spacing-xl)}.mb-2xl{margin-bottom:var(--crt-spacing-2xl)}.ml-xs{margin-left:var(--crt-spacing-xs)}.ml-sm{margin-left:var(--crt-spacing-sm)}.ml-md{margin-left:var(--crt-spacing-md)}.ml-lg{margin-left:var(--crt-spacing-lg)}.ml-xl{margin-left:var(--crt-spacing-xl)}.ml-2xl{margin-left:var(--crt-spacing-2xl)}.mx-xs{margin-left:var(--crt-spacing-xs);margin-right:var(--crt-spacing-xs)}.mx-sm{margin-left:var(--crt-spacing-sm);margin-right:var(--crt-spacing-sm)}.mx-md{margin-left:var(--crt-spacing-md);margin-right:var(--crt-spacing-md)}.mx-lg{margin-left:var(--crt-spacing-lg);margin-right:var(--crt-spacing-lg)}.mx-xl{margin-left:var(--crt-spacing-xl);margin-right:var(--crt-spacing-xl)}.mx-2xl{margin-left:var(--crt-spacing-2xl);margin-right:var(--crt-spacing-2xl)}.my-xs{margin-top:var(--crt-spacing-xs);margin-bottom:var(--crt-spacing-xs)}.my-sm{margin-top:var(--crt-spacing-sm);margin-bottom:var(--crt-spacing-sm)}.my-md{margin-top:var(--crt-spacing-md);margin-bottom:var(--crt-spacing-md)}.my-lg{margin-top:var(--crt-spacing-lg);margin-bottom:var(--crt-spacing-lg)}.my-xl{margin-top:var(--crt-spacing-xl);margin-bottom:var(--crt-spacing-xl)}.my-2xl{margin-top:var(--crt-spacing-2xl);margin-bottom:var(--crt-spacing-2xl)}.p-xs{padding:var(--crt-spacing-xs)}.p-sm{padding:var(--crt-spacing-sm)}.p-md{padding:var(--crt-spacing-md)}.p-lg{padding:var(--crt-spacing-lg)}.p-xl{padding:var(--crt-spacing-xl)}.p-2xl{padding:var(--crt-spacing-2xl)}.pt-xs{padding-top:var(--crt-spacing-xs)}.pt-sm{padding-top:var(--crt-spacing-sm)}.pt-md{padding-top:var(--crt-spacing-md)}.pt-lg{padding-top:var(--crt-spacing-lg)}.pt-xl{padding-top:var(--crt-spacing-xl)}.pt-2xl{padding-top:var(--crt-spacing-2xl)}.pr-xs{padding-right:var(--crt-spacing-xs)}.pr-sm{padding-right:var(--crt-spacing-sm)}.pr-md{padding-right:var(--crt-spacing-md)}.pr-lg{padding-right:var(--crt-spacing-lg)}.pr-xl{padding-right:var(--crt-spacing-xl)}.pr-2xl{padding-right:var(--crt-spacing-2xl)}.pb-xs{padding-bottom:var(--crt-spacing-xs)}.pb-sm{padding-bottom:var(--crt-spacing-sm)}.pb-md{padding-bottom:var(--crt-spacing-md)}.pb-lg{padding-bottom:var(--crt-spacing-lg)}.pb-xl{padding-bottom:var(--crt-spacing-xl)}.pb-2xl{padding-bottom:var(--crt-spacing-2xl)}.pl-xs{padding-left:var(--crt-spacing-xs)}.pl-sm{padding-left:var(--crt-spacing-sm)}.pl-md{padding-left:var(--crt-spacing-md)}.pl-lg{padding-left:var(--crt-spacing-lg)}.pl-xl{padding-left:var(--crt-spacing-xl)}.pl-2xl{padding-left:var(--crt-spacing-2xl)}.px-xs{padding-left:var(--crt-spacing-xs);padding-right:var(--crt-spacing-xs)}.px-sm{padding-left:var(--crt-spacing-sm);padding-right:var(--crt-spacing-sm)}.px-md{padding-left:var(--crt-spacing-md);padding-right:var(--crt-spacing-md)}.px-lg{padding-left:var(--crt-spacing-lg);padding-right:var(--crt-spacing-lg)}.px-xl{padding-left:var(--crt-spacing-xl);padding-right:var(--crt-spacing-xl)}.px-2xl{padding-left:var(--crt-spacing-2xl);padding-right:var(--crt-spacing-2xl)}.py-xs{padding-top:var(--crt-spacing-xs);padding-bottom:var(--crt-spacing-xs)}.py-sm{padding-top:var(--crt-spacing-sm);padding-bottom:var(--crt-spacing-sm)}.py-md{padding-top:var(--crt-spacing-md);padding-bottom:var(--crt-spacing-md)}.py-lg{padding-top:var(--crt-spacing-lg);padding-bottom:var(--crt-spacing-lg)}.py-xl{padding-top:var(--crt-spacing-xl);padding-bottom:var(--crt-spacing-xl)}.py-2xl{padding-top:var(--crt-spacing-2xl);padding-bottom:var(--crt-spacing-2xl)}

package/dist/lib/index.js

@@ -4,7 +4,7 @@ const d = (e) => (t, a) => {
     customElements.define(e, t);
   }) : customElements.define(e, t);
 };
-const zt = globalThis, Nt = zt.ShadowRoot && (zt.ShadyCSS === void 0 || zt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ee = /* @__PURE__ */ Symbol(), Zt = /* @__PURE__ */ new WeakMap();
+const zt = globalThis, Rt = zt.ShadowRoot && (zt.ShadyCSS === void 0 || zt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ee = /* @__PURE__ */ Symbol(), Qt = /* @__PURE__ */ new WeakMap();
 let ne = class {
   constructor(t, a, i) {
     if (this._$cssResult$ = !0, i !== ee) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -13,9 +13,9 @@ let ne = class {
   get styleSheet() {
     let t = this.o;
     const a = this.t;
-    if (Nt && t === void 0) {
+    if (Rt && t === void 0) {
       const i = a !== void 0 && a.length === 1;
-      i && (t = Zt.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Zt.set(a, t));
+      i && (t = Qt.get(a)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Qt.set(a, t));
     }
     return t;
   }
@@ -24,12 +24,12 @@ let ne = class {
   }
 };
 const le = (e) => new ne(typeof e == "string" ? e : e + "", void 0, ee), ce = (e, t) => {
-  if (Nt) e.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
+  if (Rt) e.adoptedStyleSheets = t.map((a) => a instanceof CSSStyleSheet ? a : a.styleSheet);
   else for (const a of t) {
     const i = document.createElement("style"), r = zt.litNonce;
     r !== void 0 && i.setAttribute("nonce", r), i.textContent = a.cssText, e.appendChild(i);
   }
-}, Qt = Nt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
+}, Zt = Rt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let a = "";
   for (const i of t.cssRules) a += i.cssText;
   return le(a);
@@ -118,8 +118,8 @@ class ct extends HTMLElement {
     const a = [];
     if (Array.isArray(t)) {
       const i = new Set(t.flat(1 / 0).reverse());
-      for (const r of i) a.unshift(Qt(r));
-    } else t !== void 0 && a.push(Qt(t));
+      for (const r of i) a.unshift(Zt(r));
+    } else t !== void 0 && a.push(Zt(t));
     return a;
   }
   static _$Eu(t, a) {
@@ -421,7 +421,7 @@ $.styles = c`
       box-sizing: border-box;
       height: 100%;
       padding: 16px 32px;
-      font-family: 'VT323', 'Courier New', monospace;
+      font-family: var(--crt-font-family);
       font-size: 1rem;
       letter-spacing: 2px;
       cursor: var(--crt-cursor-pointer);
@@ -442,12 +442,7 @@ $.styles = c`
     button:hover:not(:disabled) {
       background-color: transparent;
       color: #33ff33;
-      box-shadow: 
-        0 0 10px rgba(51, 255, 51, 0.7), 
-        0 0 20px rgba(51, 255, 51, 0.5),
-        0 0 40px rgba(51, 255, 51, 0.3),
-        inset 0 0 10px rgba(0, 0, 0, 0.2);
-      transform: scale(1.05);
+      box-shadow: none;
       cursor: var(--crt-cursor-pointer);
     }
 
@@ -471,11 +466,7 @@ $.styles = c`
     :host([variant="success"]) button:hover:not(:disabled) {
       background-color: transparent;
       color: var(--crt-success, #00ff00);
-      box-shadow: 
-        0 0 10px rgba(0, 255, 0, 0.7), 
-        0 0 20px rgba(0, 255, 0, 0.5),
-        0 0 40px rgba(0, 255, 0, 0.3),
-        inset 0 0 10px rgba(0, 0, 0, 0.2);
+      box-shadow: none;
     }
 
     /* Warning variant */
@@ -488,11 +479,7 @@ $.styles = c`
     :host([variant="warning"]) button:hover:not(:disabled) {
       background-color: transparent;
       color: var(--crt-warning, #ffcc00);
-      box-shadow: 
-        0 0 10px rgba(255, 204, 0, 0.7), 
-        0 0 20px rgba(255, 204, 0, 0.5),
-        0 0 40px rgba(255, 204, 0, 0.3),
-        inset 0 0 10px rgba(0, 0, 0, 0.2);
+      box-shadow: none;
     }
 
     /* Error variant */
@@ -505,11 +492,7 @@ $.styles = c`
     :host([variant="error"]) button:hover:not(:disabled) {
       background-color: transparent;
       color: var(--crt-danger, #ff3333);
-      box-shadow: 
-        0 0 10px rgba(255, 51, 51, 0.7), 
-        0 0 20px rgba(255, 51, 51, 0.5),
-        0 0 40px rgba(255, 51, 51, 0.3),
-        inset 0 0 10px rgba(0, 0, 0, 0.2);
+      box-shadow: none;
     }
 
     /* Link variant */
@@ -527,7 +510,7 @@ $.styles = c`
       color: #33ff33;
       box-shadow: none;
       transform: none;
-      text-shadow: 0 0 10px rgba(51, 255, 51, 0.7);
+      text-shadow: none;
     }
 
     /* Size variants */
@@ -619,7 +602,6 @@ Pt.styles = c`
       font-size: var(--crt-font-size-sm);
       letter-spacing: 1px;
       text-transform: uppercase;
-      box-shadow: var(--crt-component-glow-sm);
       white-space: nowrap;
     }
 
@@ -682,7 +664,7 @@ Ot.styles = c`
       font-family: var(--crt-font-family);
       color: var(--crt-text-primary);
       letter-spacing: var(--crt-letter-spacing);
-      text-shadow: 0 0 5px var(--crt-primary);
+      text-shadow: none;
       margin: var(--crt-spacing-lg) 0 var(--crt-spacing-md) 0;
     }
 
@@ -805,20 +787,17 @@ ht.styles = c`
 
     .tab-button:hover:not(.active) {
       color: var(--crt-text-primary);
-      box-shadow: var(--crt-glow-sm);
     }
 
     .tab-button.active {
       color: var(--crt-primary);
       border-bottom-color: var(--crt-primary);
-      box-shadow: var(--crt-glow);
     }
 
     .tabs-content {
       background: transparent;
       border: 1px solid var(--crt-primary);
       padding: var(--crt-spacing-lg);
-      box-shadow: var(--crt-glow-inset);
     }
 
     .tab-pane {
@@ -895,7 +874,6 @@ H.styles = c`
       font-size: var(--crt-font-size-base);
       letter-spacing: 1px;
       transition: var(--crt-transition);
-      box-shadow: var(--crt-component-glow-inset);
       box-sizing: border-box;
       cursor: var(--crt-cursor-text);
     }
@@ -905,12 +883,12 @@ H.styles = c`
     }
 
     input:hover:not(:disabled) {
-      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.2), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     input:focus:not(:disabled) {
       outline: none;
-      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.3), var(--crt-component-glow);
+      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.3);
     }
 
     input:disabled {
@@ -974,7 +952,6 @@ K.styles = c`
       font-size: var(--crt-font-size-base);
       letter-spacing: 1px;
       transition: var(--crt-transition);
-      box-shadow: var(--crt-component-glow-inset);
       resize: vertical;
       min-height: 120px;
       box-sizing: border-box;
@@ -986,12 +963,12 @@ K.styles = c`
     }
 
     textarea:hover:not(:disabled) {
-      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.2), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     textarea:focus:not(:disabled) {
       outline: none;
-      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.3), var(--crt-component-glow);
+      box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.3);
     }
 
     textarea:disabled {
@@ -1060,7 +1037,7 @@ U.styles = c`
 
     a:hover {
       color: var(--crt-primary-light);
-      text-shadow: 0 0 10px var(--crt-primary);
+      text-shadow: none;
     }
 
     a:active {
@@ -1242,7 +1219,6 @@ E.styles = c`
     .file-manager {
       border: 3px double var(--crt-primary);
       background: transparent;
-      box-shadow: var(--crt-component-glow-inset);
     }
 
     /* Header */
@@ -1260,7 +1236,6 @@ E.styles = c`
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: var(--crt-font-size-sm);
-      text-shadow: var(--crt-component-glow);
       display: flex;
       align-items: center;
       gap: var(--crt-spacing-sm);
@@ -1292,7 +1267,6 @@ E.styles = c`
     .drop-zone.dragging {
       background: transparent;
       border-color: var(--crt-primary);
-      box-shadow: var(--crt-component-glow);
     }
 
     .drop-zone.dragging {
@@ -1302,7 +1276,6 @@ E.styles = c`
     .drop-zone-icon {
       font-size: 3rem;
       color: var(--crt-primary);
-      text-shadow: var(--crt-glow);
       animation: float 2s ease-in-out infinite;
     }
 
@@ -1460,7 +1433,7 @@ E.styles = c`
     .file-remove:hover {
       background: var(--crt-error);
       color: var(--crt-bg-dark);
-      box-shadow: 0 0 10px var(--crt-error);
+      box-shadow: none;
     }
 
     /* Footer */
@@ -1507,7 +1480,6 @@ E.styles = c`
 
     .file-list::-webkit-scrollbar-thumb {
       background: var(--crt-primary);
-      box-shadow: var(--crt-glow-sm);
     }
 
     /* Progress bar for uploading */
@@ -1522,7 +1494,6 @@ E.styles = c`
     .progress-fill {
       height: 100%;
       background: var(--crt-primary);
-      box-shadow: var(--crt-glow-sm);
       transition: width 0.3s ease;
     }
   `;
@@ -1547,8 +1518,8 @@ J([
 E = J([
   d("crt-file-upload")
 ], E);
-var Ue = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, C = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Re(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+var Ue = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, C = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ne(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
   return i && r && Ue(t, a, r), r;
 };
@@ -1736,7 +1707,6 @@ b.styles = c`
       font-size: var(--crt-font-size-base);
       min-width: 180px;
       cursor: var(--crt-cursor-pointer);
-      box-shadow: var(--crt-component-glow-inset);
       transition: var(--crt-transition);
     }
 
@@ -1746,12 +1716,12 @@ b.styles = c`
     }
 
     .input-field:hover {
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     .input-field:focus {
       outline: none;
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow);
+      box-shadow: none;
     }
 
     .calendar-toggle {
@@ -1767,7 +1737,6 @@ b.styles = c`
     .calendar-toggle:hover {
       background: var(--crt-primary);
       color: var(--crt-bg-dark);
-      box-shadow: var(--crt-glow);
     }
 
     .calendar-dropdown {
@@ -1780,8 +1749,7 @@ b.styles = c`
       -webkit-backdrop-filter: blur(10px);
       border: 3px double var(--crt-primary);
       box-shadow: 
-        0 0 20px color-mix(in srgb, var(--crt-primary) 30%, transparent),
-        var(--crt-component-glow-inset);
+        0 0 20px color-mix(in srgb, var(--crt-primary) 30%, transparent);
       z-index: 1000;
       display: none;
       min-width: 280px;
@@ -1880,7 +1848,6 @@ b.styles = c`
     .day.selected {
       background: var(--crt-primary);
       color: var(--crt-bg-dark);
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     .day.other-month {
@@ -1953,10 +1920,10 @@ C([
 b = C([
   d("crt-calendar")
 ], b);
-var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, tt = (e, t, a, i) => {
+var Re = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, tt = (e, t, a, i) => {
   for (var r = i > 1 ? void 0 : i ? Fe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Ne(t, a, r), r;
+  return i && r && Re(t, a, r), r;
 };
 let D = class extends p {
   constructor() {
@@ -2070,13 +2037,12 @@ D.styles = c`
       font-family: var(--crt-font-family);
       font-size: var(--crt-font-size-base);
       cursor: var(--crt-cursor-pointer);
-      box-shadow: var(--crt-component-glow-inset);
       transition: var(--crt-transition);
       width: 100%;
     }
 
     .select-trigger:hover:not(.disabled) {
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     .select-trigger.open {
@@ -2125,8 +2091,7 @@ D.styles = c`
       z-index: 1000;
       display: none;
       box-shadow: 
-        0 10px 20px color-mix(in srgb, var(--crt-primary) 20%, transparent),
-        var(--crt-component-glow-inset);
+        0 10px 20px color-mix(in srgb, var(--crt-primary) 20%, transparent);
     }
 
     .select-dropdown.open {
@@ -2195,7 +2160,6 @@ D.styles = c`
 
     .select-dropdown::-webkit-scrollbar-thumb {
       background: var(--crt-primary);
-      box-shadow: var(--crt-component-glow-sm);
     }
   `;
 tt([
@@ -2353,7 +2317,6 @@ m.styles = c`
       background: transparent;
       color: var(--crt-text-primary);
       border: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-component-glow-inset);
       box-sizing: border-box;
       transition: var(--crt-transition);
       cursor: var(--crt-cursor-text);
@@ -2366,7 +2329,7 @@ m.styles = c`
 
     .input:focus {
       outline: none;
-      box-shadow: inset 0 0 10px rgba(51,255,51,0.2), var(--crt-component-glow);
+      box-shadow: inset 0 0 10px rgba(51,255,51,0.2);
     }
 
     .list {
@@ -2376,7 +2339,7 @@ m.styles = c`
       right: 0;
       background: transparent;
       border: 2px solid var(--crt-primary);
-      box-shadow: 0 10px 20px color-mix(in srgb, var(--crt-primary) 20%, transparent), var(--crt-component-glow-inset);
+      box-shadow: 0 10px 20px color-mix(in srgb, var(--crt-primary) 20%, transparent);
       max-height: 240px;
       overflow-y: auto;
       z-index: 1000;
@@ -2398,7 +2361,6 @@ m.styles = c`
     .item:hover,
     .item[aria-selected="true"] {
       background: transparent;
-      box-shadow: var(--crt-component-glow-sm);
       color: var(--crt-primary);
     }
 
@@ -2452,7 +2414,7 @@ var qe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, v = (e, t,
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
   return i && r && qe(t, a, r), r;
 };
-let R = class extends p {
+let N = class extends p {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.indeterminate = !1, this.label = "", this.value = "";
   }
@@ -2480,7 +2442,7 @@ let R = class extends p {
     `;
   }
 };
-R.styles = c`
+N.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2521,16 +2483,14 @@ R.styles = c`
       align-items: center;
       justify-content: center;
       transition: var(--crt-transition);
-      box-shadow: var(--crt-component-glow-inset);
     }
 
     :host(:hover:not([disabled])) .checkbox-box {
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     input:checked + .checkbox-box {
       background: var(--crt-primary);
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     .checkmark {
@@ -2564,23 +2524,23 @@ R.styles = c`
   `;
 v([
   n({ type: Boolean, reflect: !0 })
-], R.prototype, "checked", 2);
+], N.prototype, "checked", 2);
 v([
   n({ type: Boolean, reflect: !0 })
-], R.prototype, "disabled", 2);
+], N.prototype, "disabled", 2);
 v([
   n({ type: Boolean })
-], R.prototype, "indeterminate", 2);
+], N.prototype, "indeterminate", 2);
 v([
   n({ type: String })
-], R.prototype, "label", 2);
+], N.prototype, "label", 2);
 v([
   n({ type: String })
-], R.prototype, "value", 2);
-R = v([
+], N.prototype, "value", 2);
+N = v([
   d("crt-checkbox")
-], R);
-let N = class extends p {
+], N);
+let R = class extends p {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.value = "", this.name = "";
   }
@@ -2609,7 +2569,7 @@ let N = class extends p {
     `;
   }
 };
-N.styles = c`
+R.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2651,11 +2611,10 @@ N.styles = c`
       align-items: center;
       justify-content: center;
       transition: var(--crt-transition);
-      box-shadow: var(--crt-component-glow-inset);
     }
 
     :host(:hover:not([disabled])) .radio-circle {
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     .radio-dot {
@@ -2666,7 +2625,6 @@ N.styles = c`
       opacity: 0;
       transform: scale(0);
       transition: all 0.15s ease;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     input:checked + .radio-circle .radio-dot {
@@ -2675,7 +2633,7 @@ N.styles = c`
     }
 
     input:checked + .radio-circle {
-      box-shadow: var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     .label {
@@ -2685,22 +2643,22 @@ N.styles = c`
   `;
 v([
   n({ type: Boolean, reflect: !0 })
-], N.prototype, "checked", 2);
+], R.prototype, "checked", 2);
 v([
   n({ type: Boolean, reflect: !0 })
-], N.prototype, "disabled", 2);
+], R.prototype, "disabled", 2);
 v([
   n({ type: String })
-], N.prototype, "label", 2);
+], R.prototype, "label", 2);
 v([
   n({ type: String })
-], N.prototype, "value", 2);
+], R.prototype, "value", 2);
 v([
   n({ type: String })
-], N.prototype, "name", 2);
-N = v([
+], R.prototype, "name", 2);
+R = v([
   d("crt-radio")
-], N);
+], R);
 let it = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.horizontal = !1, this._handleChange = (e) => {
@@ -2812,7 +2770,6 @@ y.styles = c`
       height: 20px;
       background: transparent;
       border: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-component-glow-inset);
       position: relative;
       overflow: hidden;
     }
@@ -2822,7 +2779,6 @@ y.styles = c`
       background: var(--crt-primary);
       transition: width 0.3s ease;
       position: relative;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     /* Animated striped effect */
@@ -2992,7 +2948,6 @@ X.styles = c`
       opacity: 0;
       transition: opacity 0.2s ease;
       box-shadow: 
-        var(--crt-glow-sm),
         0 5px 15px rgba(0, 0, 0, 0.5);
     }
 
@@ -3090,10 +3045,10 @@ yt([
 X = yt([
   d("crt-tooltip")
 ], X);
-var Ze = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, Ht = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Qe(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+var Qe = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, Ht = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ze(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Ze(t, a, r), r;
+  return i && r && Qe(t, a, r), r;
 };
 let ut = class extends p {
   constructor() {
@@ -3147,13 +3102,11 @@ ut.styles = c`
 
     a:hover {
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow-sm);
     }
 
     .active a,
     .active .text {
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow-sm);
     }
 
     .separator {
@@ -3265,13 +3218,11 @@ W.styles = c`
 
     .page-btn:hover:not(:disabled):not(.active) {
       background: transparent;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     .page-btn.active {
       background: var(--crt-primary);
       color: var(--crt-bg-dark);
-      box-shadow: var(--crt-component-glow);
     }
 
     .page-btn:disabled {
@@ -3433,13 +3384,11 @@ w.styles = c`
       background: var(--crt-primary);
       border: 2px solid var(--crt-bg-dark);
       cursor: var(--crt-cursor-pointer);
-      box-shadow: var(--crt-component-glow);
       transition: var(--crt-transition);
     }
 
     input[type="range"]::-webkit-slider-thumb:hover {
       transform: scale(1.1);
-      box-shadow: var(--crt-component-glow-lg);
     }
 
     input[type="range"]::-moz-range-thumb {
@@ -3449,7 +3398,6 @@ w.styles = c`
       border: 2px solid var(--crt-bg-dark);
       border-radius: 0;
       cursor: var(--crt-cursor-pointer);
-      box-shadow: var(--crt-component-glow);
     }
 
     input[type="range"]::-moz-range-track {
@@ -3463,7 +3411,7 @@ w.styles = c`
     }
 
     input[type="range"]:focus::-webkit-slider-thumb {
-      box-shadow: var(--crt-component-glow-lg);
+      box-shadow: none;
     }
 
     .slider-marks {
@@ -3486,7 +3434,6 @@ w.styles = c`
       transform: translateY(-50%);
       height: 4px;
       background: var(--crt-primary);
-      box-shadow: var(--crt-component-glow-sm);
       pointer-events: none;
     }
 
@@ -3601,7 +3548,6 @@ M.styles = c`
       border: 2px solid var(--crt-primary);
       position: relative;
       transition: var(--crt-transition);
-      box-shadow: var(--crt-component-glow-inset);
     }
 
     .toggle-thumb {
@@ -3621,11 +3567,10 @@ M.styles = c`
     input:checked + .toggle-track .toggle-thumb {
       left: 27px;
       background: var(--crt-primary);
-      box-shadow: var(--crt-component-glow);
     }
 
     :host(:hover:not([disabled])) .toggle-track {
-      box-shadow: var(--crt-component-glow-inset), var(--crt-component-glow-sm);
+      box-shadow: none;
     }
 
     .toggle-labels {
@@ -3759,7 +3704,6 @@ j.styles = c`
       border: 2px solid var(--crt-primary);
       color: var(--crt-primary);
       overflow: hidden;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     /* Sizes */
@@ -3819,7 +3763,6 @@ j.styles = c`
       font-weight: bold;
       text-transform: uppercase;
       letter-spacing: 1px;
-      text-shadow: var(--crt-component-glow);
     }
 
     .fallback-icon {
@@ -3930,7 +3873,6 @@ Et.styles = c`
       font-family: var(--crt-font-family);
       font-size: 12px;
       margin-left: -12px;
-      box-shadow: var(--crt-component-glow-sm);
     }
   `;
 L([
@@ -4318,7 +4260,6 @@ k.styles = c`
       flex-shrink: 0;
       font-size: 1.2em;
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
     }
 
     .alert-content {
@@ -4330,7 +4271,6 @@ k.styles = c`
       font-weight: bold;
       margin-bottom: var(--crt-spacing-xs);
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
       text-transform: uppercase;
       letter-spacing: 1px;
     }
@@ -4354,7 +4294,6 @@ k.styles = c`
 
     .alert-close:hover {
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
     }
 
     .alert-actions {
@@ -4583,7 +4522,6 @@ vt.styles = c`
       font-family: var(--crt-font-family);
       font-size: var(--crt-font-size-lg);
       letter-spacing: 4px;
-      text-shadow: var(--crt-component-glow);
       animation: blink 1s ease-in-out infinite;
     }
 
@@ -4710,7 +4648,7 @@ var ur = Object.getOwnPropertyDescriptor, vr = (e, t, a, i) => {
     (o = e[s]) && (r = o(r) || r);
   return r;
 };
-let Rt = class extends p {
+let Nt = class extends p {
   render() {
     return l`
       <div class="card">
@@ -4727,7 +4665,7 @@ let Rt = class extends p {
     `;
   }
 };
-Rt.styles = c`
+Nt.styles = c`
     :host {
       /* Make the card element act like a normal block-level container
          so external width/height styles can be applied responsively. */
@@ -4742,15 +4680,11 @@ Rt.styles = c`
       border: 3px double var(--crt-primary);
       padding: var(--crt-spacing-lg);
       background-color: transparent;
-      box-shadow: var(--crt-component-glow-sm), var(--crt-component-glow-inset);
       transition: var(--crt-transition);
     }
 
     .card:hover {
-      box-shadow: 
-        0 0 15px color-mix(in srgb, var(--crt-primary) 40%, transparent),
-        0 0 30px color-mix(in srgb, var(--crt-primary) 20%, transparent),
-        var(--crt-component-glow-inset);
+      box-shadow: none;
     }
 
     .card-header {
@@ -4769,9 +4703,9 @@ Rt.styles = c`
       margin-top: var(--crt-spacing-md);
     }
   `;
-Rt = vr([
+Nt = vr([
   d("crt-card")
-], Rt);
+], Nt);
 var gr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, Xt = (e, t, a, i) => {
   for (var r = i > 1 ? void 0 : i ? mr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
@@ -4807,7 +4741,6 @@ gt.styles = c`
       font-family: var(--crt-font-family);
       font-size: var(--crt-font-size-sm);
       border: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     thead {
@@ -4831,17 +4764,12 @@ gt.styles = c`
 
     tbody tr:hover {
       background-color: transparent;
-      box-shadow: inset 0 0 20px rgba(51, 255, 51, 0.1);
+      box-shadow: none;
     }
 
     td {
       color: var(--crt-primary);
       padding: var(--crt-spacing-md);
-      border-right: 1px solid rgba(51, 255, 51, 0.1);
-    }
-
-    td:last-child {
-      border-right: none;
     }
 
     tbody tr:last-child {
@@ -5014,7 +4942,6 @@ V.styles = c`
       border: 2px solid var(--crt-primary);
       background: transparent !important;
       background-image: none !important;
-      box-shadow: var(--crt-component-glow-inset);
       width: 100%;
       box-sizing: border-box;
     }
@@ -5048,7 +4975,6 @@ V.styles = c`
     .tab-btn.active {
       color: var(--crt-primary);
       border-bottom-color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow-sm);
     }
 
     .tab-content {
@@ -5228,8 +5154,7 @@ st.styles = c`
       border: 3px double var(--crt-primary);
       box-shadow: 
         0 0 20px color-mix(in srgb, var(--crt-primary) 30%, transparent),
-        0 0 40px color-mix(in srgb, var(--crt-primary) 15%, transparent),
-        var(--crt-component-glow-inset);
+        0 0 40px color-mix(in srgb, var(--crt-primary) 15%, transparent);
       max-width: 90vw;
       max-height: 90vh;
       min-width: 300px;
@@ -5284,7 +5209,6 @@ st.styles = c`
     .close-btn:hover {
       background: transparent;
       color: var(--crt-primary);
-      box-shadow: var(--crt-component-glow);
     }
 
     .modal-body {
@@ -5450,7 +5374,8 @@ T.styles = c`
     }
 
     .toast {
-      background: transparent;
+      background: rgba(10, 10, 10, 0.95);
+      backdrop-filter: blur(10px);
       border: 2px solid var(--crt-primary);
       padding: var(--crt-spacing-md) var(--crt-spacing-lg);
       font-family: var(--crt-font-family);
@@ -5462,7 +5387,6 @@ T.styles = c`
       align-items: center;
       gap: var(--crt-spacing-md);
       animation: toast-in 0.3s ease;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     .toast.removing {
@@ -5809,7 +5733,6 @@ G.styles = c`
       padding: var(--crt-spacing-md);
       position: relative;
       background: transparent;
-      box-shadow: var(--crt-component-glow-inset);
       box-sizing: border-box;
       overflow: hidden;
     }
@@ -5827,7 +5750,6 @@ G.styles = c`
       font-size: var(--crt-font-size-sm);
       letter-spacing: 2px;
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
       z-index: 10;
     }
 
@@ -5850,7 +5772,6 @@ G.styles = c`
 
     .mode-toggle:hover {
       background: transparent;
-      box-shadow: var(--crt-component-glow);
     }
 
     .bar {
@@ -5971,7 +5892,6 @@ bt.styles = c`
       font-family: var(--crt-font-family);
       font-size: var(--crt-font-size-sm);
       border: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-component-glow-sm);
       box-sizing: border-box;
       table-layout: fixed;
     }
@@ -5988,7 +5908,6 @@ bt.styles = c`
       text-transform: uppercase;
       letter-spacing: var(--crt-letter-spacing);
       font-weight: 600;
-      text-shadow: var(--crt-component-glow);
     }
 
     th.actions {
@@ -6009,27 +5928,20 @@ bt.styles = c`
 
     tbody tr:hover {
       background-color: transparent;
-      box-shadow: inset 0 0 20px rgba(51, 255, 51, 0.1);
+      box-shadow: none;
     }
 
     tbody tr.active {
       background-color: transparent;
-      box-shadow: inset 0 0 30px rgba(51, 255, 51, 0.2);
     }
 
     tbody tr.active td {
       color: var(--crt-success);
-      text-shadow: var(--crt-component-glow);
     }
 
     td {
       color: var(--crt-primary);
       padding: var(--crt-spacing-md);
-      border-right: 1px solid rgba(51, 255, 51, 0.1);
-    }
-
-    td:last-child {
-      border-right: none;
     }
 
     tbody tr:last-child {
@@ -6054,6 +5966,8 @@ bt.styles = c`
 
     td.track-artist {
       opacity: 0.8;
+      white-space: normal;
+      word-break: break-word;
     }
 
     td.actions {
@@ -6093,7 +6007,6 @@ bt.styles = c`
       font-size: 3rem;
       margin-bottom: var(--crt-spacing-md);
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
     }
 
     /* Scrollbar wrapper */
@@ -6124,7 +6037,6 @@ bt.styles = c`
 
     .table-wrapper::-webkit-scrollbar-thumb {
       background: rgba(0, 255, 0, 0.5);
-      box-shadow: var(--crt-component-glow-sm);
     }
   `;
 Gt([
@@ -6336,7 +6248,6 @@ g.styles = c`
     .player {
       border: 3px double var(--crt-primary);
       background: transparent;
-      box-shadow: var(--crt-component-glow-inset);
       width: 100%;
       box-sizing: border-box;
       overflow: hidden;
@@ -6359,7 +6270,6 @@ g.styles = c`
       font-size: 1.5rem;
       letter-spacing: 4px;
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
     }
 
     /* Visualizer */
@@ -6397,7 +6307,6 @@ g.styles = c`
     .track-title {
       font-size: var(--crt-font-size-lg);
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -6605,7 +6514,8 @@ let Y = class extends p {
   }
 };
 Y.styles = c`
-    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; width: 100%; max-width: none; box-sizing: border-box; min-width: 0; }
+    :host { display: block; font-family: var(--crt-font-family); width: 100%; max-width: none; box-sizing: border-box; min-width: 0; outline: none; }
+    :host(:focus) { outline: none; }
     .term {
       width: 100%;
       max-width: none;
@@ -6618,7 +6528,9 @@ Y.styles = c`
       overflow: auto;
       box-sizing: border-box;
       border-radius: 0;
+      outline: none;
     }
+    .term:focus { outline: none; }
     :host([no-border]) .term {
       padding: 0;
       background: transparent;
@@ -6672,7 +6584,7 @@ var Ar = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, _t = (e, t
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
   return i && r && Ar(t, a, r), r;
 };
-let Z = class extends p {
+let Q = class extends p {
   constructor() {
     super(...arguments), this.items = [], this.brand = "", this._open = !1;
   }
@@ -6754,7 +6666,7 @@ let Z = class extends p {
     `;
   }
 };
-Z.styles = c`
+Q.styles = c`
     :host { display: block; font-family: var(--crt-font-family); }
     .nav {
       position: relative;
@@ -6765,7 +6677,6 @@ Z.styles = c`
       padding: var(--crt-spacing-md) var(--crt-spacing-lg);
       background: transparent;
       border-bottom: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-component-glow-inset);
     }
 
     .brand {
@@ -6773,7 +6684,6 @@ Z.styles = c`
       gap: 12px;
       align-items: center;
       color: var(--crt-primary);
-      text-shadow: var(--crt-component-glow);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
@@ -6801,12 +6711,10 @@ Z.styles = c`
 
     .link:hover {
       background: transparent;
-      box-shadow: var(--crt-component-glow-sm);
     }
 
     .link[aria-current="true"] {
       background: transparent;
-      box-shadow: var(--crt-component-glow);
       color: var(--crt-bg-dark);
     }
 
@@ -6844,19 +6752,19 @@ Z.styles = c`
   `;
 _t([
   n({ type: Array })
-], Z.prototype, "items", 2);
+], Q.prototype, "items", 2);
 _t([
   n({ type: String })
-], Z.prototype, "brand", 2);
+], Q.prototype, "brand", 2);
 _t([
   u()
-], Z.prototype, "_open", 2);
+], Q.prototype, "_open", 2);
 _t([
   n({ type: Number })
-], Z.prototype, "maxVisible", 2);
-Z = _t([
+], Q.prototype, "maxVisible", 2);
+Q = _t([
   d("crt-navbar")
-], Z);
+], Q);
 var Lr = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, ae = (e, t, a, i) => {
   for (var r = i > 1 ? void 0 : i ? Br(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
@@ -6894,7 +6802,6 @@ Tt.styles = c`
       padding: var(--crt-spacing-lg) var(--crt-spacing-md);
       background: transparent;
       border-bottom: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-glow-inset);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -6924,8 +6831,8 @@ ae([
 Tt = ae([
   d("crt-header")
 ], Tt);
-var Ur = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, ie = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Rr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+var Ur = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, ie = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Nr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
   return i && r && Ur(t, a, r), r;
 };
@@ -6963,12 +6870,12 @@ ie([
 At = ie([
   d("crt-footer")
 ], At);
-var Nr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, $t = (e, t, a, i) => {
+var Rr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, $t = (e, t, a, i) => {
   for (var r = i > 1 ? void 0 : i ? Fr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Nr(t, a, r), r;
+  return i && r && Rr(t, a, r), r;
 };
-let Q = class extends p {
+let Z = class extends p {
   constructor() {
     super(...arguments), this.items = [], this.open = !1, this.label = "Menu", this._active = -1, this._triggerId = `crt-menu-trigger-${Math.random().toString(36).slice(2, 8)}`, this._listId = `crt-menu-list-${Math.random().toString(36).slice(2, 8)}`, this._onDocClick = (e) => {
       this.open && (this.contains(e.target) || (this.open = !1, this._active = -1, this.shadowRoot?.querySelector("button.trigger")?.focus()));
@@ -7046,7 +6953,7 @@ let Q = class extends p {
     `;
   }
 };
-Q.styles = c`
+Z.styles = c`
     :host { display: inline-block; position: relative; font-family: var(--crt-font-family); }
     button.trigger {
       background: transparent;
@@ -7062,7 +6969,6 @@ Q.styles = c`
       right: 0;
       background: transparent;
       border: 2px solid var(--crt-primary);
-      box-shadow: var(--crt-glow-sm);
       margin-top: 8px;
       min-width: 160px;
       display: none;
@@ -7083,25 +6989,24 @@ Q.styles = c`
 
     .item[aria-selected='true'] {
       background: transparent;
-      box-shadow: var(--crt-glow-sm);
       color: var(--crt-bg-dark);
     }
   `;
 $t([
   n({ type: Array })
-], Q.prototype, "items", 2);
+], Z.prototype, "items", 2);
 $t([
   n({ type: Boolean, reflect: !0 })
-], Q.prototype, "open", 2);
+], Z.prototype, "open", 2);
 $t([
   n({ type: String })
-], Q.prototype, "label", 2);
+], Z.prototype, "label", 2);
 $t([
   u()
-], Q.prototype, "_active", 2);
-Q = $t([
+], Z.prototype, "_active", 2);
+Z = $t([
   d("crt-menu")
-], Q);
+], Z);
 var Vr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, se = (e, t, a, i) => {
   for (var r = i > 1 ? void 0 : i ? Yr(t, a) : t, s = e.length - 1, o; s >= 0; s--)
     (o = e[s]) && (r = (i ? o(t, a, r) : o(r)) || r);
@@ -7116,7 +7021,7 @@ let It = class extends p {
       <!-- SVG Clip Path für gerundete CRT-Bildschirmkanten -->
       <svg height="0" width="0" viewBox="0 0 93.88 76.19" style="position: absolute;">
         <clipPath id="crtPath" clipPathUnits="objectBoundingBox" transform="scale(0.01065 0.01312)">
-          <path d="M47.78.5c11.65,0,38,.92,41.81,4,3.59,3,3.79,22.28,3.79,34.19,0,11.67-.08,27.79-3.53,31.24S60.3,75.69,47.78,75.69c-11.2,0-39.89-1.16-44-5.27S.57,52.42.57,38.73.31,8.56,4,4.88,34.77.5,47.78.5Z" />
+          <path d="M8,0.5 L85.88,0.5 Q93.38,0.5 93.38,8 L93.38,68.19 Q93.38,75.69 85.88,75.69 L8,75.69 Q0.5,75.69 0.5,68.19 L0.5,8 Q0.5,0.5 8,0.5 Z" />
         </clipPath>
       </svg>
 
@@ -7144,6 +7049,24 @@ It.styles = c`
       overflow: hidden;
     }
 
+    .screen::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      background: radial-gradient(
+        ellipse at center,
+        transparent 0%,
+        transparent 60%,
+        rgba(0, 0, 0, 0.3) 90%,
+        rgba(0, 0, 0, 0.6) 100%
+      );
+      z-index: 2147483647;
+    }
+
     .screen.scanlines {
       position: relative;
     }
@@ -7157,10 +7080,10 @@ It.styles = c`
       top: 0;
       left: 0;
       width: 100%;
-      height: 0.2rem;
+      height: 2px;
       z-index: 2147483649;
-      opacity: 0.75;
-      background: transparent;
+      opacity: 0.5;
+      background: rgba(255, 255, 255, 0.1);
     }
 
     /* Scanline-Effekt: statische Linien */
@@ -7215,8 +7138,7 @@ It.styles = c`
       left: 0;
       width: 100%;
       height: 100%;
-      padding: 2rem;
-      padding-right: 2.5rem;
+      padding: 3rem 2.5rem 3rem 2rem;
       box-sizing: border-box;
       background-color: transparent;
       overflow-y: auto;
@@ -7303,7 +7225,6 @@ It.styles = c`
       100% {
         transform: scale(0.000, 0.0001) translate3d(0, 0, 0);
         filter: brightness(50);
-        opacity: 0;
       }
     }
   `;
@@ -7433,7 +7354,6 @@ A.styles = c`
     .station-title {
       font-size: 1.2rem;
       color: var(--crt-primary);
-      text-shadow: var(--crt-glow);
       letter-spacing: 2px;
     }
 
@@ -7443,17 +7363,11 @@ A.styles = c`
     }
 
     .main-content {
-      display: grid;
-      grid-template-columns: 1fr;
+      display: flex;
+      flex-direction: column;
       gap: var(--crt-spacing-md);
     }
 
-    @media (min-width: 900px) {
-      .main-content {
-        grid-template-columns: 2fr 1fr;
-      }
-    }
-
     .player-section {
       min-width: 0;
     }
@@ -7513,8 +7427,8 @@ export {
   $ as Button,
   It as CRTScreen,
   b as Calendar,
-  Rt as Card,
-  R as Checkbox,
+  Nt as Card,
+  N as Checkbox,
   V as CodeExample,
   E as FileUpload,
   At as Footer,
@@ -7524,15 +7438,15 @@ export {
   dt as Icon,
   H as Input,
   U as Link,
-  Q as Menu,
+  Z as Menu,
   st as Modal,
   g as MusicPlayer,
   A as MusicStation,
-  Z as Navbar,
+  Q as Navbar,
   W as Pagination,
   bt as Playlist,
   y as Progress,
-  N as Radio,
+  R as Radio,
   it as RadioGroup,
   m as Search,
   D as Select,

package/package.json

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

package/dist/lib/styles.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";:root{--crt-primary: #33ff33;--crt-primary-light: #44ff44;--crt-primary-dark: #22cc22;--crt-bg-dark: #0a0a0a;--crt-bg-darker: #000000;--crt-bg-light: #1a1a1a;--crt-text-primary: #33ff33;--crt-text-secondary: rgba(51, 255, 51, .7);--crt-text-muted: rgba(51, 255, 51, .5);--crt-success: #00ff00;--crt-warning: #ffff00;--crt-error: #ff0000;--crt-info: #00ffff;--crt-border-width: 2px;--crt-border-color: var(--crt-primary);--crt-border: var(--crt-border-width) solid var(--crt-border-color);--crt-radius: 0px;--crt-glow-sm: 0 0 5px rgba(51, 255, 51, .3);--crt-glow: 0 0 10px rgba(51, 255, 51, .5);--crt-glow-lg: 0 0 20px rgba(51, 255, 51, .7);--crt-glow-inset: inset 0 0 10px rgba(51, 255, 51, .1);--crt-component-glow-sm: none;--crt-component-glow: none;--crt-component-glow-lg: none;--crt-component-glow-inset: none;--crt-font-family: "VT323", "Courier New", monospace;--crt-font-size-xs: .75rem;--crt-font-size-sm: .9rem;--crt-font-size-base: 1rem;--crt-font-size-lg: 1.25rem;--crt-font-size-xl: 1.5rem;--crt-font-size-2xl: 2rem;--crt-font-size-3xl: 2.5rem;--crt-line-height: 1.4;--crt-letter-spacing: 2px;--crt-spacing-xs: 4px;--crt-spacing-sm: 8px;--crt-spacing-md: 16px;--crt-spacing-lg: 24px;--crt-spacing-xl: 32px;--crt-spacing-2xl: 48px;--crt-transition: all .3s ease;--crt-cursor-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="16" fill="%2333ff33"/></svg>'), auto;--crt-cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%2333ff33"/></svg>') 6 6, pointer;--crt-cursor-pointer-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%230a0a0a"/></svg>') 6 6, pointer;--crt-cursor-text: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><rect x="2" y="0" width="12" height="2" fill="%2333ff33"/><rect x="7" y="2" width="2" height="20" fill="%2333ff33"/><rect x="2" y="22" width="12" height="2" fill="%2333ff33"/></svg>') 8 12, text}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--crt-font-family);font-size:var(--crt-font-size-base);line-height:var(--crt-line-height);background-color:var(--crt-bg-dark);color:var(--crt-text-primary);text-shadow:0 0 3px var(--crt-primary)}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:none!important;pointer-events:none;z-index:9999}body:after{animation:none!important;opacity:0!important}@keyframes crt-flicker{0%,to{opacity:1}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--crt-bg-dark);border:1px solid var(--crt-primary)}::-webkit-scrollbar-thumb{background:var(--crt-primary);border:1px solid var(--crt-bg-dark);box-shadow:var(--crt-glow)}::-webkit-scrollbar-thumb:hover{background:var(--crt-primary-light);box-shadow:var(--crt-glow-lg)}*{scrollbar-width:thin;scrollbar-color:var(--crt-primary) var(--crt-bg-dark)}.m-xs{margin:var(--crt-spacing-xs)}.m-sm{margin:var(--crt-spacing-sm)}.m-md{margin:var(--crt-spacing-md)}.m-lg{margin:var(--crt-spacing-lg)}.m-xl{margin:var(--crt-spacing-xl)}.m-2xl{margin:var(--crt-spacing-2xl)}.mt-xs{margin-top:var(--crt-spacing-xs)}.mt-sm{margin-top:var(--crt-spacing-sm)}.mt-md{margin-top:var(--crt-spacing-md)}.mt-lg{margin-top:var(--crt-spacing-lg)}.mt-xl{margin-top:var(--crt-spacing-xl)}.mt-2xl{margin-top:var(--crt-spacing-2xl)}.mr-xs{margin-right:var(--crt-spacing-xs)}.mr-sm{margin-right:var(--crt-spacing-sm)}.mr-md{margin-right:var(--crt-spacing-md)}.mr-lg{margin-right:var(--crt-spacing-lg)}.mr-xl{margin-right:var(--crt-spacing-xl)}.mr-2xl{margin-right:var(--crt-spacing-2xl)}.mb-xs{margin-bottom:var(--crt-spacing-xs)}.mb-sm{margin-bottom:var(--crt-spacing-sm)}.mb-md{margin-bottom:var(--crt-spacing-md)}.mb-lg{margin-bottom:var(--crt-spacing-lg)}.mb-xl{margin-bottom:var(--crt-spacing-xl)}.mb-2xl{margin-bottom:var(--crt-spacing-2xl)}.ml-xs{margin-left:var(--crt-spacing-xs)}.ml-sm{margin-left:var(--crt-spacing-sm)}.ml-md{margin-left:var(--crt-spacing-md)}.ml-lg{margin-left:var(--crt-spacing-lg)}.ml-xl{margin-left:var(--crt-spacing-xl)}.ml-2xl{margin-left:var(--crt-spacing-2xl)}.mx-xs{margin-left:var(--crt-spacing-xs);margin-right:var(--crt-spacing-xs)}.mx-sm{margin-left:var(--crt-spacing-sm);margin-right:var(--crt-spacing-sm)}.mx-md{margin-left:var(--crt-spacing-md);margin-right:var(--crt-spacing-md)}.mx-lg{margin-left:var(--crt-spacing-lg);margin-right:var(--crt-spacing-lg)}.mx-xl{margin-left:var(--crt-spacing-xl);margin-right:var(--crt-spacing-xl)}.mx-2xl{margin-left:var(--crt-spacing-2xl);margin-right:var(--crt-spacing-2xl)}.my-xs{margin-top:var(--crt-spacing-xs);margin-bottom:var(--crt-spacing-xs)}.my-sm{margin-top:var(--crt-spacing-sm);margin-bottom:var(--crt-spacing-sm)}.my-md{margin-top:var(--crt-spacing-md);margin-bottom:var(--crt-spacing-md)}.my-lg{margin-top:var(--crt-spacing-lg);margin-bottom:var(--crt-spacing-lg)}.my-xl{margin-top:var(--crt-spacing-xl);margin-bottom:var(--crt-spacing-xl)}.my-2xl{margin-top:var(--crt-spacing-2xl);margin-bottom:var(--crt-spacing-2xl)}.p-xs{padding:var(--crt-spacing-xs)}.p-sm{padding:var(--crt-spacing-sm)}.p-md{padding:var(--crt-spacing-md)}.p-lg{padding:var(--crt-spacing-lg)}.p-xl{padding:var(--crt-spacing-xl)}.p-2xl{padding:var(--crt-spacing-2xl)}.pt-xs{padding-top:var(--crt-spacing-xs)}.pt-sm{padding-top:var(--crt-spacing-sm)}.pt-md{padding-top:var(--crt-spacing-md)}.pt-lg{padding-top:var(--crt-spacing-lg)}.pt-xl{padding-top:var(--crt-spacing-xl)}.pt-2xl{padding-top:var(--crt-spacing-2xl)}.pr-xs{padding-right:var(--crt-spacing-xs)}.pr-sm{padding-right:var(--crt-spacing-sm)}.pr-md{padding-right:var(--crt-spacing-md)}.pr-lg{padding-right:var(--crt-spacing-lg)}.pr-xl{padding-right:var(--crt-spacing-xl)}.pr-2xl{padding-right:var(--crt-spacing-2xl)}.pb-xs{padding-bottom:var(--crt-spacing-xs)}.pb-sm{padding-bottom:var(--crt-spacing-sm)}.pb-md{padding-bottom:var(--crt-spacing-md)}.pb-lg{padding-bottom:var(--crt-spacing-lg)}.pb-xl{padding-bottom:var(--crt-spacing-xl)}.pb-2xl{padding-bottom:var(--crt-spacing-2xl)}.pl-xs{padding-left:var(--crt-spacing-xs)}.pl-sm{padding-left:var(--crt-spacing-sm)}.pl-md{padding-left:var(--crt-spacing-md)}.pl-lg{padding-left:var(--crt-spacing-lg)}.pl-xl{padding-left:var(--crt-spacing-xl)}.pl-2xl{padding-left:var(--crt-spacing-2xl)}.px-xs{padding-left:var(--crt-spacing-xs);padding-right:var(--crt-spacing-xs)}.px-sm{padding-left:var(--crt-spacing-sm);padding-right:var(--crt-spacing-sm)}.px-md{padding-left:var(--crt-spacing-md);padding-right:var(--crt-spacing-md)}.px-lg{padding-left:var(--crt-spacing-lg);padding-right:var(--crt-spacing-lg)}.px-xl{padding-left:var(--crt-spacing-xl);padding-right:var(--crt-spacing-xl)}.px-2xl{padding-left:var(--crt-spacing-2xl);padding-right:var(--crt-spacing-2xl)}.py-xs{padding-top:var(--crt-spacing-xs);padding-bottom:var(--crt-spacing-xs)}.py-sm{padding-top:var(--crt-spacing-sm);padding-bottom:var(--crt-spacing-sm)}.py-md{padding-top:var(--crt-spacing-md);padding-bottom:var(--crt-spacing-md)}.py-lg{padding-top:var(--crt-spacing-lg);padding-bottom:var(--crt-spacing-lg)}.py-xl{padding-top:var(--crt-spacing-xl);padding-bottom:var(--crt-spacing-xl)}.py-2xl{padding-top:var(--crt-spacing-2xl);padding-bottom:var(--crt-spacing-2xl)}