@rhavenside/baseline-ui 1.0.15 → 1.0.17

package/src/components/_sidebar.scss

@@ -0,0 +1,273 @@
+// ============================================================================
+// Sidebar/Offcanvas Component (Technical Glass Design)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Sidebar Toggle Button (Hamburger)
+.bl-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-sm);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: var(--transition-base);
+
+  &:hover {
+    background: var(--glass-bg-heavy);
+    border-color: var(--glass-border-heavy);
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+
+  // Hide on desktop (≥768px)
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+// Sidebar Container
+.bl-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-sidebar);
+  width: 280px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border-right: 1px solid var(--glass-border-medium);
+  box-shadow: var(--glass-shadow-lg);
+  transform: translateX(-100%);
+  transition: transform var(--transition-duration-slow) var(--transition-ease-out);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  // Desktop: Always visible, collapsible
+  @media (min-width: 768px) {
+    position: relative;
+    transform: translateX(0);
+    height: auto;
+    min-height: 100vh;
+    box-shadow: none;
+    border-right: 1px solid var(--glass-border-medium);
+  }
+
+  // Sidebar Open (Mobile)
+  &.bl-sidebar-open {
+    transform: translateX(0);
+  }
+
+  // Sidebar Collapsed (Desktop)
+  &.bl-sidebar-collapsed {
+    @media (min-width: 768px) {
+      width: 64px;
+
+      .bl-sidebar-header h3,
+      .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  // Sidebar Right Position
+  &.bl-sidebar-right {
+    left: auto;
+    right: 0;
+    border-right: none;
+    border-left: 1px solid var(--glass-border-medium);
+    transform: translateX(100%);
+
+    &.bl-sidebar-open {
+      transform: translateX(0);
+    }
+  }
+}
+
+// Sidebar Backdrop (Mobile only)
+.bl-sidebar-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-sidebar-backdrop);
+  background: var(--color-bg-overlay);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-duration-slow) var(--transition-ease-out);
+
+  // Show backdrop when sidebar is open (mobile)
+  .bl-sidebar.bl-sidebar-open ~ &,
+  body:has(.bl-sidebar.bl-sidebar-open) & {
+    @media (max-width: 767.98px) {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+
+  // Hide on desktop
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+// Sidebar Header
+.bl-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md);
+  border-bottom: 1px solid var(--glass-border-light);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+
+  h3 {
+    margin: 0;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text);
+    transition: var(--transition-base);
+  }
+}
+
+// Sidebar Close Button
+.bl-sidebar-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--tech-border-radius-sm);
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  transition: var(--transition-base);
+
+  &:hover {
+    background: var(--glass-bg-medium);
+    border-color: var(--glass-border-medium);
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+
+  // Hide on desktop (collapsed sidebar shows it)
+  @media (min-width: 768px) {
+    display: none;
+
+    .bl-sidebar-collapsed & {
+      display: inline-flex;
+    }
+  }
+}
+
+// Sidebar Navigation
+.bl-sidebar-nav {
+  flex: 1;
+  padding: var(--spacing-sm);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .bl-nav {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+
+  .bl-nav-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--tech-border-radius-sm);
+    transition: var(--transition-base);
+
+    span:not(.bl-icon) {
+      transition: var(--transition-base);
+    }
+
+    .bl-icon {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+// Sidebar Footer (optional)
+.bl-sidebar-footer {
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--glass-border-light);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+}
+
+// Body Scroll Lock (when sidebar is open on mobile)
+body:has(.bl-sidebar.bl-sidebar-open) {
+  @media (max-width: 767.98px) {
+    overflow: hidden;
+  }
+}
+
+// Animation for sidebar slide
+@keyframes bl-sidebar-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes bl-sidebar-slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes bl-sidebar-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes bl-sidebar-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+

package/src/components/_toast.scss

@@ -0,0 +1,241 @@
+// ============================================================================
+// Toast/Notification Component (Technical Glass Design)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Toast Container (positioned containers)
+.bl-toast-container {
+  position: fixed;
+  z-index: var(--z-index-toast);
+  pointer-events: none;
+  padding: var(--spacing-md);
+
+  // Position variants
+  &.bl-toast-top-left {
+    top: 0;
+    left: 0;
+  }
+
+  &.bl-toast-top-right {
+    top: 0;
+    right: 0;
+  }
+
+  &.bl-toast-top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.bl-toast-bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  &.bl-toast-bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+
+  &.bl-toast-bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  // Stacking
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 400px;
+  width: 100%;
+
+  @media (max-width: 575.98px) {
+    max-width: 100%;
+    padding: var(--spacing-sm);
+  }
+}
+
+// Toast Item
+.bl-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  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);
+  box-shadow: var(--glass-shadow-lg);
+  color: var(--color-text);
+  pointer-events: all;
+  min-width: 300px;
+  max-width: 100%;
+  animation: bl-toast-slide-in var(--transition-duration-base) var(--transition-ease-out);
+
+  @media (max-width: 575.98px) {
+    min-width: auto;
+    width: 100%;
+  }
+
+  // Toast closing animation
+  &.bl-toast-closing {
+    animation: bl-toast-slide-out var(--transition-duration-base) var(--transition-ease-out) forwards;
+  }
+}
+
+// Toast Content
+.bl-toast-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.bl-toast-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin: 0;
+}
+
+.bl-toast-message {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  margin: 0;
+  line-height: var(--line-height-base);
+}
+
+// Toast Close Button
+.bl-toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--tech-border-radius-sm);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: var(--transition-base);
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--glass-bg-light);
+    color: var(--color-text);
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+// Toast Variants
+.bl-toast-success {
+  border-left: 4px solid var(--color-success);
+
+  .bl-toast-title {
+    color: var(--color-success);
+  }
+}
+
+.bl-toast-error {
+  border-left: 4px solid var(--color-error);
+
+  .bl-toast-title {
+    color: var(--color-error);
+  }
+}
+
+.bl-toast-warning {
+  border-left: 4px solid var(--color-warning);
+
+  .bl-toast-title {
+    color: var(--color-warning);
+  }
+}
+
+.bl-toast-info {
+  border-left: 4px solid var(--color-info);
+
+  .bl-toast-title {
+    color: var(--color-info);
+  }
+}
+
+// Toast Icon (optional)
+.bl-toast-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+// Animations
+@keyframes bl-toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bl-toast-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+// Bottom position animations
+.bl-toast-container.bl-toast-bottom-left,
+.bl-toast-container.bl-toast-bottom-right,
+.bl-toast-container.bl-toast-bottom-center {
+  .bl-toast {
+    animation: bl-toast-slide-in-bottom var(--transition-duration-base) var(--transition-ease-out);
+
+    &.bl-toast-closing {
+      animation: bl-toast-slide-out-bottom var(--transition-duration-base) var(--transition-ease-out) forwards;
+    }
+  }
+}
+
+@keyframes bl-toast-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bl-toast-slide-out-bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+

package/src/js/baseline.js

@@ -8,6 +8,9 @@ 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';
+import { initSidebar, toggleSidebar, openSidebar, closeSidebar } from './components/sidebar.js';
+import { initAccordion, toggleAccordionItem } from './components/accordion.js';
+import { showToast, showToastSuccess, showToastError, showToastWarning, showToastInfo } from './components/toast.js';
 
 // Export all functions for manual use
 export {
@@ -18,7 +21,18 @@ export {
   initTooltip,
   initTabs,
   initAlert,
-  dismissAlert
+  dismissAlert,
+  initSidebar,
+  toggleSidebar,
+  openSidebar,
+  closeSidebar,
+  initAccordion,
+  toggleAccordionItem,
+  showToast,
+  showToastSuccess,
+  showToastError,
+  showToastWarning,
+  showToastInfo
 };
 
 // Auto-initialize on DOM ready
@@ -47,6 +61,16 @@ function autoInit() {
   document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {
     initAlert(alert);
   });
+
+  // Initialize all sidebars
+  document.querySelectorAll('.bl-sidebar').forEach(sidebar => {
+    initSidebar(sidebar);
+  });
+
+  // Initialize all accordions
+  document.querySelectorAll('.bl-accordion').forEach(accordion => {
+    initAccordion(accordion);
+  });
 }
 
 // Initialize when DOM is ready

package/src/js/components/accordion.js

@@ -0,0 +1,43 @@
+// ============================================================================
+// Accordion Component JavaScript
+// ============================================================================
+
+export function initAccordion(accordionElement) {
+  if (!accordionElement) return;
+
+  const items = accordionElement.querySelectorAll('.bl-accordion-item');
+  const isSingleMode = accordionElement.classList.contains('bl-accordion-single');
+
+  items.forEach(item => {
+    const header = item.querySelector('.bl-accordion-header');
+    if (!header) return;
+
+    header.addEventListener('click', () => {
+      toggleAccordionItem(item, isSingleMode, accordionElement);
+    });
+  });
+}
+
+export function toggleAccordionItem(itemElement, closeOthers = false, accordionElement = null) {
+  if (!itemElement) return;
+
+  const isOpen = itemElement.classList.contains('bl-accordion-open');
+
+  if (closeOthers && accordionElement) {
+    // Close all other items
+    const allItems = accordionElement.querySelectorAll('.bl-accordion-item');
+    allItems.forEach(item => {
+      if (item !== itemElement && item.classList.contains('bl-accordion-open')) {
+        item.classList.remove('bl-accordion-open');
+      }
+    });
+  }
+
+  // Toggle current item
+  if (isOpen) {
+    itemElement.classList.remove('bl-accordion-open');
+  } else {
+    itemElement.classList.add('bl-accordion-open');
+  }
+}
+

package/src/js/components/sidebar.js

@@ -0,0 +1,101 @@
+// ============================================================================
+// Sidebar Component JavaScript
+// ============================================================================
+
+export function initSidebar(sidebarElement) {
+  if (!sidebarElement) return;
+
+  const sidebarId = sidebarElement.id;
+  if (!sidebarId) return;
+
+  // Create backdrop if it doesn't exist (mobile only)
+  let backdrop = document.querySelector('.bl-sidebar-backdrop');
+  if (!backdrop) {
+    backdrop = document.createElement('div');
+    backdrop.className = 'bl-sidebar-backdrop';
+    document.body.appendChild(backdrop);
+  }
+
+  // Close button
+  const closeButton = sidebarElement.querySelector('.bl-sidebar-close');
+  if (closeButton) {
+    closeButton.addEventListener('click', () => {
+      closeSidebar(sidebarId);
+    });
+  }
+
+  // Toggle buttons
+  const toggleButtons = document.querySelectorAll(`[data-sidebar-toggle="${sidebarId}"]`);
+  toggleButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      toggleSidebar(sidebarId);
+    });
+  });
+
+  // Close on backdrop click (mobile only)
+  backdrop.addEventListener('click', () => {
+    if (isMobile() && sidebarElement.classList.contains('bl-sidebar-open')) {
+      closeSidebar(sidebarId);
+    }
+  });
+
+  // Close on ESC key (mobile only)
+  const escHandler = (e) => {
+    if (e.key === 'Escape' && isMobile() && sidebarElement.classList.contains('bl-sidebar-open')) {
+      closeSidebar(sidebarId);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
+  
+  // Store handler for cleanup if needed
+  sidebarElement._escHandler = escHandler;
+
+  // Handle window resize (responsive behavior)
+  const resizeHandler = () => {
+    if (!isMobile() && sidebarElement.classList.contains('bl-sidebar-open')) {
+      // On desktop, sidebar is always visible, remove open class
+      sidebarElement.classList.remove('bl-sidebar-open');
+    }
+  };
+  window.addEventListener('resize', resizeHandler);
+  sidebarElement._resizeHandler = resizeHandler;
+}
+
+export function toggleSidebar(sidebarId) {
+  const sidebar = document.getElementById(sidebarId);
+  if (!sidebar) return;
+
+  if (sidebar.classList.contains('bl-sidebar-open')) {
+    closeSidebar(sidebarId);
+  } else {
+    openSidebar(sidebarId);
+  }
+}
+
+export function openSidebar(sidebarId) {
+  const sidebar = document.getElementById(sidebarId);
+  if (!sidebar) return;
+
+  sidebar.classList.add('bl-sidebar-open');
+  
+  // Lock body scroll on mobile
+  if (isMobile()) {
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+export function closeSidebar(sidebarId) {
+  const sidebar = document.getElementById(sidebarId);
+  if (!sidebar) return;
+
+  sidebar.classList.remove('bl-sidebar-open');
+  
+  // Unlock body scroll
+  document.body.style.overflow = '';
+}
+
+// Helper function to check if mobile
+function isMobile() {
+  return window.innerWidth < 768;
+}
+