@rhavenside/baseline-ui 1.0.16 → 1.0.18

package/README.md

@@ -109,6 +109,116 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
 </div>
 ```
 
+#### Sidebar/Offcanvas
+
+Responsive sidebar that transforms into an offcanvas drawer on mobile:
+
+```html
+<!-- Hamburger Button (Mobile) -->
+<button class="bl-sidebar-toggle" data-sidebar-toggle="main-sidebar" aria-label="Toggle sidebar">
+  ☰
+</button>
+
+<!-- Sidebar Container -->
+<aside class="bl-sidebar" id="main-sidebar">
+  <div class="bl-sidebar-header">
+    <h3>Menu</h3>
+    <button class="bl-sidebar-close" aria-label="Close sidebar">×</button>
+  </div>
+  <nav class="bl-sidebar-nav">
+    <ul class="bl-nav bl-nav-vertical">
+      <li class="bl-nav-item">
+        <a href="#" class="bl-nav-link bl-active">Home</a>
+      </li>
+      <li class="bl-nav-item">
+        <a href="#" class="bl-nav-link">About</a>
+      </li>
+    </ul>
+  </nav>
+</aside>
+```
+
+**Responsive Behavior:**
+- **Desktop (≥768px)**: Always visible sidebar, can be collapsed with `bl-sidebar-collapsed` class
+- **Mobile (<768px)**: Hidden by default, opens as offcanvas drawer with backdrop
+
+#### Accordion
+
+Collapsible content sections:
+
+```html
+<div class="bl-accordion" id="faq-accordion">
+  <div class="bl-accordion-item">
+    <button class="bl-accordion-header" type="button">
+      <span>Question 1</span>
+      <span class="bl-accordion-icon">▼</span>
+    </button>
+    <div class="bl-accordion-body">
+      <p>Answer 1</p>
+    </div>
+  </div>
+  <div class="bl-accordion-item">
+    <button class="bl-accordion-header" type="button">
+      <span>Question 2</span>
+      <span class="bl-accordion-icon">▼</span>
+    </button>
+    <div class="bl-accordion-body">
+      <p>Answer 2</p>
+    </div>
+  </div>
+</div>
+```
+
+Add `bl-accordion-single` class to allow only one item open at a time.
+
+#### Divider
+
+Horizontal and vertical separators:
+
+```html
+<!-- Horizontal Divider -->
+<hr class="bl-divider">
+
+<!-- Divider with Text -->
+<div class="bl-divider-text">Or</div>
+
+<!-- Vertical Divider -->
+<div class="bl-d-flex">
+  <span>Left</span>
+  <hr class="bl-divider-vertical">
+  <span>Right</span>
+</div>
+```
+
+#### Avatar
+
+User profile images with initials fallback:
+
+```html
+<!-- Basic Avatar -->
+<div class="bl-avatar" data-initials="JD">
+  <img src="avatar.jpg" alt="John Doe">
+</div>
+
+<!-- Avatar Sizes -->
+<div class="bl-avatar bl-avatar-sm" data-initials="JD"></div>
+<div class="bl-avatar bl-avatar-md" data-initials="JD"></div>
+<div class="bl-avatar bl-avatar-lg" data-initials="JD"></div>
+<div class="bl-avatar bl-avatar-xl" data-initials="JD"></div>
+
+<!-- Avatar with Status -->
+<div class="bl-avatar" data-initials="JD">
+  <span class="bl-avatar-status bl-avatar-status-online"></span>
+</div>
+
+<!-- Avatar Group -->
+<div class="bl-avatar-group">
+  <div class="bl-avatar" data-initials="JD"></div>
+  <div class="bl-avatar" data-initials="JS"></div>
+  <div class="bl-avatar" data-initials="AB"></div>
+</div>
+```
+
 ### Utilities
 
 ```html
@@ -145,17 +255,29 @@ All components are automatically initialized when JavaScript is loaded:
 #### Manual Usage
 
 ```javascript
-import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
-
-// Open modal
-openModal('my-modal');
-
-// Close modal
-closeModal('my-modal');
-
-// Initialize manually
-const modal = document.getElementById('my-modal');
-initModal(modal);
+import { 
+  initModal, openModal, closeModal,
+  initSidebar, toggleSidebar, openSidebar, closeSidebar,
+  initAccordion, toggleAccordionItem,
+  showToast, showToastSuccess, showToastError
+} from '@rhavenside/baseline-ui/dist/baseline.js';
+
+// Sidebar
+toggleSidebar('main-sidebar');
+openSidebar('main-sidebar');
+closeSidebar('main-sidebar');
+
+// Accordion
+const accordion = document.getElementById('faq-accordion');
+initAccordion(accordion);
+
+// Toast Notifications
+showToastSuccess('Operation completed successfully!');
+showToastError('Something went wrong');
+showToast('Custom message', 'info', { 
+  position: 'bottom-right',
+  duration: 3000 
+});
 ```
 
 #### Available Functions
@@ -165,6 +287,35 @@ initModal(modal);
 - **Tooltip**: `initTooltip()`
 - **Tabs**: `initTabs()`
 - **Alert**: `initAlert()`, `dismissAlert()`
+- **Sidebar**: `initSidebar()`, `toggleSidebar()`, `openSidebar()`, `closeSidebar()`
+- **Accordion**: `initAccordion()`, `toggleAccordionItem()`
+- **Toast**: `showToast()`, `showToastSuccess()`, `showToastError()`, `showToastWarning()`, `showToastInfo()`
+
+#### Toast Notifications
+
+Toast notifications provide user feedback with auto-dismiss:
+
+```javascript
+// Success notification
+showToastSuccess('Data saved successfully!');
+
+// Error notification
+showToastError('Failed to save data');
+
+// Warning notification
+showToastWarning('Please check your input');
+
+// Info notification
+showToastInfo('New update available');
+
+// Custom toast
+showToast('Custom message', 'info', {
+  position: 'top-right', // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
+  duration: 5000, // Auto-dismiss after 5 seconds (0 to disable)
+  title: 'Custom Title',
+  closable: true
+});
+```
 
 ## License