@rhavenside/baseline-ui 1.0.10 → 1.0.12

package/dist/baseline.min.js.map

@@ -1,7 +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) {\n    console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n    return;\n  }\n\n  // Skip if already initialized\n  if (tooltipElement._tooltipInitialized) return;\n\n  // Create handlers - use tooltipElement to handle hover on entire tooltip\n  const enterHandler = (e) => {\n    content.classList.add('bl-show');\n  };\n\n  const leaveHandler = (e) => {\n    // Only hide if mouse leaves the tooltip element (not just the trigger)\n    if (!tooltipElement.contains(e.relatedTarget)) {\n      content.classList.remove('bl-show');\n    }\n  };\n\n  // Add event listeners to trigger\n  trigger.addEventListener('mouseenter', enterHandler);\n  trigger.addEventListener('mouseleave', leaveHandler);\n  \n  // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n  tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n  // Mark as initialized\n  tooltipElement._tooltipInitialized = true;\n  tooltipElement._tooltipEnterHandler = enterHandler;\n  tooltipElement._tooltipLeaveHandler = leaveHandler;\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\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', () => {\n    // Wait for next frame to ensure all elements are rendered\n    requestAnimationFrame(() => {\n      requestAnimationFrame(autoInit);\n    });\n  });\n} else {\n  // DOM already loaded, but wait for next frame to ensure everything is ready\n  requestAnimationFrame(() => {\n    requestAnimationFrame(autoInit);\n  });\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", "enterHandler", "e", "leaveHandler", "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"]
+  "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.classList.contains('bl-modal-open')) {\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    // Remove closing class if present\n    modal.classList.remove('bl-modal-closing');\n    // Add open class to trigger animation\n    modal.classList.add('bl-modal-open');\n    document.body.style.overflow = 'hidden';\n  }\n}\n\nexport function closeModal(modalId) {\n  const modal = document.getElementById(modalId);\n  if (modal) {\n    // Add closing class to trigger close animation\n    modal.classList.add('bl-modal-closing');\n    modal.classList.remove('bl-modal-open');\n    \n    // WICHTIG: Overflow sofort zur\u00FCcksetzen, wenn keine anderen Modals offen sind\n    // (Animation l\u00E4uft weiter, aber Scrollen ist wieder m\u00F6glich)\n    const openModals = document.querySelectorAll('.bl-modal.bl-modal-open');\n    if (openModals.length === 0) {\n      document.body.style.overflow = '';\n    }\n    \n    // Wait for animation to complete before cleaning up\n    const handleAnimationEnd = () => {\n      modal.classList.remove('bl-modal-closing');\n    };\n    \n    // Listen for animation end on dialog (which has the slide animation)\n    const dialog = modal.querySelector('.bl-modal-dialog');\n    if (dialog) {\n      dialog.addEventListener('animationend', handleAnimationEnd, { once: true });\n    } else {\n      // Fallback: use backdrop animation or timeout\n      const backdrop = modal.querySelector('.bl-modal-backdrop');\n      if (backdrop) {\n        backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });\n      } else {\n        // Fallback timeout if no animation\n        setTimeout(handleAnimationEnd, 200);\n      }\n    }\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) {\n    console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n    return;\n  }\n\n  // Skip if already initialized\n  if (tooltipElement._tooltipInitialized) return;\n\n  // Create handlers - use tooltipElement to handle hover on entire tooltip\n  const enterHandler = (e) => {\n    content.classList.add('bl-show');\n  };\n\n  const leaveHandler = (e) => {\n    // Only hide if mouse leaves the tooltip element (not just the trigger)\n    if (!tooltipElement.contains(e.relatedTarget)) {\n      content.classList.remove('bl-show');\n    }\n  };\n\n  // Add event listeners to trigger\n  trigger.addEventListener('mouseenter', enterHandler);\n  trigger.addEventListener('mouseleave', leaveHandler);\n  \n  // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n  tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n  // Mark as initialized\n  tooltipElement._tooltipInitialized = true;\n  tooltipElement._tooltipEnterHandler = enterHandler;\n  tooltipElement._tooltipLeaveHandler = leaveHandler;\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\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', () => {\n    // Wait for next frame to ensure all elements are rendered\n    requestAnimationFrame(() => {\n      requestAnimationFrame(autoInit);\n    });\n  });\n} else {\n  // DOM already loaded, but wait for next frame to ensure everything is ready\n  requestAnimationFrame(() => {\n    requestAnimationFrame(autoInit);\n  });\n}\n\n"],
+  "mappings": "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",
+  "names": ["initModal", "modalElement", "backdrop", "modalId", "btn", "openModal", "closeModal", "e", "escHandler", "modal", "handleAnimationEnd", "dialog", "initDropdown", "dropdownElement", "toggle", "menu", "e", "otherMenu", "outsideClickHandler", "initTooltip", "tooltipElement", "trigger", "content", "enterHandler", "e", "leaveHandler", "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,6 +1,6 @@
 {
   "name": "@rhavenside/baseline-ui",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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",

package/src/components/_modal.scss

@@ -14,10 +14,15 @@
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
-  display: flex;
+  display: none; // Hidden by default
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md);
+  
+  // Show modal when open
+  &.bl-modal-open {
+    display: flex;
+  }
 }
 
 .bl-modal-backdrop {
@@ -30,6 +35,17 @@
   background: var(--color-bg-overlay);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  opacity: 0;
+  
+  // Animate backdrop on open
+  .bl-modal.bl-modal-open & {
+    animation: bl-modal-backdrop-fade-in var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  // Animate backdrop on close
+  .bl-modal.bl-modal-closing & {
+    animation: bl-modal-backdrop-fade-out var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
 }
 
 .bl-modal-dialog {
@@ -51,6 +67,80 @@
   @media (min-width: 1024px) {
     max-width: 800px;
   }
+  
+  // Animationen basierend auf Position beim Öffnen
+  .bl-modal.bl-modal-open.bl-modal-top-left & {
+    animation: bl-modal-slide-from-top-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-top & {
+    animation: bl-modal-slide-from-top var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-top-right & {
+    animation: bl-modal-slide-from-top-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-left & {
+    animation: bl-modal-slide-from-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-centered & {
+    animation: bl-modal-fade-in var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-right & {
+    animation: bl-modal-slide-from-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-bottom-left & {
+    animation: bl-modal-slide-from-bottom-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-bottom & {
+    animation: bl-modal-slide-from-bottom var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-open.bl-modal-bottom-right & {
+    animation: bl-modal-slide-from-bottom-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  // Animationen beim Schließen
+  .bl-modal.bl-modal-closing.bl-modal-top-left & {
+    animation: bl-modal-slide-to-top-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-top & {
+    animation: bl-modal-slide-to-top var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-top-right & {
+    animation: bl-modal-slide-to-top-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-left & {
+    animation: bl-modal-slide-to-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-centered & {
+    animation: bl-modal-fade-out var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-right & {
+    animation: bl-modal-slide-to-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-bottom-left & {
+    animation: bl-modal-slide-to-bottom-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-bottom & {
+    animation: bl-modal-slide-to-bottom var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
+  
+  .bl-modal.bl-modal-closing.bl-modal-bottom-right & {
+    animation: bl-modal-slide-to-bottom-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+  }
 }
 
 .bl-modal-content {
@@ -158,19 +248,27 @@
   }
 }
 
-// Modal Positions
+// Modal Positions - 3x3 Grid
+// Oben
+.bl-modal.bl-modal-top-left {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-xl) !important;
+}
+
 .bl-modal.bl-modal-top {
   align-items: flex-start !important;
   justify-content: center !important;
   padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
 }
 
-.bl-modal.bl-modal-bottom {
-  align-items: flex-end !important;
-  justify-content: center !important;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-md) !important;
+.bl-modal.bl-modal-top-right {
+  align-items: flex-start !important;
+  justify-content: flex-end !important;
+  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
 }
 
+// Mitte
 .bl-modal.bl-modal-left {
   align-items: center !important;
   justify-content: flex-start !important;
@@ -181,6 +279,11 @@
   }
 }
 
+.bl-modal.bl-modal-centered {
+  align-items: center !important;
+  justify-content: center !important;
+}
+
 .bl-modal.bl-modal-right {
   align-items: center !important;
   justify-content: flex-end !important;
@@ -191,8 +294,237 @@
   }
 }
 
-// Centered Modal (default, can be explicitly set)
-.bl-modal.bl-modal-centered {
-  align-items: center !important;
+// Unten
+.bl-modal.bl-modal-bottom-left {
+  align-items: flex-end !important;
+  justify-content: flex-start !important;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-xl) !important;
+}
+
+.bl-modal.bl-modal-bottom {
+  align-items: flex-end !important;
   justify-content: center !important;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-md) !important;
+}
+
+.bl-modal.bl-modal-bottom-right {
+  align-items: flex-end !important;
+  justify-content: flex-end !important;
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl) var(--spacing-md) !important;
+}
+
+// Modal Animations
+// Backdrop Fade Animation
+@keyframes bl-modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-backdrop-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// Dialog Slide Animations
+@keyframes bl-modal-slide-from-top {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-bottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-top-left {
+  from {
+    transform: translate(-100%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-top-right {
+  from {
+    transform: translate(100%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-bottom-left {
+  from {
+    transform: translate(-100%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-slide-from-bottom-right {
+  from {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Close Animations (reverse)
+@keyframes bl-modal-slide-to-top {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-top-left {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-100%, -100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-top-right {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(100%, -100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-bottom-left {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-100%, 100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-slide-to-bottom-right {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
+}
+
+@keyframes bl-modal-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }

package/src/js/components/modal.js

@@ -39,7 +39,7 @@ export function initModal(modalElement) {
 
   // Close on ESC key
   const escHandler = (e) => {
-    if (e.key === 'Escape' && modalElement.style.display === 'block') {
+    if (e.key === 'Escape' && modalElement.classList.contains('bl-modal-open')) {
       closeModal(modalId);
     }
   };
@@ -52,7 +52,10 @@ export function initModal(modalElement) {
 export function openModal(modalId) {
   const modal = document.getElementById(modalId);
   if (modal) {
-    modal.style.display = 'block';
+    // Remove closing class if present
+    modal.classList.remove('bl-modal-closing');
+    // Add open class to trigger animation
+    modal.classList.add('bl-modal-open');
     document.body.style.overflow = 'hidden';
   }
 }
@@ -60,8 +63,36 @@ export function openModal(modalId) {
 export function closeModal(modalId) {
   const modal = document.getElementById(modalId);
   if (modal) {
-    modal.style.display = 'none';
-    document.body.style.overflow = '';
+    // Add closing class to trigger close animation
+    modal.classList.add('bl-modal-closing');
+    modal.classList.remove('bl-modal-open');
+    
+    // WICHTIG: Overflow sofort zurücksetzen, wenn keine anderen Modals offen sind
+    // (Animation läuft weiter, aber Scrollen ist wieder möglich)
+    const openModals = document.querySelectorAll('.bl-modal.bl-modal-open');
+    if (openModals.length === 0) {
+      document.body.style.overflow = '';
+    }
+    
+    // Wait for animation to complete before cleaning up
+    const handleAnimationEnd = () => {
+      modal.classList.remove('bl-modal-closing');
+    };
+    
+    // Listen for animation end on dialog (which has the slide animation)
+    const dialog = modal.querySelector('.bl-modal-dialog');
+    if (dialog) {
+      dialog.addEventListener('animationend', handleAnimationEnd, { once: true });
+    } else {
+      // Fallback: use backdrop animation or timeout
+      const backdrop = modal.querySelector('.bl-modal-backdrop');
+      if (backdrop) {
+        backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });
+      } else {
+        // Fallback timeout if no animation
+        setTimeout(handleAnimationEnd, 200);
+      }
+    }
   }
 }