@rhavenside/baseline-ui 1.0.0 → 1.0.2

package/dist/baseline.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/js/components/modal.js", "../src/js/components/dropdown.js", "../src/js/components/tooltip.js", "../src/js/components/tabs.js", "../src/js/components/alert.js", "../src/js/baseline.js"],
+  "sourcesContent": ["// ============================================================================\n// Modal Component JavaScript\n// ============================================================================\n\nexport function initModal(modalElement) {\n  if (!modalElement) return;\n\n  const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');\n  if (!backdrop.classList.contains('bl-modal-backdrop')) {\n    backdrop.className = 'bl-modal-backdrop';\n    modalElement.insertBefore(backdrop, modalElement.firstChild);\n  }\n\n  // Open modal buttons\n  const modalId = modalElement.id;\n  if (modalId) {\n    const openButtons = document.querySelectorAll(`[data-modal-open=\"${modalId}\"]`);\n    openButtons.forEach(btn => {\n      btn.addEventListener('click', () => {\n        openModal(modalId);\n      });\n    });\n  }\n\n  // Close modal buttons\n  const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');\n  closeButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      closeModal(modalId);\n    });\n  });\n\n  // Close on backdrop click\n  backdrop.addEventListener('click', (e) => {\n    if (e.target === backdrop) {\n      closeModal(modalId);\n    }\n  });\n\n  // Close on ESC key\n  const escHandler = (e) => {\n    if (e.key === 'Escape' && modalElement.style.display === 'block') {\n      closeModal(modalId);\n    }\n  };\n  document.addEventListener('keydown', escHandler);\n  \n  // Store handler for cleanup if needed\n  modalElement._escHandler = escHandler;\n}\n\nexport function openModal(modalId) {\n  const modal = document.getElementById(modalId);\n  if (modal) {\n    modal.style.display = 'block';\n    document.body.style.overflow = 'hidden';\n  }\n}\n\nexport function closeModal(modalId) {\n  const modal = document.getElementById(modalId);\n  if (modal) {\n    modal.style.display = 'none';\n    document.body.style.overflow = '';\n  }\n}\n\n", "// ============================================================================\n// Dropdown Component JavaScript\n// ============================================================================\n\nexport function initDropdown(dropdownElement) {\n  if (!dropdownElement) return;\n\n  const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');\n  const menu = dropdownElement.querySelector('.bl-dropdown-menu');\n\n  if (!toggle || !menu) return;\n\n  toggle.addEventListener('click', (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    // Close all other dropdowns\n    document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {\n      if (otherMenu !== menu) {\n        otherMenu.classList.remove('bl-show');\n      }\n    });\n\n    // Toggle current dropdown\n    menu.classList.toggle('bl-show');\n  });\n\n  // Close on outside click\n  const outsideClickHandler = (e) => {\n    if (!dropdownElement.contains(e.target)) {\n      menu.classList.remove('bl-show');\n    }\n  };\n  \n  document.addEventListener('click', outsideClickHandler);\n  \n  // Store handler for cleanup if needed\n  dropdownElement._outsideClickHandler = outsideClickHandler;\n}\n\n", "// ============================================================================\n// Tooltip Component JavaScript\n// ============================================================================\n\nexport function initTooltip(tooltipElement) {\n  if (!tooltipElement) return;\n\n  const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');\n  const content = tooltipElement.querySelector('.bl-tooltip-content');\n\n  if (!trigger || !content) return;\n\n  trigger.addEventListener('mouseenter', () => {\n    content.classList.add('bl-show');\n  });\n\n  trigger.addEventListener('mouseleave', () => {\n    content.classList.remove('bl-show');\n  });\n}\n\n", "// ============================================================================\n// Tabs Component JavaScript\n// ============================================================================\n\nexport function initTabs(tabsContainer) {\n  if (!tabsContainer) return;\n\n  const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');\n  const tabGroup = tabsContainer.getAttribute('data-tab-group');\n\n  tabLinks.forEach(link => {\n    link.addEventListener('click', (e) => {\n      e.preventDefault();\n\n      // Remove active from all tabs in group\n      if (tabGroup) {\n        document.querySelectorAll(`[data-tab-group=\"${tabGroup}\"] .bl-nav-link`).forEach(l => {\n          l.classList.remove('bl-active');\n        });\n      } else {\n        tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {\n          l.classList.remove('bl-active');\n        });\n      }\n\n      // Add active to clicked tab\n      link.classList.add('bl-active');\n\n      // Show/hide tab content\n      const targetId = link.getAttribute('data-tab-target');\n      if (targetId) {\n        // Find all tab contents - search in parent container or document\n        const container = tabsContainer.closest('.docs-example-preview') || \n                         tabsContainer.parentElement || \n                         document;\n        \n        container.querySelectorAll('[data-tab-content]').forEach(content => {\n          content.style.display = 'none';\n        });\n\n        const targetContent = document.getElementById(targetId);\n        if (targetContent) {\n          targetContent.style.display = 'block';\n        }\n      }\n    });\n  });\n}\n\n", "// ============================================================================\n// Alert Component JavaScript\n// ============================================================================\n\nexport function initAlert(alertElement) {\n  if (!alertElement) return;\n\n  const closeBtn = alertElement.querySelector('.bl-alert-close');\n  if (!closeBtn) return;\n\n  closeBtn.addEventListener('click', () => {\n    dismissAlert(alertElement);\n  });\n}\n\nexport function dismissAlert(alertElement) {\n  if (!alertElement) return;\n  \n  alertElement.style.transition = 'opacity 0.3s ease-out';\n  alertElement.style.opacity = '0';\n  setTimeout(() => {\n    alertElement.remove();\n  }, 300);\n}\n\n", "// ============================================================================\n// Baseline UI JavaScript\n// Main Entry Point\n// ============================================================================\n\nimport { initModal, openModal, closeModal } from './components/modal.js';\nimport { initDropdown } from './components/dropdown.js';\nimport { initTooltip } from './components/tooltip.js';\nimport { initTabs } from './components/tabs.js';\nimport { initAlert, dismissAlert } from './components/alert.js';\n\n// Export all functions for manual use\nexport {\n  initModal,\n  openModal,\n  closeModal,\n  initDropdown,\n  initTooltip,\n  initTabs,\n  initAlert,\n  dismissAlert\n};\n\n// Auto-initialize on DOM ready\nfunction autoInit() {\n  // Initialize all modals\n  document.querySelectorAll('.bl-modal').forEach(modal => {\n    initModal(modal);\n  });\n\n  // Initialize all dropdowns\n  document.querySelectorAll('.bl-dropdown').forEach(dropdown => {\n    initDropdown(dropdown);\n  });\n\n  // Initialize all tooltips\n  document.querySelectorAll('.bl-tooltip').forEach(tooltip => {\n    initTooltip(tooltip);\n  });\n\n  // Initialize all tabs\n  document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {\n    initTabs(tabs);\n  });\n\n  // Initialize all dismissible alerts\n  document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {\n    initAlert(alert);\n  });\n}\n\n// Initialize when DOM is ready\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', autoInit);\n} else {\n  autoInit();\n}\n\n"],
+  "mappings": "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",
+  "names": ["initModal", "modalElement", "backdrop", "modalId", "btn", "openModal", "closeModal", "e", "escHandler", "modal", "initDropdown", "dropdownElement", "toggle", "menu", "e", "otherMenu", "outsideClickHandler", "initTooltip", "tooltipElement", "trigger", "content", "initTabs", "tabsContainer", "tabLinks", "tabGroup", "link", "e", "l", "targetId", "content", "targetContent", "initAlert", "alertElement", "closeBtn", "dismissAlert", "autoInit", "modal", "initModal", "dropdown", "initDropdown", "tooltip", "initTooltip", "tabs", "initTabs", "alert", "initAlert"]
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@rhavenside/baseline-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "A technical glass design framework with SCSS source and compiled CSS - minimalist, rectangular forms with milky glass effects",
   "main": "dist/baseline.css",
   "style": "dist/baseline.css",
   "sass": "src/baseline.scss",
+  "js": "dist/baseline.js",
   "files": [
     "dist",
     "src",
@@ -13,11 +14,18 @@
     "CHANGELOG.md",
     "LICENSE"
   ],
+  "exports": {
+    ".": {
+      "style": "./dist/baseline.css",
+      "sass": "./src/baseline.scss",
+      "js": "./dist/baseline.js",
+      "default": "./dist/baseline.css"
+    }
+  },
   "scripts": {
     "build": "node build.js",
     "watch": "node build.js --watch",
-    "docs:dev": "storybook dev -p 6006",
-    "docs:build": "storybook build",
+    "docs": "open docs/index.html",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -33,7 +41,8 @@
     "glassmorphism",
     "technical-design",
     "minimalist",
-    "glass-effect"
+    "glass-effect",
+    "javascript"
   ],
   "author": "",
   "license": "MIT",
@@ -46,14 +55,7 @@
   },
   "homepage": "https://github.com/e7a-0-e7a/baseline#readme",
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.21",
-    "@storybook/addon-interactions": "^7.6.21",
-    "@storybook/addon-links": "^7.6.21",
-    "@storybook/blocks": "^7.6.21",
-    "@storybook/html": "^7.6.21",
-    "@storybook/html-webpack5": "^7.6.21",
-    "@storybook/test": "^7.6.21",
     "sass": "^1.69.0",
-    "storybook": "^7.6.21"
+    "esbuild": "^0.19.0"
   }
 }

package/src/components/_card.scss

@@ -17,8 +17,12 @@
   position: relative;
 
   // Optional: Vertical accent line at edge
-  &.bl-card-accent {
-    border-left: 2px solid var(--color-accent);
+  &.bl-card-accent-left {
+    border-left: 4px solid var(--color-accent);
+  }
+
+  &.bl-card-accent-right {
+    border-right: 4px solid var(--color-accent);
   }
 }
 
@@ -60,18 +64,10 @@
 // Card Variants
 .bl-card-primary {
   border-color: var(--color-accent);
-
-  &.bl-card-accent {
-    border-left-color: var(--color-accent);
-  }
 }
 
 .bl-card-secondary {
   border-color: var(--glass-border-heavy);
-
-  &.bl-card-accent {
-    border-left-color: var(--color-secondary);
-  }
 }
 
 // Card with Shadow

package/src/components/_dropdown.scss

@@ -26,7 +26,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: var(--z-index-dropdown);
+  z-index: 99999 !important; // Immer ganz oben
   display: none;
   min-width: 10rem;
   padding: var(--spacing-xs) 0;
@@ -41,6 +41,9 @@
   border: 1px solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
+  overflow-y: auto;
+  max-height: 300px;
+  box-shadow: var(--glass-shadow-lg);
 
   &.bl-show {
     display: block;

package/src/components/_form.scss

@@ -73,40 +73,191 @@
   }
 }
 
-// Select (Mechanical Switch, Angular Arrow)
+// Select (wird automatisch zu Dropdown umgewandelt)
 .bl-select {
+  // Wird durch JavaScript in .bl-select-dropdown umgewandelt
+  // Fallback-Styling für den Fall, dass JS nicht lädt
   display: block;
   width: 100%;
   padding: var(--form-input-padding-y) var(--form-input-padding-x);
-  padding-right: calc(var(--form-input-padding-x) + 1.5rem); // Space for arrow
+  padding-right: calc(var(--form-input-padding-x) + 1.5rem);
   font-family: var(--font-family-base);
   font-size: var(--form-input-font-size);
   line-height: var(--form-input-line-height);
   color: var(--color-text);
-  background: var(--glass-bg-light);
+  background: var(--glass-bg-medium);
   border: 1px solid var(--glass-border-medium);
-  border-radius: var(--tech-border-radius-sm);
-  backdrop-filter: blur(var(--glass-blur-md));
-  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border-radius: var(--tech-border-radius-md);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
   transition: var(--transition-base);
   cursor: pointer;
   appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--form-input-padding-x) center;
   background-size: 0.75rem;
+  box-shadow: var(--glass-shadow-sm);
 
   &:focus {
     outline: none;
     border-width: 2px;
     border-color: var(--color-accent);
     background-color: var(--glass-bg-medium);
+    box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+  }
+
+  &:hover {
+    background-color: var(--glass-bg-heavy);
+    border-color: var(--glass-border-heavy);
   }
 
   &:disabled {
     opacity: var(--form-input-opacity-disabled);
     cursor: not-allowed;
     background-color: var(--glass-bg-dark);
+    box-shadow: none;
+  }
+
+  // Wenn Select in Dropdown umgewandelt wurde, verstecken
+  &.bl-select-converted {
+    display: none;
+  }
+}
+
+// Select Dropdown (automatisch generiert aus .bl-select)
+.bl-select-dropdown {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  .bl-select-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--form-input-padding-y) var(--form-input-padding-x);
+    font-family: var(--font-family-base);
+    font-size: var(--form-input-font-size);
+    line-height: var(--form-input-line-height);
+    color: var(--color-text);
+    background: var(--glass-bg-medium);
+    border: 1px solid var(--glass-border-medium);
+    border-radius: var(--tech-border-radius-md);
+    backdrop-filter: blur(var(--glass-blur-lg));
+    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+    transition: var(--transition-base);
+    cursor: pointer;
+    box-shadow: var(--glass-shadow-sm);
+    text-align: left;
+    border: none; // Reset button border
+
+    &::after {
+      display: inline-block;
+      margin-left: var(--spacing-xs);
+      vertical-align: 0.255em;
+      content: "";
+      border-top: 0.3em solid var(--color-text);
+      border-right: 0.3em solid transparent;
+      border-bottom: 0;
+      border-left: 0.3em solid transparent;
+      flex-shrink: 0;
+    }
+
+    &:focus {
+      outline: none;
+      border-width: 2px;
+      border-color: var(--color-accent);
+      box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+    }
+
+    &:hover {
+      background-color: var(--glass-bg-heavy);
+      border-color: var(--glass-border-heavy);
+    }
+
+    &:disabled {
+      opacity: var(--form-input-opacity-disabled);
+      cursor: not-allowed;
+      background-color: var(--glass-bg-dark);
+    }
+  }
+
+  .bl-select-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 999999 !important; // Immer ganz oben
+    display: none;
+    width: 100%;
+    min-width: 100%;
+    padding: var(--spacing-xs) 0;
+    margin: var(--spacing-xs) 0 0 0;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    text-align: left;
+    list-style: none;
+    background: var(--glass-bg-medium);
+    backdrop-filter: blur(var(--glass-blur-lg));
+    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+    border: 1px solid var(--glass-border-medium);
+    border-radius: var(--tech-border-radius-md);
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: 300px;
+    box-shadow: var(--glass-shadow-lg);
+
+    &.bl-show {
+      display: block;
+    }
+  }
+
+  .bl-select-item {
+    display: block;
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    clear: both;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text);
+    text-align: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: var(--transition-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text);
+      text-decoration: none;
+      background: var(--glass-bg-heavy);
+    }
+
+    &:active {
+      color: var(--color-text);
+      background: var(--glass-bg-heavy);
+    }
+
+    &.bl-selected {
+      background: var(--glass-bg-heavy);
+      color: var(--color-accent);
+
+      &::before {
+        content: "✓ ";
+        margin-right: var(--spacing-xs);
+      }
+    }
+
+    &.bl-disabled,
+    &:disabled {
+      color: var(--color-text-muted);
+      pointer-events: none;
+      background-color: transparent;
+      opacity: 0.6;
+    }
   }
 }
 

package/src/js/baseline.js

@@ -0,0 +1,58 @@
+// ============================================================================
+// Baseline UI JavaScript
+// Main Entry Point
+// ============================================================================
+
+import { initModal, openModal, closeModal } from './components/modal.js';
+import { initDropdown } from './components/dropdown.js';
+import { initTooltip } from './components/tooltip.js';
+import { initTabs } from './components/tabs.js';
+import { initAlert, dismissAlert } from './components/alert.js';
+
+// Export all functions for manual use
+export {
+  initModal,
+  openModal,
+  closeModal,
+  initDropdown,
+  initTooltip,
+  initTabs,
+  initAlert,
+  dismissAlert
+};
+
+// Auto-initialize on DOM ready
+function autoInit() {
+  // Initialize all modals
+  document.querySelectorAll('.bl-modal').forEach(modal => {
+    initModal(modal);
+  });
+
+  // Initialize all dropdowns
+  document.querySelectorAll('.bl-dropdown').forEach(dropdown => {
+    initDropdown(dropdown);
+  });
+
+  // Initialize all tooltips
+  document.querySelectorAll('.bl-tooltip').forEach(tooltip => {
+    initTooltip(tooltip);
+  });
+
+  // Initialize all tabs
+  document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {
+    initTabs(tabs);
+  });
+
+  // Initialize all dismissible alerts
+  document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {
+    initAlert(alert);
+  });
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', autoInit);
+} else {
+  autoInit();
+}
+

package/src/js/components/alert.js

@@ -0,0 +1,25 @@
+// ============================================================================
+// Alert Component JavaScript
+// ============================================================================
+
+export function initAlert(alertElement) {
+  if (!alertElement) return;
+
+  const closeBtn = alertElement.querySelector('.bl-alert-close');
+  if (!closeBtn) return;
+
+  closeBtn.addEventListener('click', () => {
+    dismissAlert(alertElement);
+  });
+}
+
+export function dismissAlert(alertElement) {
+  if (!alertElement) return;
+  
+  alertElement.style.transition = 'opacity 0.3s ease-out';
+  alertElement.style.opacity = '0';
+  setTimeout(() => {
+    alertElement.remove();
+  }, 300);
+}
+

package/src/js/components/dropdown.js

@@ -0,0 +1,40 @@
+// ============================================================================
+// Dropdown Component JavaScript
+// ============================================================================
+
+export function initDropdown(dropdownElement) {
+  if (!dropdownElement) return;
+
+  const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');
+  const menu = dropdownElement.querySelector('.bl-dropdown-menu');
+
+  if (!toggle || !menu) return;
+
+  toggle.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Close all other dropdowns
+    document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {
+      if (otherMenu !== menu) {
+        otherMenu.classList.remove('bl-show');
+      }
+    });
+
+    // Toggle current dropdown
+    menu.classList.toggle('bl-show');
+  });
+
+  // Close on outside click
+  const outsideClickHandler = (e) => {
+    if (!dropdownElement.contains(e.target)) {
+      menu.classList.remove('bl-show');
+    }
+  };
+  
+  document.addEventListener('click', outsideClickHandler);
+  
+  // Store handler for cleanup if needed
+  dropdownElement._outsideClickHandler = outsideClickHandler;
+}
+

package/src/js/components/modal.js

@@ -0,0 +1,67 @@
+// ============================================================================
+// Modal Component JavaScript
+// ============================================================================
+
+export function initModal(modalElement) {
+  if (!modalElement) return;
+
+  const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');
+  if (!backdrop.classList.contains('bl-modal-backdrop')) {
+    backdrop.className = 'bl-modal-backdrop';
+    modalElement.insertBefore(backdrop, modalElement.firstChild);
+  }
+
+  // Open modal buttons
+  const modalId = modalElement.id;
+  if (modalId) {
+    const openButtons = document.querySelectorAll(`[data-modal-open="${modalId}"]`);
+    openButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        openModal(modalId);
+      });
+    });
+  }
+
+  // Close modal buttons
+  const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');
+  closeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      closeModal(modalId);
+    });
+  });
+
+  // Close on backdrop click
+  backdrop.addEventListener('click', (e) => {
+    if (e.target === backdrop) {
+      closeModal(modalId);
+    }
+  });
+
+  // Close on ESC key
+  const escHandler = (e) => {
+    if (e.key === 'Escape' && modalElement.style.display === 'block') {
+      closeModal(modalId);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
+  
+  // Store handler for cleanup if needed
+  modalElement._escHandler = escHandler;
+}
+
+export function openModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.style.display = 'block';
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+export function closeModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.style.display = 'none';
+    document.body.style.overflow = '';
+  }
+}
+

package/src/js/components/tabs.js

@@ -0,0 +1,49 @@
+// ============================================================================
+// Tabs Component JavaScript
+// ============================================================================
+
+export function initTabs(tabsContainer) {
+  if (!tabsContainer) return;
+
+  const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');
+  const tabGroup = tabsContainer.getAttribute('data-tab-group');
+
+  tabLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      // Remove active from all tabs in group
+      if (tabGroup) {
+        document.querySelectorAll(`[data-tab-group="${tabGroup}"] .bl-nav-link`).forEach(l => {
+          l.classList.remove('bl-active');
+        });
+      } else {
+        tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {
+          l.classList.remove('bl-active');
+        });
+      }
+
+      // Add active to clicked tab
+      link.classList.add('bl-active');
+
+      // Show/hide tab content
+      const targetId = link.getAttribute('data-tab-target');
+      if (targetId) {
+        // Find all tab contents - search in parent container or document
+        const container = tabsContainer.closest('.docs-example-preview') || 
+                         tabsContainer.parentElement || 
+                         document;
+        
+        container.querySelectorAll('[data-tab-content]').forEach(content => {
+          content.style.display = 'none';
+        });
+
+        const targetContent = document.getElementById(targetId);
+        if (targetContent) {
+          targetContent.style.display = 'block';
+        }
+      }
+    });
+  });
+}
+

package/src/js/components/tooltip.js

@@ -0,0 +1,21 @@
+// ============================================================================
+// Tooltip Component JavaScript
+// ============================================================================
+
+export function initTooltip(tooltipElement) {
+  if (!tooltipElement) return;
+
+  const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');
+  const content = tooltipElement.querySelector('.bl-tooltip-content');
+
+  if (!trigger || !content) return;
+
+  trigger.addEventListener('mouseenter', () => {
+    content.classList.add('bl-show');
+  });
+
+  trigger.addEventListener('mouseleave', () => {
+    content.classList.remove('bl-show');
+  });
+}
+

package/src/tokens/_z-index.scss

@@ -4,7 +4,7 @@
 
 // Z-Index Layers
 $z-index-base: 0;
-$z-index-dropdown: 1000;
+$z-index-dropdown: 9999; // Immer im Vordergrund
 $z-index-sticky: 1020;
 $z-index-fixed: 1030;
 $z-index-modal-backdrop: 1040;