atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/assets/js/demos/button-toggle-demo.js

@@ -23,6 +23,7 @@ export function initButtonToggleDemo() {
       <ui-button data-demo="premium" variant="outline">Premium</ui-button>
       <ui-button data-demo="elite" variant="outline">Elite Features</ui-button>
       <ui-button data-demo="form" variant="outline">Form Integration</ui-button>
+      <ui-button data-demo="searchLoad" variant="outline">🔍 Search & Loading</ui-button>
     </div>
 
 
@@ -41,8 +42,8 @@ export function initButtonToggleDemo() {
         <div style="display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 30px;">
           
           <!-- Flush Style (Matches Image 1) -->
-          <div style="padding: 24px; background: white; border-radius: 12px; border: 1px solid #f1f5f9;">
-             <h5 style="color: #64748b; margin-top: 0; font-weight: 700; font-size: 12px; text-transform: uppercase;">1. Perfectly Flush (Segmented)</h5>
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9);">
+             <h5 style="color:var(--text-secondary,#64748b); margin-top: 0; font-weight: 700; font-size: 12px; text-transform: uppercase;">1. Perfectly Flush (Segmented)</h5>
              <ui-button-toggle-group 
                 value="dev" 
                 style="--group-padding: 0px; --indicator-radius: 0px; --button-group-color: #22c55e; --button-group-bg: #ecfdf5;"
@@ -54,8 +55,8 @@ export function initButtonToggleDemo() {
           </div>
 
           <!-- Floating Pill (Matches Image 2) -->
-          <div style="padding: 24px; background: white; border-radius: 12px; border: 1px solid #f1f5f9;">
-             <h5 style="color: #64748b; margin-top: 0; font-weight: 700; font-size: 12px; text-transform: uppercase;">2. Floating Pill (Premium)</h5>
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9);">
+             <h5 style="color:var(--text-secondary,#64748b); margin-top: 0; font-weight: 700; font-size: 12px; text-transform: uppercase;">2. Floating Pill (Premium)</h5>
              <ui-button-toggle-group 
                 value="grid" 
                 style="--group-padding: 6px; --indicator-radius: 10px; --button-group-color: #00ca99; --button-group-bg: #f1f5f9; --indicator-shadow: 0 4px 12px rgba(0,0,0,0.12);"
@@ -79,7 +80,7 @@ export function initButtonToggleDemo() {
         
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px;">
           <!-- Primary -->
-          <div style="padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;">
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border:1px solid var(--border-subtle,#f1f5f9);">
              <h5 style="color: #22c55e; margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Primary</h5>
              <ui-button-toggle-group value="2" color="primary" style="--button-group-bg: #f8fafc;">
                 <ui-button-toggle value="1" label="Option 1"></ui-button-toggle>
@@ -89,8 +90,8 @@ export function initButtonToggleDemo() {
           </div>
 
           <!-- Secondary -->
-          <div style="padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;">
-             <h5 style="color: #64748b; margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Secondary</h5>
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border:1px solid var(--border-subtle,#f1f5f9);">
+             <h5 style="color:var(--text-secondary,#64748b); margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Secondary</h5>
              <ui-button-toggle-group value="2" color="secondary" style="--button-group-bg: #f8fafc;">
                 <ui-button-toggle value="1" label="Option 1"></ui-button-toggle>
                 <ui-button-toggle value="2" label="Option 2"></ui-button-toggle>
@@ -99,7 +100,7 @@ export function initButtonToggleDemo() {
           </div>
 
           <!-- Success -->
-          <div style="padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;">
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border:1px solid var(--border-subtle,#f1f5f9);">
              <h5 style="color: #22c55e; margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Success</h5>
              <ui-button-toggle-group value="2" color="success" style="--button-group-bg: #f8fafc;">
                 <ui-button-toggle value="1" label="Option 1"></ui-button-toggle>
@@ -109,8 +110,8 @@ export function initButtonToggleDemo() {
           </div>
 
           <!-- Danger -->
-          <div style="padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;">
-             <h5 style="color: #ef4444; margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Danger</h5>
+          <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border:1px solid var(--border-subtle,#f1f5f9);">
+             <h5 style="color:var(--accent-red,#ef4444); margin-top: 0; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">Danger</h5>
              <ui-button-toggle-group value="2" color="danger" style="--button-group-bg: #f8fafc;">
                 <ui-button-toggle value="1" label="Option 1"></ui-button-toggle>
                 <ui-button-toggle value="2" label="Option 2"></ui-button-toggle>
@@ -144,7 +145,7 @@ export function initButtonToggleDemo() {
           </ui-button-toggle-group>
         </div>
         
-        <div style="margin-top: 60px; padding: 20px; background: #f1f5f9; border-radius: 8px; font-size: 13px; color: #475569;">
+        <div style="margin-top: 60px; padding: 20px; background:var(--bg-tertiary,#f1f5f9); border-radius: 8px; font-size: 13px; color: #475569;">
           <strong>Tip:</strong> This layout uses <code>color="success"</code> and <code>icon-library="lucide"</code> to match the requested design system specifications.
         </div>
       </div>
@@ -158,31 +159,31 @@ export function initButtonToggleDemo() {
         <p>Commonly used for simple selection like alignment or view modes.</p>
         <div style="display: flex; flex-direction: column; gap: 40px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Icon Position: Left (Default)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Icon Position: Left (Default)</h4>
             <ui-button-toggle-group value="m1">
-              <ui-button-toggle value="m1" label="One" icon="fas fa-home"></ui-button-toggle>
-              <ui-button-toggle value="m2" label="Two" icon="fas fa-search"></ui-button-toggle>
+              <ui-button-toggle value="m1" label="One" icon="fas fa-home" library="fontawesome"></ui-button-toggle>
+              <ui-button-toggle value="m2" label="Two" icon="fas fa-search" library="fontawesome"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Icon Position: Right</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Icon Position: Right</h4>
             <ui-button-toggle-group value="m1" color="secondary" icon-position="right">
               <ui-button value="m1" label="Next" icon="fas fa-arrow-right" icon-position="right"></ui-button>
               <ui-button value="m2" label="Skip" icon="fas fa-forward" icon-position="right"></ui-button>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Icon Position: Top</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Icon Position: Top</h4>
             <ui-button-toggle-group value="m1" color="info" shape="pill" icon-position="top">
-              <ui-button-toggle value="m1" label="Upload" icon="fas fa-upload" icon-position="top"></ui-button-toggle>
-              <ui-button-toggle value="m2" label="Download" icon="fas fa-download" icon-position="top"></ui-button-toggle>
+              <ui-button-toggle value="m1" label="Upload" icon="fas fa-upload" library="fontawesome" icon-position="top"></ui-button-toggle>
+              <ui-button-toggle value="m2" label="Download" icon="fas fa-download" library="fontawesome" icon-position="top"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Icon Position: Bottom</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Icon Position: Bottom</h4>
             <ui-button-toggle-group value="m1" color="info" shape="pill" icon-position="bottom">
-              <ui-button-toggle value="m1" label="Upload" icon="fas fa-upload" icon-position="bottom"></ui-button-toggle>
-              <ui-button-toggle value="m2" label="Download" icon="fas fa-download" icon-position="bottom"></ui-button-toggle>
+              <ui-button-toggle value="m1" label="Upload" icon="fas fa-upload" library="fontawesome" icon-position="bottom"></ui-button-toggle>
+              <ui-button-toggle value="m2" label="Download" icon="fas fa-download" library="fontawesome" icon-position="bottom"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
         </div>
@@ -197,9 +198,9 @@ export function initButtonToggleDemo() {
         <p>Buttons now have uniform length and clean alignment even with varying label sizes.</p>
         <div style="max-width: 300px;">
           <ui-button-toggle-group orientation="vertical" value="pro" color="success">
-            <ui-button-toggle value="free" label="Free Plan" icon="fas fa-leaf" iconPosition="left"></ui-button-toggle>
-            <ui-button-toggle value="pro" label="Professional" icon="fas fa-star" iconPosition="left"></ui-button-toggle>
-            <ui-button-toggle value="biz" label="Enterprise" icon="fas fa-building" iconPosition="left"></ui-button-toggle>
+            <ui-button-toggle value="free" label="Free Plan" icon="fas fa-leaf" library="fontawesome" icon-position="left"></ui-button-toggle>
+            <ui-button-toggle value="pro" label="Professional" icon="fas fa-star" library="fontawesome" icon-position="left"></ui-button-toggle>
+            <ui-button-toggle value="biz" label="Enterprise" icon="fas fa-building" library="fontawesome" icon-position="left"></ui-button-toggle>
           </ui-button-toggle-group>
         </div>
       </div>
@@ -213,7 +214,7 @@ export function initButtonToggleDemo() {
         <p>Vary the shape of the button group for different UI contexts.</p>
         <div style="display: flex; flex-direction: column; gap: 30px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Round (Default)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Round (Default)</h4>
             <ui-button-toggle-group shape="rounded" value="1" color="primary">
               <ui-button-toggle value="1" label="Selection 1"></ui-button-toggle>
               <ui-button-toggle value="2" label="Selection 2"></ui-button-toggle>
@@ -221,7 +222,7 @@ export function initButtonToggleDemo() {
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Pill (Full Round)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Pill (Full Round)</h4>
             <ui-button-toggle-group shape="pill" value="1" color="secondary">
               <ui-button-toggle value="1" label="Apple"></ui-button-toggle>
               <ui-button-toggle value="2" label="Banana"></ui-button-toggle>
@@ -229,7 +230,7 @@ export function initButtonToggleDemo() {
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Square</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Square</h4>
             <ui-button-toggle-group shape="square" value="1" color="info">
               <ui-button-toggle value="1" label="Low"></ui-button-toggle>
               <ui-button-toggle value="2" label="md"></ui-button-toggle>
@@ -237,7 +238,7 @@ export function initButtonToggleDemo() {
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Chip Style</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Chip Style</h4>
             <ui-button-toggle-group shape="chip" value="1" color="success">
               <ui-button-toggle value="1" label="Active"></ui-button-toggle>
               <ui-button-toggle value="2" label="Pending"></ui-button-toggle>
@@ -257,19 +258,33 @@ export function initButtonToggleDemo() {
         <div style="display: flex; flex-direction: column; gap: 36px;">
 
           <div>
-            <h4 style="margin-bottom:4px; font-size:14px; color:#64748b;">Group-level: <code>icon-only</code> on the group</h4>
-            <p style="margin:0 0 12px; font-size:13px; color:#94a3b8;">All toggles suppress labels. Ideal for compact toolbars.</p>
-            <ui-button-toggle-group icon-only value="bold" color="primary">
-              <ui-button-toggle value="bold" label="Bold" icon="fas fa-bold" tooltip="Bold"></ui-button-toggle>
-              <ui-button-toggle value="italic" label="Italic" icon="fas fa-italic" tooltip="Italic"></ui-button-toggle>
-              <ui-button-toggle value="underline" label="Underline" icon="fas fa-underline" tooltip="Underline"></ui-button-toggle>
-              <ui-button-toggle value="align" label="Align" icon="fas fa-align-left" tooltip="Align Left"></ui-button-toggle>
+            <h4 style="margin-bottom:4px; font-size:14px; color:var(--text-secondary,#64748b);">Group-level: <code>icon-only</code> on the group</h4>
+            <p style="margin:0 0 12px; font-size:13px; color:var(--text-secondary,#64748b);">All toggles suppress labels. Ideal for compact toolbars.</p>
+            <ui-button-toggle-group icon-only value="bold" icon-library="lucide" color="primary">
+              <ui-button-toggle value="bold" label="Bold" icon="bold" tooltip="Bold"></ui-button-toggle>
+              <ui-button-toggle value="italic" label="Italic" icon="italic" tooltip="Italic"></ui-button-toggle>
+              <ui-button-toggle value="underline" label="Underline" icon="underline" tooltip="Underline"></ui-button-toggle>
+              <ui-button-toggle value="align" label="Align" icon="align-left" tooltip="Align Left"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
 
           <div>
-            <h4 style="margin-bottom:4px; font-size:14px; color:#64748b;">Lucide Icons — Glass variant</h4>
-            <p style="margin:0 0 12px; font-size:13px; color:#94a3b8;">Group-level <code>icon-only</code> with <code>icon-library="lucide"</code>.</p>
+            <h4 style="margin-bottom:4px; font-size:14px; color:var(--text-secondary,#64748b);">Font Awesome Icons</h4>
+            <p style="margin:0 0 12px; font-size:13px; color:var(--text-secondary,#64748b);">Use <code>fas fa-*</code> icon class names without setting <code>icon-library</code> (defaults to Font Awesome).</p>
+            <ui-button-toggle-group icon-only value="bold" color="info">
+              <ui-button-toggle value="bold" label="Bold" icon="fas fa-bold" library="fontawesome" tooltip="Bold"></ui-button-toggle>
+              <ui-button-toggle value="italic" label="Italic" icon="fas fa-italic" library="fontawesome" tooltip="Italic"></ui-button-toggle>
+              <ui-button-toggle value="underline" label="Underline" icon="fas fa-underline" library="fontawesome" tooltip="Underline"></ui-button-toggle>
+              <ui-button-toggle value="strikethrough" label="Strikethrough" icon="fas fa-strikethrough" library="fontawesome" tooltip="Strikethrough"></ui-button-toggle>
+              <ui-button-toggle value="align-left" label="Align Left" icon="fas fa-align-left" library="fontawesome" tooltip="Align Left"></ui-button-toggle>
+              <ui-button-toggle value="align-center" label="Align Center" icon="fas fa-align-center" library="fontawesome" tooltip="Align Center"></ui-button-toggle>
+              <ui-button-toggle value="align-right" label="Align Right" icon="fas fa-align-right" library="fontawesome" tooltip="Align Right"></ui-button-toggle>
+            </ui-button-toggle-group>
+          </div>
+
+          <div>
+            <h4 style="margin-bottom:4px; font-size:14px; color:var(--text-secondary,#64748b);">Lucide Icons — Glass variant</h4>
+            <p style="margin:0 0 12px; font-size:13px; color:var(--text-secondary,#64748b);">Group-level <code>icon-only</code> with <code>icon-library="lucide"</code>.</p>
             <ui-button-toggle-group icon-only icon-library="lucide" variant="glass" value="edit" color="secondary">
               <ui-button-toggle value="edit" label="Edit" icon="edit-3" tooltip="Edit Content"></ui-button-toggle>
               <ui-button-toggle value="trash" label="Delete" icon="trash-2" tooltip="Delete Item"></ui-button-toggle>
@@ -279,8 +294,8 @@ export function initButtonToggleDemo() {
           </div>
 
           <div>
-            <h4 style="margin-bottom:4px; font-size:14px; color:#64748b;">Per-item: <code>icon-only</code> on individual toggles</h4>
-            <p style="margin:0 0 12px; font-size:13px; color:#94a3b8;">Mix icon-only and labelled toggles in the same group. Useful for action + label layouts.</p>
+            <h4 style="margin-bottom:4px; font-size:14px; color:var(--text-secondary,#64748b);">Per-item: <code>icon-only</code> on individual toggles</h4>
+            <p style="margin:0 0 12px; font-size:13px; color:var(--text-secondary,#64748b);">Mix icon-only and labelled toggles in the same group. Useful for action + label layouts.</p>
             <ui-button-toggle-group value="grid" color="info" icon-library="lucide">
               <ui-button-toggle value="grid" label="Grid" icon="layout-grid" icon-only></ui-button-toggle>
               <ui-button-toggle value="list" label="List" icon="list" icon-only></ui-button-toggle>
@@ -290,8 +305,8 @@ export function initButtonToggleDemo() {
           </div>
 
           <div>
-            <h4 style="margin-bottom:4px; font-size:14px; color:#64748b;">Pill shape · Vertical · Group-level icon-only</h4>
-            <p style="margin:0 0 12px; font-size:13px; color:#94a3b8;">Works with any orientation and shape.</p>
+            <h4 style="margin-bottom:4px; font-size:14px; color:var(--text-secondary,#64748b);">Pill shape · Vertical · Group-level icon-only</h4>
+            <p style="margin:0 0 12px; font-size:13px; color:var(--text-secondary,#64748b);">Works with any orientation and shape.</p>
             <ui-button-toggle-group icon-only icon-library="lucide" orientation="vertical" shape="pill" value="sun" color="warning" style="max-width:64px;">
               <ui-button-toggle value="sun" label="Light" icon="sun" tooltip="Light mode"></ui-button-toggle>
               <ui-button-toggle value="moon" label="Dark" icon="moon" tooltip="Dark mode"></ui-button-toggle>
@@ -311,7 +326,7 @@ export function initButtonToggleDemo() {
         <p>Control where secondary text appears relative to the label.</p>
         <div style="display: flex; flex-direction: column; gap: 40px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Default (Bottom Alignment)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Default (Bottom Alignment)</h4>
             <ui-button-toggle-group color="primary" value="v1">
                <ui-button-toggle value="v1" label="Standard" description="Text appears below label"></ui-button-toggle>
                <ui-button-toggle value="v2" label="Compact" description="Sub-text metadata"></ui-button-toggle>
@@ -319,7 +334,7 @@ export function initButtonToggleDemo() {
           </div>
           
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Side-by-Side (High-Density)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Side-by-Side (High-Density)</h4>
             <ui-button-toggle-group color="secondary" value="v1" orientation="vertical" style="max-width:400px;">
                <ui-button-toggle value="v1" label="Network Alpha" description="5GHz • Active" description-position="side" icon="wifi" icon-library="lucide"></ui-button-toggle>
                <ui-button-toggle value="v2" label="Secure Vault" description="256-bit • Locked" description-position="side" icon="shield" icon-library="lucide"></ui-button-toggle>
@@ -328,7 +343,7 @@ export function initButtonToggleDemo() {
           </div>
 
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">With Premium Icons on Both Sides</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">With Premium Icons on Both Sides</h4>
             <ui-button-toggle-group color="primary" value="pro" shape="rounded">
               <ui-button-toggle 
                 value="free" 
@@ -336,6 +351,7 @@ export function initButtonToggleDemo() {
                 description="Community support" 
                 icon-left="fas fa-user" 
                 icon-right="fas fa-check" 
+                library="fontawesome"
               ></ui-button-toggle>
               <ui-button-toggle 
                 value="pro" 
@@ -343,6 +359,7 @@ export function initButtonToggleDemo() {
                 description="Priority 24/7 support" 
                 icon-left="fas fa-star" 
                 icon-right="fas fa-rocket" 
+                library="fontawesome"
               ></ui-button-toggle>
               <ui-button-toggle 
                 value="biz" 
@@ -350,11 +367,12 @@ export function initButtonToggleDemo() {
                 description="Dedicated manager" 
                 icon-left="fas fa-building" 
                 icon-right="fas fa-shield-alt" 
+                library="fontawesome"
               ></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Lucide Version (Max-Fit)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Lucide Version (Max-Fit)</h4>
             <ui-button-toggle-group icon-library="lucide" color="info" value="v1" shape="chip" width="max-content">
               <ui-button-toggle 
                 value="v1" 
@@ -384,7 +402,7 @@ export function initButtonToggleDemo() {
         <p>Control the width behavior of the group from "max-fit" to full width expansion.</p>
         <div style="display: flex; flex-direction: column; gap: 30px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Max-Fit (Tight Content)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Max-Fit (Tight Content)</h4>
             <ui-button-toggle-group width="max-content" value="1" color="primary">
               <ui-button-toggle value="1" label="Small"></ui-button-toggle>
               <ui-button-toggle value="2" label="md"></ui-button-toggle>
@@ -392,14 +410,14 @@ export function initButtonToggleDemo() {
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Fit-Content (With more text)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Fit-Content (With more text)</h4>
             <ui-button-toggle-group width="fit-content" value="1" color="secondary">
               <ui-button-toggle value="1" label="Option with longer text label"></ui-button-toggle>
               <ui-button-toggle value="2" label="Short"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Full Width (Grows to fill container)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Full Width (Grows to fill container)</h4>
             <div style="border: 1px dashed #ccc; padding: 10px; width: 100%;">
               <ui-button-toggle-group full-width value="1" color="success">
                 <ui-button-toggle value="1" label="Stretched 1"></ui-button-toggle>
@@ -419,10 +437,10 @@ export function initButtonToggleDemo() {
         <h3>Multi Select Mode</h3>
         <p>Allow users to select multiple options simultaneously.</p>
         <ui-button-toggle-group multi-select value='["bold", "italic"]' color="info">
-          <ui-button-toggle value="bold" label="Bold" icon="fas fa-bold"></ui-button-toggle>
-          <ui-button-toggle value="italic" label="Italic" icon="fas fa-italic"></ui-button-toggle>
-          <ui-button-toggle value="underline" label="Underline" icon="fas fa-underline"></ui-button-toggle>
-          <ui-button-toggle value="strikethrough" label="Strike" icon="fas fa-strikethrough"></ui-button-toggle>
+          <ui-button-toggle value="bold" label="Bold" icon="fas fa-bold" library="fontawesome"></ui-button-toggle>
+          <ui-button-toggle value="italic" label="Italic" icon="fas fa-italic" library="fontawesome"></ui-button-toggle>
+          <ui-button-toggle value="underline" label="Underline" icon="fas fa-underline" library="fontawesome"></ui-button-toggle>
+          <ui-button-toggle value="strikethrough" label="Strike" icon="fas fa-strikethrough" library="fontawesome"></ui-button-toggle>
         </ui-button-toggle-group>
       </div>
     `;
@@ -435,21 +453,21 @@ export function initButtonToggleDemo() {
         <p>Save space by transforming the group into a dropdown menu.</p>
         <div style="display: flex; gap: 20px; flex-wrap: wrap;">
           <ui-button-toggle-group mode="dropdown" button-action-label="Export As" color="primary" variant="surface">
-            <ui-button-toggle value="pdf" label="Portable Document (PDF)" icon="fas fa-file-pdf"></ui-button-toggle>
-            <ui-button-toggle value="excel" label="Excel Sheet (XLSX)" icon="fas fa-file-excel"></ui-button-toggle>
-            <ui-button-toggle value="csv" label="Comma Separated (CSV)" icon="fas fa-file-csv"></ui-button-toggle>
+            <ui-button-toggle value="pdf" label="Portable Document (PDF)" icon="fas fa-file-pdf" library="fontawesome"></ui-button-toggle>
+            <ui-button-toggle value="excel" label="Excel Sheet (XLSX)" icon="fas fa-file-excel" library="fontawesome"></ui-button-toggle>
+            <ui-button-toggle value="csv" label="Comma Separated (CSV)" icon="fas fa-file-csv" library="fontawesome"></ui-button-toggle>
           </ui-button-toggle-group>
 
           <ui-button-toggle-group mode="dropdown" button-action-label="Theme" color="secondary" variant="outline">
-            <ui-button-toggle value="light" label="Light Mode" icon="fas fa-sun"></ui-button-toggle>
-            <ui-button-toggle value="dark" label="Dark Night" icon="fas fa-moon"></ui-button-toggle>
-            <ui-button-toggle value="auto" label="System Default" icon="fas fa-desktop"></ui-button-toggle>
+            <ui-button-toggle value="light" label="Light Mode" icon="fas fa-sun" library="fontawesome"></ui-button-toggle>
+            <ui-button-toggle value="dark" label="Dark Night" icon="fas fa-moon" library="fontawesome"></ui-button-toggle>
+            <ui-button-toggle value="auto" label="System Default" icon="fas fa-desktop" library="fontawesome"></ui-button-toggle>
           </ui-button-toggle-group>
         </div>
 
-        <h4 style="margin: 32px 0 12px; font-size:14px; color:#64748b; text-transform: uppercase; letter-spacing: 0.05em;">Padding-less Dropdown Variant</h4>
+        <h4 style="margin: 32px 0 12px; font-size:14px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Padding-less Dropdown Variant</h4>
         <p style="font-size: 13px; color: #6b7280; margin-bottom: 20px;">The <code>variant="dropdown"</code> removes all internal padding for high-density layouts or inline integrations.</p>
-        <div style="background: #f8fafc; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+        <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e2e8f0);">
           <ui-button-toggle-group color="primary" variant="dropdown" value="v1">
             <ui-button-toggle value="v1" label="Export Data" icon="download" icon-library="lucide"></ui-button-toggle>
             <ui-button-toggle value="v2" label="Share Link" icon="share-2" icon-library="lucide"></ui-button-toggle>
@@ -497,14 +515,14 @@ export function initButtonToggleDemo() {
         <p>Disabled components and individual options.</p>
         <div style="display: flex; flex-direction: column; gap: 24px;">
            <div>
-             <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Fully Disabled</h4>
+             <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Fully Disabled</h4>
              <ui-button-toggle-group disabled value="opt1">
                <ui-button-toggle value="opt1" label="Option 1"></ui-button-toggle>
                <ui-button-toggle value="opt2" label="Option 2"></ui-button-toggle>
              </ui-button-toggle-group>
            </div>
            <div>
-             <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Individual Option Disabled</h4>
+             <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Individual Option Disabled</h4>
              <ui-button-toggle-group value="opt1">
                <ui-button-toggle value="opt1" label="Working"></ui-button-toggle>
                <ui-button-toggle value="opt2" label="Maintenance" disabled></ui-button-toggle>
@@ -523,7 +541,7 @@ export function initButtonToggleDemo() {
         <p>Apply vibrant linear gradients to the active state of your toggle groups.</p>
         <div style="display: flex; flex-direction: column; gap: 40px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Ocean Depth (Blue-Indigo)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Ocean Depth (Blue-Indigo)</h4>
             <ui-button-toggle-group color='{"from": "#3b82f6", "to": "#6366f1"}' value="opt1" shape="pill">
                <ui-button-toggle value="opt1" label="Development" icon="code" icon-library="lucide"></ui-button-toggle>
                <ui-button-toggle value="opt2" label="Production" icon="ship" icon-library="lucide"></ui-button-toggle>
@@ -531,14 +549,14 @@ export function initButtonToggleDemo() {
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Arctic Aurora (Teal-Cyan)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Arctic Aurora (Teal-Cyan)</h4>
             <ui-button-toggle-group color='{"from": "#0d9488", "to": "#0891b2"}' value="opt1" variant="outline">
                <ui-button-toggle value="opt1" label="Sustainable" icon="leaf" icon-library="lucide"></ui-button-toggle>
                <ui-button-toggle value="opt2" label="Efficient" icon="zap" icon-library="lucide"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Cosmic Neon (Indigo-Pink)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Cosmic Neon (Indigo-Pink)</h4>
             <ui-button-toggle-group color='{"from": "#4f46e5", "to": "#db2777"}' value="opt1" shape="rounded">
                <ui-button-toggle value="opt1" label="Launch" icon="rocket" icon-library="lucide"></ui-button-toggle>
                <ui-button-toggle value="opt2" label="Orbit" icon="orbit" icon-library="lucide"></ui-button-toggle>
@@ -557,15 +575,15 @@ export function initButtonToggleDemo() {
         <p>Using child &lt;ui-button-toggle&gt; tags with Lucide icons (synced automatically).</p>
         <div style="display: flex; flex-direction: column; gap: 30px;">
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">User Status Selector</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">User Status Selector</h4>
             <ui-button-toggle-group value="online" color="info" icon-library="lucide">
-              <ui-button-toggle value="online" label="Online" avatar-src="https://i.pravatar.cc/150?u=1" status="online" icon="user-check"></ui-button-toggle>
-              <ui-button-toggle value="away" label="Away" avatar-src="https://i.pravatar.cc/150?u=2" status="away" icon="clock"></ui-button-toggle>
-              <ui-button-toggle value="busy" label="Do Not Disturb" avatar-src="https://i.pravatar.cc/150?u=3" status="busy" icon="minus-circle"></ui-button-toggle>
+              <ui-button-toggle value="online" label="Online" avatar-src="/build/assets/images/logo.png" status="online" icon="user-check"></ui-button-toggle>
+              <ui-button-toggle value="away" label="Away" avatar-src="/build/assets/images/logo.png" status="away" icon="clock"></ui-button-toggle>
+              <ui-button-toggle value="busy" label="Do Not Disturb" avatar-src="/build/assets/images/logo.png" status="busy" icon="minus-circle"></ui-button-toggle>
             </ui-button-toggle-group>
           </div>
           <div>
-            <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Dropdown Mode (Child Tags)</h4>
+            <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Dropdown Mode (Child Tags)</h4>
             <ui-button-toggle-group mode="dropdown" button-action-label="Sync Action" color="primary" icon-library="lucide">
               <ui-button-toggle value="sync" label="Sync Now" icon="refresh-cw"></ui-button-toggle>
               <ui-button-toggle value="cloud" label="Cloud Save" icon="cloud"></ui-button-toggle>
@@ -579,12 +597,12 @@ export function initButtonToggleDemo() {
 
   const showToggleElite = () => {
     container.innerHTML = `
-      <div class="demo-block" style="background: #0f172a; color: white; border-color: #1e293b; border-width: 2px;">
-        <h3 style="color: white; display: flex; align-items: center; gap: 10px;">
+      <div class="demo-block" style="border-color: var(--border-default); border-width: 2px;">
+        <h3 style="color: var(--text-primary); display: flex; align-items: center; gap: 10px;">
           <ui-icon name="award" library="lucide" size="24px" style="color: #fbbf24;"></ui-icon>
           God Mode: Elite Toggle Interaction
         </h3>
-        <p style="color: #94a3b8;">High-fidelity physical interactions synced from the flagship button engine.</p>
+        <p style="color:var(--text-secondary,#64748b);">High-fidelity physical interactions synced from the flagship button engine.</p>
         
         <div style="display: flex; flex-direction: column; gap: 40px; margin-top: 30px;">
           <div>
@@ -607,7 +625,7 @@ export function initButtonToggleDemo() {
 
           <div>
             <h4 style="margin-bottom:12px; font-size:14px; color: var(--label-color); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8;">Shatter & Audio (Untoggle Effects)</h4>
-            <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">Deselecting these buttons triggers a procedural shatter and distinct audio.</p>
+            <p style="color:var(--text-secondary,#64748b); font-size: 12px; margin-bottom: 12px;">Deselecting these buttons triggers a procedural shatter and distinct audio.</p>
             <ui-button-toggle-group value="s1" multi-select>
               <ui-button-toggle value="s1" label="Glass Break" shatter audio="success" haptic icon="layers" icon-library="lucide"></ui-button-toggle>
               <ui-button-toggle value="s2" label="Metal Clink" shatter audio="click" haptic icon="database" icon-library="lucide"></ui-button-toggle>
@@ -650,15 +668,15 @@ export function initButtonToggleDemo() {
             <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                <div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">
                   <ui-button-toggle icon="mic" icon-library="lucide" shape="circle" color="primary" value="c1"></ui-button-toggle>
-                  <span style="color: #64748b; font-size: 10px;">shape="circle"</span>
+                  <span style="color:var(--text-secondary,#64748b); font-size: 10px;">shape="circle"</span>
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">
                   <ui-button-toggle icon="video" icon-library="lucide" shape="square" color="secondary" value="s1"></ui-button-toggle>
-                  <span style="color: #64748b; font-size: 10px;">shape="square"</span>
+                  <span style="color:var(--text-secondary,#64748b); font-size: 10px;">shape="square"</span>
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">
                   <ui-button-toggle icon="camera" icon-library="lucide" shape="rounded" color="success" value="r1"></ui-button-toggle>
-                  <span style="color: #64748b; font-size: 10px;">shape="rounded"</span>
+                  <span style="color:var(--text-secondary,#64748b); font-size: 10px;">shape="rounded"</span>
                </div>
             </div>
           </div>
@@ -671,7 +689,7 @@ export function initButtonToggleDemo() {
                   <ui-button-toggle value="v2" label="Winning Secret" icon="trophy" icon-library="lucide" color="success" confetti success-morph="600" audio="success" haptic></ui-button-toggle>
                </ui-button-toggle-group>
             </div>
-            <p style="color: #64748b; font-size: 11px; margin-top: 10px;">Select 'Winning Secret' to trigger the procedural confetti and success morph pulse.</p>
+            <p style="color:var(--text-secondary,#64748b); font-size: 11px; margin-top: 10px;">Select 'Winning Secret' to trigger the procedural confetti and success morph pulse.</p>
           </div>
 
           <div>
@@ -688,7 +706,7 @@ export function initButtonToggleDemo() {
                   <ui-button-toggle value="z2" label="Beta" icon="layout" icon-library="lucide"></ui-button-toggle>
                </ui-button-toggle-group>
             </div>
-            <p style="color: #64748b; font-size: 11px; margin-top: 10px;">The group entrance is orchestrated automatically via indexed delays.</p>
+            <p style="color:var(--text-secondary,#64748b); font-size: 11px; margin-top: 10px;">The group entrance is orchestrated automatically via indexed delays.</p>
           </div>
 
           <div>
@@ -712,7 +730,7 @@ export function initButtonToggleDemo() {
         <form id="toggleForm">
           <div style="display: flex; flex-direction: column; gap: 24px;">
             <div>
-              <h4 style="margin-bottom:12px; font-size:14px; color:#64748b;">Select View Mode (Required)</h4>
+              <h4 style="margin-bottom:12px; font-size:14px; color:var(--text-secondary,#64748b);">Select View Mode (Required)</h4>
               <ui-button-toggle-group name="selection_mode" value="grid" color="primary" required>
                 <ui-button-toggle value="list" label="List View" icon="list" icon-library="lucide"></ui-button-toggle>
                 <ui-button-toggle value="grid" label="Grid View" icon="grid" icon-library="lucide"></ui-button-toggle>
@@ -725,7 +743,7 @@ export function initButtonToggleDemo() {
               <ui-button id="btnResetForm" type="reset" variant="outline" label="Reset Form"></ui-button>
             </div>
 
-            <div style="margin-top: 12px; padding: 12px; background: #f1f5f9; border-radius: 8px;">
+            <div style="margin-top: 12px; padding: 12px; background:var(--bg-tertiary,#f1f5f9); border-radius: 8px;">
               <strong>Form Result (FormData):</strong> <span id="formOutput">grid</span>
             </div>
           </div>
@@ -747,7 +765,7 @@ export function initButtonToggleDemo() {
  
             <ui-button id="btnCheckFeatures" type="submit" variant="success" label="Check Features"></ui-button>
 
-            <div style="margin-top: 12px; padding: 12px; background: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0;">
+            <div style="margin-top: 12px; padding: 12px; background:var(--accent-green-soft,#f0fdf4); border-radius: 8px; border: 1px solid #bbf7d0;">
               <strong>Selected Features:</strong> <span id="multiFormOutput">auth,db</span>
             </div>
           </div>
@@ -772,11 +790,28 @@ export function initButtonToggleDemo() {
 
   const showTogglePlayground = () => {
     container.innerHTML = `
-      <div class="playground-wrapper" style="display: flex; height: 750px; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05);">
+      <style>
+        .setting-card {
+          background: var(--bg-secondary, #f8fafc);
+          border-radius: 16px;
+          padding: 20px;
+          border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
+          transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .setting-card:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+          border-color: var(--color-primary-subtle, rgba(139,92,246,0.3));
+        }
+        .playground-sidebar-scroll::-webkit-scrollbar { width: 4px; }
+        .playground-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
+        .playground-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-default, #cbd5e1); border-radius: 4px; }
+      </style>
+      <div class="playground-wrapper" style="display: flex; height: 750px; background: var(--bg-primary, #fff); border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); border: 1px solid var(--border-subtle, rgba(0,0,0,0.05));">
         <!-- Left Sidebar: Component Workbench -->
-        <div class="playground-sidebar" style="width: 380px; flex-shrink: 0; border-right: 1px solid rgba(0,0,0,0.05); background: #fff; display: flex; flex-direction: column;">
-          <div style="padding: 28px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-shrink: 0;">
-            <h3 style="margin: 0; font-size: 1.2rem; background: linear-gradient(to right, #1e293b, #64748b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.02em;">
+        <div class="playground-sidebar" style="width: 380px; flex-shrink: 0; border-right: 1px solid var(--border-subtle, rgba(0,0,0,0.05)); background: var(--bg-primary, #fff); display: flex; flex-direction: column;">
+          <div style="padding: 28px; border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.05)); flex-shrink: 0;">
+            <h3 style="margin: 0; font-size: 1.2rem; color: var(--text-primary, #1e293b); display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.02em;">
               <ui-icon name="tool" library="lucide" color="primary"></ui-icon>
               Component Workbench
             </h3>
@@ -786,8 +821,8 @@ export function initButtonToggleDemo() {
             <!-- Group Card: Aesthetics -->
             <div class="setting-card">
               <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center;"><ui-icon name="palette" size="16px" color="primary"></ui-icon></div>
-                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #475569; font-weight: 700;">Aesthetics & Theme</h4>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--bg-tertiary,#f1f5f9); display: flex; align-items: center; justify-content: center;"><ui-icon name="palette" size="16px" color="primary"></ui-icon></div>
+                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700;">Aesthetics & Theme</h4>
               </div>
               <div style="display: flex; flex-direction: column; gap: 16px;">
                 <ui-dropdown id="tgVariant" label="Visual Variant" value="default" options='[
@@ -816,8 +851,8 @@ export function initButtonToggleDemo() {
             <!-- Group Card: Layout & Logic -->
             <div class="setting-card">
               <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #f5f3ff; display: flex; align-items: center; justify-content: center;"><ui-icon name="layout" size="16px" color="primary"></ui-icon></div>
-                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #7c3aed; font-weight: 700;">Layout & Logic</h4>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--accent-purple-soft,#f5f3ff); display: flex; align-items: center; justify-content: center;"><ui-icon name="layout" size="16px" color="primary"></ui-icon></div>
+                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color:var(--text-secondary); font-weight: 700;">Layout & Logic</h4>
               </div>
               <div style="display: flex; flex-direction: column; gap: 16px;">
                 <ui-dropdown id="tgWidth" label="Width Logic" value="initial" options='[
@@ -836,8 +871,8 @@ export function initButtonToggleDemo() {
             <!-- Group Card: Content Synthesis -->
             <div class="setting-card">
               <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #fff7ed; display: flex; align-items: center; justify-content: center;"><ui-icon name="type" size="16px" color="warning"></ui-icon></div>
-                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #9a3412; font-weight: 700;">Content Synthesis</h4>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--accent-orange-soft,#fff7ed); display: flex; align-items: center; justify-content: center;"><ui-icon name="type" size="16px" color="warning"></ui-icon></div>
+                <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary, #9a3412); font-weight: 700;">Content Synthesis</h4>
               </div>
               <div style="display: flex; flex-direction: column; gap: 16px;">
                 <ui-input id="tgLabel1" label="Slot 1 Text" value="Development" size="md"riant="outlined"></ui-input>
@@ -852,10 +887,10 @@ export function initButtonToggleDemo() {
         </div>
 
         <!-- Main Preview Area -->
-        <div class="playground-main" style="flex: 1; display: flex; flex-direction: column; background: #f8fafc;">
-          <div style="padding: 20px 32px; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; background: #fff;">
+        <div class="playground-main" style="flex: 1; display: flex; flex-direction: column; background:var(--bg-secondary,#f8fafc);">
+          <div style="padding: 20px 32px; border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.05)); display: flex; justify-content: space-between; align-items: center; background: var(--bg-primary, #fff);">
             <div style="display: flex; gap: 12px; align-items: center;">
-              <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; font-weight: 700;">Visual Synthesis Lab</span>
+              <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color:var(--text-secondary,#64748b); font-weight: 700;">Visual Synthesis Lab</span>
             </div>
             <div style="display: flex; gap: 8px;">
                <ui-button size="xs" variant="ghost" label="Reset Lab" icon="rotate-ccw"></ui-button>
@@ -867,7 +902,7 @@ export function initButtonToggleDemo() {
           </div>
 
           <!-- Code Artifact -->
-          <div style="padding: 32px; background: #fff; border-top: 1px solid rgba(0,0,0,0.05);">
+          <div style="padding: 32px; background: var(--bg-primary, #fff); border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.05));">
              <ui-code-preview id="tgCodeDisplay" language="html"></ui-code-preview>
           </div>
         </div>
@@ -928,6 +963,73 @@ export function initButtonToggleDemo() {
     }
   };
 
+  const showToggleSearchLoad = () => {
+    const container = section.querySelector('#buttonToggleContainer');
+    if (!container) return;
+    container.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 40px;">
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🔍 Searchable Multi-Select</h3>
+          <p class="specimen-description">Enable <code>search-enabled</code> to let users filter options in real time. Works with both single and multi-select modes.</p>
+          <div style="display: flex; flex-direction: column; gap: 24px;">
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px; text-transform: uppercase;">Single select with search</p>
+              <ui-button-toggle-group
+                search-enabled
+                value="react"
+                options='[{"label":"React","value":"react","icon":"logo-react"},{"label":"Vue","value":"vue","icon":"logo-vue"},{"label":"Angular","value":"angular","icon":"logo-angular"},{"label":"Svelte","value":"svelte","icon":"bandage"},{"label":"Solid","value":"solid","icon":"cube"},{"label":"Astro","value":"astro","icon":"planet"}]'
+              ></ui-button-toggle-group>
+            </div>
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px; text-transform: uppercase;">Multi-select with search</p>
+              <ui-button-toggle-group
+                search-enabled
+                multi-select
+                value='["react","vue"]'
+                options='[{"label":"React","value":"react"},{"label":"Vue","value":"vue"},{"label":"Angular","value":"angular"},{"label":"Svelte","value":"svelte"},{"label":"Solid","value":"solid"},{"label":"Next.js","value":"next"},{"label":"Nuxt","value":"nuxt"},{"label":"Remix","value":"remix"}]'
+              ></ui-button-toggle-group>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">⏳ Loading State</h3>
+          <p class="specimen-description">Set <code>loading="true"</code> to show a loading skeleton while options are being fetched asynchronously.</p>
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px; text-transform: uppercase;">Loading (skeleton)</p>
+              <ui-button-toggle-group
+                loading
+                options='[{"label":"Option A","value":"a"},{"label":"Option B","value":"b"},{"label":"Option C","value":"c"}]'
+              ></ui-button-toggle-group>
+            </div>
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px; text-transform: uppercase;">Loaded (normal)</p>
+              <ui-button-toggle-group
+                value="b"
+                options='[{"label":"Option A","value":"a"},{"label":"Option B","value":"b"},{"label":"Option C","value":"c"}]'
+              ></ui-button-toggle-group>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">📤 Export / Import</h3>
+          <p class="specimen-description">Multi-select groups can export selections as CSV/JSON and import them back.</p>
+          <ui-button-toggle-group
+            multi-select
+            export-enabled
+            import-enabled
+            value='["mon","wed"]'
+            options='[{"label":"Mon","value":"mon"},{"label":"Tue","value":"tue"},{"label":"Wed","value":"wed"},{"label":"Thu","value":"thu"},{"label":"Fri","value":"fri"},{"label":"Sat","value":"sat"},{"label":"Sun","value":"sun"}]'
+          ></ui-button-toggle-group>
+        </div>
+
+      </div>
+    `;
+  };
+
   const demoMap = {
     playground: showTogglePlayground,
     comparison: showToggleComparison,
@@ -946,6 +1048,7 @@ export function initButtonToggleDemo() {
     premium: showTogglePremium,
     elite: showToggleElite,
     form: showToggleForm,
+    searchLoad: showToggleSearchLoad,
   };
 
   const nav = section.querySelector('#toggleNavPills');