@howssatoshi/quantumcss 1.7.1 → 1.7.3

package/README.md

@@ -1,6 +1,6 @@
 # Quantum CSS - Next-Generation Utility Framework
 
-![Quantum CSS](https://img.shields.io/badge/Quantum%20CSS-v1.7.1-blue)
+![Quantum CSS](https://img.shields.io/badge/Quantum%20CSS-v1.7.3-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![Bundle Size](https://img.shields.io/badge/bundle%20size-24%20KB%20(gzipped)-brightgreen)
 

package/dist/quantum.min.css

@@ -1,5 +1,5 @@
 /*!
- * QuantumCSS + Starlight UI v1.7.1 - Advanced Utility-First CSS Framework
+ * QuantumCSS + Starlight UI v1.7.3 - Advanced Utility-First CSS Framework
  * https://github.com/macroadster/quantumcss
  * Copyright (c) 2026 Eric Yang
  * License: MIT
@@ -8,7 +8,7 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.7.1
+ * Version: 1.7.3
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
@@ -190,10 +190,12 @@ body {
 input, textarea, select, button {
   font-family: inherit;
   font-size: inherit;
-  line-height: inherit;
+  line-height: normal;
   color: inherit;
   border: none;
   outline: 0;
+  padding: 0;
+  margin: 0;
   background: transparent;
 }
 
@@ -3335,8 +3337,9 @@ html[data-theme="light"] .star {
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgb(0 0 0 / 60%);
-  backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3456,21 +3459,22 @@ html[data-theme="light"] .dialog-content {
   position: absolute;
   top: 100%;
   left: 0;
-  background: rgb(255 255 255 / 5%);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgb(255 255 255 / 10%);
+  background-color: rgba(8, 8, 26, 0.8);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.75rem;
   padding: 0.5rem;
   margin-top: 0.5rem;
   min-width: 200px;
   z-index: 600;
-  box-shadow: 0 20px 40px rgb(0 0 0 / 40%);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  will-change: backdrop-filter, transform, opacity;
 }
 
 .dropdown:hover .dropdown-menu,
@@ -3479,6 +3483,8 @@ html[data-theme="light"] .dialog-content {
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
 }
 
 .dropdown-item {
@@ -3486,7 +3492,7 @@ html[data-theme="light"] .dialog-content {
   width: 100%;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: var(--q-text-primary, rgb(255 255 255 / 70%));
+  color: var(--q-text-primary, rgba(255, 255, 255, 0.7));
   transition: all 0.2s ease;
   text-align: left;
   background: transparent;
@@ -3495,14 +3501,16 @@ html[data-theme="light"] .dialog-content {
 }
 
 .dropdown-item:hover {
-  background-color: var(--q-color-starlight-blue);
+  background-color: rgba(0, 212, 255, 0.8);
   color: black;
 }
 
 html[data-theme="light"] .dropdown-menu {
-  background: rgb(255 255 255 / 95%);
-  border-color: rgb(0 0 0 / 8%);
-  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 html[data-theme="light"] .dropdown-item {
@@ -3517,12 +3525,13 @@ html[data-theme="light"] .dropdown-item:hover {
 /* 7. Input & Glass Fixes */
 .input-starlight, .textarea-starlight {
   height: auto;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   background-color: rgb(255 255 255 / 4%);
   border: 1px solid rgb(255 255 255 / 15%);
   border-radius: 0.75rem;
   color: inherit;
   width: 100%;
+  line-height: normal;
 }
 
 textarea.input-starlight, .textarea-starlight {
@@ -3807,12 +3816,13 @@ html[data-theme="light"] .stat-value {
 .stat-trend.up { color: var(--q-color-success); }
 .stat-trend.down { color: var(--q-color-error); }
 
-/* 14. Hamburger Menu Glass */
+/* 9. Glass Navigation */
 .nav-glass {
-  background: rgb(255 255 255 / 5%);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-clip: border-box;
   display: flex;
   flex-direction: column;
   position: sticky;
@@ -3823,6 +3833,8 @@ html[data-theme="light"] .stat-value {
 
 html[data-theme="light"] .nav-glass {
   background: rgb(255 255 255 / 95%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-bottom-color: rgb(0 0 0 / 8%);
   box-shadow: 0 4px 12px rgb(0 0 0 / 3%);
 }
@@ -4043,6 +4055,9 @@ html[data-theme="light"] .starlight-nav.vertical {
 /* 15. More Form Controls */
 .select-starlight {
   appearance: none;
+  line-height: normal;
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
@@ -4635,8 +4650,8 @@ html[data-theme="light"] * {
   transition: all 0.3s ease;
   position: relative;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
 }
@@ -4668,9 +4683,10 @@ html[data-theme="light"] * {
   transition: all 0.2s ease;
   border-radius: var(--q-radius-md);
   border: none;
+  line-height: normal;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
   height: 3rem;
@@ -4686,9 +4702,10 @@ html[data-theme="light"] * {
   transition: all 0.2s ease;
   border-radius: var(--q-radius-md);
   border: none;
+  line-height: normal;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
   padding: 1rem;
@@ -5299,6 +5316,7 @@ html[data-theme="light"] * {
   transition: all 0.2s ease;
   border-radius: var(--q-radius-md);
   border: none;
+  line-height: normal;
 }
 
 .border-white\/20 {
@@ -5322,12 +5340,10 @@ html[data-theme="light"] * {
   top: 0;
   z-index: 1000;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
 html[data-theme="light"] .light\:bg-slate-300, body.light-mode .light\:bg-slate-300 {
@@ -5359,8 +5375,8 @@ html[data-theme="light"] .light\:bg-slate-300, body.light-mode .light\:bg-slate-
   display: block;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
   border-radius: 0.75rem;
@@ -5422,8 +5438,8 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   transition: all 0.3s ease;
   position: relative;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
   display: grid;
@@ -5455,8 +5471,8 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
 
 .theme-glass-dark {
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
 }
@@ -5493,8 +5509,8 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   max-height: 90vh;
   z-index: 2000;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
 }
@@ -5520,6 +5536,43 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   height: 3.5rem;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.badge-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--q-radius-sm);
+  border: none;
+}
+
+.bg-starlight-blue\/10 {
+  background-color: rgba(0, 212, 255, 0.1);
+}
+
+.text-starlight-blue {
+  color: #00d4ff;
+}
+
+.border-starlight-blue\/20 {
+  border-color: rgba(0, 212, 255, 0.2);
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -5619,10 +5672,6 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   --q-gradient-stops: var(--q-gradient-from), var(--q-gradient-to);
 }
 
-.gap-3 {
-  gap: 0.75rem;
-}
-
 .checkbox-starlight {
   display: inline-flex;
   align-items: center;
@@ -5633,8 +5682,8 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   border-radius: var(--q-radius-md);
   border: none;
   background-color: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-color: rgba(255, 255, 255, 0.1);
   border-width: 1px;
   width: 1.25rem;
@@ -5830,10 +5879,6 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   padding: 4rem;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .mb-16 {
   margin-bottom: 4rem;
 }
@@ -5866,11 +5911,6 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   top: bar;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -6033,10 +6073,6 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }
 
-.text-starlight-blue {
-  color: #00d4ff;
-}
-
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -6350,11 +6386,6 @@ html[data-theme="light"] .light\:shadow-lg, body.light-mode .light\:shadow-lg {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   
-  .starlight-nav {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-  
   .md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

package/examples/chat-messaging.html

@@ -41,7 +41,7 @@
         .conversation-message { font-size: 0.875rem; color: var(--text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .conversation-item.unread .conversation-message { color: var(--text-primary, #f1f5f9); font-weight: 500; }
         .chat-main { display: flex; flex-direction: column; overflow: hidden; }
-        .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
+        .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; flex-shrink: 0; }
         .chat-header-info { display: flex; align-items: center; gap: 0.875rem; }
         .chat-header-avatar { position: relative; }
         .chat-header-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
@@ -59,12 +59,15 @@
         .message.sent .message-bubble { background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); color: white; border-bottom-right-radius: 0.25rem; }
         .message-time { font-size: 0.75rem; color: var(--text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
         .message.sent .message-time { align-self: flex-end; margin-left: 0; margin-right: 0.5rem; }
-        .chat-input-container { padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
-        .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; padding: 0.625rem 0.75rem; }
-        .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.5rem 0; outline: none; }
+        .chat-input-container { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; }
+        .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 0.5rem 0.75rem; width: 100%; }
+        .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.625rem 0; outline: none; }
         .chat-input::placeholder { color: var(--text-muted, #64748b); }
-        .send-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; }
-        .send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4); }
+        .send-btn { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0.125rem; }
+        .theme-toggle-wrapper { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; }
+        .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; color: var(--text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
+        .theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
+        .theme-label { font-size: 0.875rem; font-weight: 500; }
         .sun-icon { display: none; }
         body.light-mode .sun-icon { display: inline; }
         body.light-mode .moon-icon { display: none; }

package/examples/index.html

@@ -38,9 +38,12 @@
     </button>
 
     <div id="dialog" class="dialog-overlay" style="display: none;">
-        <div class="dialog-content">
-            <div class="p-12">
-                <h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4">Advanced Deployment</h2>
+        <div class="starlight-dialog">
+            <button class="dialog-close" onclick="closeDialog()">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            </button>
+            <div class="p-4">
+                <h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4 text-gradient-starlight">Advanced Deployment</h2>
                 <p class="text-base text-slate-400 font-medium mb-10">Configure your synchronization parameters below.</p>
                 
                 <div class="mb-10">
@@ -48,9 +51,27 @@
                     <select class="input-starlight w-full h-14">
                         <option>Andromeda Prime</option>
                         <option>Nebula Secondary</option>
+                        <option>Triangulum Core</option>
                     </select>
                 </div>
 
+                <div class="grid grid-cols-2 gap-8 mb-12">
+                    <div>
+                        <label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Node Priority</label>
+                        <div class="flex gap-3">
+                            <span class="badge-base bg-starlight-blue/10 text-starlight-blue border-starlight-blue/20 px-4 py-2">Alpha</span>
+                            <span class="badge-base bg-white/5 text-slate-500 border-white/10 px-4 py-2">Omega</span>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Sync Status</label>
+                        <div class="flex items-center gap-3">
+                            <div class="w-2 h-2 rounded-full bg-green-500 ani-pulse"></div>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-300">Ready</span>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="flex gap-6 justify-end">
                     <button class="btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]" onclick="closeDialog()">Cancel</button>
                     <button class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]">Confirm Deploy</button>
@@ -61,7 +82,7 @@
 
     <header class="hero container">
         <div class="pt-8 pb-12 text-center">
-            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.1</span>
+            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.3</span>
             <h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
             <p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
                 A standardized, high-performance UI library. 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {

package/src/defaults.js

@@ -121,8 +121,8 @@ const utilityMaps = {
     value: ['inline-flex', 'center', 'center', 'pointer', 'all 0.2s ease', '600', 'var(--q-radius-md)', 'none']
   },
   'input-base': {
-    property: ['display', 'width', 'appearance', 'transition', 'border-radius', 'border'],
-    value: ['block', '100%', 'none', 'all 0.2s ease', 'var(--q-radius-md)', 'none']
+    property: ['display', 'width', 'appearance', 'transition', 'border-radius', 'border', 'line-height'],
+    value: ['block', '100%', 'none', 'all 0.2s ease', 'var(--q-radius-md)', 'none', 'normal']
   },
   'dialog-base': {
     property: ['display', 'flex-direction', 'align-items', 'padding', 'overflow-y', 'border-radius', 'position'],
@@ -163,7 +163,7 @@ const utilityMaps = {
   },
   'theme-glass-dark': {
     property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width'],
-    value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', 'rgba(255, 255, 255, 0.1)', '1px']
+    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px']
   },
   'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
   'glow-starlight': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
@@ -179,7 +179,7 @@ const utilityMaps = {
     'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
     'nav-glass': 'nav-base theme-glass-dark',
     'starlight-card': 'card-base theme-glass-dark',
-    'starlight-nav': 'nav-base theme-glass-dark px-4 md:px-8',
+    'starlight-nav': 'nav-base theme-glass-dark w-full',
     'starlight-search': 'search-container theme-glass-dark rounded-xl',
     'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
     'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',

package/src/styles/quantum-base.css

@@ -1,7 +1,7 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.7.1
+ * Version: 1.7.3
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
@@ -183,10 +183,12 @@ body {
 input, textarea, select, button {
   font-family: inherit;
   font-size: inherit;
-  line-height: inherit;
+  line-height: normal;
   color: inherit;
   border: none;
   outline: 0;
+  padding: 0;
+  margin: 0;
   background: transparent;
 }
 

package/src/styles/starlight.css

@@ -154,8 +154,9 @@ html[data-theme="light"] .star {
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgb(0 0 0 / 60%);
-  backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -275,21 +276,22 @@ html[data-theme="light"] .dialog-content {
   position: absolute;
   top: 100%;
   left: 0;
-  background: rgb(255 255 255 / 5%);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgb(255 255 255 / 10%);
+  background-color: rgba(8, 8, 26, 0.8);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.75rem;
   padding: 0.5rem;
   margin-top: 0.5rem;
   min-width: 200px;
   z-index: 600;
-  box-shadow: 0 20px 40px rgb(0 0 0 / 40%);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  will-change: backdrop-filter, transform, opacity;
 }
 
 .dropdown:hover .dropdown-menu,
@@ -298,6 +300,8 @@ html[data-theme="light"] .dialog-content {
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
 }
 
 .dropdown-item {
@@ -305,7 +309,7 @@ html[data-theme="light"] .dialog-content {
   width: 100%;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: var(--q-text-primary, rgb(255 255 255 / 70%));
+  color: var(--q-text-primary, rgba(255, 255, 255, 0.7));
   transition: all 0.2s ease;
   text-align: left;
   background: transparent;
@@ -314,14 +318,16 @@ html[data-theme="light"] .dialog-content {
 }
 
 .dropdown-item:hover {
-  background-color: var(--q-color-starlight-blue);
+  background-color: rgba(0, 212, 255, 0.8);
   color: black;
 }
 
 html[data-theme="light"] .dropdown-menu {
-  background: rgb(255 255 255 / 95%);
-  border-color: rgb(0 0 0 / 8%);
-  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 html[data-theme="light"] .dropdown-item {
@@ -336,12 +342,13 @@ html[data-theme="light"] .dropdown-item:hover {
 /* 7. Input & Glass Fixes */
 .input-starlight, .textarea-starlight {
   height: auto;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   background-color: rgb(255 255 255 / 4%);
   border: 1px solid rgb(255 255 255 / 15%);
   border-radius: 0.75rem;
   color: inherit;
   width: 100%;
+  line-height: normal;
 }
 
 textarea.input-starlight, .textarea-starlight {
@@ -626,12 +633,13 @@ html[data-theme="light"] .stat-value {
 .stat-trend.up { color: var(--q-color-success); }
 .stat-trend.down { color: var(--q-color-error); }
 
-/* 14. Hamburger Menu Glass */
+/* 9. Glass Navigation */
 .nav-glass {
-  background: rgb(255 255 255 / 5%);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-clip: border-box;
   display: flex;
   flex-direction: column;
   position: sticky;
@@ -642,6 +650,8 @@ html[data-theme="light"] .stat-value {
 
 html[data-theme="light"] .nav-glass {
   background: rgb(255 255 255 / 95%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-bottom-color: rgb(0 0 0 / 8%);
   box-shadow: 0 4px 12px rgb(0 0 0 / 3%);
 }
@@ -862,6 +872,9 @@ html[data-theme="light"] .starlight-nav.vertical {
 /* 15. More Form Controls */
 .select-starlight {
   appearance: none;
+  line-height: normal;
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;