atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/assets/js/demos/switch-demo.js

@@ -16,11 +16,13 @@ export function initSwitchDemo() {
       <ui-button onclick="showInteractiveSwitch()" variant="outline">🎮 Playground</ui-button>
       <ui-button onclick="showEliteSwitchSpecimens()" variant="outline">✨ Elite Specimens</ui-button>
       <ui-button onclick="showSwitchVariants()" variant="outline">🎨 Variants</ui-button>
+      <ui-button onclick="showNewSwitchStyles()" variant="outline">🆕 New Styles</ui-button>
       <ui-button onclick="showSwitchShapes()" variant="outline">📐 Shapes</ui-button>
       <ui-button onclick="showSwitchStates()" variant="outline">🚥 Lifecycle & Enterprise</ui-button>
       <ui-button onclick="showIconImageDemos()" variant="outline">🖼️ Icons</ui-button>
       <ui-button onclick="showPhysicsGallery()" variant="outline">🧬 Physics</ui-button>
       <ui-button onclick="showToggleGroup()" variant="outline">📦 Groups</ui-button>
+      <ui-button onclick="showSwitchSizes()" variant="outline">📏 Sizes</ui-button>
     </div>
 
     <div id="switchDemoContainer" style="margin-top: 20px;"></div>
@@ -51,7 +53,7 @@ export function initSwitchDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-fade-in">
         <h3 class="specimen-title">🎮 Interactive Playground</h3>
-        <div class="playground-settings" style="background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24px;">
+        <div class="playground-settings" style="padding: 24px; border-radius: 16px; margin-bottom: 24px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;">
             <div class="form-group">
                <ui-input label="Label Text" id="playSwitchLabel" value="Unified Switch" variant="outlined" size="md"></ui-input>
@@ -87,7 +89,7 @@ export function initSwitchDemo() {
                <ui-dropdown id="playSwitchColor" label="Color Theme" value="primary" size="md" options='[{"label":"Primary (Blue)","value":"primary"},{"label":"Success (Green)","value":"success"},{"label":"Danger (Red)","value":"danger"},{"label":"Warning (Gold)","value":"warning"},{"label":"Info (Sky)","value":"info"},{"label":"Secondary (Slate)","value":"secondary"}]'></ui-dropdown>
             </div>
             <div class="form-group">
-               <ui-dropdown id="playSwitchVariant" label="Material Archetype" value="solid" size="md" options='[{"label":"Solid (Default)","value":"solid"},{"label":"Glassmorphism","value":"glass"},{"label":"Raised Relief","value":"raised"},{"label":"Outlined","value":"outlined"}]'></ui-dropdown>
+               <ui-dropdown id="playSwitchVariant" label="Material Archetype" value="solid" size="md" options='[{"label":"Solid (Default)","value":"solid"},{"label":"Glassmorphism","value":"glass"},{"label":"Raised Relief","value":"raised"},{"label":"Outlined","value":"outlined"},{"label":"Flat (Border Only)","value":"flat"},{"label":"Dot Indicator","value":"dot"},{"label":"Metallic Steel","value":"metallic"},{"label":"Slider Rail","value":"slider"},{"label":"Pill-Flat (Minimal)","value":"pill-flat"},{"label":"Soft (Pastel)","value":"soft"},{"label":"Bicolor (Green\/Red Split)","value":"bicolor"},{"label":"Power (Circular Ring)","value":"power"},{"label":"Status (Active\/Inactive)","value":"status"},{"label":"Labeled (Full-Track Label)","value":"labeled"}]'></ui-dropdown>
             </div>
             <div class="form-group">
                <ui-dropdown id="playSwitchDescPos" label="Description Position" value="bottom" size="md" options='[{"label":"Bottom","value":"bottom"},{"label":"Side (Dense)","value":"side"}]'></ui-dropdown>
@@ -111,7 +113,7 @@ export function initSwitchDemo() {
           </div>
         </div>
 
-        <div class="playground-preview" style="padding: 60px; background: white; border: 1px dashed #e2e8f0; border-radius: 24px; display: flex; justify-content: center; min-height: 200px; position: relative; overflow: hidden;">
+        <div class="playground-preview" style="min-height: 200px; position: relative; overflow: hidden;">
           <ui-switch id="playgroundSwitch" label="Unified Switch" checked description="Authorize system override" size="md"></ui-switch>
         </div>
 
@@ -131,7 +133,7 @@ export function initSwitchDemo() {
         <p class="specimen-description">High-fidelity switch archetypes for premium state management.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px;">
-           <div style="padding: 32px; background: #0f172a; border-radius: 20px; color: white;">
+           <div style="padding: 32px; background: var(--bg-tertiary, #f1f5f9); border-radius: 20px; color: var(--text-primary); border: 1px solid var(--border-default);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Glassmorphism</h4>
               <ui-switch 
                 label="Orbital Transmission" 
@@ -142,12 +144,12 @@ export function initSwitchDemo() {
                 checked
                 size="md">
               </ui-switch>
-              <div style="margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 12px;">
+              <div style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, rgba(0,0,0,0.04)); border-radius: 8px; font-size: 12px;">
                  Atmospheric glow effects transition smoothly between states.
               </div>
            </div>
 
-           <div style="padding: 32px; background: #f8fafc; border-radius: 20px; border: 1px solid #e2e8f0;">
+           <div style="padding: 32px; background: var(--bg-secondary, #f8fafc); border-radius: 20px; border:1px solid var(--border-default,#e2e8f0);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Raised Relief</h4>
               <ui-switch 
                 label="Thermal Regulation" 
@@ -158,12 +160,12 @@ export function initSwitchDemo() {
                 checked
                 size="md">
               </ui-switch>
-              <div style="margin-top: 16px; padding: 12px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px;">
+              <div style="margin-top: 16px; padding: 12px; background: var(--bg-primary, white); border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; font-size: 12px;">
                  Tactile sensation reinforced by liquid spring physics.
               </div>
            </div>
 
-           <div style="padding: 32px; background: white; border: 1px solid #f1f5f9; border-radius: 20px;">
+           <div style="padding: 32px; background: var(--bg-primary, white); border:1px solid var(--border-subtle,#f1f5f9); border-radius: 20px;">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Side-Aligned Metadata</h4>
               <div style="display: flex; flex-direction: column; gap: 20px;">
                 <ui-switch label="Network" description="v2.4 stable" description-position="side" checked color="success" glow haptic size="md"></ui-switch>
@@ -172,7 +174,7 @@ export function initSwitchDemo() {
               </div>
            </div>
 
-           <div style="padding: 32px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 20px; grid-column: span 2;">
+           <div style="padding: 32px; background:var(--accent-yellow-soft,#fffbeb); border: 1px solid #fde68a; border-radius: 20px; grid-column: span 2;">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Icon & Image Substrates</h4>
               <div style="display: flex; gap: 40px; flex-wrap: wrap; align-items: center;">
                  <div style="text-align: center;">
@@ -180,8 +182,8 @@ export function initSwitchDemo() {
                     <ui-switch 
                       size="large" 
                       checked 
-                      checked-image="https://www.countryflags.com/wp-content/uploads/united-kingdom-flag-png-large.png" 
-                      unchecked-image="https://www.countryflags.com/wp-content/uploads/united-states-of-america-flag-png-large.png">
+                      checked-image="/build/assets/images/slide2.png" 
+                      unchecked-image="/build/assets/images/slide3.png">
                     </ui-switch>
                  </div>
                  <div style="text-align: center;">
@@ -247,39 +249,257 @@ export function initSwitchDemo() {
     const container = document.getElementById('switchDemoContainer');
     container.innerHTML = `
       <div class="demo-block reveal-slide-up">
-        <h3 class="specimen-title">🎨 Material Archetypes & Colors</h3>
-        <p class="specimen-description">High-fidelity material shaders with hardware-accelerated color matrices.</p>
-        
+        <h3 class="specimen-title">🎨 All Variants &amp; Material Archetypes</h3>
+        <p class="specimen-description">14 distinct visual archetypes — from solid fills to industrial metallic knobs, circular power buttons to labeled sliders. Each variant is fully themeable and supports all semantic colors.</p>
+
         <div style="display: flex; flex-direction: column; gap: 48px;">
-           <div>
-              <h4 style="margin: 0 0 16px 0; font-size: 13px; color: #64748b; text-transform: uppercase;">Material Synthesis</h4>
-              <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
-                 <div style="padding: 24px; background: white; border-radius: 16px; border: 1px solid #f1f5f9;">
-                    <ui-switch label="Default Solid" variant="outline" color="primary" checked size="md"></ui-switch>
-                 </div>
-                 <div style="padding: 24px; background: #0f172a; border-radius: 16px; color: white;">
-                    <ui-switch label="Glassmorphism" variant="glass" checked color="info" glow size="md"></ui-switch>
-                 </div>
-                 <div style="padding: 24px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0;">
-                    <ui-switch label="Raised Relief" variant="raised" checked color="success" glow size="md"></ui-switch>
-                 </div>
-                 <div style="padding: 24px; background: white; border-radius: 16px; border: 1px solid #e2e8f0;">
-                    <ui-switch label="Outlined Matrix" variant="outlined" checked color="danger" size="md"></ui-switch>
-                 </div>
+
+          <!-- ORIGINAL 4 -->
+          <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 11px; font-weight: 800; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.08em;">Core Archetypes</h4>
+            <p style="margin: 0 0 20px 0; font-size: 12px; color: var(--text-secondary,#64748b);">Foundation variants built on depth, glass, and relief.</p>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;">
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Solid</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="solid" label="Off State" color="primary" size="md"></ui-switch>
+                  <ui-switch variant="solid" label="On State" color="primary" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Full-fill track with color transition. The standard default archetype.</p>
               </div>
-           </div>
 
-           <div>
-              <h4 style="margin: 0 0 16px 0; font-size: 13px; color: #64748b; text-transform: uppercase;">Semantic Tones</h4>
-              <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px;">
-                <ui-switch label="Primary Core" color="primary" checked glow size="md"></ui-switch>
-                <ui-switch label="Success Green" color="success" checked glow size="md"></ui-switch>
-                <ui-switch label="Danger Red" color="danger" checked glow size="md"></ui-switch>
-                <ui-switch label="Warning Gold" color="warning" checked glow size="md"></ui-switch>
-                <ui-switch label="Info Sky" color="info" checked glow size="md"></ui-switch>
-                <ui-switch label="Secondary Slate" color="secondary" checked size="md"></ui-switch>
+              <div style="padding: 24px; background: var(--bg-tertiary, #f1f5f9); border-radius: 16px; border: 1px solid var(--border-default); color: var(--text-primary)">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary, #64748b); margin: 0 0 16px;">Glass</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="glass" label="Off State" color="info" size="md"></ui-switch>
+                  <ui-switch variant="glass" label="On State" color="info" checked glow size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color: var(--text-secondary, #64748b); margin: 12px 0 0; line-height: 1.5;">Frosted backdrop blur with refractive track substrate.</p>
               </div>
-           </div>
+
+              <div style="padding: 24px; background: var(--bg-secondary, #f8fafc); border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Raised</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="raised" label="Off State" color="success" size="md"></ui-switch>
+                  <ui-switch variant="raised" label="On State" color="success" checked glow size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Neumorphic inset shadow with tactile 3D relief depth.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Outlined</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="outlined" label="Off State" color="danger" size="md"></ui-switch>
+                  <ui-switch variant="outlined" label="On State" color="danger" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Transparent fill with colored border and thumb accent.</p>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- NEW 6 VARIANTS -->
+          <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 11px; font-weight: 800; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.08em;">New Extended Archetypes</h4>
+            <p style="margin: 0 0 20px 0; font-size: 12px; color: var(--text-secondary,#64748b);">Six new structural archetypes for advanced design systems.</p>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;">
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Flat</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="flat" label="Off State" color="primary" size="md"></ui-switch>
+                  <ui-switch variant="flat" label="On State" color="primary" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Border-only ring — zero fill in OFF, solid accent in ON.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 20px;">Dot</p>
+                <div style="display: flex; flex-direction: column; gap: 12px; padding-top: 4px;">
+                  <ui-switch variant="dot" label="Off State" color="success" size="md"></ui-switch>
+                  <ui-switch variant="dot" label="On State" color="success" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Glowing dot indicator above the track telegraphs state.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-secondary, #f8fafc); border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Metallic</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="metallic" label="Off State" size="md"></ui-switch>
+                  <ui-switch variant="metallic" label="On State" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Brushed steel radial-gradient knob on dark inset track.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Slider</p>
+                <div style="display: flex; flex-direction: column; gap: 16px;">
+                  <ui-switch variant="slider" label="Off State" color="warning" size="md"></ui-switch>
+                  <ui-switch variant="slider" label="On State" color="warning" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Thin 4px rail with floating knob — range-slider aesthetic.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Pill-Flat</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="pill-flat" label="Off State" color="danger" size="md"></ui-switch>
+                  <ui-switch variant="pill-flat" label="On State" color="danger" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Zero-elevation minimal pill — no shadows, no depth.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Soft</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="soft" label="Off State" color="info" size="md"></ui-switch>
+                  <ui-switch variant="soft" label="On State" color="info" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Pastel tinted 12% fill in OFF; solid accent fill in ON.</p>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- SEMANTIC VARIANTS -->
+          <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 11px; font-weight: 800; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.08em;">Semantic State Archetypes</h4>
+            <p style="margin: 0 0 20px 0; font-size: 12px; color: var(--text-secondary,#64748b);">Variants optimized for communicating binary state at a glance — bicolor signals, power rings, and labeled tracks.</p>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;">
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Bicolor</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="bicolor" label="Off (thumb left)" size="md"></ui-switch>
+                  <ui-switch variant="bicolor" label="On (thumb right)" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Permanent green/red split gradient — ✓ left, ✕ right. Thumb slides to reveal either state.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-secondary, #f8fafc); border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Power</p>
+                <div style="display: flex; gap: 24px; align-items: center;">
+                  <div style="text-align:center;"><ui-switch variant="power" color="primary" size="md"></ui-switch><p style="font-size:9px;margin:6px 0 0;opacity:0.5;font-weight:700;">OFF</p></div>
+                  <div style="text-align:center;"><ui-switch variant="power" color="primary" checked size="md"></ui-switch><p style="font-size:9px;margin:6px 0 0;opacity:0.5;font-weight:700;">ON</p></div>
+                  <div style="text-align:center;"><ui-switch variant="power" color="success" checked size="xl"></ui-switch><p style="font-size:9px;margin:6px 0 0;opacity:0.5;font-weight:700;">XL</p></div>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Circular neumorphic ring — grey border in OFF, colored border + glow in ON.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Status</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="status" show-track-text unchecked-text="ACTIVE" label="Unchecked" size="md"></ui-switch>
+                  <ui-switch variant="status" show-track-text checked-text="INACTIVE" label="Checked" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Wide pill — green/grey half-track split with text label. Use <code>show-track-text</code> props.</p>
+              </div>
+
+              <div style="padding: 24px; background: var(--bg-primary, white); border-radius: 16px; border: 1px solid var(--border-subtle,#f1f5f9);">
+                <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary,#64748b); margin: 0 0 16px;">Labeled</p>
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <ui-switch variant="labeled" show-track-text unchecked-text="Inactive" label="Off — grey track + ⊘" color="primary" size="md"></ui-switch>
+                  <ui-switch variant="labeled" show-track-text checked-text="Active" label="On — colored track + ✓" color="primary" checked size="md"></ui-switch>
+                </div>
+                <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin: 12px 0 0; line-height: 1.5;">Full track switches blue/grey. White thumb shows ✓ when ON, ⊘ when OFF. Supports all colors.</p>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- SEMANTIC COLOR MATRIX -->
+          <div>
+            <h4 style="margin: 0 0 8px 0; font-size: 11px; font-weight: 800; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.08em;">Semantic Color Matrix</h4>
+            <p style="margin: 0 0 20px 0; font-size: 12px; color: var(--text-secondary,#64748b);">All 6 semantic colors applied across the primary variants.</p>
+            <div style="overflow-x: auto; padding-bottom: 8px;">
+              <table style="width: 100%; border-collapse: separate; border-spacing: 16px;">
+                <thead>
+                  <tr>
+                    <th style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b); text-align: left; padding: 0 0 4px; letter-spacing: 0.08em; white-space: nowrap;">Variant</th>
+                    <th style="font-size: 10px; font-weight: 700; color: #3b82f6; text-align: center; padding: 0 0 4px;">Primary</th>
+                    <th style="font-size: 10px; font-weight: 700; color: #10b981; text-align: center; padding: 0 0 4px;">Success</th>
+                    <th style="font-size: 10px; font-weight: 700; color: #ef4444; text-align: center; padding: 0 0 4px;">Danger</th>
+                    <th style="font-size: 10px; font-weight: 700; color: #f59e0b; text-align: center; padding: 0 0 4px;">Warning</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b); white-space: nowrap;">Solid</td>
+                    <td style="text-align: center;"><ui-switch variant="solid" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="solid" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="solid" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="solid" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b);">Flat</td>
+                    <td style="text-align: center;"><ui-switch variant="flat" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="flat" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="flat" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="flat" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b); padding-top: 20px;">Dot</td>
+                    <td style="text-align: center; padding-top: 20px;"><ui-switch variant="dot" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center; padding-top: 20px;"><ui-switch variant="dot" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center; padding-top: 20px;"><ui-switch variant="dot" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center; padding-top: 20px;"><ui-switch variant="dot" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b);">Slider</td>
+                    <td style="text-align: center;"><ui-switch variant="slider" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="slider" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="slider" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="slider" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b);">Pill-Flat</td>
+                    <td style="text-align: center;"><ui-switch variant="pill-flat" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="pill-flat" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="pill-flat" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="pill-flat" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b);">Soft</td>
+                    <td style="text-align: center;"><ui-switch variant="soft" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="soft" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="soft" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="soft" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                  <tr>
+                    <td style="font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary,#64748b);">Labeled</td>
+                    <td style="text-align: center;"><ui-switch variant="labeled" color="primary" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="labeled" color="success" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="labeled" color="danger" checked size="sm"></ui-switch></td>
+                    <td style="text-align: center;"><ui-switch variant="labeled" color="warning" checked size="sm"></ui-switch></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- FULL SIDE-BY-SIDE STRIP -->
+          <div style="padding: 32px; background: var(--bg-secondary, #f8fafc); border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0);">
+            <h4 style="margin: 0 0 8px 0; font-size: 11px; font-weight: 800; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.08em;">All 14 Variants — Checked State</h4>
+            <p style="margin: 0 0 24px 0; font-size: 12px; color: var(--text-secondary,#64748b);">Quick visual reference comparing all archetypes at a glance.</p>
+            <div style="display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end;">
+              <div style="text-align: center;"><ui-switch variant="solid" color="primary" checked size="md" glow></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Solid</p></div>
+              <div style="text-align: center;"><ui-switch variant="glass" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Glass</p></div>
+              <div style="text-align: center;"><ui-switch variant="raised" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Raised</p></div>
+              <div style="text-align: center;"><ui-switch variant="outlined" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Outlined</p></div>
+              <div style="text-align: center;"><ui-switch variant="flat" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Flat</p></div>
+              <div style="text-align: center; padding-top: 20px;"><ui-switch variant="dot" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Dot</p></div>
+              <div style="text-align: center;"><ui-switch variant="metallic" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Metallic</p></div>
+              <div style="text-align: center;"><ui-switch variant="slider" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Slider</p></div>
+              <div style="text-align: center;"><ui-switch variant="pill-flat" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Pill-Flat</p></div>
+              <div style="text-align: center;"><ui-switch variant="soft" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Soft</p></div>
+              <div style="text-align: center;"><ui-switch variant="bicolor" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Bicolor</p></div>
+              <div style="text-align: center;"><ui-switch variant="power" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Power</p></div>
+              <div style="text-align: center;"><ui-switch variant="status" show-track-text unchecked-text="ON" size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Status</p></div>
+              <div style="text-align: center;"><ui-switch variant="labeled" show-track-text checked-text="Active" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 10px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;">Labeled</p></div>
+            </div>
+          </div>
+
         </div>
       </div>
     `;
@@ -293,18 +513,18 @@ export function initSwitchDemo() {
          <p class="specimen-description">Structural variants for different UI surfaces and container systems.</p>
          
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px;">
-            <div style="padding: 32px; background: white; border-radius: 20px; border: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: center; gap: 20px;">
-               <p style="font-size: 11px; color: #94a3b8; font-weight: 800; text-transform: uppercase;">Shape: Pill (Flagship)</p>
+            <div style="padding: 32px; background: var(--bg-primary, white); border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); display: flex; flex-direction: column; align-items: center; gap: 20px;">
+               <p style="font-size: 11px; color:var(--text-secondary,#64748b); font-weight: 800; text-transform: uppercase;">Shape: Pill (Flagship)</p>
                <ui-switch shape="pill" size="xl" checked color="primary" glow></ui-switch>
                <p style="font-size: 12px; opacity: 0.6; text-align: center;">Curvature-continuous pill shape for standard navigation.</p>
             </div>
-            <div style="padding: 32px; background: white; border-radius: 20px; border: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: center; gap: 20px;">
-               <p style="font-size: 11px; color: #94a3b8; font-weight: 800; text-transform: uppercase;">Shape: Rounded (Soft)</p>
+            <div style="padding: 32px; background: var(--bg-primary, white); border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); display: flex; flex-direction: column; align-items: center; gap: 20px;">
+               <p style="font-size: 11px; color:var(--text-secondary,#64748b); font-weight: 800; text-transform: uppercase;">Shape: Rounded (Soft)</p>
                <ui-switch shape="rounded" size="xl" checked color="success" glow></ui-switch>
                <p style="font-size: 12px; opacity: 0.6; text-align: center;">Subtle 6px corner radius for dashboard tiles.</p>
             </div>
-            <div style="padding: 32px; background: white; border-radius: 20px; border: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: center; gap: 20px;">
-               <p style="font-size: 11px; color: #94a3b8; font-weight: 800; text-transform: uppercase;">Shape: Square (Industrial)</p>
+            <div style="padding: 32px; background: var(--bg-primary, white); border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); display: flex; flex-direction: column; align-items: center; gap: 20px;">
+               <p style="font-size: 11px; color:var(--text-secondary,#64748b); font-weight: 800; text-transform: uppercase;">Shape: Square (Industrial)</p>
                <ui-switch shape="square" size="xl" checked color="info" glow></ui-switch>
                <p style="font-size: 12px; opacity: 0.6; text-align: center;">Zero-radius architecture for professional grid systems.</p>
             </div>
@@ -313,6 +533,161 @@ export function initSwitchDemo() {
      `;
   };
 
+  window.showNewSwitchStyles = function () {
+    const container = document.getElementById('switchDemoContainer');
+    if (!container) return;
+
+    container.innerHTML = `
+      <div class="demo-block reveal-slide-up">
+        <h3 class="specimen-title">🆕 New Visual Styles</h3>
+        <p class="specimen-description">Six new CSS-driven archetypes expanding the switch design language — from ultra-minimal to industrial metallic.</p>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px;">
+
+          <!-- FLAT -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Flat — Border Only</p>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-switch variant="flat" label="Primary Off" color="primary" size="md"></ui-switch>
+              <ui-switch variant="flat" label="Primary On" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="flat" label="Success On" color="success" checked size="md"></ui-switch>
+              <ui-switch variant="flat" label="Danger On" color="danger" checked size="md"></ui-switch>
+            </div>
+          </div>
+
+          <!-- DOT -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Dot — Status Indicator</p>
+            <div style="display: flex; flex-direction: column; gap: 16px; padding-top: 4px;">
+              <ui-switch variant="dot" label="Primary Off" color="primary" size="md"></ui-switch>
+              <ui-switch variant="dot" label="Primary On" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="dot" label="Success On" color="success" checked size="md"></ui-switch>
+              <ui-switch variant="dot" label="Danger Off" color="danger" size="md"></ui-switch>
+            </div>
+          </div>
+
+          <!-- METALLIC -->
+          <div style="padding: 28px; background: var(--bg-secondary, #f8fafc); border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Metallic — Brushed Steel Knob</p>
+            <div style="display: flex; flex-direction: column; gap: 20px;">
+              <ui-switch variant="metallic" label="Industrial Off" size="md"></ui-switch>
+              <ui-switch variant="metallic" label="Industrial On" checked size="md"></ui-switch>
+              <ui-switch variant="metallic" label="Large Knob On" checked size="xl"></ui-switch>
+            </div>
+          </div>
+
+          <!-- SLIDER -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Slider — Thin Rail + Knob</p>
+            <div style="display: flex; flex-direction: column; gap: 20px; padding: 4px 0;">
+              <ui-switch variant="slider" label="Primary Off" color="primary" size="md"></ui-switch>
+              <ui-switch variant="slider" label="Primary On" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="slider" label="Success On" color="success" checked size="lg"></ui-switch>
+              <ui-switch variant="slider" label="Danger Off" color="danger" size="lg"></ui-switch>
+            </div>
+          </div>
+
+          <!-- PILL-FLAT -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Pill-Flat — Zero-Elevation Minimal</p>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-switch variant="pill-flat" label="Primary Off" color="primary" size="md"></ui-switch>
+              <ui-switch variant="pill-flat" label="Primary On" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="pill-flat" label="Success On" color="success" checked size="md"></ui-switch>
+              <ui-switch variant="pill-flat" label="Danger On" color="danger" checked size="md"></ui-switch>
+            </div>
+          </div>
+
+          <!-- SOFT -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Soft — Pastel Tinted Fill</p>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-switch variant="soft" label="Primary Off" color="primary" size="md"></ui-switch>
+              <ui-switch variant="soft" label="Primary On" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="soft" label="Success On" color="success" checked size="md"></ui-switch>
+              <ui-switch variant="soft" label="Danger On" color="danger" checked size="md"></ui-switch>
+            </div>
+          </div>
+
+          <!-- BICOLOR -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Bicolor — Green/Red Split Track</p>
+            <p style="font-size: 11px; color: var(--text-secondary,#64748b); margin: 0 0 16px 0; line-height: 1.5;">Track always shows ✓ on the left (green) and ✕ on the right (red). The thumb slides to reveal either state.</p>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-switch variant="bicolor" label="Unchecked (thumb left)" size="md"></ui-switch>
+              <ui-switch variant="bicolor" label="Checked (thumb right)" checked size="md"></ui-switch>
+              <ui-switch variant="bicolor" label="Large" checked size="xl"></ui-switch>
+            </div>
+          </div>
+
+          <!-- POWER -->
+          <div style="padding: 28px; background: var(--bg-secondary, #f8fafc); border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Power — Circular Ring Button</p>
+            <p style="font-size: 11px; color: var(--text-secondary,#64748b); margin: 0 0 16px 0; line-height: 1.5;">Track becomes a circle with an inset border that changes color. OFF shows grey ring, ON shows colored ring with glow.</p>
+            <div style="display: flex; flex-wrap: wrap; gap: 24px; align-items: center;">
+              <div style="text-align: center;"><ui-switch variant="power" color="primary" size="md"></ui-switch><p style="font-size: 10px; margin: 8px 0 0; opacity: 0.5; font-weight: 700;">MD OFF</p></div>
+              <div style="text-align: center;"><ui-switch variant="power" color="primary" checked size="md"></ui-switch><p style="font-size: 10px; margin: 8px 0 0; opacity: 0.5; font-weight: 700;">MD ON</p></div>
+              <div style="text-align: center;"><ui-switch variant="power" color="success" checked size="xl"></ui-switch><p style="font-size: 10px; margin: 8px 0 0; opacity: 0.5; font-weight: 700;">XL ON</p></div>
+              <div style="text-align: center;"><ui-switch variant="power" color="danger" checked size="xxl"></ui-switch><p style="font-size: 10px; margin: 8px 0 0; opacity: 0.5; font-weight: 700;">XXL ON</p></div>
+            </div>
+          </div>
+
+          <!-- STATUS -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Status — Active/Inactive Label Track</p>
+            <p style="font-size: 11px; color: var(--text-secondary,#64748b); margin: 0 0 16px 0; line-height: 1.5;">Wide pill where the left/right halves show colored labels. Use <code>show-track-text</code> + <code>checked-text</code>/<code>unchecked-text</code> props for custom labels.</p>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-switch variant="status" show-track-text checked-text="ACTIVE" unchecked-text="ACTIVE" label="Unchecked = Inactive" size="md"></ui-switch>
+              <ui-switch variant="status" show-track-text checked-text="INACTIVE" unchecked-text="INACTIVE" label="Checked = Inactive" checked size="md"></ui-switch>
+              <ui-switch variant="status" show-track-text checked-text="ENABLED" unchecked-text="ENABLED" label="Large" size="lg"></ui-switch>
+            </div>
+          </div>
+
+          <!-- LABELED -->
+          <div style="padding: 28px; background: var(--bg-primary, white); border-radius: 20px; border: 1px solid var(--border-subtle, #f1f5f9);">
+            <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 20px 0; letter-spacing: 0.08em;">Labeled — Full-Track Color + Icon Thumb</p>
+            <p style="font-size: 11px; color: var(--text-secondary,#64748b); margin: 0 0 16px 0; line-height: 1.5;">Entire track switches between color (active) and grey (inactive). White thumb shows <strong>✓</strong> when ON, <strong>⊘</strong> when OFF. Add <code>show-track-text</code> with <code>checked-text</code>/<code>unchecked-text</code> for labels.</p>
+            <div style="display: flex; flex-direction: column; gap: 20px;">
+              <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" label="Inactive state" color="primary" size="md"></ui-switch>
+              <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" label="Active state" color="primary" checked size="md"></ui-switch>
+              <ui-switch variant="labeled" show-track-text checked-text="Enabled" unchecked-text="Disabled" label="Success color" color="success" checked size="md"></ui-switch>
+              <ui-switch variant="labeled" show-track-text checked-text="Online" unchecked-text="Offline" label="Danger color" color="danger" size="md"></ui-switch>
+              <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 4px;">
+                <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" color="primary" checked size="sm"></ui-switch>
+                <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" color="primary" checked size="md"></ui-switch>
+                <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" color="primary" checked size="lg"></ui-switch>
+                <ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" color="primary" checked size="xl"></ui-switch>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- Side-by-side all variants comparison -->
+        <div style="margin-top: 36px; padding: 36px; background: var(--bg-secondary, #f8fafc); border-radius: 24px; border: 1px solid var(--border-default, #e2e8f0);">
+          <p style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary, #64748b); margin: 0 0 24px 0; letter-spacing: 0.08em;">All 13 Variants — Checked / Primary</p>
+          <div style="display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end;">
+            <div style="text-align: center;"><ui-switch variant="solid" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">SOLID</p></div>
+            <div style="text-align: center;"><ui-switch variant="glass" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">GLASS</p></div>
+            <div style="text-align: center;"><ui-switch variant="raised" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">RAISED</p></div>
+            <div style="text-align: center;"><ui-switch variant="outlined" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">OUTLINED</p></div>
+            <div style="text-align: center;"><ui-switch variant="flat" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">FLAT</p></div>
+            <div style="text-align: center; padding-top: 18px;"><ui-switch variant="dot" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">DOT</p></div>
+            <div style="text-align: center;"><ui-switch variant="metallic" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">METALLIC</p></div>
+            <div style="text-align: center;"><ui-switch variant="slider" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">SLIDER</p></div>
+            <div style="text-align: center;"><ui-switch variant="pill-flat" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">PILL-FLAT</p></div>
+            <div style="text-align: center;"><ui-switch variant="soft" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">SOFT</p></div>
+            <div style="text-align: center;"><ui-switch variant="bicolor" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">BICOLOR</p></div>
+            <div style="text-align: center;"><ui-switch variant="power" color="primary" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">POWER</p></div>
+            <div style="text-align: center;"><ui-switch variant="status" show-track-text unchecked-text="ACTIVE" size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">STATUS</p></div>
+            <div style="text-align: center;"><ui-switch variant="labeled" show-track-text checked-text="Active" unchecked-text="Inactive" checked size="md"></ui-switch><p style="font-size: 9px; margin: 8px 0 0; opacity: 0.5; font-weight: 800; text-transform: uppercase;">LABELED</p></div>
+          </div>
+        </div>
+      </div>
+    `;
+  };
+
+
   window.showSwitchStates = function () {
     const container = document.getElementById('switchDemoContainer');
     container.innerHTML = `
@@ -320,34 +695,34 @@ export function initSwitchDemo() {
         <p class="specimen-description">High-fidelity handling of complex operational states and global mirror support.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px;">
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-               <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #6366f1; text-transform: uppercase; font-weight: 800;">Hardware Accelerated RTL</h4>
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+               <h4 style="margin: 0 0 20px 0; font-size: 12px; color:var(--accent-indigo,#6366f1); text-transform: uppercase; font-weight: 800;">Hardware Accelerated RTL</h4>
                <div style="display: flex; flex-direction: column; gap: 20px;">
                   <ui-switch label="تبديل النظام" rtl="true" color="primary" checked></ui-switch>
                   <ui-switch label="حالة الشبكة" rtl="true" color="success"></ui-switch>
-                  <p style="font-size: 11px; color: #64748b; margin-top: 10px;">Sub-pixel mirrored layout for Global/ME region deployments.</p>
+                  <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 10px;">Sub-pixel mirrored layout for Global/ME region deployments.</p>
                </div>
             </div>
 
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
                <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #10b981; text-transform: uppercase; font-weight: 800;">Async Scanning (Shimmer)</h4>
                <div style="display: flex; flex-direction: column; gap: 20px;">
                   <ui-switch label="Resolving Promises" loading="true" checked></ui-switch>
                   <ui-switch label="Establishing Link" loading="true" color="info"></ui-switch>
-                  <p style="font-size: 11px; color: #64748b; margin-top: 10px;">Digital scanning grid visualizes the "Pending" state during async cycles.</p>
+                  <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 10px;">Digital scanning grid visualizes the "Pending" state during async cycles.</p>
                </div>
             </div>
 
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-               <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #f59e0b; text-transform: uppercase; font-weight: 800;">Mixed Selection Support</h4>
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+               <h4 style="margin: 0 0 20px 0; font-size: 12px; color:var(--accent-yellow,#f59e0b); text-transform: uppercase; font-weight: 800;">Mixed Selection Support</h4>
                <div style="display: flex; flex-direction: column; gap: 20px;">
                   <ui-switch label="Mixed Sub-states" indeterminate="true" color="warning"></ui-switch>
-                  <p style="font-size: 11px; color: #64748b; margin-top: 10px;">Visual archetype for "Partial Selection" in hierarchical dashboard systems.</p>
+                  <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 10px;">Visual archetype for "Partial Selection" in hierarchical dashboard systems.</p>
                </div>
             </div>
 
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-               <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #64748b; text-transform: uppercase; font-weight: 800;">Operational Restrictions</h4>
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+               <h4 style="margin: 0 0 20px 0; font-size: 12px; color:var(--text-secondary,#64748b); text-transform: uppercase; font-weight: 800;">Operational Restrictions</h4>
                <div style="display: flex; flex-direction: column; gap: 16px;">
                   <ui-switch label="Read-Only Mode" checked readonly color="success"></ui-switch>
                   <ui-switch label="Disabled Matrix" disabled checked></ui-switch>
@@ -355,18 +730,18 @@ export function initSwitchDemo() {
                </div>
             </div>
 
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-               <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #ef4444; text-transform: uppercase; font-weight: 800;">Validation Substrate</h4>
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+               <h4 style="margin: 0 0 20px 0; font-size: 12px; color:var(--accent-red,#ef4444); text-transform: uppercase; font-weight: 800;">Validation Substrate</h4>
                <div style="display: flex; flex-direction: column; gap: 16px;">
                   <ui-switch label="Security Violation" invalid error-message="Token validation failed" checked color="danger"></ui-switch>
                   <ui-switch label="Operational Hint" helper-text="Secondary auth required" color="info"></ui-switch>
                </div>
             </div>
 
-            <div style="background: #0f172a; padding: 32px; border-radius: 24px; color: white; display: flex; flex-direction: column; gap: 32px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);">
-               <h4 style="margin: 0; font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Apex Life-cycle & Veto</h4>
+            <div style="background: var(--bg-secondary,#f8fafc); padding: 32px; border-radius: 24px; display: flex; flex-direction: column; gap: 32px; border: 1px solid var(--border-default,#e2e8f0);">
+               <h4 style="margin: 0; font-size: 12px; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Apex Life-cycle & Veto</h4>
                <div style="display: flex; flex-direction: column; gap: 24px;">
-                  <div style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);">
+                  <div style="background: var(--bg-primary,white); padding: 20px; border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
                      <ui-switch 
                         label="Async Promise Flow" 
                         async="true" 
@@ -374,9 +749,9 @@ export function initSwitchDemo() {
                         color="success" 
                         glow>
                      </ui-switch>
-                     <p style="font-size: 10px; opacity: 0.5; margin-top: 10px;">Enters 'Pending' state until server-side ACK (2s latency simulated).</p>
+                     <p style="font-size: 10px; color: var(--text-secondary,#94a3b8); margin-top: 10px;">Enters 'Pending' state until server-side ACK (2s latency simulated).</p>
                   </div>
-                  <div style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);">
+                  <div style="background: var(--bg-primary,white); padding: 20px; border-radius: 16px; border: 1px solid var(--border-default,#e2e8f0);">
                      <ui-switch 
                         label="Security Veto (Shake)" 
                         async="true" 
@@ -386,13 +761,13 @@ export function initSwitchDemo() {
                         glow 
                         haptic="true">
                      </ui-switch>
-                     <p style="font-size: 10px; opacity: 0.5; margin-top: 10px;">Rejects toggle with visual shake and tactical vibration pattern.</p>
+                     <p style="font-size: 10px; color: var(--text-secondary,#94a3b8); margin-top: 10px;">Rejects toggle with visual shake and tactical vibration pattern.</p>
                   </div>
                </div>
             </div>
 
-            <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-               <h4 style="margin: 0 0 20px 0; font-size: 12px; color: #6366f1; text-transform: uppercase; font-weight: 800;">Interaction Tier (A11y)</h4>
+            <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+               <h4 style="margin: 0 0 20px 0; font-size: 12px; color:var(--accent-indigo,#6366f1); text-transform: uppercase; font-weight: 800;">Interaction Tier (A11y)</h4>
                <div style="display: flex; flex-direction: column; gap: 20px;">
                   <ui-switch label="Focus Mastery" description="Tab here for color-synced ring"></ui-switch>
                   <ui-switch label="Tactile Press" description="Hold for scale-down effect" color="warning"></ui-switch>
@@ -417,56 +792,56 @@ export function initSwitchDemo() {
            <div style="position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%); filter: blur(50px);"></div>
            
            <!-- Icon Examples -->
-           <div class="demo-specimen" style="background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.5); display: flex; flex-direction: column; gap: 32px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);">
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(20px); padding: 32px; border-radius: 24px; border: 1px solid var(--border-default, rgba(0,0,0,0.08)); display: flex; flex-direction: column; gap: 32px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);">
               <div style="display: flex; justify-content: space-between; align-items: center;">
-                 <h4 style="margin: 0; font-size: 13px; color: #6366f1; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Dynamic Symbol Systems</h4>
-                 <div style="padding: 4px 10px; background: rgba(99, 102, 241, 0.1); border-radius: 8px; color: #6366f1; font-size: 10px; font-weight: 700;">VECTOR GLYPHS</div>
+                 <h4 style="margin: 0; font-size: 13px; color:var(--accent-indigo,#6366f1); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Dynamic Symbol Systems</h4>
+                 <div style="padding: 4px 10px; background: rgba(99, 102, 241, 0.1); border-radius: 8px; color:var(--accent-indigo,#6366f1); font-size: 10px; font-weight: 700;">VECTOR GLYPHS</div>
               </div>
-              <p style="font-size: 12px; color: #64748b; margin: -16px 0 0 0; line-height: 1.5;">Expressive symbols to enhance cognitive state recognition and accessibility.</p>
+              <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin: -16px 0 0 0; line-height: 1.5;">Expressive symbols to enhance cognitive state recognition and accessibility.</p>
               
               <div style="display: flex; flex-direction: column; gap: 24px;">
-                  <div style="background: white; padding: 20px; border-radius: 20px; border: 1px solid #f1f5f9; position: relative;">
+                  <div style="background: var(--bg-primary, white); padding: 20px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); position: relative;">
                     <ui-switch label="Audio Matrix" checked icon-on="volume-high" icon-off="volume-mute" size="large" glow color="primary"></ui-switch>
                     <div style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.3; font-weight: 700;">70% GAIN</div>
                  </div>
-                 <div style="background: white; padding: 20px; border-radius: 20px; border: 1px solid #f1f5f9; position: relative;">
+                 <div style="background: var(--bg-primary, white); padding: 20px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); position: relative;">
                     <ui-switch label="Emergency Protocol" icon-on="nuclear" icon-off="lock-open" size="large" glow color="danger"></ui-switch>
                     <div style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.3; font-weight: 700;">STANDBY</div>
                  </div>
-                 <div style="background: white; padding: 20px; border-radius: 20px; border: 1px solid #f1f5f9;">
+                 <div style="background: var(--bg-primary, white); padding: 20px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
                     <ui-switch label="Wide Status Matrix" width="160px" checked show-track-text="true" checked-text="OPERATIONAL" unchecked-text="STANDBY" icon-on="pulse" icon-off="infinite" size="large" glow color="success"></ui-switch>
                  </div>
               </div>
            </div>
 
            <!-- Image Examples -->
-           <div class="demo-specimen" style="background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.5); display: flex; flex-direction: column; gap: 32px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);">
-              <h4 style="margin: 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Raster Texture Mapping</h4>
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(20px); padding: 32px; border-radius: 24px; border: 1px solid var(--border-default, rgba(0,0,0,0.08)); display: flex; flex-direction: column; gap: 32px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);">
+              <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Raster Texture Mapping</h4>
               <div style="display: flex; flex-direction: column; gap: 24px;">
-                 <div style="background: white; padding: 16px; border-radius: 16px; border: 1px solid #f1f5f9;">
+                 <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 16px; border:1px solid var(--border-subtle,#f1f5f9);">
                     <ui-switch 
                       label="Regional Cluster" 
                       checked 
                       size="xl" 
-                      checked-image="https://www.countryflags.com/wp-content/uploads/united-kingdom-flag-png-large.png" 
-                      unchecked-image="https://www.countryflags.com/wp-content/uploads/united-states-of-america-flag-png-large.png"
+                      checked-image="/build/assets/images/nature_desert_3.png" 
+                      unchecked-image="/build/assets/images/nature_forest_1.png"
                     ></ui-switch>
                  </div>
-                 <div style="background: white; padding: 16px; border-radius: 16px; border: 1px solid #f1f5f9;">
+                 <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 16px; border:1px solid var(--border-subtle,#f1f5f9);">
                     <ui-switch 
                       label="Identity Matrix" 
                       size="xl" 
-                      checked-image="https://ui-avatars.com/api/?name=User&background=6366f1&color=fff" 
-                      unchecked-image="https://ui-avatars.com/api/?name=Guest&background=94a3b8&color=fff"
+                      checked-image="/build/assets/images/logo.png" 
+                      unchecked-image="/build/assets/images/logo.png"
                     ></ui-switch>
                  </div>
               </div>
            </div>
 
            <!-- Multi-State Fusion -->
-           <div class="demo-specimen" style="background: #0f172a; padding: 32px; border-radius: 24px; color: white; display: flex; flex-direction: column; gap: 32px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3); grid-column: span 1;">
-              <h4 style="margin: 0; font-size: 13px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Atmospheric Fusion</h4>
-              <div style="display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(255,255,255,0.03); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);">
+           <div class="demo-specimen" style="background: var(--bg-tertiary, #f1f5f9); padding: 32px; border-radius: 24px; color: var(--text-primary); display: flex; flex-direction: column; gap: 32px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); grid-column: span 1;">
+              <h4 style="margin: 0; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Atmospheric Fusion</h4>
+              <div style="display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg-secondary, rgba(0,0,0,0.04)); border-radius: 16px; border: 1px solid var(--border-default);">
                  <ui-switch 
                    label="Orbital Mode" 
                    checked 
@@ -488,19 +863,80 @@ export function initSwitchDemo() {
   window.showSwitchSizes = function () {
     const container = document.getElementById('switchDemoContainer');
     container.innerHTML = `
-      <div class="demo-block reveal-slide-up">
-        <h3 class="specimen-title">Precision Scaling</h3>
-        <div style="display: flex; flex-direction: column; gap: 32px; background: white; padding: 24px; border-radius: 12px;">
-          <ui-switch label="XXX Small" size="xxxs" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="XX Small" size="xxs" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="X Small" size="xs" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="Small" size="small" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="md" size="md" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="Large" size="large" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="X Large" size="xl" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="XX Large" size="xxl" icon-on="check" icon-off="x" checked></ui-switch>
-          <ui-switch label="XXX Large" size="xxxl" icon-on="check" icon-off="x" checked></ui-switch>
+      <div class="demo-block reveal-slide-up" style="display: flex; flex-direction: column; gap: 40px;">
+
+        <!-- Panel 1: Scale Ladder -->
+        <div>
+          <h3 class="specimen-title">📏 Scale Ladder</h3>
+          <p class="specimen-description">All 9 sizes compared across four visual states.</p>
+          <div style="background: var(--bg-primary,white); border: 1px solid var(--border-default,#e2e8f0); border-radius: 16px; overflow: hidden;">
+            <div style="display: grid; grid-template-columns: 120px 1fr 1fr 1fr 1fr; background: var(--bg-secondary,#f8fafc); padding: 12px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); border-bottom: 1px solid var(--border-default,#e2e8f0);">
+              <span>Size</span><span>Off</span><span>On</span><span>Glow</span><span>Raised</span>
+            </div>
+            ${[
+        ['xxxs', 'XXX Small'], ['xxs', 'XX Small'], ['xs', 'X Small'], ['sm', 'Small'],
+        ['md', 'Medium'], ['lg', 'Large'], ['xl', 'X Large'], ['xxl', 'XX Large'], ['xxxl', 'XXX Large']
+      ].map(([s, label], i) => `
+            <div style="display: grid; grid-template-columns: 120px 1fr 1fr 1fr 1fr; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle,#f1f5f9); background: ${i % 2 === 1 ? 'var(--bg-secondary,#f8fafc)' : 'transparent'};">
+              <span style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${s}</span>
+              <div><ui-switch size="${s}"></ui-switch></div>
+              <div><ui-switch size="${s}" checked color="primary"></ui-switch></div>
+              <div><ui-switch size="${s}" checked color="success" glow></ui-switch></div>
+              <div><ui-switch size="${s}" checked variant="raised" color="info"></ui-switch></div>
+            </div>`).join('')}
+          </div>
+        </div>
+
+        <!-- Panel 2: Visual Comparison Row -->
+        <div>
+          <h3 class="specimen-title">🔭 Visual Comparison</h3>
+          <p class="specimen-description">All 9 sizes side-by-side to feel the scale progression.</p>
+          <div style="background: var(--bg-secondary,#f8fafc); border: 1px solid var(--border-default,#e2e8f0); border-radius: 16px; padding: 32px 24px; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;">
+            ${[
+        ['xxxs', 'xxxs'], ['xxs', 'xxs'], ['xs', 'xs'], ['sm', 'sm'], ['md', 'md'],
+        ['lg', 'lg'], ['xl', 'xl'], ['xxl', 'xxl'], ['xxxl', 'xxxl']
+      ].map(([s]) => `
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-switch size="${s}" checked color="primary" glow></ui-switch>
+              <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${s}</span>
+            </div>`).join('')}
+          </div>
+        </div>
+
+        <!-- Panel 3: Sizes × Variants Matrix -->
+        <div>
+          <h3 class="specimen-title">🧩 Sizes × Variants</h3>
+          <p class="specimen-description">Core sizes against all four visual variants.</p>
+          <div style="background: var(--bg-primary,white); border: 1px solid var(--border-default,#e2e8f0); border-radius: 16px; overflow: hidden;">
+            <div style="display: grid; grid-template-columns: 80px repeat(4, 1fr); background: var(--bg-secondary,#f8fafc); padding: 12px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary,#64748b); border-bottom: 1px solid var(--border-default,#e2e8f0);">
+              <span>Size</span><span>Solid</span><span>Glass</span><span>Raised</span><span>Outlined</span>
+            </div>
+            ${[['xs', 'X Small'], ['sm', 'Small'], ['md', 'Medium'], ['lg', 'Large'], ['xl', 'X Large'], ['xxl', 'XX Large']].map(([s,], i) => `
+            <div style="display: grid; grid-template-columns: 80px repeat(4, 1fr); align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle,#f1f5f9); background: ${i % 2 === 1 ? 'var(--bg-secondary,#f8fafc)' : 'transparent'};">
+              <span style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${s}</span>
+              <div><ui-switch size="${s}" variant="solid"    checked color="primary"></ui-switch></div>
+              <div class="dark" style="padding: 8px; border-radius: 8px; background: #1e293b; display:inline-block;"><ui-switch size="${s}" variant="glass"    checked color="info"   ></ui-switch></div>
+              <div><ui-switch size="${s}" variant="raised"   checked color="success"></ui-switch></div>
+              <div><ui-switch size="${s}" variant="outlined" checked color="warning"></ui-switch></div>
+            </div>`).join('')}
+          </div>
         </div>
+
+        <!-- Panel 4: Icon Thumb at All Sizes -->
+        <div>
+          <h3 class="specimen-title">🎨 Icon Thumb at Every Size</h3>
+          <p class="specimen-description">Check/X icons scale proportionally with the thumb.</p>
+          <div style="background: var(--bg-secondary,#f8fafc); border: 1px solid var(--border-default,#e2e8f0); border-radius: 16px; padding: 32px 24px; display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;">
+            ${[
+        ['xs', 'xs'], ['sm', 'sm'], ['md', 'md'], ['lg', 'lg'], ['xl', 'xl'], ['xxl', 'xxl'], ['xxxl', 'xxxl']
+      ].map(([s]) => `
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-switch size="${s}" checked icon-on="checkmark" icon-off="close" color="success" glow></ui-switch>
+              <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${s}</span>
+            </div>`).join('')}
+          </div>
+        </div>
+
       </div>
     `;
   };
@@ -514,49 +950,49 @@ export function initSwitchDemo() {
         <h3 class="specimen-title">🧬 Precision Mechanical Engines</h3>
         <p class="specimen-description">High-fidelity kinematic archetypes for tactical state management.</p>
         
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; background: #0f172a; padding: 60px; border-radius: 40px; position: relative; overflow: hidden;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; background: var(--bg-secondary, #f8fafc); padding: 60px; border-radius: 40px; position: relative; overflow: hidden;">
            <!-- Scanning grid effect -->
            <div style="position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--primary-rgb), 0.1) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.5;"></div>
            
-           <div class="demo-specimen" style="background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); color: white; transition: all 0.3s transform;">
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid var(--border-default); color: var(--text-primary); transition: all 0.3s;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                 <h4 style="margin: 0; font-size: 12px; color: #10b981; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Liquid</h4>
                 <ui-icon name="water" library="ionicons" size="18px"></ui-icon>
               </div>
-              <div style="background: rgba(255,255,255,0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px;">
+              <div style="background: var(--bg-secondary, rgba(0,0,0,0.03)); padding: 24px; border-radius: 16px; border: 1px solid var(--border-subtle); margin-bottom: 20px;">
                 <ui-switch label="Fluid Interaction" physics="liquid" checked glow color="info" size="large" icon-on="sparkles" icon-off="zap"></ui-switch>
               </div>
               <p style="font-size: 11px; opacity: 0.5; line-height: 1.6;">Optimal viscosity. 400ms balanced response time suitable for standard utility toggles.</p>
            </div>
 
-           <div class="demo-specimen" style="background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); color: white;">
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px;  border: 1px solid var(--border-default); color: var(--text-primary); transition: all 0.3s;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                 <h4 style="margin: 0; font-size: 12px; color: #f43f5e; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Stiff</h4>
                 <ui-icon name="flash" library="ionicons" size="18px"></ui-icon>
               </div>
-              <div style="background: rgba(255,255,255,0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px;">
+              <div style="background: var(--bg-secondary, rgba(0,0,0,0.03)); padding: 24px; border-radius: 16px; border: 1px solid var(--border-subtle); margin-bottom: 20px;">
                 <ui-switch label="Rapid Engagement" physics="stiff" checked glow color="danger" size="large" icon-on="lock-closed" icon-off="lock-open"></ui-switch>
               </div>
               <p style="font-size: 11px; opacity: 0.5; line-height: 1.6;">High-tension spring. 200ms instantaneous response for pro-tools and rapid state changes.</p>
            </div>
 
-           <div class="demo-specimen" style="background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); color: white;">
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid var(--border-default); color: var(--text-primary); transition: all 0.3s;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
-                <h4 style="margin: 0; font-size: 12px; color: #f59e0b; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Bouncy</h4>
+                <h4 style="margin: 0; font-size: 12px; color:var(--accent-yellow,#f59e0b); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Bouncy</h4>
                 <ui-icon name="notifications" library="ionicons" size="18px"></ui-icon>
               </div>
-              <div style="background: rgba(255,255,255,0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px;">
+              <div style="background: var(--bg-secondary, rgba(0,0,0,0.03)); padding: 24px; border-radius: 16px; border: 1px solid var(--border-subtle); margin-bottom: 20px;">
                 <ui-switch label="Elastic Feedback" physics="bouncy" checked glow color="warning" size="large" icon-on="notifications" icon-off="notifications-off"></ui-switch>
               </div>
               <p style="font-size: 11px; opacity: 0.5; line-height: 1.6;">Undamped physics. 500ms overshoot with settling oscillation for playful interactions.</p>
            </div>
 
-           <div class="demo-specimen" style="background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); color: white;">
+           <div class="demo-specimen" style="background: var(--bg-primary, #ffffff); backdrop-filter: blur(12px); padding: 32px; border-radius: 24px; border: 1px solid var(--border-default); color: var(--text-primary); transition: all 0.3s;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
-                <h4 style="margin: 0; font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Linear</h4>
+                <h4 style="margin: 0; font-size: 12px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;">Kinetic Engine: Linear</h4>
                 <ui-icon name="settings" library="ionicons" size="18px"></ui-icon>
               </div>
-              <div style="background: rgba(255,255,255,0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px;">
+              <div style="background: var(--bg-secondary, rgba(0,0,0,0.03)); padding: 24px; border-radius: 16px; border: 1px solid var(--border-subtle); margin-bottom: 20px;">
                 <ui-switch label="Mechanical Steady" physics="linear" checked color="secondary" glow size="large" icon-on="checkmark" icon-off="close"></ui-switch>
               </div>
               <p style="font-size: 11px; opacity: 0.5; line-height: 1.6;">Zero-acceleration. Industrial constant-velocity movement for strictly mechanical feeling.</p>
@@ -578,11 +1014,11 @@ export function initSwitchDemo() {
         <div style="display: flex; flex-direction: column; gap: 50px;">
           
           <!-- Layout Orchestration -->
-          <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9; box-shadow: 0 4px 20px rgba(0,0,0,0.02);">
-            <h4 style="margin: 0 0 24px 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 1px;">Layout Orchestration</h4>
+          <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); box-shadow: 0 4px 20px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 24px 0; font-size: 13px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px;">Layout Orchestration</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;">
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">HORIZONTAL (DEFAULT)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">HORIZONTAL (DEFAULT)</p>
                 <ui-toggle-group 
                   value="prod"
                   variant="primary"
@@ -596,7 +1032,7 @@ export function initSwitchDemo() {
 
               <!-- Segmented Morphing Substrate (Apex Tier) -->
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #6366f1; font-weight: 800;">SEGMENTED KINETIC SYSTEM</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--accent-indigo,#6366f1); font-weight: 800;">SEGMENTED KINETIC SYSTEM</p>
                 <ui-toggle-group 
                   value="weekly"
                   variant="segmented"
@@ -611,7 +1047,7 @@ export function initSwitchDemo() {
               </div>
 
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">VERTICAL (PERMISSION MATRIX)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">VERTICAL (PERMISSION MATRIX)</p>
                 <ui-toggle-group 
                   layout="vertical"
                   selection-mode="multiple"
@@ -625,7 +1061,7 @@ export function initSwitchDemo() {
                 ></ui-toggle-group>
               </div>
               <div style="grid-column: span 1;">
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">GRID (3 COLUMNS)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">GRID (3 COLUMNS)</p>
                 <ui-toggle-group 
                   layout="grid"
                   columns="3"
@@ -645,11 +1081,11 @@ export function initSwitchDemo() {
           </div>
 
           <!-- Interactive Features -->
-          <div style="background: #f8fafc; padding: 32px; border-radius: 20px; border: 1px solid #e2e8f0;">
-            <h4 style="margin: 0 0 24px 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 1px;">Advanced Capabilities</h4>
+          <div style="background: var(--bg-secondary, #f8fafc); padding: 32px; border-radius: 20px; border:1px solid var(--border-default,#e2e8f0);">
+            <h4 style="margin: 0 0 24px 0; font-size: 13px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px;">Advanced Capabilities</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;">
-              <div style="background: white; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0;">
-                <p style="font-size: 11px; margin-bottom: 16px; color: #94a3b8; font-weight: 600;">SEARCHABLE & MULTI-SELECT</p>
+              <div style="background: var(--bg-primary, white); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 11px; margin-bottom: 16px; color:var(--text-secondary,#64748b); font-weight: 600;">SEARCHABLE & MULTI-SELECT</p>
                 <ui-toggle-group 
                   label="Fleet Management"
                   searchable="true"
@@ -666,8 +1102,8 @@ export function initSwitchDemo() {
                   ]'
                 ></ui-toggle-group>
               </div>
-              <div style="background: white; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0;">
-                <p style="font-size: 11px; margin-bottom: 16px; color: #94a3b8; font-weight: 600;">COLLAPSIBLE & DRAGGABLE</p>
+              <div style="background: var(--bg-primary, white); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0);">
+                <p style="font-size: 11px; margin-bottom: 16px; color:var(--text-secondary,#64748b); font-weight: 600;">COLLAPSIBLE & DRAGGABLE</p>
                 <ui-toggle-group 
                   label="System Modules"
                   collapsible="true"
@@ -686,11 +1122,11 @@ export function initSwitchDemo() {
           </div>
 
           <!-- Semantic States -->
-          <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9;">
-            <h4 style="margin: 0 0 24px 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 1px;">Visual Archetypes</h4>
+          <div style="background: var(--bg-primary, white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
+            <h4 style="margin: 0 0 24px 0; font-size: 13px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 1px;">Visual Archetypes</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px;">
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">SHAPE: PILL (FLAGSHIP)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">SHAPE: PILL (FLAGSHIP)</p>
                 <ui-toggle-group 
                   shape="pill"
                   color="primary"
@@ -702,7 +1138,7 @@ export function initSwitchDemo() {
                 ></ui-toggle-group>
               </div>
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">SHAPE: ROUNDED (SOFT)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">SHAPE: ROUNDED (SOFT)</p>
                 <ui-toggle-group 
                   shape="rounded"
                   color="success"
@@ -714,7 +1150,7 @@ export function initSwitchDemo() {
                 ></ui-toggle-group>
               </div>
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">SHAPE: SQUARE (INDUSTRIAL)</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">SHAPE: SQUARE (INDUSTRIAL)</p>
                 <ui-toggle-group 
                   shape="square"
                   color="info"
@@ -726,7 +1162,7 @@ export function initSwitchDemo() {
                 ></ui-toggle-group>
               </div>
               <div>
-                <p style="font-size: 11px; margin-bottom: 12px; color: #94a3b8; font-weight: 600;">SKELETON LOADING</p>
+                <p style="font-size: 11px; margin-bottom: 12px; color:var(--text-secondary,#64748b); font-weight: 600;">SKELETON LOADING</p>
                 <ui-toggle-group 
                   show-skeleton="true"
                   skeleton-count="2"