@patimweb/crtstyleguide 1.0.31 → 1.0.33

package/dist/lib/index.js

@@ -417,6 +417,8 @@ let $ = class extends p {
 $.styles = c`
     :host {
       display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
     }
 
     button {
@@ -424,10 +426,11 @@ $.styles = c`
       color: var(--crt-primary);
       border: 2px solid var(--crt-primary);
       box-sizing: border-box;
-      height: 100%;
+      margin: 0;
       padding: 16px 32px;
       font-family: var(--crt-font-family);
       font-size: 1rem;
+      line-height: 1;
       letter-spacing: 2px;
       cursor: var(--crt-cursor-pointer);
       text-transform: uppercase;
@@ -3735,7 +3738,9 @@ let I = class extends p {
   _handleChange(e) {
     const t = e.target;
     this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
-      detail: { checked: this.checked }
+      detail: { checked: this.checked },
+      bubbles: !0,
+      composed: !0
     }));
   }
   render() {
@@ -7699,6 +7704,7 @@ let N = class extends p {
       ${this.vignette && t ? l`<div class="${r}"></div>` : ""}
       ${this.scanlines && t ? l`<div class="${i}"></div>` : ""}
       ${this.scanlines && t ? l`<div class="${a}"></div>` : ""}
+      ${this.scanlines && t ? l`<div class="scanline-roll"></div>` : ""}
       ${this.flicker && t ? l`<div class="${s}"></div>` : ""}
       ${o ? l`
         <div class="power-container ${this._powerState}">
@@ -7719,12 +7725,7 @@ N.styles = c`
     :host {
       display: block;
       position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100vw;
-      height: 100vh;
+      inset: 0;
       pointer-events: none;
       z-index: 2147483647;
       overflow: hidden;
@@ -7733,12 +7734,7 @@ N.styles = c`
     /* Container mode - absolute positioning */
     :host([contained]) {
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100% !important;
-      height: 100% !important;
+      inset: 0;
       z-index: 100;
     }
 
@@ -8148,45 +8144,70 @@ let k = class extends p {
         <!-- Header -->
         <div class="log-header">
           <span class="log-title">
-            <span class="log-title-icon">▶</span>
             ${this.title}
           </span>
           
-          <div class="log-controls">
-            <crt-button 
+          <div class="log-actions">
+            <crt-button
+              class="log-action"
               size="small"
-              variant="${this._filter === "all" ? "primary" : "link"}"
-              @click=${() => this._setFilter("all")}
-            >ALL (${t.all})</crt-button>
-            <crt-button 
-              size="small"
-              variant="${this._filter === "error" ? "error" : "link"}"
-              @click=${() => this._setFilter("error")}
-            >ERR (${t.error})</crt-button>
-            <crt-button 
-              size="small"
-              variant="${this._filter === "warn" ? "warning" : "link"}"
-              @click=${() => this._setFilter("warn")}
-            >WRN (${t.warn})</crt-button>
-            <crt-button 
-              size="small"
-              variant="${this._filter === "info" ? "info" : "link"}"
-              @click=${() => this._setFilter("info")}
-            >INF (${t.info})</crt-button>
-            
-            <crt-button 
-              size="small"
-              variant="${this._isPaused ? "warning" : "link"}"
               @click=${this._togglePause}
-            >${this._isPaused ? "▶ RESUME" : "⏸ PAUSE"}</crt-button>
-            <crt-button 
+              icon-only
+              icon-left="${this._isPaused ? "play" : "pause"}"
+              title="${this._isPaused ? "Play" : "Pause"}"
+              aria-label="${this._isPaused ? "Play" : "Pause"}"
+            ></crt-button>
+            <crt-button
+              class="log-action"
               size="small"
               variant="error"
               @click=${this._clearLog}
-            >✕ CLEAR</crt-button>
+              icon-only
+              icon-left="trash"
+              aria-label="Clear"
+            ></crt-button>
           </div>
         </div>
 
+        <div class="log-tabs" role="tablist">
+          <button
+            class="log-tab ${this._filter === "all" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "all" ? "true" : "false"}"
+            @click=${() => this._setFilter("all")}
+          >ALL <span class="log-tab-count">${t.all}</span></button>
+          <button
+            class="log-tab ${this._filter === "error" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "error" ? "true" : "false"}"
+            @click=${() => this._setFilter("error")}
+          >ERR <span class="log-tab-count">${t.error}</span></button>
+          <button
+            class="log-tab ${this._filter === "warn" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "warn" ? "true" : "false"}"
+            @click=${() => this._setFilter("warn")}
+          >WRN <span class="log-tab-count">${t.warn}</span></button>
+          <button
+            class="log-tab ${this._filter === "info" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "info" ? "true" : "false"}"
+            @click=${() => this._setFilter("info")}
+          >INF <span class="log-tab-count">${t.info}</span></button>
+          <button
+            class="log-tab ${this._filter === "success" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "success" ? "true" : "false"}"
+            @click=${() => this._setFilter("success")}
+          >SUC <span class="log-tab-count">${t.success}</span></button>
+          <button
+            class="log-tab ${this._filter === "debug" ? "active" : ""}"
+            role="tab"
+            aria-selected="${this._filter === "debug" ? "true" : "false"}"
+            @click=${() => this._setFilter("debug")}
+          >DBG <span class="log-tab-count">${t.debug}</span></button>
+        </div>
+
         <!-- Log Content -->
         <div class="log-content">
           ${e.length === 0 ? l`<div class="log-empty">[NO LOG ENTRIES]</div>` : e.map((r) => l`
@@ -8257,32 +8278,78 @@ k.styles = c`
       gap: var(--crt-spacing-sm);
     }
 
-    .log-title-icon {
-      animation: blink 1s steps(1) infinite;
-    }
-
-    @keyframes blink {
-      0%, 50% { opacity: 1; }
-      51%, 100% { opacity: 0; }
-    }
-
     .log-stats {
       color: var(--crt-text-muted);
       font-size: var(--crt-font-size-xs);
     }
 
     /* Controls */
-    .log-controls {
+    .log-actions {
       display: flex;
       align-items: center;
       gap: var(--crt-spacing-xs);
       flex-wrap: wrap;
     }
 
-    .log-controls crt-button {
+    .log-actions crt-button {
       --crt-button-padding: 2px 6px;
     }
 
+    .log-actions .log-action {
+      min-width: 80px;
+      display: inline-flex;
+      align-self: center;
+    }
+
+    .log-actions .log-action[icon-only] {
+      min-width: auto;
+    }
+
+    /* Filter Tabs */
+    .log-tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0;
+      border-bottom: 1px solid color-mix(in srgb, var(--crt-primary) 40%, transparent);
+      padding: 0 var(--crt-spacing-md);
+      background: transparent;
+    }
+
+    .log-tab {
+      background: transparent;
+      border: none;
+      color: var(--crt-text-primary);
+      padding: var(--crt-spacing-xs) var(--crt-spacing-md);
+      cursor: pointer;
+      font-family: var(--crt-font-family);
+      font-size: var(--crt-font-size-xs);
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      display: inline-flex;
+      align-items: baseline;
+      gap: var(--crt-spacing-xs);
+      white-space: nowrap;
+    }
+
+    .log-tab:hover:not(.active) {
+      color: var(--crt-text-primary);
+    }
+
+    .log-tab.active {
+      color: var(--crt-primary);
+      border-bottom-color: var(--crt-primary);
+    }
+
+    .log-tab-count {
+      display: inline-block;
+      min-width: 3ch;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      color: var(--crt-text-muted);
+    }
+
     /* Log Content */
     .log-content {
       flex: 1;

package/package.json

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