atomicuilibrary 0.0.1 → 0.1.0

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

@@ -282,7 +282,7 @@ export function initRadioDemo() {
         <p class="specimen-description">High-fidelity radio archetypes for exclusive state management.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px;">
-           <div style="padding: 32px; background: #0f172a; border-radius: 20px; color: white;">
+           <div style="padding: 32px; background: #0f172a; border-radius: 20px; color: white; --label-color: white; --label-subtitle-color: rgba(255,255,255,0.7); --text-primary: white; --text-secondary: rgba(255,255,255,0.7);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Glassmorphism</h4>
               <ui-radio 
                 label="Frosted Sphere" 

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

@@ -0,0 +1,137 @@
+// Splitter Layout Demo
+export function initSplitterDemo() {
+  const section = document.getElementById('splitter');
+  if (!section) return;
+
+  section.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
+      <h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
+        <ui-icon name="columns" library="lucide" size="24px"></ui-icon> Splitter Partition Container
+      </h2>
+      <div style="display: flex; gap: 10px;">
+        <ui-button onclick="showHorizontalSplitter()"
+          style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px;">
+          <ui-icon name="rotate-ccw" library="lucide" size="14px"></ui-icon> Reset View
+        </ui-button>
+        <ui-button onclick="showSection('home')"
+          style="background-color: #6b7280; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;">
+          <ui-icon name="arrow-left" library="lucide" size="12px"></ui-icon> Back to Home
+        </ui-button>
+      </div>
+    </div>
+    <p>Flexible split views supporting proportional sizing, gutter customize colors, drag resize, snap boundaries, and double-click collapse states.</p>
+
+    <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
+      <ui-button onclick="showHorizontalSplitter()" variant="outline"><ui-icon name="columns" library="lucide" size="16px"></ui-icon> Horizontal Split</ui-button>
+      <ui-button onclick="showVerticalSplitter()" variant="outline"><ui-icon name="rows" library="lucide" size="16px"></ui-icon> Vertical Split</ui-button>
+      <ui-button onclick="showNestedSplitter()" variant="outline"><ui-icon name="layout" library="lucide" size="16px"></ui-icon> Nested Layout Zones</ui-button>
+    </div>
+
+    <div id="splitterDemoContainer" style="margin-top: 20px;"></div>
+  `;
+
+  setTimeout(() => {
+    showHorizontalSplitter();
+  }, 100);
+}
+
+// Horizontal Splitter Demo
+window.showHorizontalSplitter = function () {
+  const container = document.getElementById('splitterDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 24px;">⚖️</span>
+        Proportional Horizontal Splitter
+      </h3>
+      <p style="color: #6b7280; margin-bottom: 20px;">Two side-by-side content containers. Grab the vertical bar and drag left or right.</p>
+      
+      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 350px; background: #0f172a;">
+        <ui-splitter direction="horizontal" gutter-size="10" gutter-color="#1e293b" gutter-hover-color="#3b82f6" snap-threshold="15">
+          <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
+            <h4 style="margin-top: 0; color: #3b82f6;">Left Panel</h4>
+            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the left zone. Dragging the center splitter handles resizing in real-time using proportional percentage calculation.</p>
+          </div>
+          <div slot="panel-1" style="padding: 24px; background: #0f172a; color: white; height: 100%; box-sizing: border-box;">
+            <h4 style="margin-top: 0; color: #10b981;">Right Panel</h4>
+            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the right zone. It automatically shrinks or expands to occupy all remaining width space in the parent component.</p>
+          </div>
+        </ui-splitter>
+      </div>
+    </div>
+  `;
+};
+
+// Vertical Splitter Demo
+window.showVerticalSplitter = function () {
+  const container = document.getElementById('splitterDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 24px;">↕️</span>
+        Vertical Stack Splitter
+      </h3>
+      <p style="color: #6b7280; margin-bottom: 20px;">Top and bottom stacked containers divided by a horizontal gutter. Drag up or down.</p>
+      
+      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 350px; background: #0f172a;">
+        <ui-splitter direction="vertical" gutter-size="10" gutter-color="#1e293b" gutter-hover-color="#10b981" snap-threshold="15">
+          <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
+            <h4 style="margin-top: 0; color: #10b981;">Top Console</h4>
+            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the upper console pane. Excellent for code, workspace canvases, or visualization boards.</p>
+          </div>
+          <div slot="panel-1" style="padding: 24px; background: #0f172a; color: white; height: 100%; box-sizing: border-box;">
+            <h4 style="margin-top: 0; color: #f59e0b;">Bottom Terminal Output</h4>
+            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the lower output pane. Ideal for terminal interfaces, logs, build stats, and problems lists.</p>
+          </div>
+        </ui-splitter>
+      </div>
+    </div>
+  `;
+};
+
+// Nested Splitter Demo
+window.showNestedSplitter = function () {
+  const container = document.getElementById('splitterDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 24px;">💠</span>
+        Nested Layout Zones
+      </h3>
+      <p style="color: #6b7280; margin-bottom: 20px;">Combining horizontal and vertical splitters inside each other to create complete app workspace mockups.</p>
+      
+      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 400px; background: #0f172a;">
+        <ui-splitter direction="horizontal" gutter-size="8" gutter-color="#0f172a" gutter-hover-color="#a855f7">
+          <!-- Sidebar -->
+          <div slot="panel-0" style="padding: 20px; background: #1e1b4b; color: white; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #312e81;">
+            <ui-icon name="folder-tree" library="lucide" size="24px"></ui-icon>
+            <h5 style="margin: 10px 0 0; color: #c084fc;">Files</h5>
+            <span style="font-size: 12px; color: #818cf8;">Sidebar Pane</span>
+          </div>
+          
+          <!-- Main Content split vertically -->
+          <div slot="panel-1" style="height: 100%;">
+            <ui-splitter direction="vertical" gutter-size="8" gutter-color="#0f172a" gutter-hover-color="#3b82f6">
+              <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
+                <h4 style="margin-top: 0; color: #3b82f6;">Code Editor Workspace</h4>
+                <pre style="margin: 10px 0; padding: 12px; background: #0f172a; border-radius: 6px; color: #38bdf8; font-family: monospace; font-size: 13px;">const splitter = document.querySelector('ui-splitter');</pre>
+              </div>
+              <div slot="panel-1" style="padding: 20px; background: #0f172a; color: white; height: 100%; box-sizing: border-box; border-top: 1px solid #1e293b;">
+                <h5 style="margin-top: 0; color: #f43f5e; display: flex; align-items: center; gap: 6px;">
+                  <ui-icon name="terminal" library="lucide" size="14px"></ui-icon> Terminal Console
+                </h5>
+                <span style="font-size: 12px; color: #94a3b8; font-family: monospace;">$ npm run dev --host</span>
+              </div>
+            </ui-splitter>
+          </div>
+        </ui-splitter>
+      </div>
+    </div>
+  `;
+};

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

@@ -7,29 +7,36 @@ export function initTagDemo() {
     <p>Flexible tags for labels, categories, and status indicators.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 12px; flex-wrap: wrap;">
-      <ui-button label="Variants"  onclick="showTagVariants()" variant="outline"></ui-button>
-      <ui-button label="Interactive"  onclick="showCheckableTags()" variant="outline"></ui-button>
-      <ui-button label="Media & Icons"  onclick="showMediaTags()" variant="outline"></ui-button>
-      <ui-button label="Removable"  onclick="showRemovableTags()" variant="outline"></ui-button>
-      <ui-button label="Badges"  onclick="showTagBadges()" variant="outline"></ui-button>
-      <ui-button label="Premium Features"  onclick="showPremiumTags()" variant="outline"></ui-button>
-      <ui-button label="Advanced (Chip/Pill Mode)"  onclick="showTagAdvancedFeatures()" variant="outline"></ui-button>
-      <ui-button label="Design Guide (32px)"  onclick="showDesignGuide()" variant="outline"></ui-button>
-      <ui-button label="Shape Showcase"  onclick="showShapeShowcase()" variant="outline"></ui-button>
-      <ui-button label="Ticket Shapes"  onclick="showTicketDemo()" variant="outline"></ui-button>
-      <ui-button label="Auto Coloring"  onclick="showAutoColorTags()" variant="outline"></ui-button>
-      <ui-button label="Tag Groups"  onclick="showTagGroups()" variant="outline"></ui-button>
-      <ui-button label="Selection (Premium)"  onclick="showSelectionGroups()" variant="outline"></ui-button>
-      <ui-button label="Interactive (Premium)"  onclick="showPremiumGroups()" variant="outline"></ui-button>
-      <ui-button label="Input Validation"  onclick="showTagsInputValidation()" variant="outline"></ui-button>
-      <ui-button label="Rich Gradients"  onclick="showRichGradients()" variant="outline"></ui-button>
-      <ui-button label="Playground"  onclick="showTagPlayground()" variant="outline"></ui-button>
+      <ui-button label="Variants" data-demo="variants" onclick="showTagVariants()" variant="outline"></ui-button>
+      <ui-button label="Interactive" data-demo="interactive" onclick="showCheckableTags()" variant="outline"></ui-button>
+      <ui-button label="Media & Icons" data-demo="media" onclick="showMediaTags()" variant="outline"></ui-button>
+      <ui-button label="Removable" data-demo="removable" onclick="showRemovableTags()" variant="outline"></ui-button>
+      <ui-button label="Badges" data-demo="badges" onclick="showTagBadges()" variant="outline"></ui-button>
+      <ui-button label="Premium Features" data-demo="premium" onclick="showPremiumTags()" variant="outline"></ui-button>
+      <ui-button label="Advanced (Chip/Pill Mode)" data-demo="advanced" onclick="showTagAdvancedFeatures()" variant="outline"></ui-button>
+      <ui-button label="Design Guide (32px)" data-demo="design" onclick="showDesignGuide()" variant="outline"></ui-button>
+      <ui-button label="Shape Showcase" data-demo="shapes" onclick="showShapeShowcase()" variant="outline"></ui-button>
+      <ui-button label="Ticket Shapes" data-demo="ticket" onclick="showTicketDemo()" variant="outline"></ui-button>
+      <ui-button label="Auto Coloring" data-demo="autocolor" onclick="showAutoColorTags()" variant="outline"></ui-button>
+      <ui-button label="Tag Groups" data-demo="groups" onclick="showTagGroups()" variant="outline"></ui-button>
+      <ui-button label="Selection (Premium)" data-demo="selection" onclick="showSelectionGroups()" variant="outline"></ui-button>
+      <ui-button label="Interactive (Premium)" data-demo="premiumgroups" onclick="showPremiumGroups()" variant="outline"></ui-button>
+      <ui-button label="Input Validation" data-demo="validation" onclick="showTagsInputValidation()" variant="outline"></ui-button>
+      <ui-button label="Rich Gradients" data-demo="gradients" onclick="showRichGradients()" variant="outline"></ui-button>
+      <ui-button label="Playground" data-demo="playground" onclick="showTagPlayground()" variant="outline"></ui-button>
     </div>
 
     <div id="tagDemoContainer" style="margin-top: 20px;"></div>
   `;
 
+  const updateTagActiveBtn = demoName => {
+    section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+      btn.selected = btn.getAttribute('data-demo') === demoName;
+    });
+  };
+
   window.showTagVariants = () => {
+    updateTagActiveBtn('variants');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -47,6 +54,7 @@ export function initTagDemo() {
   };
 
   window.showCheckableTags = () => {
+    updateTagActiveBtn('interactive');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -62,6 +70,7 @@ export function initTagDemo() {
   };
 
   window.showMediaTags = () => {
+    updateTagActiveBtn('media');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -94,6 +103,7 @@ export function initTagDemo() {
   };
 
   window.showRemovableTags = () => {
+    updateTagActiveBtn('removable');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -138,6 +148,7 @@ export function initTagDemo() {
   };
 
   window.showTagBadges = () => {
+    updateTagActiveBtn('badges');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -151,16 +162,24 @@ export function initTagDemo() {
         </div>
 
         <h3>Counters & Metadata</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;">
           <ui-tag label="Comments" counter="24" color="secondary" variant="light"></ui-tag>
           <ui-tag label="Likes" counter="1.2k" color="primary" variant="outlined"></ui-tag>
           <ui-tag label="Shared" counter="8" color="success" variant="light"></ui-tag>
         </div>
+
+        <h3>Both Badge & Counter</h3>
+        <p style="color: #6b7280; margin-bottom: 20px;">Tags can display both an overlay badge (e.g. Danger/Red, Success/Green) and an inline counter (default gray) with distinct, different colors.</p>
+        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+          <ui-tag label="Inbox Messages" badge="5" badge-color="danger" counter="12" color="primary" variant="light"></ui-tag>
+          <ui-tag label="System Health" badge="Critical" badge-color="warning" counter="99.9%" color="success" variant="outlined"></ui-tag>
+        </div>
       </div>
     `;
   };
 
   window.showTagAdvancedFeatures = () => {
+    updateTagActiveBtn('advanced');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -205,6 +224,7 @@ export function initTagDemo() {
   };
 
   window.showDesignGuide = () => {
+    updateTagActiveBtn('design');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -244,6 +264,7 @@ export function initTagDemo() {
   };
 
   window.showShapeShowcase = () => {
+    updateTagActiveBtn('shapes');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -299,6 +320,7 @@ export function initTagDemo() {
   };
 
   window.showTicketDemo = () => {
+    updateTagActiveBtn('ticket');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -333,6 +355,7 @@ export function initTagDemo() {
   };
 
   window.showAutoColorTags = () => {
+    updateTagActiveBtn('autocolor');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -352,6 +375,7 @@ export function initTagDemo() {
   };
 
   window.showPremiumTags = () => {
+    updateTagActiveBtn('premium');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -442,6 +466,7 @@ export function initTagDemo() {
   };
 
   window.showTagGroups = () => {
+    updateTagActiveBtn('groups');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -527,6 +552,7 @@ export function initTagDemo() {
   };
 
   window.showSelectionGroups = () => {
+    updateTagActiveBtn('selection');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -557,6 +583,7 @@ export function initTagDemo() {
   };
 
   window.showPremiumGroups = () => {
+    updateTagActiveBtn('premiumgroups');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -591,6 +618,7 @@ export function initTagDemo() {
   };
 
   window.showTagsInputValidation = () => {
+    updateTagActiveBtn('validation');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -618,6 +646,7 @@ export function initTagDemo() {
   };
 
   window.showRichGradients = () => {
+    updateTagActiveBtn('gradients');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -643,6 +672,7 @@ export function initTagDemo() {
   };
 
   window.showTagPlayground = () => {
+    updateTagActiveBtn('playground');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `

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

@@ -13,20 +13,27 @@ export function initTimelineDemo() {
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Displays a sequence of events in vertical or horizontal orientation.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button label="🎮 Interactive Playground"  onclick="showInteractiveTimeline()" style="--ui-button-bg: #8b5cf6; --ui-button-text-color: white;" variant="outline"></ui-button>
-      <ui-button label="Vertical Layouts"  onclick="showVerticalTimeline()" variant="outline"></ui-button>
-      <ui-button label="Horizontal Layouts"  onclick="showHorizontalTimeline()" variant="outline"></ui-button>
-      <ui-button label="Overflow & Scroll"  onclick="showOverflowTimeline()" variant="outline"></ui-button>
-      <ui-button label="Multi-line Grid"  style="--ui-button-bg: #ec4899; --ui-button-text-color: white;" onclick="showMultilineTimeline()" variant="outline"></ui-button>
-      <ui-button label="Panels & Markers"  style="--ui-button-bg: #6366f1; --ui-button-text-color: white;" onclick="showAdvancedTimeline()" variant="outline"></ui-button>
-      <ui-button label="Filtering (Premium)"  style="--ui-button-bg: #f43f5e; --ui-button-text-color: white;" onclick="showFilteringTimeline()" variant="outline"></ui-button>
+      <ui-button label="🎮 Interactive Playground" data-demo="playground" onclick="showInteractiveTimeline()" style="--ui-button-bg: #8b5cf6; --ui-button-text-color: white;" variant="outline"></ui-button>
+      <ui-button label="Vertical Layouts" data-demo="vertical" onclick="showVerticalTimeline()" variant="outline"></ui-button>
+      <ui-button label="Horizontal Layouts" data-demo="horizontal" onclick="showHorizontalTimeline()" variant="outline"></ui-button>
+      <ui-button label="Overflow & Scroll" data-demo="overflow" onclick="showOverflowTimeline()" variant="outline"></ui-button>
+      <ui-button label="Multi-line Grid" data-demo="multiline" style="--ui-button-bg: #ec4899; --ui-button-text-color: white;" onclick="showMultilineTimeline()" variant="outline"></ui-button>
+      <ui-button label="Panels & Markers" data-demo="panels" style="--ui-button-bg: #6366f1; --ui-button-text-color: white;" onclick="showAdvancedTimeline()" variant="outline"></ui-button>
+      <ui-button label="Filtering (Premium)" data-demo="filtering" style="--ui-button-bg: #f43f5e; --ui-button-text-color: white;" onclick="showFilteringTimeline()" variant="outline"></ui-button>
     </div>
 
     <div id="timelineDemoContainer" style="margin-top: 20px;"></div>
   `;
 
+  const updateTimelineActiveBtn = demoName => {
+    section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+      btn.selected = btn.getAttribute('data-demo') === demoName;
+    });
+  };
+
   // Place showAdvancedTimeline here before others to minimize context shift issues
   window.showAdvancedTimeline = () => {
+    updateTimelineActiveBtn('panels');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -69,6 +76,7 @@ export function initTimelineDemo() {
   };
 
   window.showInteractiveTimeline = () => {
+    updateTimelineActiveBtn('playground');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -115,6 +123,7 @@ export function initTimelineDemo() {
   };
 
   window.showMultilineTimeline = () => {
+    updateTimelineActiveBtn('multiline');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -140,6 +149,7 @@ export function initTimelineDemo() {
   };
 
   window.showOverflowTimeline = () => {
+    updateTimelineActiveBtn('overflow');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -281,6 +291,7 @@ export function initTimelineDemo() {
   };
 
   window.showFilteringTimeline = () => {
+    updateTimelineActiveBtn('filtering');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -307,6 +318,7 @@ export function initTimelineDemo() {
   };
 
   window.showVerticalTimeline = () => {
+    updateTimelineActiveBtn('vertical');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -331,6 +343,7 @@ export function initTimelineDemo() {
   };
 
   window.showHorizontalTimeline = () => {
+    updateTimelineActiveBtn('horizontal');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
     container.innerHTML = `

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

@@ -60,17 +60,17 @@ export const initTooltipDemo = () => {
         <p>9 directional points + smart <code>auto</code> positioning with flip & shift logic.</p>
         <div style="display: flex; justify-content: center; padding: 40px 20px;">
           <div style="display: grid; grid-template-columns: repeat(3, 120px); gap: 20px; justify-items: center;">
-            <ui-tooltip content="Top-Left" position="top-left"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
-            <ui-tooltip content="Top Center" position="top"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Top-Right" position="top-right"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
+            <ui-tooltip content="Top-Left" position="top-left"><ui-button slot="target" variant="outline" size="md">Top-Left</ui-button></ui-tooltip>
+            <ui-tooltip content="Top Center" position="top"><ui-button slot="target" variant="outline" size="md">Top Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Top-Right" position="top-right"><ui-button slot="target" variant="outline" size="md">Top-Right</ui-button></ui-tooltip>
             
-            <ui-tooltip content="Left Center" position="left"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Auto Position (Flipped)" position="auto" variant="error"><ui-button slot="target" variant="danger" size="md"TO</ui-button></ui-tooltip>
-            <ui-tooltip content="Right Center" position="right"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
+            <ui-tooltip content="Left Center" position="left"><ui-button slot="target" variant="outline" size="md">Left Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Auto Position (Flipped)" position="auto" variant="error"><ui-button slot="target" variant="danger" size="md">Auto</ui-button></ui-tooltip>
+            <ui-tooltip content="Right Center" position="right"><ui-button slot="target" variant="outline" size="md">Right Center</ui-button></ui-tooltip>
             
-            <ui-tooltip content="Bottom-Left" position="bottom-left"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
-            <ui-tooltip content="Bottom Center" position="bottom"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Bottom-Right" position="bottom-right"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom-Left" position="bottom-left"><ui-button slot="target" variant="outline" size="md">Bottom-Left</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom Center" position="bottom"><ui-button slot="target" variant="outline" size="md">Bottom Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom-Right" position="bottom-right"><ui-button slot="target" variant="outline" size="md">Bottom-Right</ui-button></ui-tooltip>
           </div>
         </div>
       </section>
@@ -80,13 +80,13 @@ export const initTooltipDemo = () => {
         <div class="card-header-icon"><ui-icon name="palette" library="lucide" size="18px"></ui-icon> Variants & Glassmorphism</div>
         <p>Semantic themes and modern visual effects for elite-tier interfaces.</p>
         <div class="demo-flex-wrap">
-          <ui-tooltip content="Dark theme (Default)" variant="dark"><ui-button slot="target" size="md"rk</ui-button></ui-tooltip>
-          <ui-tooltip content="Light theme" variant="light"><ui-button slot="target" size="md"riant="outline">Light</ui-button></ui-tooltip>
-          <ui-tooltip content="Primary theme" variant="primary"><ui-button slot="target" size="md"imary</ui-button></ui-tooltip>
-          <ui-tooltip content="Info theme" variant="info"><ui-button slot="target" size="md"riant="info">Info</ui-button></ui-tooltip>
-          <ui-tooltip content="Success theme" variant="success"><ui-button slot="target" size="md"riant="success">Success</ui-button></ui-tooltip>
-          <ui-tooltip content="Warning theme" variant="warning"><ui-button slot="target" size="md"riant="warning">Warning</ui-button></ui-tooltip>
-          <ui-tooltip content="Error theme" variant="error"><ui-button slot="target" size="md"riant="danger">Error</ui-button></ui-tooltip>
+          <ui-tooltip content="Dark theme (Default)" variant="dark"><ui-button slot="target" size="md" variant="outline">Dark</ui-button></ui-tooltip>
+          <ui-tooltip content="Light theme" variant="light"><ui-button slot="target" size="md" variant="outline">Light</ui-button></ui-tooltip>
+          <ui-tooltip content="Primary theme" variant="primary"><ui-button slot="target" size="md" variant="primary">Primary</ui-button></ui-tooltip>
+          <ui-tooltip content="Info theme" variant="info"><ui-button slot="target" size="md" variant="info">Info</ui-button></ui-tooltip>
+          <ui-tooltip content="Success theme" variant="success"><ui-button slot="target" size="md" variant="success">Success</ui-button></ui-tooltip>
+          <ui-tooltip content="Warning theme" variant="warning"><ui-button slot="target" size="md" variant="warning">Warning</ui-button></ui-tooltip>
+          <ui-tooltip content="Error theme" variant="error"><ui-button slot="target" size="md" variant="danger">Error</ui-button></ui-tooltip>
         </div>
 
         <div class="demo-grid-3" style="margin-top: 32px;">
@@ -137,16 +137,16 @@ export const initTooltipDemo = () => {
 
         <div class="demo-grid-4" style="margin-top: 32px;">
            <ui-tooltip content="Linear timing (300ms)" transition-timing="linear" transition-duration="300" variant="error">
-             <ui-button slot="target" variant="danger" size="md"near Timing</ui-button>
+             <ui-button slot="target" variant="danger" size="md">Linear Timing</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Ease-in timing" transition-timing="ease-in" variant="success">
-             <ui-button slot="target" variant="success" size="md"se-In</ui-button>
+             <ui-button slot="target" variant="success" size="md">Ease-In</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Scale animation (500ms)" animation="scale" transition-duration="500" variant="primary">
-             <ui-button slot="target" variant="primary" size="md"ow Scale</ui-button>
+             <ui-button slot="target" variant="primary" size="md">Scale Timing</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Bounce effect" animation="bounce" variant="warning">
-             <ui-button slot="target" variant="warning" size="md"unce Effect</ui-button>
+             <ui-button slot="target" variant="warning" size="md">Bounce Effect</ui-button>
            </ui-tooltip>
         </div>
       </section>
@@ -182,10 +182,10 @@ export const initTooltipDemo = () => {
 
                 <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px">
                    <ui-tooltip content="Wait for 1.2 seconds..." show-delay="1200" variant="dark">
-                      <ui-button slot="target" variant="outline" size="md"ow delay (1.2s)</ui-button>
+                      <ui-button slot="target" variant="outline" size="md">Slow Delay (1.2s)</ui-button>
                    </ui-tooltip>
                    <ui-tooltip content="Hidden after 2 seconds..." hide-delay="2000" variant="dark">
-                      <ui-button slot="target" variant="outline" size="md"de delay (2s)</ui-button>
+                      <ui-button slot="target" variant="outline" size="md">Hide Delay (2s)</ui-button>
                    </ui-tooltip>
                 </div>
              </div>
@@ -202,25 +202,25 @@ export const initTooltipDemo = () => {
            <!-- Corners -->
            <div style="position: absolute; top: 20px; left: 20px;">
               <ui-tooltip content="Auto-shifts horizontally to stay in view" position="top-left" auto-shift="true" variant="primary">
-                 <ui-button slot="target" size="md"p Left Corner</ui-button>
+                 <ui-button slot="target" size="md">Top Left Corner</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; top: 20px; right: 20px;">
               <ui-tooltip content="Automatically flips to bottom if no space" position="top-right" auto-flip="true" variant="info">
-                 <ui-button slot="target" size="md"riant="info">Top Right Corner</ui-button>
+                 <ui-button slot="target" size="md" variant="info">Top Right Corner</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; bottom: 20px; left: 20px;">
               <ui-tooltip content="Shifts and flips as needed dynamically" position="bottom-left" auto-shift="true" auto-flip="true" variant="success">
-                 <ui-button slot="target" size="md"riant="success">Bottom Left</ui-button>
+                 <ui-button slot="target" size="md" variant="success">Bottom Left</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; bottom: 20px; right: 20px;">
               <ui-tooltip content="Smart positioning with viewport bounds" position="bottom-right" auto-shift="true" auto-flip="true" variant="warning">
-                 <ui-button slot="target" size="md"riant="warning">Bottom Right</ui-button>
+                 <ui-button slot="target" size="md" variant="warning">Bottom Right</ui-button>
               </ui-tooltip>
            </div>