@rhavenside/baseline 2.0.0

package/dist/js/color-modes.js

@@ -0,0 +1,70 @@
+/*!
+ * Color mode toggler for Base-Line
+ * Based on Baseline's color-modes.js
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bl-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bl-theme', theme)
+    }
+    
+    // Also set class for backward compatibility
+    if (theme === 'auto') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      if (systemTheme === 'dark') {
+        document.documentElement.classList.add('theme-dark')
+        document.documentElement.classList.remove('theme-light')
+      } else {
+        document.documentElement.classList.remove('theme-dark')
+        document.documentElement.classList.add('theme-light')
+      }
+    } else {
+      if (theme === 'dark') {
+        document.documentElement.classList.add('theme-dark')
+        document.documentElement.classList.remove('theme-light')
+      } else {
+        document.documentElement.classList.remove('theme-dark')
+        document.documentElement.classList.add('theme-light')
+      }
+    }
+  }
+
+  // Set theme immediately, before React renders
+  setTheme(getPreferredTheme())
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (!storedTheme || storedTheme === 'auto') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  // Expose functions globally for React to use
+  window.__setTheme = (theme) => {
+    setStoredTheme(theme)
+    setTheme(theme)
+  }
+
+  window.__getTheme = () => {
+    return getPreferredTheme()
+  }
+})()
+

package/dist/js/component.js

@@ -0,0 +1,114 @@
+/**
+ * Base-Line Component Factory
+ * Helper to create components with consistent interface
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, executeAfterTransition, reflow } from './util.js'
+
+/**
+ * Component Factory
+ */
+export function createComponent(name, ComponentClass) {
+  // Register with Data API
+  if (typeof window !== 'undefined' && window.BaseLine && window.BaseLine.dataAPI) {
+    window.BaseLine.dataAPI.register(name, ComponentClass)
+  }
+
+  // Auto-initialize on DOM ready
+  if (typeof document !== 'undefined') {
+    const initComponents = () => {
+      const selector = `[data-c-${name}]`
+      const elements = document.querySelectorAll(selector)
+      
+      elements.forEach(element => {
+        if (!element._baseLineComponent) {
+          const instance = new ComponentClass(element)
+          element._baseLineComponent = instance
+        }
+      })
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initComponents)
+    } else {
+      initComponents()
+    }
+  }
+
+  return ComponentClass
+}
+
+/**
+ * Event handler helpers
+ */
+export function on(element, event, handler) {
+  element.addEventListener(event, handler)
+}
+
+export function off(element, event, handler) {
+  element.removeEventListener(event, handler)
+}
+
+export function one(element, event, handler) {
+  const onceHandler = (e) => {
+    handler(e)
+    off(element, event, onceHandler)
+  }
+  on(element, event, onceHandler)
+}
+
+/**
+ * Class manipulation helpers
+ */
+export function addClass(element, className) {
+  if (element && className) {
+    element.classList.add(className)
+  }
+}
+
+export function removeClass(element, className) {
+  if (element && className) {
+    element.classList.remove(className)
+  }
+}
+
+export function toggleClass(element, className) {
+  if (element && className) {
+    element.classList.toggle(className)
+  }
+}
+
+export function hasClass(element, className) {
+  return element && element.classList.contains(className)
+}
+
+/**
+ * Show/hide helpers
+ */
+export function show(element) {
+  if (element) {
+    element.style.display = ''
+    element.removeAttribute('hidden')
+  }
+}
+
+export function hide(element) {
+  if (element) {
+    element.style.display = 'none'
+    element.setAttribute('hidden', '')
+  }
+}
+
+export function toggle(element) {
+  if (element) {
+    if (element.style.display === 'none' || element.hasAttribute('hidden')) {
+      show(element)
+    } else {
+      hide(element)
+    }
+  }
+}
+
+
+

package/dist/js/dropdown.js

@@ -0,0 +1,348 @@
+/**
+ * Base-Line Dropdown Component
+ * Baseline 2.0 compatible dropdown with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on, off, isElement, isDisabled, isRTL, SelectorEngine } from './util.js'
+import { addClass, removeClass, hasClass } from './component.js'
+
+// Import Popper.js
+import * as Popper from '@popperjs/core'
+
+const NAME = 'dropdown'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = `[data-c-${NAME}]`
+
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_CLICK = `click${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_SHOW = 'is-show'
+const CLASS_NAME_DROPUP = 'c-dropup'
+const CLASS_NAME_DROPEND = 'c-dropend'
+const CLASS_NAME_DROPSTART = 'c-dropstart'
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="dropdown"]'
+const SELECTOR_MENU = '.c-dropdown-menu'
+const SELECTOR_DROPDOWN_ITEM = '.c-dropdown-item'
+const SELECTOR_NAVBAR_NAV = '.c-navbar-nav'
+const SELECTOR_NAVBAR = '.c-navbar'
+
+// Placement constants (for Popper.js) with RTL support
+const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start'
+const PLACEMENT_TOPEND = isRTL() ? 'top-start' : 'top-end'
+const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
+const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
+const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
+const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
+
+class Dropdown extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+    this._popper = null
+    this._parent = this._element.parentNode // dropdown wrapper
+    // Find menu using multiple strategies (like Baseline)
+    this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] ||
+      SelectorEngine.prev(this._element, SELECTOR_MENU)[0] ||
+      SelectorEngine.findOne(SELECTOR_MENU, this._parent)
+    this._isShown = false
+    this._inNavbar = this._detectNavbar()
+    this._init()
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  static get Default() {
+    return {
+      offset: [0, 2],
+      boundary: 'clippingParents',
+      reference: 'toggle',
+      display: 'dynamic',
+      popperConfig: null,
+      autoClose: true
+    }
+  }
+
+  _init() {
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    const toggle = getElement(SELECTOR_DATA_TOGGLE, this._element) || this._element
+    
+    on(toggle, 'click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.toggle()
+    })
+
+    // Close on dropdown item click
+    if (this._menu) {
+      on(this._menu, 'click', SELECTOR_DROPDOWN_ITEM, (e) => {
+        // Only close if autoClose is enabled (default: true)
+        if (this._config.autoClose !== false) {
+          // Check if the item is disabled
+          const item = e.target.closest(SELECTOR_DROPDOWN_ITEM)
+          if (item && !item.classList.contains('is-disabled') && !item.hasAttribute('disabled')) {
+            this.hide()
+          }
+        }
+      })
+    }
+
+    // Close on outside click
+    on(document, 'click', (e) => {
+      if (this._isShown && !this._parent.contains(e.target)) {
+        this.hide()
+      }
+    })
+
+    // Close on escape
+    on(document, 'keydown', (e) => {
+      if (e.key === 'Escape' && this._isShown) {
+        this.hide()
+      }
+    })
+  }
+
+  _detectNavbar() {
+    return this._element.closest(SELECTOR_NAVBAR) !== null
+  }
+
+  _getPlacement() {
+    const parentDropdown = this._parent
+
+    if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
+      return PLACEMENT_RIGHT
+    }
+
+    if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
+      return PLACEMENT_LEFT
+    }
+
+    // We need to trim the value because custom properties can also include spaces
+    const isEnd = this._menu && window.getComputedStyle(this._menu).getPropertyValue('--bl-position').trim() === 'end'
+
+    if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
+      return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP
+    }
+
+    return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
+  }
+
+  _getOffset() {
+    const { offset } = this._config
+
+    if (typeof offset === 'string') {
+      return offset.split(',').map(value => Number.parseInt(value, 10))
+    }
+
+    if (typeof offset === 'function') {
+      return popperData => offset(popperData, this._element)
+    }
+
+    return offset
+  }
+
+  _getPopperConfig() {
+    if (typeof Popper === 'undefined') {
+      throw new TypeError('Base-Line\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
+    }
+
+    const defaultBsPopperConfig = {
+      placement: this._getPlacement(),
+      modifiers: [{
+        name: 'preventOverflow',
+        options: {
+          boundary: this._config.boundary
+        }
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: this._getOffset()
+        }
+      }]
+    }
+
+    // Disable Popper if we have a static display or Dropdown is in Navbar
+    if (this._inNavbar || this._config.display === 'static') {
+      if (this._menu) {
+        this._menu.setAttribute('data-bl-popper', 'static')
+      }
+      defaultBsPopperConfig.modifiers = [{
+        name: 'applyStyles',
+        enabled: false
+      }]
+    }
+
+    return {
+      ...defaultBsPopperConfig,
+      ...(typeof this._config.popperConfig === 'function' 
+        ? this._config.popperConfig(undefined, defaultBsPopperConfig)
+        : this._config.popperConfig || {})
+    }
+  }
+
+  _createPopper() {
+    if (typeof Popper === 'undefined') {
+      throw new TypeError('Base-Line\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
+    }
+
+    if (!this._menu) {
+      return
+    }
+
+    let referenceElement = this._element
+
+    if (this._config.reference === 'parent') {
+      referenceElement = this._parent
+    } else if (isElement(this._config.reference)) {
+      referenceElement = getElement(this._config.reference)
+    } else if (typeof this._config.reference === 'object') {
+      referenceElement = this._config.reference
+    }
+
+    const popperConfig = this._getPopperConfig()
+    this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
+    
+    // Set data-bl-popper attribute to enable CSS positioning (always set, even with Popper)
+    // This is needed for CSS positioning rules to work
+    this._menu.setAttribute('data-bl-popper', '')
+  }
+
+  show() {
+    if (this._isShown || isDisabled(this._element)) {
+      return
+    }
+
+    const showEvent = new CustomEvent(EVENT_SHOW, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._parent.dispatchEvent(showEvent)
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    // Close all other open dropdowns before showing this one
+    // Find all dropdown menus that are currently shown
+    const openMenus = document.querySelectorAll(`${SELECTOR_MENU}.${CLASS_NAME_SHOW}`)
+    openMenus.forEach(menu => {
+      if (menu !== this._menu) {
+        // Find the parent dropdown container
+        const parent = menu.closest('.c-dropdown')
+        if (parent && parent !== this._parent) {
+          // Find the toggle element for this dropdown
+          const toggle = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, parent) || 
+                        parent.querySelector(SELECTOR_DATA_TOGGLE)
+          if (toggle) {
+            // Get or create the dropdown instance
+            const otherDropdown = Dropdown.getOrCreateInstance(toggle)
+            if (otherDropdown && otherDropdown._isShown) {
+              otherDropdown.hide()
+            }
+          }
+        }
+      }
+    })
+
+    this._createPopper()
+
+    this._isShown = true
+
+    if (this._menu) {
+      addClass(this._menu, CLASS_NAME_SHOW)
+      addClass(this._parent, CLASS_NAME_SHOW)
+    }
+
+    this._element.setAttribute('aria-expanded', 'true')
+
+    const shownEvent = new CustomEvent(EVENT_SHOWN, { bubbles: true })
+    this._parent.dispatchEvent(shownEvent)
+  }
+
+  hide() {
+    if (!this._isShown) {
+      return
+    }
+
+    const hideEvent = new CustomEvent(EVENT_HIDE, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._parent.dispatchEvent(hideEvent)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    this._isShown = false
+
+    if (this._popper) {
+      this._popper.destroy()
+      this._popper = null
+    }
+
+    if (this._menu) {
+      removeClass(this._menu, CLASS_NAME_SHOW)
+      removeClass(this._parent, CLASS_NAME_SHOW)
+      this._menu.removeAttribute('data-bl-popper')
+    }
+
+    this._element.setAttribute('aria-expanded', 'false')
+
+    const hiddenEvent = new CustomEvent(EVENT_HIDDEN, { bubbles: true })
+    this._parent.dispatchEvent(hiddenEvent)
+  }
+
+  toggle() {
+    if (this._isShown) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  dispose() {
+    if (this._popper) {
+      this._popper.destroy()
+      this._popper = null
+    }
+    super.dispose()
+  }
+
+  update() {
+    this._inNavbar = this._detectNavbar()
+    if (this._popper) {
+      this._popper.update()
+    }
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return element._baseLineComponent || new Dropdown(element, config)
+  }
+}
+
+// Data API
+on(document, 'click', SELECTOR_DATA_TOGGLE, function (event) {
+  event.preventDefault()
+  event.stopPropagation()
+  
+  // Use the toggle element directly (like Baseline)
+  const dropdown = Dropdown.getOrCreateInstance(this)
+  dropdown.toggle()
+})
+
+export default Dropdown
+
+

package/dist/js/index.js

@@ -0,0 +1,108 @@
+/**
+ * Base-Line JavaScript Components
+ * Main entry point for all components
+ */
+
+import { dataAPI, BaseComponent } from './base.js'
+import { onDOMContentLoaded } from './util.js'
+
+// Import all components
+import Alert from './alert.js'
+import Button from './button.js'
+import Carousel from './carousel.js'
+import Collapse from './collapse.js'
+import Dropdown from './dropdown.js'
+import Modal from './modal.js'
+import Offcanvas from './offcanvas.js'
+import Popover from './popover.js'
+import Tab from './tab.js'
+import Toast from './toast.js'
+import Tooltip from './tooltip.js'
+import Accordion from './accordion.js'
+
+// Register all components with Data API
+const components = {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  Tab,
+  Toast,
+  Tooltip,
+  Accordion
+}
+
+// Register components
+Object.keys(components).forEach(name => {
+  const ComponentClass = components[name]
+  if (ComponentClass && ComponentClass.NAME) {
+    dataAPI.register(ComponentClass.NAME, ComponentClass)
+  }
+})
+
+// Initialize on DOM ready
+onDOMContentLoaded(() => {
+  dataAPI.init()
+  
+  // Trigger load event for components that need it (e.g., Tab)
+  const loadEvent = new Event('load.c.tab')
+  window.dispatchEvent(loadEvent)
+})
+
+// Export for global access
+if (typeof window !== 'undefined') {
+  window.BaseLine = window.BaseLine || {}
+  window.BaseLine.components = components
+  window.BaseLine.dataAPI = dataAPI
+  window.BaseLine.BaseComponent = BaseComponent
+  // Export individual components for direct access
+  window.BaseLine.Alert = Alert
+  window.BaseLine.Button = Button
+  window.BaseLine.Carousel = Carousel
+  window.BaseLine.Collapse = Collapse
+  window.BaseLine.Dropdown = Dropdown
+  window.BaseLine.Modal = Modal
+  window.BaseLine.Offcanvas = Offcanvas
+  window.BaseLine.Popover = Popover
+  window.BaseLine.Tab = Tab
+  window.BaseLine.Toast = Toast
+  window.BaseLine.Tooltip = Tooltip
+  window.BaseLine.Accordion = Accordion
+}
+
+// Export individual components
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  Tab,
+  Toast,
+  Tooltip,
+  Accordion,
+  dataAPI,
+  BaseComponent
+}
+
+export default {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  Tab,
+  Toast,
+  Tooltip,
+  Accordion
+}