atomicuilibrary 0.1.0 → 0.1.3

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

@@ -20,10 +20,12 @@ export function initFabDemo() {
       <ui-button id="btnFabFloatingWindow"  size="md" label="Floating Window" variant="outline"></ui-button>
       <ui-button id="btnFabSuper"  size="md" label="Super FAB (Dual Mode)" variant="outline"></ui-button>
       <ui-button id="btnFabInteractive"  size="md" label="🎮 Interactive Playground" variant="outline"></ui-button>
+      <ui-button id="btnFabScrollBehavior" size="md" label="📜 Scroll Behavior" variant="outline"></ui-button>
+      <ui-button id="btnFabSizes" size="md" label="📐 Sizes & Positions" variant="outline"></ui-button>
     </div>
 
     <div id="fabDemoContainer" style="margin-top: 20px; min-height: 400px; position: relative; border: 1px dashed #e2e8f0; border-radius: 12px; padding: 20px; overflow: hidden; background: rgba(255,255,255,0.02);">
-       <div id="fabContent" style="text-align: center; padding: 100px 20px; color: #64748b;">
+       <div id="fabContent" style="text-align: center; padding: 100px 20px; color:var(--text-secondary,#64748b);">
           <ui-icon name="mouse-pointer-2" size="48" style="opacity: 0.2; margin-bottom: 16px;"></ui-icon>
           <p>Select a demo above to see the FAB in action</p>
        </div>
@@ -60,7 +62,7 @@ export function initFabDemo() {
     content.innerHTML = `
       <h4>Basic Floating Action Button</h4>
       <p>Simple circular button with an icon. Primarily used for a single, prominent action.</p>
-      <div style="margin-top: 20px; font-size: 0.85rem; color: #94a3b8;">
+      <div style="margin-top: 20px; font-size: 0.85rem; color:var(--text-secondary,#64748b);">
         <code>&lt;ui-fab icon="plus" variant="primary"&gt;&lt;/ui-fab&gt;</code>
       </div>
     `;
@@ -86,7 +88,7 @@ export function initFabDemo() {
     content.innerHTML = `
       <h4>Extended FAB</h4>
       <p>Wider button that includes a text label. Useful when the icon alone isn't clear enough.</p>
-      <div style="margin-top: 20px; font-size: 0.85rem; color: #94a3b8;">
+      <div style="margin-top: 20px; font-size: 0.85rem; color:var(--text-secondary,#64748b);">
         <code>&lt;ui-fab type="extended" icon="plus" label="Create New Task"&gt;&lt;/ui-fab&gt;</code>
       </div>
     `;
@@ -103,7 +105,7 @@ export function initFabDemo() {
     fab.type = 'speed-dial';
     fab.variant = 'warning';
     fab.position = 'bottom-right';
-    fab.direction = 'up';
+    fab.direction = 'top';
     fab.toggle = true;
     fab.style.position = 'absolute';
 
@@ -119,7 +121,7 @@ export function initFabDemo() {
     content.innerHTML = `
       <h4>Speed Dial FAB</h4>
       <p>Opens a menu of related actions when clicked. Supports multiple directions and radial layouts.</p>
-      <div style="margin-top: 20px; font-size: 0.85rem; color: #94a3b8;">
+      <div style="margin-top: 20px; font-size: 0.85rem; color:var(--text-secondary,#64748b);">
         <code>&lt;ui-fab type="speed-dial" icon="plus"&gt;...&lt;/ui-fab&gt;</code>
       </div>
     `;
@@ -146,7 +148,7 @@ export function initFabDemo() {
     content.innerHTML = `
       <h4>Draggable FAB</h4>
       <p>Users can reposition the button by dragging it around the screen. Great for tools or sticky actions.</p>
-      <div style="margin-top: 20px; font-size: 0.85rem; color: #94a3b8;">
+      <div style="margin-top: 20px; font-size: 0.85rem; color:var(--text-secondary,#64748b);">
         <code>&lt;ui-fab is-draggable="true" icon="move"&gt;&lt;/ui-fab&gt;</code>
       </div>
     `;
@@ -197,7 +199,7 @@ export function initFabDemo() {
 
     fab.innerHTML = `
       <div slot="panel" style="display: flex; flex-direction: column; gap: 15px;">
-        <div style="background: #f8fafc; padding: 10px; border-radius: 8px; font-size: 13px; align-self: flex-start; max-width: 80%;">
+        <div style="background:var(--bg-secondary,#f8fafc); padding: 10px; border-radius: 8px; font-size: 13px; align-self: flex-start; max-width: 80%;">
           Hello! How can we help you today? 👋
         </div>
         <div style="background: #3DCD58; color: white; padding: 10px; border-radius: 8px; font-size: 13px; align-self: flex-end; max-width: 80%;">
@@ -215,7 +217,7 @@ export function initFabDemo() {
     content.innerHTML = `
       <h4>Floating Window Mode</h4>
       <p>Transforms the FAB into a launcher for a sophisticated floating window. Perfect for chat interfaces, quick settings, or mini-dashboards.</p>
-      <div style="margin-top: 20px; font-size: 0.85rem; color: #94a3b8;">
+      <div style="margin-top: 20px; font-size: 0.85rem; color:var(--text-secondary,#64748b);">
         <code>&lt;ui-fab panel="true" panel-title="Chat Support"&gt;...&lt;/ui-fab&gt;</code>
       </div>
     `;
@@ -282,7 +284,7 @@ export function initFabDemo() {
         <h4 style="margin-top: 0;">Interactive Configurator</h4>
         
         <div style="margin-bottom: 12px;">
-          <label style="display: block; font-size: 12px; margin-bottom: 4px; color: #94a3b8;">Variant</label>
+          <label style="display: block; font-size: 12px; margin-bottom: 4px; color:var(--text-secondary,#64748b);">Variant</label>
           <ui-dropdown id="fabPropVariant" value="primary" options='[
             {"label": "Primary", "value": "primary"},
             {"label": "Success", "value": "success"},
@@ -294,7 +296,7 @@ export function initFabDemo() {
         </div>
 
         <div style="margin-bottom: 12px;">
-          <label style="display: block; font-size: 12px; margin-bottom: 4px; color: #94a3b8;">Position</label>
+          <label style="display: block; font-size: 12px; margin-bottom: 4px; color:var(--text-secondary,#64748b);">Position</label>
           <ui-dropdown id="fabPropPosition" value="bottom-right" options='[
             {"label": "Bottom Right", "value": "bottom-right"},
             {"label": "Bottom Left", "value": "bottom-left"},
@@ -306,7 +308,7 @@ export function initFabDemo() {
         </div>
 
         <div style="margin-bottom: 12px;">
-          <label style="display: block; font-size: 12px; margin-bottom: 4px; color: #94a3b8;">Size</label>
+          <label style="display: block; font-size: 12px; margin-bottom: 4px; color:var(--text-secondary,#64748b);">Size</label>
           <ui-dropdown id="fabPropSize" value="md" options='[
             {"label": "Medium", "value": "md"},
             {"label": "Large", "value": "large"},
@@ -358,6 +360,88 @@ export function initFabDemo() {
     btnFabFloatingWindow: showFloatingWindowDemo,
     btnFabSuper: showSuperFab,
     btnFabInteractive: showInteractiveFab,
+    btnFabScrollBehavior: showFabScrollBehavior,
+    btnFabSizes: showFabSizes,
+  };
+
+  const showFabScrollBehavior = function () {
+    clearFabDemo();
+    const container = document.getElementById('fabDemoContainer');
+    if (!container) return;
+    container.style.height = '500px';
+    container.style.overflowY = 'auto';
+    container.innerHTML = `
+      <div style="height: 1200px; padding: 20px; position: relative;">
+        <h4 style="color: var(--text-primary); margin: 0 0 8px;">📜 Scroll Behavior Demo</h4>
+        <p style="color: var(--text-secondary, #64748b); font-size: 13px; margin: 0 0 16px;">Scroll down inside this box to see the FABs hide and re-appear.</p>
+
+        <div style="background: var(--bg-secondary,#f8fafc); border-radius: 12px; padding: 16px; margin-bottom: 16px;">
+          <p style="font-size: 12px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 8px;">hide-on-scroll — FAB disappears when scrolling down, reappears when scrolling up</p>
+        </div>
+        <div style="background: var(--bg-secondary,#f8fafc); border-radius: 12px; padding: 16px;">
+          <p style="font-size: 12px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 8px;">show-on-scroll-up — FAB only shows when user scrolls back up</p>
+        </div>
+
+        <ui-fab icon="add" variant="primary" position="bottom-right" hide-on-scroll="true" label="Hide on scroll"></ui-fab>
+        <ui-fab icon="arrow-up" variant="success" position="bottom-left" show-on-scroll-up="true" label="Scroll up to see"></ui-fab>
+      </div>
+    `;
+  };
+
+  const showFabSizes = function () {
+    clearFabDemo();
+    const container = document.getElementById('fabDemoContainer');
+    if (!container) return;
+    container.style.height = 'auto';
+    container.style.overflowY = 'visible';
+    container.innerHTML = `
+      <div style="padding: 24px; display: flex; flex-direction: column; gap: 40px;">
+
+        <div>
+          <h4 style="margin: 0 0 16px; font-size: 13px; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Size Variants</h4>
+          <div style="display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;">
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-fab icon="add" size="mini" variant="primary" position="static"></ui-fab>
+              <span style="font-size: 11px; color: var(--text-secondary,#64748b);">mini</span>
+            </div>
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-fab icon="add" size="sm" variant="primary" position="static"></ui-fab>
+              <span style="font-size: 11px; color: var(--text-secondary,#64748b);">small</span>
+            </div>
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-fab icon="add" size="md" variant="primary" position="static"></ui-fab>
+              <span style="font-size: 11px; color: var(--text-secondary,#64748b);">medium</span>
+            </div>
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <ui-fab icon="add" size="lg" variant="primary" position="static"></ui-fab>
+              <span style="font-size: 11px; color: var(--text-secondary,#64748b);">large</span>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 16px; font-size: 13px; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Color Variants</h4>
+          <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+            ${['primary','secondary','success','danger','warning','info'].map(c =>
+              `<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                <ui-fab icon="star" variant="${c}" size="md" position="static"></ui-fab>
+                <span style="font-size: 11px; color: var(--text-secondary,#64748b);">${c}</span>
+              </div>`
+            ).join('')}
+          </div>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 16px; font-size: 13px; color: var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Extended (with Label)</h4>
+          <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: center;">
+            <ui-fab icon="add" label="Create" variant="primary" size="md" position="static"></ui-fab>
+            <ui-fab icon="share-social" label="Share" variant="info" size="md" position="static"></ui-fab>
+            <ui-fab icon="cloud-upload" label="Upload" variant="success" size="lg" position="static"></ui-fab>
+          </div>
+        </div>
+
+      </div>
+    `;
   };
 
   setTimeout(() => {