atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/assets/js/demos/callout-banner-demo.js

@@ -18,6 +18,8 @@ export function initCalloutBannerDemo() {
         <ui-button variant="outline" data-tab="autoclose">Auto-Close</ui-button>
         <ui-button variant="outline" data-tab="stack">Stack</ui-button>
         <ui-button variant="outline" data-tab="newfeatures">Industrial Props</ui-button>
+        <ui-button variant="outline" data-tab="enterfrom">✨ Enter Animations</ui-button>
+        <ui-button variant="outline" data-tab="progressprop">📊 Progress Bar</ui-button>
         <ui-button variant="outline" data-tab="annotations">📍 Annotations</ui-button>
         <ui-button variant="outline" data-tab="extras">Sticky / Truncate</ui-button>
         <ui-button variant="outline" data-tab="tickers">📈 Stock Tickers</ui-button>
@@ -51,24 +53,38 @@ export function initCalloutBannerDemo() {
   const nav = document.getElementById('cbNavPills');
 
   const pgUpdate = () => {
-    const v = document.getElementById('pg-v')?.value || 'info';
-    const p = document.getElementById('pg-p')?.value || 'none';
-    const l = document.getElementById('pg-l')?.checked || false;
-    const pu = document.getElementById('pg-pu')?.checked || false;
-    const m = document.getElementById('pg-m')?.checked || false;
-    const s = document.getElementById('pg-s')?.checked || false;
-    const target = document.getElementById('pg-p-target');
+    const v       = document.getElementById('pg-v')?.value || 'info';
+    const p       = document.getElementById('pg-p')?.value || 'none';
+    const size    = document.getElementById('pg-size')?.value || 'md';
+    const enter   = document.getElementById('pg-enter')?.value || 'top';
+    const l       = document.getElementById('pg-l')?.checked || false;
+    const pu      = document.getElementById('pg-pu')?.checked || false;
+    const m       = document.getElementById('pg-m')?.checked || false;
+    const s       = document.getElementById('pg-s')?.checked || false;
+    const outlined = document.getElementById('pg-outlined')?.checked || false;
+    const accbar  = document.getElementById('pg-accbar')?.checked || false;
+    const noicon  = document.getElementById('pg-noicon')?.checked || false;
+    const compact = document.getElementById('pg-compact')?.checked || false;
+    const banner  = document.getElementById('pg-banner')?.checked || false;
+    const target  = document.getElementById('pg-p-target');
     if (target) {
       target.innerHTML = `
-        <ui-callout-banner style="width:100%; max-width:400px;" 
-            variant="${v}" 
-            placement="${p}" 
-            loading="${l}" 
-            pulse="${pu}" 
-            marquee="${m}" 
-            solid="${s}" 
-            heading="Sandbox Result" 
-            message="Testing industrial properties in a unified component context.">
+        <ui-callout-banner style="width:100%;"
+            variant="${v}"
+            size="${size}"
+            enter-from="${enter}"
+            ${p !== 'none' ? `placement="${p}"` : ''}
+            ${l ? 'loading' : ''}
+            ${pu ? 'pulse' : ''}
+            ${m ? 'marquee' : ''}
+            ${s ? 'solid' : ''}
+            ${outlined ? 'outlined' : ''}
+            ${accbar ? 'accent-bar' : ''}
+            ${noicon ? 'no-icon' : ''}
+            ${compact ? 'compact' : ''}
+            ${banner ? 'banner' : ''}
+            heading="Sandbox Result"
+            message="Testing properties in a unified context.">
         </ui-callout-banner>
       `;
     }
@@ -89,9 +105,9 @@ export function initCalloutBannerDemo() {
     size: () => {
       container.innerHTML = `
         <div class="cb-grid">
-          <ui-callout-banner size="md" variant="info" heading="Small Scale" message="Optimized for sidebar data."></ui-callout-banner>
-          <ui-callout-banner size="md" variant="info" heading="md Scale (Default)" message="Standard industrial UI spacing."></ui-callout-banner>
-          <ui-callout-banner size="lg" variant="info" heading="Large Scale" message="High visibility for critical dashboard views."></ui-callout-banner>
+          <ui-callout-banner size="sm" variant="info" heading="Small (sm)" message="Compact size, optimized for sidebar data and inline notices."></ui-callout-banner>
+          <ui-callout-banner size="md" variant="info" heading="Medium (md — default)" message="Standard industrial UI spacing for general use."></ui-callout-banner>
+          <ui-callout-banner size="lg" variant="info" heading="Large (lg)" message="High visibility for critical dashboard views and primary alerts."></ui-callout-banner>
         </div>
       `;
     },
@@ -156,6 +172,258 @@ export function initCalloutBannerDemo() {
         </div>
       `;
     },
+    enterfrom: () => {
+      container.innerHTML = `
+        <div class="cb-grid">
+          <span class="cb-section-label">Entrance animation direction — controlled by the <code>enter-from</code> prop</span>
+          <ui-callout-banner id="cb-anim-demo" enter-from="top" variant="info" heading="Slide in from Top (default)" message="Animate in from the top edge."></ui-callout-banner>
+          <div style="display:flex; gap:8px; flex-wrap:wrap;">
+            <ui-button variant="outline" id="cb-anim-top">top</ui-button>
+            <ui-button variant="outline" id="cb-anim-bottom">bottom</ui-button>
+            <ui-button variant="outline" id="cb-anim-left">left</ui-button>
+            <ui-button variant="outline" id="cb-anim-right">right</ui-button>
+            <ui-button variant="outline" id="cb-anim-fade">fade</ui-button>
+          </div>
+          <div class="cb-grid" style="margin-top:16px;">
+            <span class="cb-section-label">All directions at once</span>
+            <ui-callout-banner enter-from="top"    variant="info"    heading="enter-from=&quot;top&quot;"    message="Slides in from the top."></ui-callout-banner>
+            <ui-callout-banner enter-from="bottom" variant="success" heading="enter-from=&quot;bottom&quot;" message="Slides in from the bottom."></ui-callout-banner>
+            <ui-callout-banner enter-from="left"   variant="warning" heading="enter-from=&quot;left&quot;"   message="Slides in from the left."></ui-callout-banner>
+            <ui-callout-banner enter-from="right"  variant="danger"  heading="enter-from=&quot;right&quot;"  message="Slides in from the right."></ui-callout-banner>
+            <ui-callout-banner enter-from="fade"   variant="neutral" heading="enter-from=&quot;fade&quot;"   message="Fades in without directional movement."></ui-callout-banner>
+          </div>
+        </div>
+      `;
+
+      const directions = ['top', 'bottom', 'left', 'right', 'fade'];
+      directions.forEach(dir => {
+        document.getElementById('cb-anim-' + dir)?.addEventListener('click', () => {
+          const wrapper = document.getElementById('cb-anim-demo');
+          if (!wrapper) return;
+          // Re-create element to re-trigger animation
+          const parent = wrapper.parentNode;
+          const next = wrapper.nextSibling;
+          wrapper.remove();
+          const el = document.createElement('ui-callout-banner');
+          el.id = 'cb-anim-demo';
+          el.setAttribute('enter-from', dir);
+          el.setAttribute('variant', 'info');
+          el.setAttribute('heading', 'Slide in from ' + dir.charAt(0).toUpperCase() + dir.slice(1));
+          el.setAttribute('message', 'Animating with enter-from="' + dir + '"');
+          parent.insertBefore(el, next);
+        });
+      });
+    },
+
+    progressprop: () => {
+      container.innerHTML = `
+        <div class="cb-grid">
+          <span class="cb-section-label">Determinate progress bar — set <code>progress</code> (0–100) to show a fixed-width indicator bar</span>
+          <ui-callout-banner progress="25" variant="info"    heading="Uploading..."      message="package.zip — 25% complete"></ui-callout-banner>
+          <ui-callout-banner progress="60" variant="warning" heading="Processing..."     message="Analysing 60% of records — please wait."></ui-callout-banner>
+          <ui-callout-banner progress="90" variant="success" heading="Almost Done"       message="Finalising deployment, 90% complete."></ui-callout-banner>
+          <ui-callout-banner progress="100" variant="success" solid heading="Complete!" message="All files transferred successfully."></ui-callout-banner>
+
+          <span class="cb-section-label" style="margin-top:8px;">Interactive — drag the slider to update progress live</span>
+          <div style="display:flex; flex-direction:column; gap:12px;">
+            <div style="display:flex; align-items:center; gap:12px;">
+              <label style="font-size:13px; font-weight:600; white-space:nowrap;">Progress: <span id="cb-prog-val">45</span>%</label>
+              <input type="range" id="cb-prog-slider" min="0" max="100" value="45" style="flex:1;">
+            </div>
+            <ui-callout-banner id="cb-prog-banner" progress="45" variant="info" heading="Custom Progress" message="Adjust the slider above to see the progress bar update."></ui-callout-banner>
+          </div>
+        </div>
+      `;
+
+      document.getElementById('cb-prog-slider')?.addEventListener('input', e => {
+        const val = e.target.value;
+        document.getElementById('cb-prog-val').textContent = val;
+        const banner = document.getElementById('cb-prog-banner');
+        if (banner) banner.setAttribute('progress', val);
+      });
+
+      // ── Status Variant ──────────────────────────────────────────────────────
+      container.querySelector('.cb-grid')?.insertAdjacentHTML('beforeend', `
+        <span class="cb-section-label" style="margin-top:8px;">Status Variant — <code>ui-progress status-bar</code> on top of a callout banner</span>
+
+        <!-- 4 lifecycle states -->
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="0" status-bar stroke-width="5"></ui-progress>
+            <ui-callout-banner variant="neutral" heading="Database Backup" message="Task is queued and waiting to begin." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #bfdbfe; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="55" status-bar stroke-width="5" stroke-color="#3b82f6"></ui-progress>
+            <ui-callout-banner variant="info" heading="File Upload" message="package.zip — 55% transferred to remote storage." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #fed7aa; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="72" status="interrupted" status-bar stroke-width="5" stroke-color="#f59e0b"></ui-progress>
+            <ui-callout-banner variant="warning" heading="Deploy Job" message="Deployment halted at 72%. Resume when ready." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #bbf7d0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="100" status-bar stroke-width="5" stroke-color="#22c55e"></ui-progress>
+            <ui-callout-banner variant="success" heading="Data Migration" message="All 1,248 records transferred successfully." no-icon></ui-callout-banner>
+          </div>
+        </div>
+
+        <!-- Custom labels -->
+        <span class="cb-section-label" style="margin-top:8px;">Custom Labels — override any state text via <code>status-labels</code></span>
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="0" status-bar stroke-width="5"
+              status-labels='{"notStarted":"Queued","running":"Deploying","interrupted":"Rolled Back","completed":"Live"}'></ui-progress>
+            <ui-callout-banner variant="neutral" heading="CI/CD Pipeline" message="Waiting in queue. Labels: Queued / Deploying / Rolled Back / Live." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #bfdbfe; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="38" status-bar stroke-width="5" stroke-color="#3b82f6"
+              status-labels='{"notStarted":"Pending","running":"Uploading","interrupted":"Paused","completed":"Sent"}'></ui-progress>
+            <ui-callout-banner variant="info" heading="File Transfer" message="Custom labels: Pending / Uploading / Paused / Sent." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #fed7aa; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="61" status="interrupted" status-bar stroke-width="5" stroke-color="#f59e0b"
+              status-labels='{"interrupted":"On Hold"}'></ui-progress>
+            <ui-callout-banner variant="warning" heading="Partial Override" message='Only "interrupted" → "On Hold"; other labels stay default.' no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #bbf7d0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="100" status-bar stroke-width="5" stroke-color="#22c55e"
+              status-labels='{"completed":"All Done!"}'></ui-progress>
+            <ui-callout-banner variant="success" heading="Batch Job" message='Completed label overridden to "All Done!"' no-icon></ui-callout-banner>
+          </div>
+        </div>
+
+        <!-- Badge alignment -->
+        <span class="cb-section-label" style="margin-top:8px;">Badge Alignment — <code>status-bar-align</code>: left · center · right</span>
+        <div style="display:flex; flex-direction:column; gap:10px;">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="60" status-bar status-bar-align="left"   stroke-width="5" stroke-color="#3b82f6"></ui-progress>
+            <ui-callout-banner variant="info" heading="Align: left (default)" message="Badge on left, percentage on right." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="60" status-bar status-bar-align="center" stroke-width="5" stroke-color="#8b5cf6"></ui-progress>
+            <ui-callout-banner variant="neutral" heading="Align: center" message="Badge and percentage both centred." no-icon></ui-callout-banner>
+          </div>
+          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+            <ui-progress percent="60" status-bar status-bar-align="right"  stroke-width="5" stroke-color="#22c55e"></ui-progress>
+            <ui-callout-banner variant="success" heading="Align: right" message="Percentage on left, badge on right." no-icon></ui-callout-banner>
+          </div>
+        </div>
+
+        <!-- Interactive -->
+        <span class="cb-section-label" style="margin-top:8px;">Interactive — live controls</span>
+        <div style="display:flex; flex-direction:column; gap:12px;">
+          <!-- Controls row -->
+          <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+            <label style="font-size:13px; font-weight:600; white-space:nowrap;">Progress: <span id="cb-st-val">0</span>%</label>
+            <input type="range" id="cb-st-slider" min="0" max="100" value="0" style="flex:1; min-width:120px;">
+            <button id="cb-st-interrupt" style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #f59e0b; background:#fff7ed; color:#b45309; cursor:pointer; white-space:nowrap;">⛔ Interrupt</button>
+            <button id="cb-st-reset"     style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">↺ Reset</button>
+          </div>
+          <!-- Alignment + label inputs row -->
+          <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; padding:14px 16px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; gap:6px; flex-shrink:0;">
+              <span style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">Align</span>
+              <button id="cb-st-al-left"   style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Left</button>
+              <button id="cb-st-al-center" style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Center</button>
+              <button id="cb-st-al-right"  style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Right</button>
+            </div>
+            <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; min-width:280px;">
+              ${['notStarted','running','interrupted','completed'].map((k,i) => `
+                <label style="display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
+                  ${['Not Started','Running','Interrupted','Completed'][i]}
+                  <input id="cb-st-lbl-${k}" type="text" placeholder="${['Not Started','Running','Interrupted','Completed'][i]}" style="padding:4px 7px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+                </label>`).join('')}
+            </div>
+          </div>
+          <!-- Live banner -->
+          <div id="cb-st-wrapper" style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:border-color 0.3s;">
+            <ui-progress id="cb-st-prog" percent="0" status-bar status-bar-align="left" stroke-width="5"></ui-progress>
+            <ui-callout-banner id="cb-st-banner" variant="neutral" heading="CI/CD Pipeline" message="Waiting to begin deployment." no-icon></ui-callout-banner>
+          </div>
+        </div>
+      `);
+
+      const stateConfig = {
+        notStarted:  { variant:'neutral',  color:'#94a3b8', border:'#e2e8f0',  status:'normal',      message:'Waiting to begin deployment.' },
+        running:     { variant:'info',     color:'#3b82f6', border:'#bfdbfe',  status:'running',     message:'Deploying to production environment.' },
+        interrupted: { variant:'warning',  color:'#f59e0b', border:'#fed7aa',  status:'interrupted', message:'Deployment halted. Resume when ready.' },
+        completed:   { variant:'success',  color:'#22c55e', border:'#bbf7d0',  status:'completed',   message:'All services deployed and healthy.' },
+      };
+
+      let stInterrupted = false;
+
+      function syncStLabels() {
+        const labels = {};
+        ['notStarted','running','interrupted','completed'].forEach(k => {
+          const v = document.getElementById(`cb-st-lbl-${k}`)?.value.trim();
+          if (v) labels[k] = v;
+        });
+        const prog = document.getElementById('cb-st-prog');
+        if (!prog) return;
+        if (Object.keys(labels).length) {
+          prog.setAttribute('status-labels', JSON.stringify(labels));
+        } else {
+          prog.removeAttribute('status-labels');
+        }
+      }
+
+      function applyStStatus(pct, interrupted) {
+        const cfg = interrupted  ? stateConfig.interrupted
+                  : pct === 0   ? stateConfig.notStarted
+                  : pct >= 100  ? stateConfig.completed
+                  :               stateConfig.running;
+
+        const prog    = document.getElementById('cb-st-prog');
+        const wrapper = document.getElementById('cb-st-wrapper');
+        const banner  = document.getElementById('cb-st-banner');
+        const valEl   = document.getElementById('cb-st-val');
+
+        if (valEl)   valEl.textContent = pct;
+        if (wrapper) wrapper.style.borderColor = cfg.border;
+        if (prog) {
+          prog.setAttribute('percent', pct);
+          prog.setAttribute('status', cfg.status);
+          prog.setAttribute('stroke-color', cfg.color);
+        }
+        if (banner) {
+          banner.setAttribute('variant', cfg.variant);
+          banner.setAttribute('message', cfg.message + (!interrupted && pct > 0 && pct < 100 ? ` (${pct}%)` : ''));
+        }
+      }
+
+      document.getElementById('cb-st-slider')?.addEventListener('input', e => {
+        stInterrupted = false;
+        applyStStatus(+e.target.value, false);
+      });
+      document.getElementById('cb-st-interrupt')?.addEventListener('click', () => {
+        stInterrupted = true;
+        applyStStatus(+document.getElementById('cb-st-slider').value, true);
+      });
+      document.getElementById('cb-st-reset')?.addEventListener('click', () => {
+        stInterrupted = false;
+        document.getElementById('cb-st-slider').value = 0;
+        applyStStatus(0, false);
+      });
+
+      // Alignment toggles
+      ['left','center','right'].forEach(a => {
+        document.getElementById(`cb-st-al-${a}`)?.addEventListener('click', () => {
+          document.getElementById('cb-st-prog')?.setAttribute('status-bar-align', a);
+          ['left','center','right'].forEach(x => {
+            const b = document.getElementById(`cb-st-al-${x}`);
+            const on = x === a;
+            b.style.borderColor = on ? '#3b82f6' : '#e2e8f0';
+            b.style.background  = on ? '#eff6ff' : '#f8fafc';
+            b.style.color       = on ? '#2563eb' : '#475569';
+          });
+        });
+      });
+
+      // Custom label inputs
+      ['notStarted','running','interrupted','completed'].forEach(k => {
+        document.getElementById(`cb-st-lbl-${k}`)?.addEventListener('input', syncStLabels);
+      });
+    },
+
     annotations: () => {
       container.innerHTML = `
         <div class="demo-card-lite">
@@ -309,11 +577,30 @@ export function initCalloutBannerDemo() {
                 <option value="right">right</option>
               </ui-dropdown>
               
+              <ui-dropdown id="pg-size" label="SIZE" value="md">
+                <option value="sm">sm</option>
+                <option value="md" selected>md</option>
+                <option value="lg">lg</option>
+              </ui-dropdown>
+
+              <ui-dropdown id="pg-enter" label="ENTER FROM" value="top">
+                <option value="top">top</option>
+                <option value="bottom">bottom</option>
+                <option value="left">left</option>
+                <option value="right">right</option>
+                <option value="fade">fade</option>
+              </ui-dropdown>
+
               <div style="display:flex; flex-direction:column; gap:8px;">
                  <ui-checkbox id="pg-l" label="loading"></ui-checkbox>
                  <ui-checkbox id="pg-pu" label="pulse"></ui-checkbox>
                  <ui-checkbox id="pg-m" label="marquee"></ui-checkbox>
                  <ui-checkbox id="pg-s" label="solid"></ui-checkbox>
+                 <ui-checkbox id="pg-outlined" label="outlined"></ui-checkbox>
+                 <ui-checkbox id="pg-accbar" label="accent-bar"></ui-checkbox>
+                 <ui-checkbox id="pg-noicon" label="no-icon"></ui-checkbox>
+                 <ui-checkbox id="pg-compact" label="compact"></ui-checkbox>
+                 <ui-checkbox id="pg-banner" label="banner"></ui-checkbox>
               </div>
             </div>
             <div id="pg-p-target" style="background:var(--bg-primary); border-radius:12px; border:2px dashed var(--border-default); display:flex; align-items:center; justify-content:center; padding:20px;"></div>
@@ -322,12 +609,19 @@ export function initCalloutBannerDemo() {
       `;
 
       const controls = [
-        { id: 'pg-v', event: 'dropdownChange' },
-        { id: 'pg-p', event: 'dropdownChange' },
-        { id: 'pg-l', event: 'checkboxChange' },
-        { id: 'pg-pu', event: 'checkboxChange' },
-        { id: 'pg-m', event: 'checkboxChange' },
-        { id: 'pg-s', event: 'checkboxChange' },
+        { id: 'pg-v',        event: 'dropdownChange' },
+        { id: 'pg-p',        event: 'dropdownChange' },
+        { id: 'pg-size',     event: 'dropdownChange' },
+        { id: 'pg-enter',    event: 'dropdownChange' },
+        { id: 'pg-l',        event: 'checkboxChange' },
+        { id: 'pg-pu',       event: 'checkboxChange' },
+        { id: 'pg-m',        event: 'checkboxChange' },
+        { id: 'pg-s',        event: 'checkboxChange' },
+        { id: 'pg-outlined', event: 'checkboxChange' },
+        { id: 'pg-accbar',   event: 'checkboxChange' },
+        { id: 'pg-noicon',   event: 'checkboxChange' },
+        { id: 'pg-compact',  event: 'checkboxChange' },
+        { id: 'pg-banner',   event: 'checkboxChange' },
       ];
       controls.forEach(c => {
         document.getElementById(c.id)?.addEventListener(c.event, pgUpdate);
@@ -339,15 +633,11 @@ export function initCalloutBannerDemo() {
   const showTab = tab => {
     if (demoMap[tab]) {
       demoMap[tab]();
-
-      // Update nav button styles
-      // if (nav) {
-      //   nav.querySelectorAll('ui-button').forEach(btn => {
-      //     const isMatch = btn.getAttribute('data-tab') === tab;
-      //     btn.variant = isMatch ? 'solid' : 'soft';
-      //     btn.color = isMatch ? (tab === 'playground' ? 'primary' : 'secondary') : 'secondary';
-      //   });
-      // }
+      if (nav) {
+        nav.querySelectorAll('ui-button').forEach(btn => {
+          btn.selected = btn.getAttribute('data-tab') === tab;
+        });
+      }
     }
   };