atomicuilibrary 0.0.1 → 0.1.3

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

@@ -13,7 +13,7 @@ export function initPopoverDemo() {
       <ui-button id="btnVariants" label="Variants" variant="outline"></ui-button>
       <ui-button id="btnRich" label="🧩 Rich Content" variant="outline"></ui-button>
       <ui-button id="btnIcon" label="Icon Toolbar" variant="outline"></ui-button>
-      <ui-button id="btnPremium" label="✨ Premium"  style="--ui-button-bg: #ec4899; --ui-button-border: none;" variant="outline"></ui-button>
+      <ui-button id="btnPremium" label="✨ Premium"  style="--ui-button-bg: var(--accent-pink,#ec4899); --ui-button-border: none;" variant="outline"></ui-button>
       <ui-button id="btnEdge" label="Edge Detection"  style="--ui-button-bg: #64748b; --ui-button-border: none;" variant="outline"></ui-button>
     </div>
 
@@ -32,9 +32,13 @@ export function initPopoverDemo() {
       btnEdge: showEdgeCases,
     };
 
-    Object.entries(navMap).forEach(([id, fn]) => {
-      document.getElementById(id)?.addEventListener('click', fn);
-    });
+    const controls = document.getElementById('popoverDemoControls');
+    if (controls) {
+      controls.addEventListener('buttonClick', (e) => {
+        const fn = navMap[e.target?.id];
+        if (fn) fn();
+      });
+    }
 
     showInteractivePopover();
   }, 100);
@@ -108,54 +112,54 @@ function showTriggersDemo() {
 
       <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:24px;">
 
-        <div style="background:#f9fafb;padding:20px;border-radius:12px;border:1px solid #e5e7eb;">
-          <h4 style="margin:0 0 8px;">click</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">Toggle on click, close on outside click or Esc.</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">click</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">Toggle on click, close on outside click or Esc.</p>
           <ui-popover trigger="click" placement="bottom" heading="Click Trigger" content="<p>Opened by clicking the button.</p>">
             ${btn('Click Me', '#10b981')}
           </ui-popover>
         </div>
 
-        <div style="background:#f0fdf4;padding:20px;border-radius:12px;border:1px solid #bbf7d0;">
-          <h4 style="margin:0 0 8px;">hover</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">Opens on mouse enter, closes after <code>hide-delay</code> ms. Move cursor into popover body — it stays open (<code>interactive</code>).</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">hover</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">Opens on mouse enter, closes after <code>hide-delay</code> ms. Move cursor into popover body — it stays open (<code>interactive</code>).</p>
           <ui-popover trigger="hover" placement="bottom" show-delay="200" hide-delay="400" heading="Hover Trigger" content="<p>Hover into this area — it stays open!</p>">
             ${btn('Hover Me', '#10b981')}
           </ui-popover>
         </div>
 
-        <div style="background:#eff6ff;padding:20px;border-radius:12px;border:1px solid #bfdbfe;">
-          <h4 style="margin:0 0 8px;">focus</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">Opens when trigger receives keyboard focus. Great for form field hints.</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">focus</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">Opens when trigger receives keyboard focus. Great for form field hints.</p>
           <ui-popover trigger="focus" placement="bottom" content="<p>Tab to focus this input to see the hint.</p>">
             <ui-input placeholder="Focus me..." style="padding:10px 14px;border:2px solid #93c5fd;border-radius:8px;outline:none;font-size:14px;width:100%;box-sizing:border-box;">
           </ui-popover>
         </div>
 
-        <div style="background:#fdf4ff;padding:20px;border-radius:12px;border:1px solid #e9d5ff;">
-          <h4 style="margin:0 0 8px;">manual</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">No automatic trigger — control via <code>show()</code> / <code>hide()</code> methods.</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">manual</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">No automatic trigger — control via <code>show()</code> / <code>hide()</code> methods.</p>
           <div style="display:flex;gap:8px;margin-bottom:16px;">
             <ui-button label="Show" variant="outline" color="primary" onclick="document.getElementById('manualPop').show()" style="flex:1;"></ui-button>
             <ui-button label="Hide" variant="outline" color="secondary" onclick="document.getElementById('manualPop').hide()" style="flex:1;"></ui-button>
             <ui-button label="Toggle" variant="outline" color="primary" onclick="document.getElementById('manualPop').toggle()" style="flex:1;"></ui-button>
           </div>
           <ui-popover id="manualPop" trigger="manual" placement="bottom" heading="Manual Mode" content="<p>I'm fully controlled programmatically.</p>">
-            <div style="padding:12px;background:#ede9fe;border-radius:8px;text-align:center;font-size:13px;color:#6d28d9;border:2px dashed #c4b5fd;">Target Element</div>
+            <div style="padding:12px;background:var(--bg-tertiary,#ede9fe);border-radius:8px;text-align:center;font-size:13px;color:var(--color-primary,#6d28d9);border:2px dashed var(--border-default,#c4b5fd);">Target Element</div>
           </ui-popover>
         </div>
 
-        <div style="background:#fff7ed;padding:20px;border-radius:12px;border:1px solid #fed7aa;">
-          <h4 style="margin:0 0 8px;">interactive: false</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">In hover mode with <code>interactive="false"</code> — popover closes immediately when cursor leaves trigger (pure tooltip).</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">interactive: false</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">In hover mode with <code>interactive="false"</code> — popover closes immediately when cursor leaves trigger (pure tooltip).</p>
           <ui-popover trigger="hover" interactive="false" placement="bottom" hide-delay="0" content="<p>I close instantly when you leave me.</p>">
             ${btn('Hover (non-interactive)', '#ea580c')}
           </ui-popover>
         </div>
 
-        <div style="background:#f0fdf4;padding:20px;border-radius:12px;border:1px solid #bbf7d0;">
-          <h4 style="margin:0 0 8px;">closeOnScroll</h4>
-          <p style="font-size:13px;color:#6b7280;margin-bottom:16px;">Popover closes automatically when the page is scrolled — ideal for popovers inside scrollable lists.</p>
+        <div style="background:var(--bg-secondary,#f9fafb);padding:20px;border-radius:12px;border:1px solid var(--border-default,#e5e7eb);color:var(--text-primary,#1f2937);">
+          <h4 style="margin:0 0 8px;color:inherit;">closeOnScroll</h4>
+          <p style="font-size:13px;color:var(--text-muted,#6b7280);margin-bottom:16px;">Popover closes automatically when the page is scrolled — ideal for popovers inside scrollable lists.</p>
           <ui-popover trigger="click" close-on-scroll="true" placement="bottom" content="<p>Scroll the page — I'll close automatically.</p>">
             ${btn('Open + Scroll closes', '#16a34a')}
           </ui-popover>
@@ -223,12 +227,12 @@ function showVariantsDemo() {
         <ui-popover id="footerPop2" trigger="click" variant="info" placement="bottom" heading="Keyboard Shortcuts">
           ${btn('Shortcuts', '#2563eb')}
           <div slot="content" style="font-size:13px;">
-            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #bfdbfe;"><span>Save</span><kbd style="background:#dbeafe;padding:2px 6px;border-radius:4px;">Ctrl+S</kbd></div>
-            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #bfdbfe;"><span>Undo</span><kbd style="background:#dbeafe;padding:2px 6px;border-radius:4px;">Ctrl+Z</kbd></div>
-            <div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Search</span><kbd style="background:#dbeafe;padding:2px 6px;border-radius:4px;">Ctrl+K</kbd></div>
+            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #bfdbfe;"><span>Save</span><kbd style="background:var(--accent-blue-soft,#dbeafe);padding:2px 6px;border-radius:4px;">Ctrl+S</kbd></div>
+            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #bfdbfe;"><span>Undo</span><kbd style="background:var(--accent-blue-soft,#dbeafe);padding:2px 6px;border-radius:4px;">Ctrl+Z</kbd></div>
+            <div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Search</span><kbd style="background:var(--accent-blue-soft,#dbeafe);padding:2px 6px;border-radius:4px;">Ctrl+K</kbd></div>
           </div>
-          <div slot="footer" style="text-align:center;font-size:12px;color:#1e40af;">
-            <a href="#" style="color:#2563eb;">View all shortcuts →</a>
+          <div slot="footer" style="text-align:center;font-size:12px;color:var(--accent-blue,#1e40af);">
+            <a href="#" style="color:var(--accent-blue,#2563eb);">View all shortcuts →</a>
           </div>
         </ui-popover>
       </div>
@@ -272,7 +276,7 @@ function showAdvancedSlotted() {
           <h4>Notifications Panel</h4>
           <ui-popover trigger="click" placement="bottom-end" width="320px" heading="Notifications" show-close-button="true" max-height="240px">
             <ui-button variant="outline" color="secondary" shape="circle" icon="bell" icon-library="lucide" style="position:relative;">
-              <span style="position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:#ef4444;border-radius:50%;color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:10;">3</span>
+              <span style="position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--accent-red,#ef4444);border-radius:50%;color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:10;">3</span>
             </ui-button>
             <div slot="content" style="padding:0;">
               ${['Sarah sent you a message', 'Deployment successful', 'Storage at 90%']
@@ -307,7 +311,7 @@ function showAdvancedSlotted() {
               ${['#ef4444', '#f97316', '#eab308', '#22c55e', '#10b981', '#8b5cf6', '#ec4899', '#0ea5e9', '#14b8a6', '#6b7280', '#1f2937', '#ffffff']
                 .map(
                   c =>
-                    `<ui-button onclick="this.closest('ui-popover').hide()" style="width:28px;height:28px;background:${c};border:2px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:transform 0.15s;" onmouseover="this.style.transform='scale(1.2)'" onmouseout="this.style.transform=''"></ui-button>`,
+                    `<div onclick="this.closest('ui-popover').hide()" style="width:28px;height:28px;background:${c};border:2px solid var(--border-default,#e5e7eb);border-radius:6px;cursor:pointer;transition:transform 0.15s;box-sizing:border-box;" onmouseover="this.style.transform='scale(1.2)'" onmouseout="this.style.transform=''"></div>`,
                 )
                 .join('')}
             </div>
@@ -367,7 +371,7 @@ function showIconPopover() {
               )
               .join('')}
             <div style="height:1px;background:#f3f4f6;margin:4px 0;"></div>
-            <a href="#" style="display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:#ef4444;font-size:14px;border-radius:6px;margin:2px 4px;" onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background=''">
+            <a href="#" style="display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:var(--accent-red,#ef4444);font-size:14px;border-radius:6px;margin:2px 4px;" onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background=''">
               <ui-icon name="log-out" library="lucide" size="15px"></ui-icon>Sign out
             </a>
           </div>
@@ -375,12 +379,12 @@ function showIconPopover() {
 
         <ui-popover trigger="click" placement="bottom" width="240px" show-arrow="false" animation="slide">
           <ui-button variant="outline" color="secondary" shape="circle" icon="bell" icon-library="lucide" style="position:relative;">
-            <span style="position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:#ef4444;border-radius:50%;border:2px solid white;z-index:10;"></span>
+            <span style="position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:var(--accent-red,#ef4444);border-radius:50%;border:2px solid white;z-index:10;"></span>
           </ui-button>
           <div slot="content" style="padding:4px 0;">
             <div style="padding:8px 12px;font-size:12px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;">Notifications</div>
-            <div style="padding:10px 12px;font-size:13px;border-radius:6px;background:#eff6ff;margin:4px;">
-              <div style="font-weight:600;color:#1e40af;">Build passed ✓</div>
+            <div style="padding:10px 12px;font-size:13px;border-radius:6px;background:var(--accent-blue-soft,#eff6ff);margin:4px;">
+              <div style="font-weight:600;color:var(--accent-blue,#1e40af);">Build passed ✓</div>
               <div style="color:#10b981;font-size:12px;">pipeline #247 · 1m ago</div>
             </div>
           </div>
@@ -388,7 +392,7 @@ function showIconPopover() {
       </div>
 
       <h4 style="margin-top:40px;">Compact Text Toolbar</h4>
-      <div style="background:white;border:1px solid #e5e7eb;border-radius:8px;padding:6px;display:inline-flex;gap:2px;box-shadow:0 2px 8px rgba(0,0,0,0.07);margin-top:12px;">
+      <div style="background:var(--bg-primary,white);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;padding:6px;display:inline-flex;gap:2px;box-shadow:0 2px 8px rgba(0,0,0,0.07);margin-top:12px;">
         ${[
           { icon: 'bold', library: 'lucide', label: 'Bold (Ctrl+B)' },
           { icon: 'italic', library: 'lucide', label: 'Italic (Ctrl+I)' },
@@ -404,8 +408,8 @@ function showIconPopover() {
           .map(item =>
             item === null
               ? `<div style="width:1px;background:#e5e7eb;margin:4px 2px;"></div>`
-              : `<ui-popover trigger="hover" placement="bottom" interactive="false" hide-delay="0" content="<p style='white-space:nowrap;font-size:12px;'>${item.label}</p>">
-              <ui-button-toggle variant="ghost" icon="${item.icon}" icon-library="${item.library}" icon-only="true" size="md"yle="width:30px;height:30px;--button-min-width:30px;color:#374151;"></ui-button>
+              : `<ui-popover trigger="hover" placement="top" interactive="false" hide-delay="0" content="<p style='white-space:nowrap;font-size:12px;'>${item.label}</p>">
+              <ui-button-toggle variant="ghost" icon="${item.icon}" icon-library="${item.library}" icon-only="true" size="md" style="width:30px;height:30px;--button-min-width:30px;color:#374151;"></ui-button-toggle>
             </ui-popover>`,
           )
           .join('')}
@@ -448,7 +452,7 @@ function showPremiumPopover() {
         <ui-popover id="cancelShowPop" trigger="click" placement="bottom" heading="Before-Show Gated" content="<p>You confirmed you want to open me!</p>">
           ${btn('Gated Open', '#059669')}
         </ui-popover>
-        <div id="cancelEventLog" style="padding:8px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;color:#374151;min-width:220px;display:flex;align-items:center;">Waiting for events…</div>
+        <div id="cancelEventLog" style="padding:8px 12px;background:var(--bg-secondary,#f9fafb);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;font-size:13px;color:#374151;min-width:220px;display:flex;align-items:center;">Waiting for events…</div>
       </div>
 
       <h4 style="margin-top:40px;">Disabled</h4>
@@ -473,121 +477,220 @@ function showEdgeCases() {
     el.remove();
   });
 
+  // All 8 placements
+  const placements = [
+    { key: 'top-start',    label: 'top-start',    area: 'ts',  color: '#6366f1' },
+    { key: 'top',          label: 'top',          area: 'tc',  color: '#10b981' },
+    { key: 'top-end',      label: 'top-end',      area: 'te',  color: '#8b5cf6' },
+    { key: 'left',         label: 'left',         area: 'ml',  color: '#f59e0b' },
+    { key: 'right',        label: 'right',        area: 'mr',  color: '#ec4899' },
+    { key: 'bottom-start', label: 'bottom-start', area: 'bs',  color: '#0ea5e9' },
+    { key: 'bottom',       label: 'bottom',       area: 'bc',  color: '#10b981' },
+    { key: 'bottom-end',   label: 'bottom-end',   area: 'be',  color: '#f43f5e' },
+  ];
+
+  const compassBtns = placements.map(p => `
+    <div style="grid-area:${p.area};display:flex;align-items:center;justify-content:center;">
+      <ui-popover trigger="click" placement="${p.key}" width="220px"
+        heading="${p.key}"
+        content="<p style='font-size:13px;margin:0;line-height:1.7;'>Opens to <strong>${p.key}</strong>. If space is insufficient the engine flips to the opposite side and clamps to stay in-viewport.</p><p style='font-size:11px;color:#6b7280;margin:8px 0 0;'>Arrow re-tracks the trigger after any shift.</p>">
+        <ui-button
+          label="${p.label}"
+          variant="outline"
+          size="sm"
+          style="font-size:11px;min-width:96px;border-color:${p.color};color:${p.color};"
+        ></ui-button>
+      </ui-popover>
+    </div>
+  `).join('');
+
   container.innerHTML = `
     <div class="demo-block">
-      <h3>Edge Detection &amp; Auto-Positioning</h3>
-      <p>
-        Four buttons are pinned to the <strong>actual viewport edges</strong> using
-        <code>position:fixed</code>. Each prefers a placement that would clip off-screen
-        — the engine automatically flips and clamps so the panel stays visible.
+      <h3>Edge Detection &amp; Auto-Positioning — All 8 Placements</h3>
+      <p style="color:var(--text-secondary,#6b7280);font-size:14px;margin-bottom:8px;">
+        Click any placement button to open its popover. Buttons at the viewport edge are pinned
+        with <code>position:fixed</code> so the engine is forced to flip or clamp.
       </p>
 
-      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px;">
-        <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:14px;">
-          <div style="font-size:11px;font-weight:700;color:#1e40af;letter-spacing:.05em;margin-bottom:6px;">🔵 TOP EDGE</div>
-          <p style="font-size:13px;color:#1e3a8a;margin:0;line-height:1.6;">
-            Prefers <code>top</code>. Flips to <strong>bottom</strong> because there's no room above.
-          </p>
-        </div>
-        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:14px;">
-          <div style="font-size:11px;font-weight:700;color:#14532d;letter-spacing:.05em;margin-bottom:6px;">🟢 BOTTOM EDGE</div>
-          <p style="font-size:13px;color:#14532d;margin:0;line-height:1.6;">
-            Prefers <code>bottom</code>. Flips to <strong>top</strong> because there's no room below.
-          </p>
-        </div>
-        <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px;">
-          <div style="font-size:11px;font-weight:700;color:#78350f;letter-spacing:.05em;margin-bottom:6px;">🟡 LEFT EDGE</div>
-          <p style="font-size:13px;color:#78350f;margin:0;line-height:1.6;">
-            Prefers <code>left</code>. Flips to <strong>right</strong> because there's no room on the left.
-          </p>
-        </div>
-        <div style="background:#fdf4ff;border:1px solid #e9d5ff;border-radius:10px;padding:14px;">
-          <div style="font-size:11px;font-weight:700;color:#581c87;letter-spacing:.05em;margin-bottom:6px;">🟣 RIGHT EDGE</div>
-          <p style="font-size:13px;color:#581c87;margin:0;line-height:1.6;">
-            Prefers <code>right</code>. Flips to <strong>left</strong> because there's no room on the right.
-          </p>
+      <!-- ── Section 1: Compass dial ── -->
+      <h4 style="margin-top:28px;margin-bottom:4px;">① Placement compass</h4>
+      <p style="color:var(--text-secondary,#6b7280);font-size:13px;margin-bottom:16px;">
+        All 8 named positions around a reference element. Click each label to see the panel open.
+      </p>
+
+      <div style="
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        grid-template-rows: auto auto auto auto auto;
+        grid-template-areas:
+          'ts  tc  te'
+          'ml  cx  mr'
+          'bs  bc  be';
+        gap: 8px;
+        align-items: center;
+        justify-items: center;
+        max-width: 560px;
+        margin: 0 auto 32px;
+        padding: 24px;
+        background: var(--bg-secondary,#f8fafc);
+        border: 1px solid var(--border-default,#e2e8f0);
+        border-radius: 16px;
+      ">
+        ${compassBtns}
+
+        <!-- Centre reference box -->
+        <div style="
+          grid-area: cx;
+          width: 110px; height: 70px;
+          background: var(--bg-primary,white);
+          border: 2px solid var(--color-primary,#10b981);
+          border-radius: 10px;
+          display: flex; flex-direction: column;
+          align-items: center; justify-content: center;
+          gap: 2px;
+          box-shadow: 0 4px 12px rgba(16,185,129,0.15);
+        ">
+          <span style="font-size:18px;">🎯</span>
+          <span style="font-size:10px;font-weight:700;color:var(--color-primary,#10b981);letter-spacing:.05em;">TRIGGER</span>
         </div>
       </div>
 
-      <div style="margin-top:20px;padding:14px 18px;background:#fefce8;border:1px solid #fde68a;border-radius:10px;display:flex;align-items:center;gap:12px;">
+      <!-- ── Section 2: Live viewport edge buttons ── -->
+      <h4 style="margin-top:8px;margin-bottom:4px;">② Live viewport edge flip demo</h4>
+      <p style="color:var(--text-secondary,#6b7280);font-size:13px;margin-bottom:16px;">
+        Eight buttons are pinned to the actual browser viewport edges and corners using
+        <code>position:fixed</code>. Each requests a placement that would clip off-screen
+        — the engine auto-flips and clamps the panel to stay visible.
+      </p>
+
+      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;">
+        ${[
+          { pos: 'Top-Left corner',     placement: 'top-start',    color: '#6366f1', bg: '#eef2ff', border: '#c7d2fe' },
+          { pos: 'Top centre',          placement: 'top',          color: '#10b981', bg: '#f0fdf4', border: '#bbf7d0' },
+          { pos: 'Top-Right corner',    placement: 'top-end',      color: '#8b5cf6', bg: '#faf5ff', border: '#ddd6fe' },
+          { pos: 'Bottom-Left corner',  placement: 'bottom-start', color: '#0ea5e9', bg: '#f0f9ff', border: '#bae6fd' },
+          { pos: 'Bottom centre',       placement: 'bottom',       color: '#10b981', bg: '#f0fdf4', border: '#bbf7d0' },
+          { pos: 'Bottom-Right corner', placement: 'bottom-end',   color: '#f43f5e', bg: '#fff1f2', border: '#fecdd3' },
+          { pos: 'Left centre',         placement: 'left',         color: '#f59e0b', bg: '#fffbeb', border: '#fde68a' },
+          { pos: 'Right centre',        placement: 'right',        color: '#ec4899', bg: '#fdf2f8', border: '#fbcfe8' },
+        ].map(d => `
+          <div style="background:${d.bg};border:1px solid ${d.border};border-radius:10px;padding:12px;">
+            <div style="font-size:10px;font-weight:700;color:${d.color};letter-spacing:.05em;margin-bottom:4px;">${d.pos.toUpperCase()}</div>
+            <p style="font-size:12px;color:${d.color};margin:0;line-height:1.5;">
+              Prefers <code>${d.placement}</code><br>→ flips to stay visible
+            </p>
+          </div>
+        `).join('')}
+      </div>
+
+      <div style="padding:14px 18px;background:#fefce8;border:1px solid #fde68a;border-radius:10px;display:flex;align-items:center;gap:12px;margin-bottom:28px;">
         <span style="font-size:22px;">👆</span>
         <span style="font-size:13px;color:#78350f;">
-          <strong>Four coloured buttons have been pinned to the edges of your browser window.</strong>
-          Scroll up/down to reach the top and bottom buttons, then click each one to see the flip in action.
+          <strong>8 coloured buttons have been pinned to the edges &amp; corners of your browser window.</strong>
+          Click each one to see the flip + clamping in action. Scroll to reach the top and bottom buttons.
         </span>
       </div>
 
-      <h4 style="margin-top:32px;">Horizontal Clamping (always visible)</h4>
-      <p style="color:#6b7280;font-size:13px;margin-bottom:16px;">
-        <code>bottom-end</code> from the far-right still stays within the viewport.
-        <code>bottom-start</code> from the far-left stays clamped inside. Arrow tracks the trigger even after clamping.
-      </p>
-      <div style="display:flex;justify-content:space-between;align-items:center;background:#f1f5f9;border-radius:10px;padding:24px 20px;">
-        <ui-popover trigger="click" placement="bottom-start" heading="Far Left (bottom-start)"
-          content="<p>Panel is clamped away from the left edge. Arrow still points to the trigger.</p>">
-          <ui-button label="\u25C0 Far Left" color="success" variant="outline" onclick=""></ui-button>
-        </ui-popover>
-        <ui-popover trigger="click" placement="bottom" heading="Centre (bottom)"
-          content="<p>Plenty of space — no flip or clamping needed.</p>">
-          <ui-button label="Centre" color="secondary" variant="outline" onclick=""></ui-button>
-        </ui-popover>
-        <ui-popover trigger="click" placement="bottom-end" heading="Far Right (bottom-end)"
-          content="<p>Panel is clamped away from the right edge. Arrow still points to the trigger.</p>">
-          <ui-button label="Far Right \u25B6" color="secondary" variant="outline" onclick=""></ui-button>
-        </ui-popover>
-      </div>
-
-      <div style="margin-top:24px;background:#eff6ff;border-radius:10px;padding:20px;border:1px solid #bfdbfe;">
-        <h4 style="margin:0 0 10px;color:#1e40af;">💡 Positioning engine features</h4>
-        <ul style="margin:0;color:#1e40af;line-height:2;font-size:13px;">
-          <li><strong>Top ↔ Bottom flip</strong> — triggered when vertical overflow is detected</li>
-          <li><strong>Left ↔ Right flip</strong> — triggered when horizontal overflow is detected</li>
-          <li><strong>Horizontal clamping</strong> — guarantees no pixel bleeds off-screen left or right</li>
-          <li><strong>Vertical clamping</strong> — applied in both directions for tall content</li>
-          <li><strong>First-render safe</strong> — falls back to prop width when layout isn't ready yet</li>
-          <li><strong>Arrow compensation</strong> — arrow re-tracks the trigger after clamping</li>
-        </ul>
+      <!-- ── Section 3: Engine features ── -->
+      <div style="background:var(--accent-blue-soft,#eff6ff);border-radius:10px;padding:20px;border:1px solid #bfdbfe;">
+        <h4 style="margin:0 0 10px;color:var(--accent-blue,#1e40af);">💡 Positioning engine capabilities</h4>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
+          ${[
+            ['Top ↔ Bottom flip',      'Triggered when vertical overflow is detected'],
+            ['Left ↔ Right flip',      'Triggered when horizontal overflow is detected'],
+            ['start ↔ end shift',      'Cross-axis alignment adapts near corners'],
+            ['Horizontal clamping',    'No pixel bleeds off left or right edge'],
+            ['Vertical clamping',      'Applied in both directions for tall content'],
+            ['Arrow compensation',     'Arrow re-tracks trigger after any clamping'],
+            ['First-render safe',      'Falls back to prop width before layout is ready'],
+            ['All 8 placements',       'top, bottom, left, right + 4 corner variants'],
+          ].map(([title, desc]) => `
+            <div style="display:flex;gap:8px;align-items:flex-start;padding:8px 0;">
+              <span style="color:var(--color-primary,#10b981);font-weight:700;flex-shrink:0;">✓</span>
+              <div>
+                <div style="font-size:13px;font-weight:600;color:var(--accent-blue,#1e40af);">${title}</div>
+                <div style="font-size:12px;color:#3b82f6;">${desc}</div>
+              </div>
+            </div>
+          `).join('')}
+        </div>
       </div>
     </div>
   `;
 
-  // ── Inject real fixed-position triggers at each viewport edge ──
+  // ── Inject all 8 real fixed-position triggers at viewport edges/corners ──
   var edgeDefs = [
+    {
+      id: 'edgeFixedTopLeft',
+      cssText: 'position:fixed;top:0;left:0;z-index:50000;',
+      placement: 'top-start',
+      bg: '#6366f1',
+      label: '↙ TL',
+      heading: 'Top-Left — flips to bottom-start',
+      body: 'Preferred <em>top-start</em> but no room above or left. Flips to <strong>bottom</strong> and clamps right.',
+    },
     {
       id: 'edgeFixedTop',
       cssText: 'position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50000;',
       placement: 'top',
       bg: '#10b981',
-      label: '▼ TOP EDGE',
-      heading: 'Top Edge — flipped to bottom',
-      body: "I preferred to open <em>above</em> but there's no room. I flipped to <strong>below</strong>.",
+      label: '↓ TOP',
+      heading: 'Top Centre — flips to bottom',
+      body: 'Preferred <em>top</em> but no room above. Flipped to <strong>bottom</strong>.',
     },
     {
-      id: 'edgeFixedBottom',
-      cssText: 'position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50000;',
-      placement: 'bottom',
-      bg: '#10b981',
-      label: '▲ BOTTOM EDGE',
-      heading: 'Bottom Edge — flipped to top',
-      body: "I preferred to open <em>below</em> but there's no room. I flipped to <strong>above</strong>.",
+      id: 'edgeFixedTopRight',
+      cssText: 'position:fixed;top:0;right:0;z-index:50000;',
+      placement: 'top-end',
+      bg: '#8b5cf6',
+      label: '↙ TR',
+      heading: 'Top-Right — flips to bottom-end',
+      body: 'Preferred <em>top-end</em> but no room above or right. Flips to <strong>bottom</strong> and clamps left.',
     },
     {
       id: 'edgeFixedLeft',
       cssText: 'position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50000;',
       placement: 'left',
-      bg: '#d97706',
+      bg: '#f59e0b',
       label: '▶ LEFT',
-      heading: 'Left Edge — flipped to right',
-      body: "I preferred to open to the <em>left</em> but there's no room. I flipped to <strong>right</strong>.",
+      heading: 'Left Edge — flips to right',
+      body: 'Preferred <em>left</em> but no room. Flipped to <strong>right</strong>.',
     },
     {
       id: 'edgeFixedRight',
       cssText: 'position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50000;',
       placement: 'right',
-      bg: '#8b5cf6',
+      bg: '#ec4899',
       label: '◀ RIGHT',
-      heading: 'Right Edge — flipped to left',
-      body: "I preferred to open to the <em>right</em> but there's no room. I flipped to <strong>left</strong>.",
+      heading: 'Right Edge — flips to left',
+      body: 'Preferred <em>right</em> but no room. Flipped to <strong>left</strong>.',
+    },
+    {
+      id: 'edgeFixedBottomLeft',
+      cssText: 'position:fixed;bottom:0;left:0;z-index:50000;',
+      placement: 'bottom-start',
+      bg: '#0ea5e9',
+      label: '↖ BL',
+      heading: 'Bottom-Left — flips to top-start',
+      body: 'Preferred <em>bottom-start</em> but no room below. Flips to <strong>top</strong> and clamps right.',
+    },
+    {
+      id: 'edgeFixedBottom',
+      cssText: 'position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50000;',
+      placement: 'bottom',
+      bg: '#10b981',
+      label: '↑ BTM',
+      heading: 'Bottom Centre — flips to top',
+      body: 'Preferred <em>bottom</em> but no room below. Flipped to <strong>top</strong>.',
+    },
+    {
+      id: 'edgeFixedBottomRight',
+      cssText: 'position:fixed;bottom:0;right:0;z-index:50000;',
+      placement: 'bottom-end',
+      bg: '#f43f5e',
+      label: '↖ BR',
+      heading: 'Bottom-Right — flips to top-end',
+      body: 'Preferred <em>bottom-end</em> but no room below or right. Flips to <strong>top</strong> and clamps left.',
     },
   ];
 
@@ -596,25 +699,13 @@ function showEdgeCases() {
     wrap.className = 'edge-demo-fixed';
     wrap.style.cssText = def.cssText;
     wrap.innerHTML =
-      '<ui-popover id="' +
-      def.id +
-      '" trigger="click" placement="' +
-      def.placement +
-      '" heading="' +
-      def.heading +
-      '" width="280px">' +
-      '<ui-button slot="trigger" label="' +
-      def.label +
-      '" color="secondary" variant="outline" style="box-shadow:0 2px 10px rgba(0,0,0,0.25); background:' +
-      def.bg +
-      '"></ui-button>' +
-      '<div slot="content"><p style="font-size:13px;margin:0;line-height:1.7;">' +
-      def.body +
-      '</p>' +
-      '<p style="font-size:11px;color:#6b7280;margin:8px 0 0;">Preferred: <code>' +
-      def.placement +
-      '</code></p>' +
-      '</div>' +
+      '<ui-popover id="' + def.id + '" trigger="click" placement="' + def.placement +
+      '" heading="' + def.heading + '" width="260px">' +
+      '<ui-button label="' + def.label + '" size="sm" color="secondary" variant="outline"' +
+      ' style="box-shadow:0 2px 10px rgba(0,0,0,0.3);background:' + def.bg + ';color:#fff;border-color:' + def.bg + ';font-size:11px;min-width:52px;font-weight:700;">' +
+      '</ui-button>' +
+      '<div slot="content"><p style="font-size:13px;margin:0;line-height:1.7;">' + def.body + '</p>' +
+      '<p style="font-size:11px;color:#6b7280;margin:8px 0 0;">Preferred: <code>' + def.placement + '</code></p></div>' +
       '</ui-popover>';
     document.body.appendChild(wrap);
   });
@@ -625,7 +716,7 @@ function showEdgeCases() {
       el.remove();
     });
   }
-  document.querySelectorAll('#popover .demo-controls button').forEach(function (b) {
+  document.querySelectorAll('#popoverDemoControls ui-button').forEach(function (b) {
     b.addEventListener('click', cleanup, { once: true });
   });
 }
@@ -636,17 +727,17 @@ function showInteractivePopover() {
   if (!container) return;
 
   container.innerHTML = `
-    <div style="background:white;border-radius:14px;padding:30px;box-shadow:0 4px 24px rgba(0,0,0,0.08);border:1px solid #f1f5f9;">
-      <h3 style="margin-top:0;display:flex;align-items:center;gap:10px;">
+    <div style="background:var(--bg-primary,white);border-radius:14px;padding:30px;box-shadow:0 4px 24px rgba(0,0,0,0.4);border:1px solid var(--border-default,#e2e8f0);">
+      <h3 style="margin-top:0;display:flex;align-items:center;gap:10px;color:var(--text-primary,#1e293b);">
         <span style="font-size:26px;">🎮</span> Interactive Playground
       </h3>
-      <p style="color:#64748b;margin-bottom:28px;">Configure every property and see changes in real-time.</p>
+      <p style="color:var(--text-secondary,#64748b);margin-bottom:28px;">Configure every property and see changes in real-time.</p>
 
       <div style="display:grid;grid-template-columns:360px 1fr;gap:28px;">
 
         <!-- Config panel -->
-        <div style="background:#f8fafc;padding:24px;border-radius:10px;border:1px solid #e5e7eb;height:fit-content;display:flex;flex-direction:column;gap:18px;">
-          <h4 style="margin:0 0 4px;color:#1e293b;font-size:13px;text-transform:uppercase;letter-spacing:.06em;">⚙️ Properties</h4>
+        <div style="background:var(--bg-secondary,#f8fafc);padding:24px;border-radius:10px;border:1px solid var(--border-default,#e2e8f0);height:fit-content;display:flex;flex-direction:column;gap:18px;">
+          <h4 style="margin:0 0 4px;color:var(--text-secondary,#64748b);font-size:13px;text-transform:uppercase;letter-spacing:.06em;">⚙️ Properties</h4>
 
           <ui-dropdown id="ppTrigger" label="Trigger" value="click" options='[
             {"label": "Click", "value": "click"},
@@ -689,7 +780,7 @@ function showInteractivePopover() {
 
           <ui-input id="ppContent" label="Content (HTML)" multiline="true" rows="4" value="&lt;p&gt;Edit me to change the &lt;strong&gt;content&lt;/strong&gt;!&lt;/p&gt;"></ui-input>
 
-          <div style="background:white;padding:12px;border-radius:8px;border:1px solid #e5e7eb;display:grid;grid-template-columns:1fr 1fr;gap:8px;">
+          <div style="background:var(--bg-tertiary,#f1f5f9);padding:12px;border-radius:8px;border:1px solid var(--border-subtle,#f1f5f9);display:grid;grid-template-columns:1fr 1fr;gap:8px;">
             <ui-checkbox id="ppShowArrow" label="Show Arrow" checked></ui-checkbox>
             <ui-checkbox id="ppShowClose" label="Show Close Button"></ui-checkbox>
             <ui-checkbox id="ppBackdrop" label="Backdrop"></ui-checkbox>
@@ -711,9 +802,9 @@ function showInteractivePopover() {
 
         <!-- Preview panel -->
         <div style="display:flex;flex-direction:column;gap:16px;">
-          <div style="background:#f8fafc;border-radius:10px;border:2px solid #e5e7eb;padding:40px;display:flex;justify-content:center;align-items:center;min-height:280px;position:relative;" id="pgPreview"></div>
+          <div style="background:var(--bg-secondary,#f8fafc);border-radius:10px;border:2px solid #1e2938;padding:40px;display:flex;justify-content:center;align-items:center;min-height:280px;position:relative;" id="pgPreview"></div>
 
-          <div id="pgEventLog" style="background:#0f172a;border-radius:10px;padding:14px 18px;font-family:monospace;font-size:12px;color:#94a3b8;min-height:60px;">
+          <div id="pgEventLog" style="background:#0f172a;border-radius:10px;padding:14px 18px;font-family:monospace;font-size:12px;color:var(--text-secondary,#64748b);min-height:60px;">
             <div style="color:#475569;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;">Event Log</div>
             <div id="pgEventContent">Waiting for events…</div>
           </div>
@@ -735,7 +826,7 @@ function showInteractivePopover() {
     const checkboxes = ['ppShowArrow', 'ppShowClose', 'ppBackdrop', 'ppInteractive', 'ppCloseOnScroll', 'ppCloseOnEsc', 'ppDisabled', 'ppLoading', 'ppSkeleton'];
 
     inputs.forEach(id => document.getElementById(id)?.addEventListener('inputChange', () => updateInteractivePopover()));
-    dropdowns.forEach(id => document.getElementById(id)?.addEventListener('dropdownChange', () => updateInteractivePopover()));
+    dropdowns.forEach(id => document.getElementById(id)?.addEventListener('valueChange', () => updateInteractivePopover()));
     checkboxes.forEach(id => document.getElementById(id)?.addEventListener('checkboxChange', () => updateInteractivePopover()));
 
     updateInteractivePopover();
@@ -780,8 +871,8 @@ function updateInteractivePopover() {
   const triggerLabel = { click: 'Click Me', hover: 'Hover Me', focus: 'Focus Me', manual: 'Target Element' }[trigger] || 'Open';
   const triggerEl =
     trigger === 'manual'
-      ? `<div style="padding:14px 20px;background:#ede9fe;border:2px dashed #a78bfa;border-radius:8px;color:#6d28d9;font-size:13px;cursor:default;">Target Element (use controls above)</div>`
-      : `<ui-button >${triggerLabel}</ui-button>`;
+      ? `<div slot="trigger" style="padding:14px 20px;background:var(--accent-purple-soft,#ede9fe);border:2px dashed #a78bfa;border-radius:8px;color:var(--accent-purple,#6d28d9);font-size:13px;cursor:default;">Target Element (use controls above)</div>`
+      : `<ui-button slot="trigger">${triggerLabel}</ui-button>`;
 
   const escaped = rawContent.replace(/'/g, '&#39;').replace(/"/g, '&quot;');
 
@@ -808,7 +899,7 @@ function updateInteractivePopover() {
       loading="${loading}"
       skeleton="${skeleton}"
     >
-      <div slot="trigger">${triggerEl}</div>
+      ${triggerEl}
       <div slot="content">${rawContent}</div>
     </ui-popover>
   `;