npm - atomicuilibrary - Versions diffs - 0.1.0 → 0.1.3 - Mend

atomicuilibrary 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/collection/assets/js/demos/dialog-demo.js CHANGED Viewed

@@ -19,7 +19,7 @@ export function initDialogDemo() {
         <ui-button id="btnNestedDialogs"  label="Nested" size="md" variant="outline"></ui-button>
         <ui-button id="btnPremiumFeatures"  label="💎 Premium" size="md" variant="outline"></ui-button>
         <ui-button id="btnApexShowcase"  label="🌌 Apex Tier" size="md" variant="outline"></ui-button>
-        <ui-button id="btnGodTier"  label="🎭 God Tier" size="md" variant="outline"></ui-button>
+        <ui-button id="btnGodTierDialog"  label="🎭 God Tier" size="md" variant="outline"></ui-button>
         <ui-button id="btnSovereignTier"  label="⚡ Sovereign" size="md" variant="outline"></ui-button>
         <ui-button id="btnCustomHeaderShowcase"  label="💎 Branded Header" size="md" variant="outline"></ui-button>
         <ui-button id="btnMockupDesign"  label="📐 Mockup" size="md" variant="outline"></ui-button>
@@ -48,38 +48,38 @@ export function initDialogDemo() {
   setTimeout(() => {
     const btnMap = {
-      btnInteractiveDialog: window.showInteractiveDialog,
-      btnBasicDialog: window.showBasicDialog,
-      btnSlotDialog: window.showSlotDialog,
-      btnDialogSizes: window.showDialogSizes,
-      btnDialogPositions: window.showDialogPositions,
-      btnDialogScroll: window.showDialogScroll,
-      btnAdvancedDialogs: window.showAdvancedDialogs,
-      btnFormDialog: window.showFormDialog,
-      btnNestedDialogs: window.showNestedDialogs,
-      btnPremiumFeatures: window.showPremiumFeatures,
-      btnApexShowcase: window.showApexShowcase,
-      btnGodTier: window.showGodTier,
-      btnSovereignTier: window.showSovereignTier,
-      btnCustomHeaderShowcase: window.showCustomHeaderShowcase,
-      btnMockupDesign: window.showMockupDesign,
-      btnTermsDialog: window.showTermsDialog,
-      btnEliteFeatures: window.showEliteFeatures,
-      btnSecurityLifecycleFeatures: window.showSecurityLifecycleFeatures,
-      btnWindowFeatures: window.showWindowFeatures,
-      btnDrawerShowcase: window.showDrawerShowcase,
-      btnFullscreenDemo: window.showFullscreenDemo,
-      btnPromiseDemo: window.showPromiseDemo,
-      btnSlotsAndPartsDemo: window.showSlotsAndPartsDemo,
-      btnMessageBoxDemo: window.showMessageBoxDemo,
-      btnConfirmDemo: window.showConfirmDemo,
-      btnPromptDemo: window.showPromptDemo,
-      btnMenuShowroom: window.showMenuShowroom,
-      btnTraySystemDemo: window.showTraySystemDemo,
-      btnGlassStatusShowroom: window.showGlassStatusShowroom,
-      btnEnterpriseLogicShowcase: window.showEnterpriseLogicShowcase,
-      btnParentChildDialogDemo: window.showParentChildDialogDemo,
-      btnAuthSessionDemo: window.showAuthSessionDemo,
+      btnInteractiveDialog: () => window.showInteractiveDialog?.(),
+      btnBasicDialog: () => window.showBasicDialog?.(),
+      btnSlotDialog: () => window.showSlotDialog?.(),
+      btnDialogSizes: () => window.showDialogSizes?.(),
+      btnDialogPositions: () => window.showDialogPositions?.(),
+      btnDialogScroll: () => window.showDialogScroll?.(),
+      btnAdvancedDialogs: () => window.showAdvancedDialogs?.(),
+      btnFormDialog: () => window.showFormDialog?.(),
+      btnNestedDialogs: () => window.showNestedDialogs?.(),
+      btnPremiumFeatures: () => window.showPremiumFeatures?.(),
+      btnApexShowcase: () => window.showApexShowcase?.(),
+      btnGodTierDialog: () => window.showGodTier?.(),
+      btnSovereignTier: () => window.showSovereignTier?.(),
+      btnCustomHeaderShowcase: () => window.showCustomHeaderShowcase?.(),
+      btnMockupDesign: () => window.showMockupDesign?.(),
+      btnTermsDialog: () => window.showTermsDialog?.(),
+      btnEliteFeatures: () => window.showEliteFeatures?.(),
+      btnSecurityLifecycleFeatures: () => window.showSecurityLifecycleFeatures?.(),
+      btnWindowFeatures: () => window.showWindowFeatures?.(),
+      btnDrawerShowcase: () => window.showDrawerShowcase?.(),
+      btnFullscreenDemo: () => window.showFullscreenDemo?.(),
+      btnPromiseDemo: () => window.showPromiseDemo?.(),
+      btnSlotsAndPartsDemo: () => window.showSlotsAndPartsDemo?.(),
+      btnMessageBoxDemo: () => window.showMessageBoxDemo?.(),
+      btnConfirmDemo: () => window.showConfirmDemo?.(),
+      btnPromptDemo: () => window.showPromptDemo?.(),
+      btnMenuShowroom: () => window.showMenuShowroom?.(),
+      btnTraySystemDemo: () => window.showTraySystemDemo?.(),
+      btnGlassStatusShowroom: () => window.showGlassStatusShowroom?.(),
+      btnEnterpriseLogicShowcase: () => window.showEnterpriseLogicShowcase?.(),
+      btnParentChildDialogDemo: () => window.showParentChildDialogDemo?.(),
+      btnAuthSessionDemo: () => window.showAuthSessionDemo?.(),
     };
     const updateActiveBtn = id => {
@@ -159,7 +159,7 @@ export function initDialogDemo() {
           variant="default"
           status="success"
           backdrop="blur"
-          scroll-behavior="inside"
+          scroll-area="paper"
           resizable="true"
           global-blur="true"
           glass="true"
@@ -237,7 +237,7 @@ export function initDialogDemo() {
                 <ui-button id="btnCustomHeaderAction" slot="header-actions" title="Star" variant="ghost" color="secondary" size="md">
                     <ui-icon name="star" library="lucide" size="16px"></ui-icon>
                 </ui-button>
-                <div style="padding:16px; background:#f0fdf4; border:1px dashed #10b981; border-radius:6px; margin-top:8px;">
+                <div style="padding:16px; background:var(--accent-green-soft,#f0fdf4); border:1px dashed #10b981; border-radius:6px; margin-top:8px;">
                     <h4 style="margin-top:0;">Slot Content Area</h4>
                     <p>This content is injected via the <b>default slot</b>. It is fully customizable.</p>
                 </div>
@@ -350,63 +350,102 @@ export function initDialogDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>Complex Form Dialog</h3>
-        <p style="color: #64748b; margin-bottom: 16px;">This demo showcases a multi-control form integrated directly into the dialog, demonstrating native component interoperability.</p>
+        <p style="color:var(--text-secondary,#64748b); margin-bottom: 16px;">This demo showcases a multi-control form integrated directly into the dialog, demonstrating native component interoperability.</p>
         <ui-button id="btnOpenForm" size="md" variant="outline" color="success" label="Launch Complex Form"></ui-button>
-        <ui-dialog-box id="formDialog" width="650px" icon-library="lucide" icon="edit-3" dialog-title="User Configuration" subtitle="Update your account preferences and settings" ok-text="Save Configuration" cancel-text="Discard Changes" scroll-behavior="paper" glass="true">
-          <div style="padding: 20px; display: flex; flex-direction: column; gap: 24px;">
+        <ui-dialog-box id="formDialog" width="750px" icon-library="lucide" icon="edit-3" dialog-title="Comprehensive User Registration" subtitle="Configure profile, access settings, preferences, and custom theme layouts" ok-text="Save Configuration" cancel-text="Discard Changes" scroll-area="paper" glass="true">
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 28px;">
-            <!-- Section: Personal Info -->
+            <!-- Section 1: Personal Credentials -->
             <div>
-              <h4 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8;">Personal Information</h4>
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 700;">1. Personal Credentials</h4>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
+                <ui-input label="First Name" placeholder="Enter first name" value="John" size="md"></ui-input>
+                <ui-input label="Last Name" placeholder="Enter last name" value="Doe" size="md"></ui-input>
+              </div>
               <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
-                <ui-input label="First Name" placeholder="Enter first name" value="John"></ui-input>
-                <ui-input label="Last Name" placeholder="Enter last name" value="Doe"></ui-input>
-                <ui-input label="Email Address" type="email" placeholder="john.doe@example.com" value="john.doe@enterprise.com" style="grid-column: span 2;"></ui-input>
+                <ui-input label="Email Address" type="email" placeholder="john.doe@example.com" value="john.doe@enterprise.com" size="md"></ui-input>
+                <ui-input label="Password" type="password" placeholder="••••••••••••" value="securepassword123" size="md"></ui-input>
               </div>
             </div>
-            <!-- Section: Preferences -->
+            <!-- Section 2: Contact & Demographics -->
             <div>
-              <h4 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8;">Preferences</h4>
-              <div style="display: flex; flex-direction: column; gap: 16px;">
-                <div style="display: flex; justify-content: space-between; align-items: center;">
-                  <div>
-                    <div style="font-weight: 600; font-size: 14px;">Notification Emails</div>
-                    <div style="font-size: 12px; color: #64748b;">Receive weekly product updates</div>
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 700;">2. Contact & Regional Details</h4>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
+                <ui-pattern-input label="Intl. Contact Number" pattern="(###) ###-####" placeholder="(555) 123-4567" size="md"></ui-pattern-input>
+                <ui-dropdown id="formRegionDropdown" label="Preferred Region" placeholder="Select a region..." size="md"></ui-dropdown>
+              </div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+                <ui-number-input label="Daily API Request Limit" value="2500" min="100" max="50000" step="100" size="md" helper-text="Steps of 100 requests"></ui-number-input>
+                <div style="display: flex; flex-direction: column;">
+                  <label style="display: block; font-weight: 600; font-size: 12px; margin-bottom: 4px; color: var(--text-standard);">Session Timeout</label>
+                  <div style="display: flex; align-items: center; justify-content: center; height: 100%; min-height: 48px;">
+                    <ui-knob value="15" min="5" max="120" step="5" size="80" stroke-width="6" show-value="true" enable-wheel="true" value-suffix="m"></ui-knob>
                   </div>
-                  <ui-switch checked="true"></ui-switch>
                 </div>
+              </div>
+            </div>
+            <!-- Section 3: Security & Isolation -->
+            <div>
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 700;">3. Security & Access Settings</h4>
+              <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-bottom: 16px;">
                 <div>
-                   <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px;">Theme Selection</label>
-                   <ui-button-toggle-group value="system" size="sm" variant="outline">
-                      <ui-button-toggle value="light" label="Light"></ui-button-toggle>
-                      <ui-button-toggle value="dark" label="Dark"></ui-button-toggle>
-                      <ui-button-toggle value="system" label="System"></ui-button-toggle>
-                   </ui-button-toggle-group>
+                  <label style="display: block; font-weight: 700; font-size: 12px; margin-bottom: 8px; color: var(--text-standard);">Deployment Strategy</label>
+                  <ui-radio-group value="cloud" size="md">
+                    <ui-radio value="cloud" label="Cloud Infrastructure" description="Auto-scaled managed servers" checked glow size="md"></ui-radio>
+                    <ui-radio value="on-premise" label="On-Premise Server" description="Private air-gapped hardware" size="md"></ui-radio>
+                  </ui-radio-group>
                 </div>
                 <div>
-                   <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px;">Experience Level</label>
-                   <ui-range-slider value="75" min="0" max="100" step="5"></ui-range-slider>
+                  <ui-otp-input label="Verification Code (2FA)" length="4" value="8402" size="md" helper-text="Quick account authentication pin"></ui-otp-input>
                 </div>
               </div>
+              <div style="display: flex; flex-direction: column; gap: 10px;">
+                <ui-checkbox label="Enable hardware security key MFA bypass" checked="true" size="md"></ui-checkbox>
+                <ui-checkbox label="Subscribe to global security vulnerability alerts" size="md"></ui-checkbox>
+              </div>
             </div>
-            <!-- Section: Security -->
+            <!-- Section 4: Preferences & Style -->
             <div>
-              <h4 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8;">Security & Access</h4>
-              <div style="display: flex; flex-direction: column; gap: 12px;">
-                 <ui-checkbox label="Enable Two-Factor Authentication" checked="true"></ui-checkbox>
-                 <ui-checkbox label="Subscribe to Security Alerts"></ui-checkbox>
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 700;">4. Customization & Theme</h4>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px;">
+                <div>
+                  <label style="display: block; font-weight: 600; font-size: 12px; margin-bottom: 8px; color: var(--text-standard);">Theme Interface</label>
+                  <ui-button-toggle-group value="system" size="md" variant="outline">
+                    <ui-button-toggle value="light" label="Light"></ui-button-toggle>
+                    <ui-button-toggle value="dark" label="Dark"></ui-button-toggle>
+                    <ui-button-toggle value="system" label="System"></ui-button-toggle>
+                  </ui-button-toggle-group>
+                </div>
+                <ui-color-picker label="Custom Profile Accent" value="#10b981" size="md" show-swatches="true"></ui-color-picker>
+              </div>
+              <div style="margin-bottom: 16px;">
+                <label style="display: block; font-weight: 600; font-size: 12px; margin-bottom: 8px; color: var(--text-standard);">Platform Experience Level</label>
+                <ui-range-slider value="80" min="0" max="100" step="5" size="md"></ui-range-slider>
+              </div>
+              <div style="margin-bottom: 16px;">
+                <label style="display: block; font-weight: 600; font-size: 12px; margin-bottom: 8px; color: var(--text-standard);">Profile Photo Upload</label>
+                <ui-file-upload variant="compact" label="Upload Avatar" accept="image/*" size="md" max-files="1"></ui-file-upload>
+              </div>
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-default, #e5e7eb);">
+                <div>
+                  <div style="font-weight: 600; font-size: 13px;">Receive System Communications</div>
+                  <div style="font-size: 11px; color:var(--text-secondary,#64748b);">Weekly technical roundups and feature releases</div>
+                </div>
+                <ui-switch checked="true" size="md"></ui-switch>
               </div>
             </div>
-            <!-- Section: Satisfaction -->
-            <div style="background: rgba(128,128,128,0.05); padding: 16px; border-radius: 8px; border: 1px solid rgba(128,128,128,0.1);">
-               <label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px;">How would you rate our library?</label>
-               <ui-rating value="4" max="5" size="lg"></ui-rating>
+            <!-- Section 5: Satisfaction -->
+            <div style="background: rgba(16, 185, 129, 0.04); padding: 16px; border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: space-between;">
+              <label style="font-weight: 600; font-size: 13px; color: #111827; margin: 0;">How satisfied are you with this framework?</label>
+              <ui-rating value="5" max="5" size="lg"></ui-rating>
             </div>
           </div>
         </ui-dialog-box>
@@ -414,6 +453,16 @@ export function initDialogDemo() {
     `;
     setTimeout(() => {
       document.getElementById('btnOpenForm')?.addEventListener('click', () => window.openDialog('formDialog'));
+      const formRegionDropdown = document.getElementById('formRegionDropdown');
+      if (formRegionDropdown) {
+        formRegionDropdown.options = [
+          { value: 'us', label: 'North America (Hub)', description: 'East-coast server cluster' },
+          { value: 'eu', label: 'Europe (Central)', description: 'Frankfurt tier' },
+          { value: 'ap', label: 'Asia Pacific (East)', description: 'Tokyo gateway' },
+          { value: 'au', label: 'Oceania (South)', description: 'Sydney failover partition' }
+        ];
+      }
     }, 100);
   };
@@ -457,7 +506,7 @@ export function initDialogDemo() {
     if (!container) return;
     const longContent = Array(25)
       .fill(
-        '<p style="color: #64748b; font-size: 14px;">This is a paragraph of scrollable content used to demonstrate boundary management within the Zenith Dialog system. Enterprise layouts often require fixed headers and footers while the central content area remains scrollable.</p>',
+        '<p style="color:var(--text-secondary,#64748b); font-size: 14px;">This is a paragraph of scrollable content used to demonstrate boundary management within the Zenith Dialog system. Enterprise layouts often require fixed headers and footers while the central content area remains scrollable.</p>',
       )
       .join('');
     container.innerHTML = `
@@ -469,14 +518,14 @@ export function initDialogDemo() {
                 <ui-button id="btnOpenScrollBody" size="md" variant="outline" color="success" label="Open Scroll Body"></ui-button>
             </div>
-            <ui-dialog-box id="dScrollPaper" scroll-behavior="paper" dialog-title="Terms & Conditions" subtitle="Scroll Behavior: Paper" width="600px" icon="file-text" icon-library="lucide" ok-text="Agree & Continue" cancel-text="Decline">
+            <ui-dialog-box id="dScrollPaper" scroll-area="paper" dialog-title="Terms & Conditions" subtitle="Scroll Behavior: Paper" width="600px" icon="file-text" icon-library="lucide" ok-text="Agree & Continue" cancel-text="Decline">
                 <div style="padding: 24px;">
                    <h4 style="margin-top:0">1. Acceptance of Terms</h4>
                    ${longContent}
                 </div>
             </ui-dialog-box>
-            <ui-dialog-box id="dScrollBody" scroll-behavior="body" dialog-title="Privacy Policy" subtitle="Scroll Behavior: Body" width="600px" icon="shield" icon-library="lucide" ok-text="Acknowledge" cancel-text="Close">
+            <ui-dialog-box id="dScrollBody" scroll-area="body" dialog-title="Privacy Policy" subtitle="Scroll Behavior: Body" width="600px" icon="shield" icon-library="lucide" ok-text="Acknowledge" cancel-text="Close">
                 <div style="padding: 24px;">
                    <h4 style="margin-top:0">1. Data Sovereignty</h4>
                    ${longContent}
@@ -498,8 +547,8 @@ export function initDialogDemo() {
             <h3>Advanced Behaviors</h3>
             <div style="display:flex; gap:10px; flex-wrap:wrap;">
                 <ui-button id="btnOpenStatic" size="md" variant="outline" color="warning" label="Static Backdrop"></ui-button>
-                <ui-button id="btnOpenDraggable" size="md" variant="outline" color="secondary" label="Draggable" style="--btn-bg: #8b5cf6;"></ui-button>
-                <ui-button id="btnOpenResizable" size="md" variant="outline" color="secondary" label="Resizable" style="--btn-bg: #ec4899;"></ui-button>
+                <ui-button id="btnOpenDraggable" size="md" variant="outline" color="secondary" label="Draggable" style="--btn-bg: var(--accent-purple,#8b5cf6);"></ui-button>
+                <ui-button id="btnOpenResizable" size="md" variant="outline" color="secondary" label="Resizable" style="--btn-bg: var(--accent-pink,#ec4899);"></ui-button>
                 <ui-button id="btnOpenCombo" size="md" variant="outline" color="secondary" label="Drag & Resize" style="--btn-bg: #111827;"></ui-button>
             </div>
@@ -542,30 +591,30 @@ export function initDialogDemo() {
         <p style="color: #6b7280; margin-bottom: 20px;">Experience the high-fidelity features designed for professional applications.</p>
         <!-- Feature 1: Async Workflow -->
-        <div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
-           <h4 style="margin-top:0; color: #1e40af;">🔄 Async Validation & Loading</h4>
+        <div style="background:var(--accent-blue-soft,#eff6ff); border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
+           <h4 style="margin-top:0; color:var(--accent-blue,#1e40af);">🔄 Async Validation & Loading</h4>
            <p style="font-size: 14px; color: #10b981;">Simulates a server request with button loading states and data persistence.</p>
            <ui-button id="btnOpenAsync" size="md" variant="outline" color="primary" label="Test Async Workflow" size="md" variant="outline"></ui-button>
         </div>
         <!-- Feature 2: Transitions -->
-        <div style="background: #fdf4ff; border: 1px solid #f0abfc; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
-           <h4 style="margin-top:0; color: #86198f;">✨ Animation Gallery</h4>
-           <p style="font-size: 14px; color: #c026d3;">Smooth entry and exit transitions for different contexts.</p>
+        <div style="background: var(--accent-pink-soft, #fdf4ff); border: 1px solid var(--accent-pink-border, #f0abfc); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
+           <h4 style="margin-top:0; color: var(--accent-pink, #86198f);">✨ Animation Gallery</h4>
+           <p style="font-size: 14px; color: var(--accent-pink, #c026d3);">Smooth entry and exit transitions for different contexts.</p>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-             <ui-button id="btnOpenAnimScale" size="md" variant="outline" color="secondary" label="Scale (Default)" size="md" variant="outline" style="--btn-bg: white; --btn-border: #e879f9; --btn-text: #a21caf;"></ui-button>
-             <ui-button id="btnOpenAnimFade" size="md" variant="outline" color="secondary" label="Fade" size="md" variant="outline" style="--btn-bg: white; --btn-border: #e879f9; --btn-text: #a21caf;"></ui-button>
-             <ui-button id="btnOpenAnimSlideR" size="md" variant="outline" color="secondary" label="Slide Right (Drawer)" size="md" variant="outline" style="--btn-bg: white; --btn-border: #e879f9; --btn-text: #a21caf;"></ui-button>
-             <ui-button id="btnOpenAnimSlideB" size="md" variant="outline" color="secondary" label="Slide Bottom (Sheet)" size="md" variant="outline" style="--btn-bg: white; --btn-border: #e879f9; --btn-text: #a21caf;"></ui-button>
+             <ui-button id="btnOpenAnimScale" size="md" variant="outline" color="secondary" label="Scale (Default)" style="--btn-bg: var(--bg-primary, white); --btn-border: var(--accent-pink, #e879f9); --btn-text: var(--accent-pink, #a21caf);"></ui-button>
+             <ui-button id="btnOpenAnimFade" size="md" variant="outline" color="secondary" label="Fade" style="--btn-bg: var(--bg-primary, white); --btn-border: var(--accent-pink, #e879f9); --btn-text: var(--accent-pink, #a21caf);"></ui-button>
+             <ui-button id="btnOpenAnimSlideR" size="md" variant="outline" color="secondary" label="Slide Right (Drawer)" style="--btn-bg: var(--bg-primary, white); --btn-border: var(--accent-pink, #e879f9); --btn-text: var(--accent-pink, #a21caf);"></ui-button>
+             <ui-button id="btnOpenAnimSlideB" size="md" variant="outline" color="secondary" label="Slide Bottom (Sheet)" style="--btn-bg: var(--bg-primary, white); --btn-border: var(--accent-pink, #e879f9); --btn-text: var(--accent-pink, #a21caf);"></ui-button>
            </div>
         </div>
         <!-- Feature 3: Window Management -->
-        <div style="background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 16px;">
-           <h4 style="margin-top:0; color: #15803d;">🪟 Persistent Window Widget</h4>
+        <div style="background:var(--accent-green-soft,#f0fdf4); border: 1px solid #86efac; border-radius: 8px; padding: 16px;">
+           <h4 style="margin-top:0; color:var(--accent-green,#15803d);">🪟 Persistent Window Widget</h4>
            <p style="font-size: 14px; color: #16a34a;">Draggable, Resizable, Non-Modal, and Persistent state (Keep Mounted).</p>
            <ui-button id="btnOpenWidget" size="md" variant="outline" color="success" label="Open Main Widget" size="md" variant="outline"></ui-button>
-           <ui-button id="btnSpawnWidget" size="md" variant="outline" color="success" label="Spawn New Note (+)" size="md" variant="outline" style="margin-left: 10px; --btn-bg: #15803d;"></ui-button>
+           <ui-button id="btnSpawnWidget" size="md" variant="outline" color="success" label="Spawn New Note (+)" size="md" variant="outline" style="margin-left: 10px; --btn-bg: var(--accent-green,#15803d);"></ui-button>
         </div>
         <!-- Dialogs -->
@@ -581,7 +630,7 @@ export function initDialogDemo() {
                  <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: #374151;">Email</label>
                  <ui-input type="email" id="profEmail" value="john@company.com"></ui-input>
               </div>
-              <div style="font-size: 13px; color: #6b7280; background: #f9fafb; padding: 8px; border-radius: 4px; display: flex; align-items: center; gap: 8px;">
+              <div style="font-size: 13px; color: #6b7280; background:var(--bg-secondary,#f9fafb); padding: 8px; border-radius: 4px; display: flex; align-items: center; gap: 8px;">
                  <ui-icon name="info" library="lucide" size="14px"></ui-icon>
                  <span><b>Try this:</b> modify values, click Save to see loading, then open again. Values persist!</span>
               </div>
@@ -659,7 +708,7 @@ export function initDialogDemo() {
   };
   // Dynamic Widget Spawner
-  window.spawnWidget = function () {
+  window.spawnWidget = async function () {
     const id = 'note-' + Date.now();
     const dialog = document.createElement('ui-dialog-box');
     dialog.id = id;
@@ -696,7 +745,7 @@ export function initDialogDemo() {
     dialog.innerHTML = `
            <div style="height: 100%; display: flex; flex-direction: column;">
               <ui-input variant="plain" multiline="true" placeholder="New note..."
-                style="flex: 1; width: 100%; height: 100%; padding: 4px; font-family: sans-serif; --ui-input-bg: #fffbeb;"></ui-input>
+                style="flex: 1; width: 100%; height: 100%; padding: 4px; font-family: sans-serif; --ui-input-bg: var(--accent-yellow-soft,#fffbeb);"></ui-input>
            </div>
         `;
@@ -714,7 +763,10 @@ export function initDialogDemo() {
     // Basic menu event might still fire, but we use menuAction for built-in items
     document.body.appendChild(dialog);
-    setTimeout(() => dialog.show(), 50);
+    if (typeof dialog.show !== 'function') {
+      await customElements.whenDefined('ui-dialog-box');
+    }
+    dialog.show();
   };
   // --- Parent/Child Dialog Size Demo ---
@@ -749,7 +801,7 @@ export function initDialogDemo() {
                 <span>Child Dialog Height:</span>
                 <ui-input id="childHeightInput" value="300px" style="width: 100px;"></ui-input>
               </label>
-              <ui-button id="openChildDialogBtn" size="md" variant="outline" color="primary" label="Open Child Dialog" size="md" variant="outline" style="--btn-bg: #6366f1;"></ui-button>
+              <ui-button id="openChildDialogBtn" size="md" variant="outline" color="primary" label="Open Child Dialog" size="md" variant="outline" style="--btn-bg: var(--accent-indigo,#6366f1);"></ui-button>
             </div>
           `;
           document.body.appendChild(parentDialog);
@@ -776,12 +828,12 @@ export function initDialogDemo() {
                 childDialog.setAttribute('animation', 'scale');
                 childDialog.innerHTML = `
-                  <div style="padding: 20px; font-family: sans-serif; background: #f0fdf4; height: 100%; border-radius: 0 0 8px 8px;">
-                    <p style="margin: 0 0 16px; color: #166534; font-weight: 500;">This is the child dialog, running inside the parent's context.</p>
-                    <div style="background: white; padding: 12px; border-radius: 6px; border: 1px solid #bbf7d0;">
+                  <div style="padding: 20px; font-family: sans-serif; background:var(--accent-green-soft,#f0fdf4); height: 100%; border-radius: 0 0 8px 8px;">
+                    <p style="margin: 0 0 16px; color: var(--accent-green,#166534); font-weight: 500;">This is the child dialog, running inside the parent's context.</p>
+                    <div style="background:var(--bg-primary,white); padding: 12px; border-radius: 6px; border: 1px solid #bbf7d0;">
                        <div style="font-size: 13px; color: #6b7280; margin-bottom: 4px;">Configured Dimensions:</div>
-                       <div style="font-family: monospace; font-weight: bold; color: #059669;">Width: ${width}</div>
-                       <div style="font-family: monospace; font-weight: bold; color: #059669;">Height: ${height}</div>
+                       <div style="font-family: monospace; font-weight: bold; color:var(--accent-green,#059669);">Width: ${width}</div>
+                       <div style="font-family: monospace; font-weight: bold; color:var(--accent-green,#059669);">Height: ${height}</div>
                     </div>
                     <p style="font-size: 12px; color: #666; margin-top: 20px;">
                       Typically, nested dialogs should be smaller than their parents to maintain visual hierarchy.
@@ -816,11 +868,11 @@ export function initDialogDemo() {
     dialog.innerHTML = `
       <div style="padding: 10px 0;">
         <p>Your session is about to expire due to inactivity. For your security, we will automatically log you out once the timer reaches zero.</p>
-        <div style="background: #fffbeb; border: 1px solid #fde68a; padding: 12px; border-radius: 6px; display: flex; align-items: flex-start; gap: 10px;">
+        <div style="background:var(--accent-yellow-soft,#fffbeb); border: 1px solid #fde68a; padding: 12px; border-radius: 6px; display: flex; align-items: flex-start; gap: 10px;">
            <span style="font-size: 20px;">⚠️</span>
            <div>
-              <div style="font-weight: 600; color: #92400e;">Unsaved data may be lost</div>
-              <div style="font-size: 13px; color: #b45309;">Please click 'Stay Logged In' to extend your session validity.</div>
+              <div style="font-weight: 600; color:var(--accent-yellow,#92400e);">Unsaved data may be lost</div>
+              <div style="font-size: 13px; color:var(--accent-yellow,#b45309);">Please click 'Stay Logged In' to extend your session validity.</div>
            </div>
         </div>
       </div>
@@ -853,7 +905,7 @@ export function initDialogDemo() {
                 <p><strong>Stack Level: ${level}</strong></p>
                 <p>This dialog should appear above Level ${level - 1}.</p>
                 <div style="display: flex; gap: 10px; margin-top: 15px;">
-                    <ui-button class="btn-next-level" size="md" variant="outline" color="secondary" label="Open Level ${level + 1} ➕" style="flex: 1; --btn-bg: #ec4899;"></ui-button>
+                    <ui-button class="btn-next-level" size="md" variant="outline" color="secondary" label="Open Level ${level + 1} ➕" style="flex: 1; --btn-bg: var(--accent-pink,#ec4899);"></ui-button>
                     <ui-button class="btn-close-dialog" size="md" variant="outline" color="secondary" label="Close" style="--btn-bg: #6b7280;"></ui-button>
                 </div>
             </div>
@@ -881,16 +933,16 @@ export function initDialogDemo() {
     if (!container) return;
     container.innerHTML = `
-      <div class="demo-block">
-        <h3 style="margin-bottom: 24px; font-weight: 800; letter-spacing: -0.02em;">🎮 Custom Dialog Builder</h3>
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 20px; padding: 28px; border:1px solid var(--border-default,#e2e8f0);">
+        <h3 style="margin-bottom: 24px; font-weight: 800; letter-spacing: -0.02em; color:var(--text-primary,#1e293b);">🎮 Custom Dialog Builder</h3>
-        <div style="background: white; border: 1px solid #eef2f6; border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); margin-bottom: 30px;">
+        <div style="background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e2e8f0); border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); margin-bottom: 30px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; align-items: flex-end;">
             <!-- Basic Controls -->
             <div class="control-group">
               <label style="display: flex; flex-direction: column; gap: 8px;">
-                <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em;">Window Size</span>
+                <span style="font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.1em;">Window Size</span>
                 <ui-dropdown id="iDSize" value="sm" full-width="true" options='[
                   {"label": "Custom", "value": "custom"},
                   {"label": "XXXS (160px)", "value": "xxxs"},
@@ -909,7 +961,7 @@ export function initDialogDemo() {
             <div class="control-group">
               <label style="display: flex; flex-direction: column; gap: 8px;">
-                <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em;">Aesthetic Variant</span>
+                <span style="font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.1em;">Aesthetic Variant</span>
                 <ui-dropdown id="iDVariant" value="soft" full-width="true" options='[
                    {"label": "Soft (Modern)", "value": "soft"},
                    {"label": "Outline (Clean)", "value": "outline"},
@@ -921,7 +973,7 @@ export function initDialogDemo() {
             <div class="control-group">
               <label style="display: flex; flex-direction: column; gap: 8px;">
-                <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em;">Semantic Status</span>
+                <span style="font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.1em;">Semantic Status</span>
                 <ui-dropdown id="iDStatus" value="default" full-width="true" options='[
                   {"label": "Default", "value": "default"},
                   {"label": "Info Blue", "value": "info"},
@@ -934,13 +986,13 @@ export function initDialogDemo() {
             <div class="control-group">
               <label style="display: flex; flex-direction: column; gap: 8px;">
-                <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em;">Background Accent</span>
+                <span style="font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.1em;">Background Accent</span>
                 <ui-color-picker id="iDBgColor" value="#ffffff"></ui-color-picker>
               </label>
             </div>
             <!-- Settings Toggles -->
-            <div class="control-group" style="grid-column: 1 / -1; display: flex; flex-direction:row; flex-wrap: wrap; gap: 20px; padding: 20px; background: #f8fafc; border-radius: 12px; margin-top: 10px;">
+            <div class="control-group" style="grid-column: 1 / -1; display: flex; flex-direction:row; flex-wrap: wrap; gap: 20px; padding: 20px; background:var(--bg-tertiary,#f1f5f9); border-radius: 12px; margin-top: 10px; border:1px solid var(--border-subtle,#f1f5f9);">
               <ui-checkbox id="iDDraggable" label="Draggable" checked></ui-checkbox>
               <ui-checkbox id="iDResizable" label="Resizable"></ui-checkbox>
               <ui-checkbox id="iDShowHeader" label="Header" checked></ui-checkbox>
@@ -961,18 +1013,18 @@ export function initDialogDemo() {
         <div style="margin-top: 20px; background: #0f172a; padding: 20px; border-radius: 12px; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
-            <span style="color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em;">Generated Implementation</span>
+            <span style="color:var(--text-secondary,#64748b); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em;">Generated Implementation</span>
             <ui-button id="btnCopyDialogCode" variant="outline" color="primary" label="Copy Code" size="md" style="--btn-text: #38bdf8;"></ui-button>
           </div>
-          <code id="dialogCodeBlock" style="color: #94a3b8; font-family: 'JetBrains Mono', monospace; font-size: 12px; display: block; overflow-x: auto; white-space: pre-wrap; line-height: 1.6;"></code>
+          <code id="dialogCodeBlock" style="color:var(--text-secondary,#64748b); font-family: 'JetBrains Mono', monospace; font-size: 12px; display: block; overflow-x: auto; white-space: pre-wrap; line-height: 1.6;"></code>
         </div>
-        <div id="eventLog" style="margin-top: 20px; padding: 16px; background: #ffffff; border-radius: 12px; border: 1px solid #eef2f6;">
+        <div id="eventLog" style="margin-top: 20px; padding: 16px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
           <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
             <div style="width: 8px; height: 8px; border-radius: 50%; background: #22c55e;"></div>
-            <h4 style="margin: 0; font-size: 12px; font-weight: 800; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em;">Live Event Stream</h4>
+            <h4 style="margin: 0; font-size: 12px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Live Event Stream</h4>
           </div>
-          <div id="eventLogContent" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #64748b; max-height: 120px; overflow-y: auto;">
+          <div id="eventLogContent" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color:var(--text-secondary,#64748b); max-height: 120px; overflow-y: auto;">
             <div style="opacity: 0.5;">Awaiting interactions...</div>
           </div>
         </div>
@@ -1214,7 +1266,7 @@ export function initDialogDemo() {
           <div style="padding: 20px;">
              <h3>Try Edge Snapping! 🧲</h3>
              <p>Drag this dialog to the <b>Top, Left, or Right</b> edges of your screen.</p>
-             <div style="background: #fffbeb; border: 1px solid #fde68a; padding: 12px; border-radius: 8px; font-size: 13px; color: #92400e;">
+             <div style="background:var(--accent-yellow-soft,#fffbeb); border: 1px solid #fde68a; padding: 12px; border-radius: 8px; font-size: 13px; color:var(--accent-yellow,#92400e);">
                 A blue highlight bar will appear to show where the window will snap.
              </div>
           </div>
@@ -1282,7 +1334,7 @@ export function initDialogDemo() {
           width="450px"
           icon-library="lucide">
           <div style="padding: 30px; text-align: center;">
-             <ui-icon name="eye-off" library="lucide" size="48px" style="color: #7c3aed; margin-bottom: 20px;"></ui-icon>
+             <ui-icon name="eye-off" library="lucide" size="48px" style="color:var(--accent-purple,#7c3aed); margin-bottom: 20px;"></ui-icon>
              <h3>Immersion at 100%</h3>
              <p>Notice how everything else on the screen is <b>blurred and grayed out</b>. This ensures zero distractions until the task is complete.</p>
           </div>
@@ -1322,24 +1374,24 @@ export function initDialogDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>⚡ Sovereign Tier: Operating System Simulation</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">The absolute zenith of component engineering. Truly multi-window orchestration with dock, detached pop-outs, and intelligent guards.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">The absolute zenith of component engineering. Truly multi-window orchestration with dock, detached pop-outs, and intelligent guards.</p>
         <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;">
-           <ui-button id="btnSpawnTerminal" size="md" variant="outline" color="secondary" label="📟 Spawn Terminal" style="--btn-bg: #111827;"></ui-button>
+           <ui-button id="btnSpawnTerminal" size="md" variant="outline" color="secondary" label="📟 Spawn Terminal" style="--btn-bg: var(--bg-secondary, #111827);"></ui-button>
            <ui-button id="btnSpawnEditor" size="md" variant="outline" color="success" label="📝 Spawn Editor (Dirty)"></ui-button>
            <ui-button id="btnSpawnMonitor" size="md" variant="outline" color="success" label="📈 Spawn Monitor (Skeleton)"></ui-button>
         </div>
-        <div style="background: #f3f4f6; padding: 20px; border-radius: 12px; border: 1px solid #ddd;">
-           <h4 style="margin-top: 0;">Window Orchestration</h4>
+        <div style="background: var(--bg-secondary, rgba(255,255,255,0.03)); padding: 20px; border-radius: 12px; border: 1px solid var(--border-default, rgba(255,255,255,0.08)); backdrop-filter: blur(8px);">
+           <h4 style="margin-top: 0; color: var(--text-primary, #ffffff);">Window Orchestration</h4>
            <div style="display: flex; gap: 10px;">
-              <ui-button id="btnCascadeWindows" size="md" variant="outline" color="secondary" label="Cascade Windows" style="--btn-bg: white;"></ui-button>
-              <ui-button id="btnTileWindows" size="md" variant="outline" color="secondary" label="Tile Windows" style="--btn-bg: white;"></ui-button>
+              <ui-button id="btnCascadeWindows" size="md" variant="outline" color="secondary" label="Cascade Windows" style="--btn-bg: transparent;"></ui-button>
+              <ui-button id="btnTileWindows" size="md" variant="outline" color="secondary" label="Tile Windows" style="--btn-bg: transparent;"></ui-button>
            </div>
-           <p style="font-size: 12px; color: #666; margin-top: 10px;">Try spawning multiple windows then tiling them!</p>
+           <p style="font-size: 12px; color: var(--text-muted, #94a3b8); margin-top: 10px;">Try spawning multiple windows then tiling them!</p>
         </div>
-        <p style="margin-top: 20px; font-size: 14px; font-style: italic; color: #444;">
+        <p style="margin-top: 20px; font-size: 14px; font-style: italic; color: var(--text-secondary, #64748b);">
            <b>Key Features:</b><br>
            - Minimize to Dock (bottom taskbar)<br>
            - Pop-out to real Browser Window<br>
@@ -1353,11 +1405,44 @@ export function initDialogDemo() {
       document.getElementById('btnSpawnTerminal')?.addEventListener('click', () => window.spawnSovWindow('Terminal'));
       document.getElementById('btnSpawnEditor')?.addEventListener('click', () => window.spawnSovWindow('Editor'));
       document.getElementById('btnSpawnMonitor')?.addEventListener('click', () => window.spawnSovWindow('Monitor'));
-      document.getElementById('btnCascadeWindows')?.addEventListener('click', () => document.querySelector('ui-dialog-box').constructor.cascade());
-      document.getElementById('btnTileWindows')?.addEventListener('click', () => document.querySelector('ui-dialog-box').constructor.tile());
+      document.getElementById('btnCascadeWindows')?.addEventListener('click', () => {
+        const wins = Array.from(document.querySelectorAll('ui-dialog-box')).filter(w => w.open && !w.minimized);
+        wins.forEach((win, i) => {
+          const panel = win.shadowRoot?.querySelector('.ui-dialog-box');
+          if (panel) {
+            panel.style.left = `${50 + (i * 30)}px`;
+            panel.style.top = `${50 + (i * 30)}px`;
+            panel.style.margin = '0';
+            panel.style.position = 'fixed';
+          }
+        });
+      });
+      document.getElementById('btnTileWindows')?.addEventListener('click', () => {
+        const wins = Array.from(document.querySelectorAll('ui-dialog-box')).filter(w => w.open && !w.minimized);
+        if (wins.length === 0) return;
+        const cols = Math.ceil(Math.sqrt(wins.length));
+        const rows = Math.ceil(wins.length / cols);
+        const winW = window.innerWidth / cols;
+        const winH = window.innerHeight / rows;
+        wins.forEach((win, i) => {
+          const r = Math.floor(i / cols);
+          const c = i % cols;
+          const panel = win.shadowRoot?.querySelector('.ui-dialog-box');
+          if (panel) {
+            panel.style.left = `${c * winW}px`;
+            panel.style.top = `${r * winH}px`;
+            panel.style.width = `${winW}px`;
+            panel.style.height = `${winH}px`;
+            panel.style.margin = '0';
+            panel.style.position = 'fixed';
+          }
+        });
+      });
     }, 100);
-    window.spawnSovWindow = type => {
+    window.spawnSovWindow = async type => {
       const id = 'sov-' + type.toLowerCase() + '-' + Math.round(Math.random() * 1000);
       const d = document.createElement('ui-dialog-box');
       d.id = id;
@@ -1397,7 +1482,10 @@ export function initDialogDemo() {
       }
       document.body.appendChild(d);
-      setTimeout(() => d.show(), 50);
+      if (typeof d.show !== 'function') {
+        await customElements.whenDefined('ui-dialog-box');
+      }
+      d.show();
     };
   };
@@ -1429,6 +1517,9 @@ export function initDialogDemo() {
     `;
     try {
+      if (typeof d.showWithResult !== 'function') {
+        await customElements.whenDefined('ui-dialog-box');
+      }
       const result = await d.showWithResult();
       if (!result.canceled && result.data) {
         alert('🎉 Selection Success: ' + JSON.stringify(result.data));
@@ -1452,8 +1543,8 @@ export function initDialogDemo() {
         <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;">
            <ui-button onclick="openDialog('dBranded')" size="md" variant="outline" color="secondary" label="🖼️ Branded with Image" style="--btn-bg: #111827;"></ui-button>
-           <ui-button onclick="openDialog('dStealth')" size="md" variant="outline" color="primary" label="🕵️ Stealth (No Controls)" style="--btn-bg: #6366f1;"></ui-button>
-           <ui-button onclick="openDialog('dFullHeader')" size="md" variant="outline" color="secondary" label="🧩 Full Slot Replacement" style="--btn-bg: #ec4899;"></ui-button>
+           <ui-button onclick="openDialog('dStealth')" size="md" variant="outline" color="primary" label="🕵️ Stealth (No Controls)" style="--btn-bg: var(--accent-indigo,#6366f1);"></ui-button>
+           <ui-button onclick="openDialog('dFullHeader')" size="md" variant="outline" color="secondary" label="🧩 Full Slot Replacement" style="--btn-bg: var(--accent-pink,#ec4899);"></ui-button>
         </div>
         <!-- Branded -->
@@ -1532,11 +1623,11 @@ export function initDialogDemo() {
         <h3>⚖️ Terms and Agreement Mode</h3>
         <p style="color: #6b7280; margin-bottom: 20px;">The <code>type="terms"</code> preset automatically configures the title, Accept/Decline labels, and enforces a scrollable 'paper' layout.</p>
-        <ui-button onclick="openDialog('dTerms')" size="md" variant="outline" color="success" label="View License Agreement" style="--btn-bg: #059669;"></ui-button>
+        <ui-button onclick="openDialog('dTerms')" size="md" variant="outline" color="success" label="View License Agreement" style="--btn-bg: var(--accent-green,#059669);"></ui-button>
         <ui-dialog-box id="dTerms" type="terms" icon-library="lucide">
            <div slot="header-icon">
-              <ui-icon name="scroll" library="lucide" size="24px" style="color: #059669;"></ui-icon>
+              <ui-icon name="scroll" library="lucide" size="24px" style="color:var(--accent-green,#059669);"></ui-icon>
            </div>
            <div style="line-height: 1.6; color: #374151;">
               <h3>1. Terms of Use</h3>
@@ -1554,21 +1645,30 @@ export function initDialogDemo() {
               <h3>5. Governing Law</h3>
               <p>These terms and conditions are governed by and construed in accordance with the laws of the jurisdiction and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
-              <div style="margin-top: 20px; padding: 12px; background: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0;">
+              <div style="margin-top: 20px; padding: 12px; background:var(--accent-green-soft,#f0fdf4); border-radius: 8px; border: 1px solid #bbf7d0;">
                  <ui-checkbox id="agreeCheckbox" label="I have read and agree to the terms listed above."></ui-checkbox>
               </div>
            </div>
         </ui-dialog-box>
       </div>
     `;
     setTimeout(() => {
       const d = document.getElementById('dTerms');
       const agree = document.getElementById('agreeCheckbox');
       if (d && agree) {
-        if (!d.okDisabled) d.okDisabled = true; // Set initial state
+        if (typeof d.setOkDisabled === 'function') {
+          d.setOkDisabled(true);
+        } else {
+          d.okDisabled = true;
+        }
         agree.addEventListener('checkboxChange', e => {
-          d.okDisabled = !e.detail.checked;
+          if (typeof d.setOkDisabled === 'function') {
+            d.setOkDisabled(!e.detail.checked);
+          } else {
+            d.okDisabled = !e.detail.checked;
+          }
         });
         d.addEventListener('ok', () => alert('Terms Accepted!'));
       }
@@ -1584,25 +1684,25 @@ export function initDialogDemo() {
         <p style="color: #6b7280; margin-bottom: 20px;">Features that differentiate standard modals from professional windowing systems.</p>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
-          <div style="padding: 24px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;">
+          <div style="padding: 24px; background:var(--bg-secondary,#f9fafb); border-radius: 12px; border:1px solid var(--border-default,#e5e7eb);">
              <ui-icon name="pin" library="lucide" size="32px" style="color: #10b981; margin-bottom: 12px;"></ui-icon>
              <h4>Persistent Layout</h4>
              <p style="font-size: 14px; color: #6b7280; margin-bottom: 16px;">Moves and resizes are remembered across page reloads using <code>remember="true"</code>.</p>
              <ui-button onclick="openDialog('dPersistent')" size="md" variant="outline" color="success" label="Open Sticky Window" style="width: 100%;"></ui-button>
           </div>
-          <div style="padding: 24px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;">
-             <ui-icon name="smartphone" library="lucide" size="32px" style="color: #8b5cf6; margin-bottom: 12px;"></ui-icon>
+          <div style="padding: 24px; background:var(--bg-secondary,#f9fafb); border-radius: 12px; border:1px solid var(--border-default,#e5e7eb);">
+             <ui-icon name="smartphone" library="lucide" size="32px" style="color:var(--accent-purple,#8b5cf6); margin-bottom: 12px;"></ui-icon>
              <h4>Touch Gestures</h4>
              <p style="font-size: 14px; color: #6b7280; margin-bottom: 16px;">Enables <code>swipe-to-close</code> on mobile. Try swiping left or right to dismiss on touch devices.</p>
-             <ui-button onclick="openDialog('dSwipe')" size="md" variant="outline" color="secondary" label="Open Gesture Window" style="width: 100%; --btn-bg: #8b5cf6;"></ui-button>
+             <ui-button onclick="openDialog('dSwipe')" size="md" variant="outline" color="secondary" label="Open Gesture Window" style="width: 100%; --btn-bg: var(--accent-purple,#8b5cf6);"></ui-button>
           </div>
         </div>
         <ui-dialog-box id="dPersistent" dialog-title="I Remember You" ok-text="Save Position" cancel-text="Close" remember="true" resizable="true" is-draggable="true" icon-library="lucide">
            <div style="padding: 24px; text-align: center;">
               <p>Move me to the corner, resize me, or maximize me. Then <b>refresh the page</b>.</p>
-              <div style="margin-top: 10px; font-weight: bold; color: #059669;">✨ Your layout will be restored automatically.</div>
+              <div style="margin-top: 10px; font-weight: bold; color:var(--accent-green,#059669);">✨ Your layout will be restored automatically.</div>
            </div>
         </ui-dialog-box>
@@ -1677,7 +1777,7 @@ export function initDialogDemo() {
       if (p === 100) {
         clearInterval(interval);
-        if (status) status.innerHTML = '✨ <span style="color: #059669;">Update Complete!</span>';
+        if (status) status.innerHTML = '✨ <span style="color:var(--accent-green,#059669);">Update Complete!</span>';
         d.okDisabled = false;
       }
     }, 600);
@@ -1689,22 +1789,22 @@ export function initDialogDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>💎 Header Mastery Showcase</h3>
-        <p style="color: #64748b; margin-bottom: 24px;">The <code>ui-dialog-header</code> is fully extensible. Use slots for branding, multi-action toolbars, and status-driven visuals.</p>
+        <p style="color:var(--text-secondary,#64748b); margin-bottom: 24px;">The <code>ui-dialog-header</code> is fully extensible. Use slots for branding, multi-action toolbars, and status-driven visuals.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px;">
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px;">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 16px;">
             <h4 style="margin: 0;">🏷️ Branded Slot Header</h4>
-            <p style="font-size: 13px; color: #64748b;">Override the entire header content with a custom slot for deep branding.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b);">Override the entire header content with a custom slot for deep branding.</p>
             <ui-button onclick="openDialog('dBrandedHeader')" size="md" variant="outline" color="success" label="Open Branded Dialog" style="margin-top:auto;"></ui-button>
           </div>
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px;">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 16px;">
             <h4 style="margin: 0;">🛠️ Multi-Action Toolbar</h4>
-            <p style="font-size: 13px; color: #64748b;">Inject additional action buttons into the header via <code>slot="header-actions"</code>.</p>
-            <ui-button onclick="openDialog('dMultiAction')" size="md" variant="outline" color="secondary" label="Open Multi-Action Dialog" style="margin-top:auto; --btn-bg: #8b5cf6;"></ui-button>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b);">Inject additional action buttons into the header via <code>slot="header-actions"</code>.</p>
+            <ui-button onclick="openDialog('dMultiAction')" size="md" variant="outline" color="secondary" label="Open Multi-Action Dialog" style="margin-top:auto; --btn-bg: var(--accent-purple,#8b5cf6);"></ui-button>
           </div>
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px;">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 16px;">
             <h4 style="margin: 0;">🎨 Status Elevation</h4>
-            <p style="font-size: 13px; color: #64748b;">Headers that react to the <code>status</code> prop for high-urgency notifications.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b);">Headers that react to the <code>status</code> prop for high-urgency notifications.</p>
             <div style="display: flex; gap: 8px;">
                <ui-button onclick="openDialog('dStatusSuccess')" size="md" variant="outline" color="success" label="Success"style="flex:1;"></ui-button>
                <ui-button onclick="openDialog('dStatusError')" size="md" variant="outline" color="danger" label="Error"style="flex:1;"></ui-button>
@@ -1714,9 +1814,9 @@ export function initDialogDemo() {
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; margin-top: 24px;">
           <!-- Case 4: Avatar Header -->
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px;">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 16px;">
             <h4 style="margin: 0;">👤 Profile/Avatar Headers</h4>
-            <p style="font-size: 13px; color: #64748b;">Direct support for user avatars and custom icons without manual slots.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b);">Direct support for user avatars and custom icons without manual slots.</p>
             <ui-button onclick="openDialog('dAvatarHeader')" size="md" variant="outline" color="success" label="Open Profile Dialog" style="margin-top:auto;"></ui-button>
           </div>
         </div>
@@ -1726,14 +1826,14 @@ export function initDialogDemo() {
              <div style="background: linear-gradient(135deg, #10b981, #10b981); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;">D</div>
              <div style="flex: 1;">
                 <h3 style="margin: 0; font-size: 16px; font-weight: 700;">Design System v3</h3>
-                <span style="font-size: 11px; color: #64748b; font-weight: 500;">DREAMUI_CONSOLE_PRO_692</span>
+                <span style="font-size: 11px; color:var(--text-secondary,#64748b); font-weight: 500;">DREAMUI_CONSOLE_PRO_692</span>
              </div>
-             <div style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 12px; font-size: 10px; font-weight: bold; text-transform: uppercase;">Verified</div>
+             <div style="padding: 4px 8px; background:var(--accent-green-soft,#dcfce7); color: var(--accent-green,#166534); border-radius: 12px; font-size: 10px; font-weight: bold; text-transform: uppercase;">Verified</div>
           </div>
           <div style="padding: 20px;"><p>This header is completely custom using <code>slot="header"</code>.</p></div>
         </ui-dialog-box>
-        <ui-dialog-box id="dAvatarHeader" dialog-title="John Doe" subtitle="Lead Systems Architect" avatar="https://i.pravatar.cc/150?img=68" ok-text="View Profile" cancel-text="Close">
+        <ui-dialog-box id="dAvatarHeader" dialog-title="John Doe" subtitle="Lead Systems Architect" avatar="/build/assets/images/logo.png" ok-text="View Profile" cancel-text="Close">
            <div style="padding: 20px;">
               <p>This dialog uses the new <code>avatar</code> prop on the header. It handles sizing, border-radius, and alignment automatically.</p>
            </div>
@@ -1776,11 +1876,11 @@ export function initDialogDemo() {
         <!-- ① Smooth Drag (no jump on click) -->
         <div>
           <h3 style="margin:0 0 6px;">🖱 Smooth Drag — No Jump on Click</h3>
-          <p style="font-size:13px;color:#64748b;margin:0 0 12px;">
+          <p style="font-size:13px;color:var(--text-secondary,#64748b);margin:0 0 12px;">
             Draggable dialogs now anchor position on first move (>5 px threshold), so clicking the header
             no longer snaps the dialog to the cursor.
           </p>
-            <ui-button onclick="openDialog('wfDragDialog')" size="md" variant="outline" color="primary" label="Open Draggable Dialog" style="--btn-bg: #0ea5e9;"></ui-button>
+            <ui-button onclick="openDialog('wfDragDialog')" size="md" variant="outline" color="primary" label="Open Draggable Dialog" style="--btn-bg: var(--accent-cyan,#0ea5e9);"></ui-button>
           <ui-dialog-box id="wfDragDialog" is-draggable="true" snap-to-edges="true" show-minimize="true" show-maximize="true"
           ok-text="Accept" cancel-text="Dismiss"
           icon-library="lucide" dialog-title="Desktop Experience">
@@ -1794,16 +1894,16 @@ export function initDialogDemo() {
         <!-- ② Nested z-index auto-stacking -->
         <div>
           <h3 style="margin:0 0 6px;">🗂 Auto Z-Index Stacking</h3>
-          <p style="font-size:13px;color:#64748b;margin:0 0 12px;">
+          <p style="font-size:13px;color:var(--text-secondary,#64748b);margin:0 0 12px;">
             Every newly opened dialog automatically rises above all existing open dialogs — no manual
             z-index required.
           </p>
-          <ui-button onclick="openDialog('wfParentDialog')" size="md" variant="outline" color="primary" label="Open Parent Dialog" style="--btn-bg: #6366f1;"></ui-button>
+          <ui-button onclick="openDialog('wfParentDialog')" size="md" variant="outline" color="primary" label="Open Parent Dialog" style="--btn-bg: var(--accent-indigo,#6366f1);"></ui-button>
           <ui-dialog-box id="wfParentDialog" is-draggable="true" ok-text="Understood" cancel-text="Close" icon-library="lucide" dialog-title="Parent Dialog">
             <div style="padding:8px 0;font-size:14px;color:#475569;">
               I am the parent. Click the button below to open a child dialog on top of me.
               <br><br>
-              <ui-button onclick="openDialog('wfChildDialog')" size="md" variant="outline" color="secondary" label="Open Child Dialog (should be on top)" style="--btn-bg: #8b5cf6;"></ui-button>
+              <ui-button onclick="openDialog('wfChildDialog')" size="md" variant="outline" color="secondary" label="Open Child Dialog (should be on top)" style="--btn-bg: var(--accent-purple,#8b5cf6);"></ui-button>
             </div>
           </ui-dialog-box>
           <ui-dialog-box id="wfChildDialog" is-draggable="true" ok-text="Accept" cancel-text="Close" icon-library="lucide" dialog-title="Child Dialog (auto z-index)">
@@ -1816,18 +1916,18 @@ export function initDialogDemo() {
         <!-- NEW: Programmatic Control Demo -->
         <div>
           <h3 style="margin:0 0 6px;">⚡ Programmatic API Control</h3>
-          <p style="font-size:13px;color:#64748b;margin:0 0 12px;">
+          <p style="font-size:13px;color:var(--text-secondary,#64748b);margin:0 0 12px;">
             Trigger window states directly from your app logic using <code>.minimize()</code> and <code>.maximize()</code>.
           </p>
           <div style="display:flex; gap:10px;">
             <ui-button onclick="openDialog('wfApiDialog')" size="md" variant="outline" color="secondary" label="1. Open Dialog" style="--btn-bg: #111827;"></ui-button>
-            <ui-button onclick="document.getElementById('wfApiDialog').minimize()" size="md" variant="outline" color="secondary" label="2. Call .minimize()" style="--btn-bg: #6d28d9;"></ui-button>
-             <ui-button onclick="document.getElementById('wfApiDialog').maximize()" size="md" variant="outline" color="secondary" label="3. Call .maximize()" style="--btn-bg: #4338ca;"></ui-button>
+            <ui-button onclick="document.getElementById('wfApiDialog').minimize()" size="md" variant="outline" color="secondary" label="2. Call .minimize()" style="--btn-bg: var(--accent-purple,#6d28d9);"></ui-button>
+             <ui-button onclick="document.getElementById('wfApiDialog').maximize()" size="md" variant="outline" color="secondary" label="3. Call .maximize()" style="--btn-bg: var(--accent-indigo,#4338ca);"></ui-button>
           </div>
           <ui-dialog-box id="wfApiDialog" is-draggable="true" ok-text="OK" cancel-text="Dismiss" icon-library="lucide" dialog-title="API Controlled Window" show-minimize="true">
             <div style="padding:20px; text-align:center;">
-              <p style="font-size:15px; font-weight:600; color:#1e293b;">I am controlled by external code!</p>
-              <p style="font-size:13px; color:#64748b;">The buttons outside this dialog are calling my internal methods directly.</p>
+              <p style="font-size:15px; font-weight:600; color:var(--text-primary,#1e293b);">I am controlled by external code!</p>
+              <p style="font-size:13px; color:var(--text-secondary,#64748b);">The buttons outside this dialog are calling my internal methods directly.</p>
             </div>
           </ui-dialog-box>
         </div>
@@ -1835,7 +1935,7 @@ export function initDialogDemo() {
         <!-- ③ Return value auto-form-collection -->
         <div>
           <h3 style="margin:0 0 6px;">📋 Return Value — Auto Form Collection</h3>
-          <p style="font-size:13px;color:#64748b;margin:0 0 12px;">
+          <p style="font-size:13px;color:var(--text-secondary,#64748b);margin:0 0 12px;">
             <code>showWithResult()</code> auto-collects all named inputs (including selects).
           </p>
           <ui-button id="wfReturnBtn" onclick="wfOpenReturnDialog()" size="md" variant="outline" color="success" label="Open Form Dialog"></ui-button>
@@ -1858,14 +1958,14 @@ export function initDialogDemo() {
         <!-- ④ Action Menu (menuItems + menuIcon + menuTitle) -->
         <div>
           <h3 style="margin:0 0 6px;">⚙ Action Menu — menuItems + menuIcon + menuTitle</h3>
-          <p style="font-size:13px;color:#64748b;margin:0 0 12px;">
+          <p style="font-size:13px;color:var(--text-secondary,#64748b);margin:0 0 12px;">
             Set <code>menu-items</code> JSON on a dialog to auto-show a header menu button.
             Customise the icon with <code>menu-icon</code> and tooltip with <code>menu-title</code>.
           </p>
           <div style="display:flex;gap:10px;flex-wrap:wrap;">
-            <ui-button onclick="openDialog('wfMenuDialog1')" size="md" variant="outline" color="secondary" label="Default Menu (⋯)" style="--btn-bg: #f59e0b;"></ui-button>
-            <ui-button onclick="openDialog('wfMenuDialog2')" size="md" variant="outline" color="secondary" label="Settings Menu (⚙)" style="--btn-bg: #ef4444;"></ui-button>
-            <ui-button onclick="openDialog('wfMenuDialog3')" size="md" variant="outline" color="secondary" label="Filter Menu (sliders)" style="--btn-bg: #8b5cf6;"></ui-button>
+            <ui-button onclick="openDialog('wfMenuDialog1')" size="md" variant="outline" color="secondary" label="Default Menu (⋯)" style="--btn-bg: var(--accent-yellow,#f59e0b);"></ui-button>
+            <ui-button onclick="openDialog('wfMenuDialog2')" size="md" variant="outline" color="secondary" label="Settings Menu (⚙)" style="--btn-bg: var(--accent-red,#ef4444);"></ui-button>
+            <ui-button onclick="openDialog('wfMenuDialog3')" size="md" variant="outline" color="secondary" label="Filter Menu (sliders)" style="--btn-bg: var(--accent-purple,#8b5cf6);"></ui-button>
           </div>
           <!-- Default more-horizontal icon -->
@@ -1910,7 +2010,7 @@ export function initDialogDemo() {
           const out = document.getElementById('wfReturnOutput');
           if (out) {
             if (!result.canceled && result.data) {
-              out.innerHTML = '<pre style="background:#f1f5f9;padding:12px;border-radius:8px;font-size:12px;">' + JSON.stringify(result.data, null, 2) + '</pre>';
+              out.innerHTML = '<pre style="background:var(--bg-tertiary,#f1f5f9);padding:12px;border-radius:8px;font-size:12px;">' + JSON.stringify(result.data, null, 2) + '</pre>';
             } else {
               out.textContent = result.canceled ? '(dialog cancelled)' : '(no data returned — form empty)';
             }
@@ -1933,10 +2033,10 @@ export function initDialogDemo() {
         <p style="margin-bottom: 20px; color: #6b7280;">Drawers are ideal for navigation, detail panels, and quick settings. They slide from the viewport edges.</p>
         <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-          <ui-button onclick="openDialog('drawerLeft')" size="md" variant="outline" color="primary" label="Left Drawer" style="--btn-bg: #4f46e5;"></ui-button>
-          <ui-button onclick="openDialog('drawerRight')" size="md" variant="outline" color="primary" label="Right Drawer" style="--btn-bg: #4f46e5;"></ui-button>
-          <ui-button onclick="openDialog('drawerTop')" size="md" variant="outline" color="primary" label="Top Drawer" style="--btn-bg: #4f46e5;"></ui-button>
-          <ui-button onclick="openDialog('drawerBottom')" size="md" variant="outline" color="primary" label="Bottom Drawer" style="--btn-bg: #4f46e5;"></ui-button>
+          <ui-button onclick="openDialog('drawerLeft')" size="md" variant="outline" color="primary" label="Left Drawer" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
+          <ui-button onclick="openDialog('drawerRight')" size="md" variant="outline" color="primary" label="Right Drawer" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
+          <ui-button onclick="openDialog('drawerTop')" size="md" variant="outline" color="primary" label="Top Drawer" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
+          <ui-button onclick="openDialog('drawerBottom')" size="md" variant="outline" color="primary" label="Bottom Drawer" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
         </div>
         <ui-dialog-box id="drawerLeft" type="drawer" position="left" ok-text="Accept" cancel-text="Close" dialog-title="Navigation" subtitle="Main Menu" icon="menu" icon-library="lucide">
@@ -1961,9 +2061,9 @@ export function initDialogDemo() {
         <ui-dialog-box id="drawerBottom" type="drawer" position="bottom" ok-text="Execute" cancel-text="Close" dialog-title="System Actions" subtitle="Select an action to continue" icon="zap" icon-library="lucide">
            <div style="padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;">
-              <ui-button label="🚀 Deploy" size="md" variant="outline" color="secondary" style="height: 80px; --btn-bg: #f3f4f6; --btn-text: #1e293b; border: 1px solid #e5e7eb;"></ui-button>
-              <ui-button label="🧪 Test" size="md" variant="outline" color="secondary" style="height: 80px; --btn-bg: #f3f4f6; --btn-text: #1e293b; border: 1px solid #e5e7eb;"></ui-button>
-              <ui-button label="🗑️ Delete" size="md" variant="outline" color="danger" style="height: 80px; --btn-bg: #fef2f2; border: 1px solid #fee2e2;"></ui-button>
+              <ui-button label="🚀 Deploy" size="md" variant="outline" color="secondary" style="height: 80px; --btn-bg: #f3f4f6; --btn-text: #1e293b; border:1px solid var(--border-default,#e5e7eb);"></ui-button>
+              <ui-button label="🧪 Test" size="md" variant="outline" color="secondary" style="height: 80px; --btn-bg: #f3f4f6; --btn-text: #1e293b; border:1px solid var(--border-default,#e5e7eb);"></ui-button>
+              <ui-button label="🗑️ Delete" size="md" variant="outline" color="danger" style="height: 80px; --btn-bg: var(--accent-red-soft,#fef2f2); border: 1px solid #fee2e2;"></ui-button>
            </div>
         </ui-dialog-box>
       </div>
@@ -2043,7 +2143,7 @@ export function initDialogDemo() {
         <h3>🤝 Promise-based API (Modern DX)</h3>
         <p style="margin-bottom: 20px; color: #6b7280;">Use <code>await dialog.openDialog()</code> to write clean, linear code for complex user flows.</p>
-        <ui-button id="promiseFlowBtn" onclick="startWizardSequence()" size="md" variant="outline" color="secondary" label="🚀 Launch Project Wizard" style="--btn-bg: #f59e0b; border-radius: 12px;"></ui-button>
+        <ui-button id="promiseFlowBtn" onclick="startWizardSequence()" size="md" variant="outline" color="secondary" label="🚀 Launch Project Wizard" style="--btn-bg: var(--accent-yellow,#f59e0b); border-radius: 12px;"></ui-button>
         <div id="promiseStatus" style="margin-top: 16px; font-weight: 600; color: #10b981;">Status: Idle</div>
         <ui-dialog-box id="wizardDialog" width="500px" icon-library="lucide" cancel-text="Cancel">
@@ -2074,7 +2174,10 @@ export function initDialogDemo() {
       // Step 1
       setStepUI(1, 'Configuration', "<h4>Welcome to the Setup Wizard</h4><p>We'll guide you through the initial configuration. Click Continue to proceed.</p>");
-      await new Promise(r => dlg.addEventListener('ok', r, { once: true }));
+      await new Promise(r => dlg.addEventListener('ok', e => {
+        e.preventDefault();
+        r();
+      }, { once: true }));
       // Step 2 (Loading Step)
       setStepUI(
@@ -2089,7 +2192,10 @@ export function initDialogDemo() {
       // Step 3
       setStepUI(3, 'Security', '<h4>Step 3: Security Policy</h4><p>Scanning firewall rules and generating encryption keys for the new cluster.</p>');
-      await new Promise(r => dlg.addEventListener('ok', r, { once: true }));
+      await new Promise(r => dlg.addEventListener('ok', e => {
+        e.preventDefault();
+        r();
+      }, { once: true }));
       // Step 4
       setStepUI(4, 'Completion', '<h4>✨ Success!</h4><p>All settings have been applied successfully. You can now close this wizard.</p>', true, 'Finish');
@@ -2110,18 +2216,18 @@ export function initDialogDemo() {
         <p style="margin-bottom: 20px; color: #6b7280;">Granular control over specific sections using <b>Slots</b> for content and <b>CSS Parts</b> for styling.</p>
         <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-          <ui-button onclick="openDialog('dSlotsAdvanced')" size="md" variant="outline" color="secondary" label="Deep Slotting" style="--btn-bg: #ec4899;"></ui-button>
+          <ui-button onclick="openDialog('dSlotsAdvanced')" size="md" variant="outline" color="secondary" label="Deep Slotting" style="--btn-bg: var(--accent-pink,#ec4899);"></ui-button>
           <ui-button onclick="openDialog('dPartsStyling')" size="md" variant="outline" color="secondary" label="Part-based Styling" style="--btn-bg: #111827;"></ui-button>
         </div>
         <ui-dialog-box id="dSlotsAdvanced" icon-library="lucide" width="500px" ok-text="Primary Action" cancel-text="Secondary">
-           <div slot="title" style="color: #ec4899; font-weight: 800; display: flex; align-items: center; gap: 8px;">
+           <div slot="title" style="color:var(--accent-pink,#ec4899); font-weight: 800; display: flex; align-items: center; gap: 8px;">
               <ui-icon name="heart" size="20px"></ui-icon> Custom Title Slot
            </div>
-           <div slot="subtitle" style="color: #6366f1; font-style: italic;">
+           <div slot="subtitle" style="color:var(--accent-indigo,#6366f1); font-style: italic;">
               This subtitle is injected via slot="subtitle"
            </div>
-           <div slot="body" style="padding: 20px; background: #fdf2f8; border-radius: 12px; border: 1px dashed #ec4899;">
+           <div slot="body" style="padding: 20px; background:var(--accent-pink-soft,#fdf2f8); border-radius: 12px; border: 1px dashed #ec4899;">
               <p>This entire body area is controlled by <b>slot="body"</b>.</p>
               <ui-button label="Nested Button"></ui-button>
            </div>
@@ -2140,7 +2246,7 @@ export function initDialogDemo() {
            #dPartsStyling::part(header) { background: linear-gradient(90deg, #1e293b, #0f172a); border-bottom: 1px solid #00fff2; color: #00fff2; }
            #dPartsStyling::part(body) { color: #e2e8f0; }
            #dPartsStyling::part(footer) { background: #1e293b; border-top: 1px solid #00fff2; }
-           #dPartsStyling::part(ok-btn) { background: #00fff2; color: #0f172a; font-weight: 900; text-transform: uppercase; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
+           #dPartsStyling::part(ok-btn) { background: #00fff2; color:var(--text-primary,#0f172a); font-weight: 900; text-transform: uppercase; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
         </style>
       </div>
     `;
@@ -2150,9 +2256,9 @@ export function initDialogDemo() {
     const container = document.getElementById('dialogDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div class="demo-block" style="padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
-        <h3 style="margin-top: 0; color: #1e293b;">💬 Enterprise MessageBox</h3>
-        <p style="color: #64748b; font-size: 14px; line-height: 1.6;">
+      <div class="demo-block" style="padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+        <h3 style="margin-top: 0; color:var(--text-primary,#1e293b);">💬 Enterprise MessageBox</h3>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">
           Simplified modal layout optimized for system notifications and informational alerts. Centers the content and provides high-visibility headers.
         </p>
         <ui-button onclick="openDialog('msgBoxDialog')" size="md" variant="outline" color="secondary" label="Open MessageBox" style="margin-top: 12px; --btn-bg: #5b21b6;"></ui-button>
@@ -2161,7 +2267,7 @@ export function initDialogDemo() {
         <div style="padding: 24px; text-align: center;">
            <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
            <p style="margin: 0; font-weight: 600; font-size: 18px;">Deployment Successful</p>
-           <p style="color: #64748b; margin-top: 8px;">All assets have been optimized and synchronized with the production cluster in <b>us-east-1</b>.</p>
+           <p style="color:var(--text-secondary,#64748b); margin-top: 8px;">All assets have been optimized and synchronized with the production cluster in <b>us-east-1</b>.</p>
         </div>
       </ui-dialog-box>
     `;
@@ -2171,12 +2277,12 @@ export function initDialogDemo() {
     const container = document.getElementById('dialogDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div class="demo-block" style="padding: 24px; background: #fef2f2; border-radius: 12px; border: 1px solid #fee2e2;">
+      <div class="demo-block" style="padding: 24px; background:var(--accent-red-soft,#fef2f2); border-radius: 12px; border: 1px solid #fee2e2;">
         <h3 style="margin-top: 0; color: #991b1b;">🗑️ High-Stakes Confirmation</h3>
-        <p style="color: #b91c1c; font-size: 14px; line-height: 1.6;">
+        <p style="color:var(--accent-red,#b91c1c); font-size: 14px; line-height: 1.6;">
           Specialized "confirm" type for destructive actions. Features custom confirmation text that must be acknowledged before proceeding.
         </p>
-        <ui-button onclick="openDialog('confirmDangerDialog')" size="md" variant="outline" color="danger" label="Delete Production Database" style="margin-top: 12px; --btn-bg: #dc2626;"></ui-button>
+        <ui-button onclick="openDialog('confirmDangerDialog')" size="md" variant="outline" color="danger" label="Delete Production Database" style="margin-top: 12px; --btn-bg: var(--accent-red,#dc2626);"></ui-button>
       </div>
       <ui-dialog-box id="confirmDangerDialog"
           type="confirm"
@@ -2202,8 +2308,8 @@ export function initDialogDemo() {
       <div class="demo-block" style="padding: 20px; background: #f3f4f6; border-radius: 12px; border: 1px dashed #d1d5db;">
         <h3 style="margin-top: 0;">✍️ Alert Input (Prompt)</h3>
         <p style="color: #6b7280; font-size: 14px;">Built-in input field for collecting user input with full async result support.</p>
-        <ui-button id="promptBtn" size="md" variant="outline" color="secondary" label="Launch Prompt" style="--btn-bg: #0891b2;"></ui-button>
-        <div id="promptResult" style="margin-top: 16px; min-height: 40px; padding: 12px; background: white; border-radius: 6px; border: 1px solid #e5e7eb; display: flex; align-items: center;">
+        <ui-button id="promptBtn" size="md" variant="outline" color="secondary" label="Launch Prompt" style="--btn-bg: var(--accent-cyan,#0891b2);"></ui-button>
+        <div id="promptResult" style="margin-top: 16px; min-height: 40px; padding: 12px; background:var(--bg-primary,white); border-radius: 6px; border:1px solid var(--border-default,#e5e7eb); display: flex; align-items: center;">
            <span style="color: #9ca3af; font-style: italic;">Results will appear here...</span>
         </div>
       </div>
@@ -2219,7 +2325,7 @@ export function initDialogDemo() {
         resultDisplay.innerHTML = '<span style="color: #10b981;">Waiting for input...</span>';
         const result = await dialog.showWithResult();
         if (result.canceled) {
-          resultDisplay.innerHTML = '<span style="color: #ef4444; font-weight: bold;">✕ Creation Canceled</span>';
+          resultDisplay.innerHTML = '<span style="color:var(--accent-red,#ef4444); font-weight: bold;">✕ Creation Canceled</span>';
         } else {
           resultDisplay.innerHTML = `<div style="display: flex; flex-direction: column;"><span style="color: #10b981; font-weight: bold;">✓ Project Initialized Successfully</span><span style="font-size: 12px; color: #6b7280;">Returned Value: ${result.data}</span></div>`;
         }
@@ -2231,13 +2337,13 @@ export function initDialogDemo() {
     const container = document.getElementById('dialogDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div class="demo-block" style="padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px;">
-        <h3 style="margin-top: 0; color: #1e293b;">⋮ Enterprise Action Menu</h3>
-        <p style="color: #64748b; font-size: 14px; line-height: 1.6;">
+      <div class="demo-block" style="padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); margin-bottom: 20px;">
+        <h3 style="margin-top: 0; color:var(--text-primary,#1e293b);">⋮ Enterprise Action Menu</h3>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">
           Elevate headers with context-aware actions. Customize the trigger icon and tooltip title for branded experiences.
         </p>
         <div style="display: flex; gap: 12px; margin-top: 16px;">
-          <ui-button onclick="openDialog('menuShowroom1')" size="md" variant="outline" color="primary" label="Standard Menu" style="--btn-bg: #4f46e5;"></ui-button>
+          <ui-button onclick="openDialog('menuShowroom1')" size="md" variant="outline" color="primary" label="Standard Menu" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
           <ui-button onclick="openDialog('menuShowroomCustom')" size="md" variant="outline" color="secondary" label="Custom Icon & Title" style="--btn-bg: #0f172a;"></ui-button>
         </div>
       </div>
@@ -2285,16 +2391,16 @@ export function initDialogDemo() {
         <div style="display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 30px;">
            <ui-button onclick="spawnTrayDialog('Terminal', 'terminal', 'info')" size="md" variant="outline" color="secondary" label="🖥️ Open Terminal" style="--btn-bg: #1e293b;"></ui-button>
-           <ui-button onclick="spawnTrayDialog('Messages', 'message-square', 'success')" size="md" variant="outline" color="success" label="💬 Open Chat" style="--btn-bg: #059669;"></ui-button>
-           <ui-button onclick="spawnTrayDialog('Errors', 'alert-circle', 'error')" size="md" variant="outline" color="danger" label="🚨 Open Alerts" style="--btn-bg: #dc2626;"></ui-button>
-           <ui-button onclick="spawnManyTrayDialogs(8)" size="md" variant="outline" color="primary" label="🌀 Spawn 8+ Windows" style="--btn-bg: #4f46e5;"></ui-button>
+           <ui-button onclick="spawnTrayDialog('Messages', 'message-square', 'success')" size="md" variant="outline" color="success" label="💬 Open Chat" style="--btn-bg: var(--accent-green,#059669);"></ui-button>
+           <ui-button onclick="spawnTrayDialog('Errors', 'alert-circle', 'error')" size="md" variant="outline" color="danger" label="🚨 Open Alerts" style="--btn-bg: var(--accent-red,#dc2626);"></ui-button>
+           <ui-button onclick="spawnManyTrayDialogs(8)" size="md" variant="outline" color="primary" label="🌀 Spawn 8+ Windows" style="--btn-bg: var(--accent-indigo,#4f46e5);"></ui-button>
         </div>
         <div style="background: rgba(59, 130, 246, 0.05); border: 2px dashed #10b981; border-radius: 16px; padding: 40px; text-align: center;">
            <div style="font-size: 24px; margin-bottom: 12px;">👇</div>
            <p style="font-weight: 700; color: #1e3a8a; margin: 0;">MINIMIZE THE WINDOWS ABOVE</p>
            <p style="color: #10b981; font-size: 14px;">They will cluster into the global tray at the bottom center of the screen.</p>
-           <p style="color: #64748b; font-size: 13px; margin-top: 20px;"><b>Pro Tip:</b> Use the "≡ All Tabs" menu in the tray to manage many windows at once!</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-top: 20px;"><b>Pro Tip:</b> Use the "≡ All Tabs" menu in the tray to manage many windows at once!</p>
         </div>
       </div>
     `;
@@ -2319,7 +2425,7 @@ export function initDialogDemo() {
              <h4>${title} Window</h4>
              <p>This window is integrated with the global Tray registry.</p>
              <p>Status: <b style="color: var(--ui-status-color, #1e293b)">${status.toUpperCase()}</b></p>
-             <div style="margin-top:20px; padding:12px; background:#f1f5f9; border-radius:8px; font-family:monospace; font-size:12px;">
+             <div style="margin-top:20px; padding:12px; background:var(--bg-tertiary,#f1f5f9); border-radius:8px; font-family:monospace; font-size:12px;">
                 const d = document.createElement('ui-dialog-box');<br>
                 d.dockLabel = '${title}';<br>
                 d.minimized = true;
@@ -2358,37 +2464,37 @@ export function initDialogDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>✨ Glass & Status Showroom</h3>
-        <p style="margin-bottom: 30px; color: #64748b;">Showcasing ultra-modern visual variants and status-aware styling.</p>
+        <p style="margin-bottom: 30px; color:var(--text-secondary,#64748b);">Showcasing ultra-modern visual variants and status-aware styling.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <!-- Glass Info -->
            <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); padding: 24px; border-radius: 16px;">
-              <h4 style="margin-top:0; color: #2563eb;">💎 Glass Variant</h4>
-              <p style="font-size: 13px; color: #1e40af;">Frosted glass effect with high-fidelity blur. Works best over colorful backgrounds.</p>
-              <ui-button onclick="openDialog('showroomGlass')" size="md" variant="outline" color="primary" label="Open Glass" style="--btn-bg: #2563eb;"></ui-button>
+              <h4 style="margin-top:0; color:var(--accent-blue,#2563eb);">💎 Glass Variant</h4>
+              <p style="font-size: 13px; color:var(--accent-blue,#1e40af);">Frosted glass effect with high-fidelity blur. Works best over colorful backgrounds.</p>
+              <ui-button onclick="openDialog('showroomGlass')" size="md" variant="outline" color="primary" label="Open Glass" style="--btn-bg: var(--accent-blue,#2563eb);"></ui-button>
            </div>
            <!-- Minimal Primary -->
            <div style="background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.2); padding: 24px; border-radius: 16px;">
-              <h4 style="margin-top:0; color: #db2777;">📏 Minimal Variant</h4>
+              <h4 style="margin-top:0; color:var(--accent-pink,#db2777);">📏 Minimal Variant</h4>
               <p style="font-size: 13px; color: #9d174d;">Clean, floating look without a background color on the header. Modern and lightweight.</p>
-              <ui-button onclick="openDialog('showroomMinimal')" size="md" variant="outline" color="secondary" label="Open Minimal" style="--btn-bg: #db2777;"></ui-button>
+              <ui-button onclick="openDialog('showroomMinimal')" size="md" variant="outline" color="secondary" label="Open Minimal" style="--btn-bg: var(--accent-pink,#db2777);"></ui-button>
            </div>
            <!-- Ghost Success -->
            <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); padding: 24px; border-radius: 16px;">
-              <h4 style="margin-top:0; color: #059669;">👻 Ghost Variant</h4>
-              <p style="font-size: 13px; color: #065f46;">Fully transparent surface with border emphasis. Minimalist design.</p>
-              <ui-button onclick="openDialog('showroomGhost')" size="md" variant="outline" color="success" label="Open Ghost" style="--btn-bg: #059669;"></ui-button>
+              <h4 style="margin-top:0; color:var(--accent-green,#059669);">👻 Ghost Variant</h4>
+              <p style="font-size: 13px; color:var(--accent-green,#065f46);">Fully transparent surface with border emphasis. Minimalist design.</p>
+              <ui-button onclick="openDialog('showroomGhost')" size="md" variant="outline" color="success" label="Open Ghost" style="--btn-bg: var(--accent-green,#059669);"></ui-button>
            </div>
            <!-- Status Tints -->
            <div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); padding: 24px; border-radius: 16px;">
-              <h4 style="margin-top:0; color: #d97706;">🎨 Status Tints</h4>
-              <p style="font-size: 13px; color: #92400e;">Automatic top-border and icon tinting based on status (info, success, warning, error).</p>
+              <h4 style="margin-top:0; color:var(--accent-yellow,#d97706);">🎨 Status Tints</h4>
+              <p style="font-size: 13px; color:var(--accent-yellow,#92400e);">Automatic top-border and icon tinting based on status (info, success, warning, error).</p>
               <div style="display:flex; gap:8px;">
                  <ui-button onclick="document.getElementById('showroomStatus').status='error'; openDialog('showroomStatus')" size="md" variant="outline" color="danger" label="Error"></ui-button>
-                 <ui-button onclick="document.getElementById('showroomStatus').status='warning'; openDialog('showroomStatus')" size="md" variant="outline" color="warning" label="Warning" style="--btn-bg: #d97706;"></ui-button>
+                 <ui-button onclick="document.getElementById('showroomStatus').status='warning'; openDialog('showroomStatus')" size="md" variant="outline" color="warning" label="Warning" style="--btn-bg: var(--accent-yellow,#d97706);"></ui-button>
                  <ui-button onclick="document.getElementById('showroomStatus').status='success'; openDialog('showroomStatus')" size="md" variant="outline" color="success" label="Success"></ui-button>
               </div>
            </div>
@@ -2429,29 +2535,29 @@ export function initDialogDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🧠 Advanced Enterprise Logic</h3>
-        <p style="margin-bottom: 24px; color: #64748b;">Showcasing recursive nesting, time-sensitive alerts, and layout persistence.</p>
+        <p style="margin-bottom: 24px; color:var(--text-secondary,#64748b);">Showcasing recursive nesting, time-sensitive alerts, and layout persistence.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
            <!-- Recursive Nesting -->
-           <div style="background: white; border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
-              <h4 style="margin: 0 0 10px 0; color: #7c3aed;">🌳 Triple Nesting</h4>
+           <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+              <h4 style="margin: 0 0 10px 0; color:var(--accent-purple,#7c3aed);">🌳 Triple Nesting</h4>
               <p style="font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 20px;">
                 Demonstrates automatic backdrop dimming, focus trapping, and recursive z-index management across three levels of depth.
               </p>
-              <ui-button onclick="openDialog('entNestedP')" size="md" variant="outline" color="primary" label="Launch Nested Tree" style="width: 100%; --btn-bg: #7c3aed;"></ui-button>
+              <ui-button onclick="openDialog('entNestedP')" size="md" variant="outline" color="primary" label="Launch Nested Tree" style="width: 100%; --btn-bg: var(--accent-purple,#7c3aed);"></ui-button>
            </div>
            <!-- Auto-Closing Alert -->
-           <div style="background: white; border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
-              <h4 style="margin: 0 0 10px 0; color: #f59e0b;">⏱️ Auto-Expiring Alert</h4>
+           <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+              <h4 style="margin: 0 0 10px 0; color:var(--accent-yellow,#f59e0b);">⏱️ Auto-Expiring Alert</h4>
               <p style="font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 20px;">
                 Programmatic lifecycle control with a synchronized countdown timer and progress bar for time-sensitive notifications.
               </p>
-              <ui-button onclick="runEntAutoClose()" size="md" variant="outline" color="warning" label="Start Timer Demo" style="width: 100%; --btn-bg: #f59e0b;"></ui-button>
+              <ui-button onclick="runEntAutoClose()" size="md" variant="outline" color="warning" label="Start Timer Demo" style="width: 100%; --btn-bg: var(--accent-yellow,#f59e0b);"></ui-button>
            </div>
            <!-- Workspace Persistence -->
-           <div style="background: white; border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+           <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
               <h4 style="margin: 0 0 10px 0; color: #10b981;">💾 Layout Persistence</h4>
               <p style="font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 20px;">
                 Remembers window position and size across page reloads using localStorage. Drag/resize then refresh the browser.
@@ -2460,7 +2566,7 @@ export function initDialogDemo() {
            </div>
            <!-- Custom Sizing -->
-           <div style="background: white; border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+           <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
               <h4 style="margin: 0 0 10px 0; color: #10b981;">📐 Custom Dimension</h4>
               <p style="font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 20px;">
                 Bypass semantic sizing (sm, md, lg) and define pixel-perfect footprints.
@@ -2479,14 +2585,14 @@ export function initDialogDemo() {
            <div style="padding: 24px;">
               <h4 style="margin-top:0">System Root</h4>
               <p>Stacked z-index management and recursive backdrop scaling are handled natively.</p>
-              <ui-button onclick="openDialog('entNestedC1')" size="md" variant="outline" color="primary" label="Open Level 2" style="--btn-bg: #7c3aed;"></ui-button>
+              <ui-button onclick="openDialog('entNestedC1')" size="md" variant="outline" color="primary" label="Open Level 2" style="--btn-bg: var(--accent-purple,#7c3aed);"></ui-button>
            </div>
            <ui-dialog-box id="entNestedC1" dialog-title="Module Layer [Level 2]" ok-text="Save Module" cancel-text="Close" icon="package" icon-library="lucide" width="450px" portal="false">
               <div style="padding: 24px;">
                  <h4 style="margin-top:0">Intermediate Node</h4>
                  <p>Focus is trapped within this window until dismissed.</p>
-                 <ui-button onclick="openDialog('entNestedC2')" size="md" variant="outline" color="primary" label="Open Level 3" style="--btn-bg: #7c3aed;"></ui-button>
+                 <ui-button onclick="openDialog('entNestedC2')" size="md" variant="outline" color="primary" label="Open Level 3" style="--btn-bg: var(--accent-purple,#7c3aed);"></ui-button>
               </div>
               <ui-dialog-box id="entNestedC2" dialog-title="Detail Layer [Level 3]" ok-text="Finish" cancel-text="Close" icon="search" icon-library="lucide" width="350px" portal="false">
@@ -2500,7 +2606,7 @@ export function initDialogDemo() {
         <ui-dialog-box id="entRemember" ok-text="Save Workspace" cancel-text="Close" remember="true" draggable="true" dialog-title="Workspace Restore" subtitle="State Persistence Demo" icon="hard-drive" icon-library="lucide" width="400px">
            <div style="padding: 24px;">
-              <div style="background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 16px; border-radius: 8px; font-size: 14px;">
+              <div style="background:var(--accent-blue-soft,#eff6ff); border: 1px solid #bfdbfe; color:var(--accent-blue,#1e40af); padding: 16px; border-radius: 8px; font-size: 14px;">
                 <strong>Instruction:</strong> Position this window anywhere and resize it. Refresh the page to see it reappear exactly here.
               </div>
            </div>
@@ -2524,7 +2630,7 @@ export function initDialogDemo() {
             <h2 style="margin: 0">Auto-Finalizing</h2> \
             <p>Session sync will complete and close in <span id="ent-timer-val">3</span>s...</p> \
             <div style="height: 4px; background: #e2e8f0; width: 100%; margin-top: 15px; border-radius: 2px; overflow: hidden"> \
-                <div id="ent-timer-progress" style="height: 100%; background: #f59e0b; width: 100%; transition: width 3s linear"></div> \
+                <div id="ent-timer-progress" style="height: 100%; background: var(--accent-yellow,#f59e0b); width: 100%; transition: width 3s linear"></div> \
             </div> \
           </div> \
         ';