decantr 0.9.0

package/src/components/message.js

@@ -0,0 +1,80 @@
+/**
+ * Message — Lightweight global feedback message (top-center).
+ * Simpler than notification: just type + content, auto-dismiss.
+ *
+ * @module decantr/components/message
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon as makeIcon } from './icon.js';
+
+let _container = null;
+
+function getContainer() {
+  if (_container) return _container;
+  if (typeof document === 'undefined') return null;
+  _container = h('div', { class: 'd-message-container' });
+  document.body.appendChild(_container);
+  return _container;
+}
+
+const ICON_MAP = {
+  info: 'info',
+  success: 'check-circle',
+  warning: 'alert-triangle',
+  error: 'x-circle',
+  loading: 'loader'
+};
+
+/**
+ * @param {Object} props
+ * @param {string} props.content - Message text
+ * @param {'info'|'success'|'warning'|'error'|'loading'} [props.type='info']
+ * @param {number} [props.duration=3000] - 0 = manual close only
+ * @param {Node} [props.icon] - Custom icon node
+ * @param {Function} [props.onClose]
+ * @param {string} [props.class]
+ * @returns {{ close: Function }}
+ */
+export function message(props = {}) {
+  injectBase();
+  const { content, type = 'info', duration = 3000, icon, onClose, class: cls } = props;
+
+  const container = getContainer();
+  if (!container) return { close() {} };
+
+  const iconEl = icon
+    ? (typeof icon === 'string' ? h('span', { class: 'd-message-icon' }, icon) : icon)
+    : h('span', { class: 'd-message-icon' }, makeIcon(ICON_MAP[type] || 'info', { size: '1.25em' }));
+
+  const el = h('div', {
+    class: cx('d-message', `d-message-${type}`, cls),
+    role: 'status',
+    'aria-live': 'polite'
+  }, iconEl, h('span', { class: 'd-message-text' }, content));
+
+  container.appendChild(el);
+
+  function close() {
+    el.classList.add('d-message-exit');
+    setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 200);
+    if (onClose) onClose();
+  }
+
+  if (duration > 0) setTimeout(close, duration);
+
+  return { close };
+}
+
+// Convenience methods
+message.info = (content, duration) => message({ content, type: 'info', duration });
+message.success = (content, duration) => message({ content, type: 'success', duration });
+message.warning = (content, duration) => message({ content, type: 'warning', duration });
+message.error = (content, duration) => message({ content, type: 'error', duration });
+message.loading = (content, duration = 0) => message({ content, type: 'loading', duration });
+
+/** Reset message container (for testing) */
+export function resetMessages() {
+  if (_container && _container.parentNode) _container.parentNode.removeChild(_container);
+  _container = null;
+}

package/src/components/modal.js

@@ -0,0 +1,147 @@
+import { h, onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFocusTrap } from './_behaviors.js';
+
+const MODAL_SECTIONS = ['d-modal-header', 'd-modal-body', 'd-modal-footer'];
+
+function hasSection(children) {
+  return children.some(c =>
+    c && typeof c === 'object' && c.nodeType === 1 &&
+    (c.className || '').split(/\s+/).some(cls => MODAL_SECTIONS.includes(cls))
+  );
+}
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.title]
+ * @param {Node|Node[]} [props.footer] - Footer content (wrapped in d-modal-footer)
+ * @param {Function} props.visible - Signal getter for visibility
+ * @param {Function} [props.onClose]
+ * @param {string} [props.width] - CSS width (default: 480px)
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLDialogElement}
+ */
+export function Modal(props = {}, ...children) {
+  injectBase();
+
+  const { title, footer, visible, onClose, width = '480px', class: cls } = props;
+
+  const closeBtn = h('button', {
+    class: 'd-modal-close',
+    type: 'button',
+    'aria-label': 'Close'
+  }, '\u00d7');
+
+  const panel = h('div', {
+    class: cx('d-modal-panel', cls),
+    style: { width }
+  });
+
+  if (hasSection(children)) {
+    // Explicit sections — pass through directly
+    children.forEach(c => { if (c) panel.appendChild(c); });
+  } else {
+    // Auto-wrap: title → header, children → body, footer → footer
+    if (title) {
+      panel.appendChild(h('div', { class: 'd-modal-header' },
+        h('span', { class: 'd-modal-title' }, title),
+        closeBtn
+      ));
+    }
+    if (children.length) {
+      panel.appendChild(h('div', { class: 'd-modal-body' }, ...children));
+    }
+    if (footer) {
+      const footerChildren = Array.isArray(footer) ? footer : [footer];
+      panel.appendChild(h('div', { class: 'd-modal-footer' }, ...footerChildren));
+    }
+  }
+
+  // Ensure close button exists in panel (for explicit section mode without header)
+  if (!panel.querySelector('.d-modal-close')) {
+    const firstChild = panel.firstChild;
+    if (firstChild) firstChild.appendChild(closeBtn);
+  }
+
+  const dialog = h('dialog', {
+    class: 'd-modal-content'
+  }, panel);
+
+  function close() {
+    if (dialog.open) dialog.close();
+    if (onClose) onClose();
+  }
+
+  closeBtn.addEventListener('click', close);
+
+  // Click on backdrop (outside panel rect) closes
+  dialog.addEventListener('click', (e) => {
+    const rect = panel.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      close();
+    }
+  });
+
+  // Native dialog fires 'close' on Escape — sync with onClose
+  dialog.addEventListener('close', () => {
+    if (onClose) onClose();
+  });
+
+  // Focus trap for accessibility (WCAG AA)
+  const focusTrap = createFocusTrap(panel);
+
+  if (typeof visible === 'function') {
+    createEffect(() => {
+      if (visible()) {
+        if (!dialog.open) dialog.showModal();
+        focusTrap.activate();
+      } else {
+        focusTrap.deactivate();
+        if (dialog.open) dialog.close();
+      }
+    });
+  }
+
+  onDestroy(() => {
+    focusTrap.deactivate();
+    if (dialog.open) dialog.close();
+  });
+
+  return dialog;
+}
+
+/**
+ * Modal.Header - modal header section
+ * @param {Object} [props]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Modal.Header = function ModalHeader(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-modal-header', cls) }, ...children);
+};
+
+/**
+ * Modal.Body - modal body section
+ * @param {Object} [props]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Modal.Body = function ModalBody(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-modal-body', cls) }, ...children);
+};
+
+/**
+ * Modal.Footer - modal footer section
+ * @param {Object} [props]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Modal.Footer = function ModalFooter(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-modal-footer', cls) }, ...children);
+};

package/src/components/navigation-menu.js

@@ -0,0 +1,166 @@
+/**
+ * NavigationMenu — Horizontal nav bar with hover-triggered dropdown panels.
+ * Supports grid-layout dropdown content with descriptions.
+ * Uses createOverlay with hover trigger.
+ *
+ * @module decantr/components/navigation-menu
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay, createRovingTabindex, createListbox, caret } from './_behaviors.js';
+
+const { div, nav: navTag, ul, li, a, button: buttonTag } = tags;
+
+/**
+ * @typedef {Object} NavMenuItem
+ * @property {string} label
+ * @property {string} [href]
+ * @property {Array<{label: string, href: string, description?: string}>} [children]
+ */
+
+/**
+ * @param {Object} [props]
+ * @param {NavMenuItem[]} [props.items]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function NavigationMenu(props = {}) {
+  injectBase();
+  const { items = [], class: cls } = props;
+
+  const navEl = navTag({ class: cx('d-navmenu', cls), 'aria-label': 'Navigation' });
+  const list = ul({ class: 'd-navmenu-list', role: 'menubar' });
+  const overlays = [];
+  const _cleanups = [];
+
+  items.forEach((item, idx) => {
+    const hasChildren = item.children && item.children.length;
+    const liEl = li({ class: 'd-navmenu-trigger', role: 'none' });
+
+    if (hasChildren) {
+      const btn = buttonTag({
+        type: 'button',
+        class: 'd-navmenu-item',
+        role: 'menuitem',
+        'aria-haspopup': 'true',
+        'aria-expanded': 'false',
+        tabindex: idx === 0 ? '0' : '-1'
+      }, item.label, caret('down'));
+
+      const content = div({
+        class: 'd-navmenu-content',
+        role: 'menu'
+      });
+
+      // Grid of links
+      const useGrid = item.children.length > 1;
+      const grid = div({ class: useGrid ? 'd-navmenu-grid' : '' });
+
+      item.children.forEach(child => {
+        const link = a({
+          class: 'd-navmenu-link',
+          href: child.href || '#',
+          role: 'menuitem',
+          tabindex: '-1'
+        });
+
+        link.appendChild(div(null, child.label));
+
+        if (child.description) {
+          link.appendChild(div({ class: 'd-navmenu-link-desc' }, child.description));
+        }
+
+        link.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            ov.close();
+            btn.focus();
+          }
+        });
+
+        grid.appendChild(link);
+      });
+
+      content.appendChild(grid);
+
+      const ov = createOverlay(btn, content, {
+        trigger: 'hover',
+        closeOnEscape: true,
+        closeOnOutside: false,
+        hoverDelay: 100,
+        hoverCloseDelay: 200,
+        onOpen: () => {
+          // Close other overlays
+          overlays.forEach((o, i) => { if (i !== idx && o) o.close(); });
+          // Focus first link
+          const firstLink = content.querySelector('.d-navmenu-link');
+          if (firstLink) firstLink.setAttribute('tabindex', '0');
+        }
+      });
+      overlays.push(ov);
+      _cleanups.push(() => ov.destroy());
+
+      // Keyboard: open on Enter/Space/ArrowDown
+      btn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          ov.open();
+          requestAnimationFrame(() => {
+            const first = content.querySelector('.d-navmenu-link');
+            if (first) first.focus();
+          });
+        }
+      });
+
+      // Arrow key nav within dropdown via createListbox
+      const lb = createListbox(content, {
+        itemSelector: '.d-navmenu-link',
+        activeClass: 'd-navmenu-link-highlight',
+        orientation: 'vertical',
+        loop: true,
+        onHighlight: (el) => { if (el) el.focus(); }
+      });
+      _cleanups.push(() => lb.destroy());
+
+      // Escape still needs custom handling to close overlay and return focus
+      content.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          ov.close();
+          btn.focus();
+        }
+      });
+
+      liEl.appendChild(btn);
+      liEl.appendChild(content);
+    } else {
+      // Simple link item
+      const link = a({
+        class: 'd-navmenu-item',
+        href: item.href || '#',
+        role: 'menuitem',
+        tabindex: idx === 0 ? '0' : '-1'
+      }, item.label);
+      liEl.appendChild(link);
+      overlays.push(null);
+    }
+
+    list.appendChild(liEl);
+  });
+
+  // Roving tabindex for top-level items
+  const roving = createRovingTabindex(list, {
+    itemSelector: '[role="menuitem"]',
+    orientation: 'horizontal',
+    loop: true
+  });
+  _cleanups.push(() => roving.destroy());
+
+  navEl.appendChild(list);
+
+  onDestroy(() => {
+    _cleanups.forEach(fn => fn());
+  });
+
+  return navEl;
+}

package/src/components/notification.js

@@ -0,0 +1,84 @@
+/**
+ * Notification — Stacked notification system (top-right by default).
+ * Unlike toast (brief messages), notifications support title, description,
+ * icon, actions, and longer durations.
+ *
+ * @module decantr/components/notification
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+let _containers = {};
+
+function getContainer(placement) {
+  if (_containers[placement]) return _containers[placement];
+  if (typeof document === 'undefined') return null;
+  const el = h('div', { class: cx('d-notification-container', `d-notification-${placement}`) });
+  document.body.appendChild(el);
+  _containers[placement] = el;
+  return el;
+}
+
+/**
+ * @param {Object} props
+ * @param {string} [props.title]
+ * @param {string} [props.description]
+ * @param {'info'|'success'|'warning'|'error'} [props.type='info']
+ * @param {number} [props.duration=4500] - 0 = no auto-close
+ * @param {'top-right'|'top-left'|'bottom-right'|'bottom-left'} [props.placement='top-right']
+ * @param {Node} [props.icon]
+ * @param {Node} [props.action] - Action button/link node
+ * @param {Function} [props.onClose]
+ * @param {string} [props.class]
+ * @returns {{ close: Function }}
+ */
+export function notification(props = {}) {
+  injectBase();
+  const { title, description, type = 'info', duration = 4500, placement = 'top-right', icon, action, onClose, class: cls } = props;
+
+  const container = getContainer(placement);
+  if (!container) return { close() {} };
+
+  const closeBtn = h('button', { type: 'button', class: 'd-notification-close', 'aria-label': 'Close' }, '\u00d7');
+
+  const content = h('div', { class: 'd-notification-content' });
+  if (title) content.appendChild(h('div', { class: 'd-notification-title' }, title));
+  if (description) content.appendChild(h('div', { class: 'd-notification-desc' }, description));
+  if (action) content.appendChild(h('div', { class: 'd-notification-action' }, action));
+
+  const el = h('div', {
+    class: cx('d-notification', `d-notification-${type}`, cls),
+    role: 'alert',
+    'aria-live': 'assertive'
+  });
+
+  if (icon) el.appendChild(h('div', { class: 'd-notification-icon' }, typeof icon === 'string' ? h('span', null, icon) : icon));
+  el.appendChild(content);
+  el.appendChild(closeBtn);
+
+  function close() {
+    el.classList.add('d-notification-exit');
+    setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 250);
+    if (onClose) onClose();
+  }
+
+  closeBtn.addEventListener('click', close);
+  container.appendChild(el);
+
+  let timer;
+  if (duration > 0) timer = setTimeout(close, duration);
+
+  // Pause on hover
+  el.addEventListener('mouseenter', () => { if (timer) clearTimeout(timer); });
+  el.addEventListener('mouseleave', () => { if (duration > 0) timer = setTimeout(close, duration); });
+
+  return { close };
+}
+
+/** Reset notification containers (for testing) */
+export function resetNotifications() {
+  for (const el of Object.values(_containers)) {
+    if (el.parentNode) el.parentNode.removeChild(el);
+  }
+  _containers = {};
+}

package/src/components/pagination.js

@@ -0,0 +1,104 @@
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret } from './_behaviors.js';
+
+const { nav: navTag, ul, li, button: buttonTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} props.total
+ * @param {number} [props.perPage=10]
+ * @param {number|Function} [props.current=1]
+ * @param {Function} [props.onchange]
+ * @param {number} [props.siblings=1]
+ * @param {string} [props.size] - sm|lg
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Pagination(props = {}) {
+  injectBase();
+
+  const { total, perPage = 10, current = 1, onchange, siblings = 1, size, class: cls } = props;
+
+  const nav = navTag({ class: cx('d-pagination', size && `d-pagination-${size}`, cls), 'aria-label': 'Pagination' });
+  const list = ul({ class: 'd-pagination-list' });
+  nav.appendChild(list);
+
+  function resolve(v) { return typeof v === 'function' ? v() : v; }
+
+  function getPageCount() {
+    return Math.max(1, Math.ceil(resolve(total) / perPage));
+  }
+
+  function getRange(cur, pageCount) {
+    const range = [];
+    const left = Math.max(2, cur - siblings);
+    const right = Math.min(pageCount - 1, cur + siblings);
+    range.push(1);
+    if (left > 2) range.push('...');
+    for (let i = left; i <= right; i++) range.push(i);
+    if (right < pageCount - 1) range.push('...');
+    if (pageCount > 1) range.push(pageCount);
+    return range;
+  }
+
+  // Use event delegation on the list
+  list.addEventListener('click', (e) => {
+    const btn = e.target.closest('.d-pagination-btn');
+    if (!btn || btn.disabled) return;
+    const page = btn.dataset.page;
+    if (page && onchange) onchange(Number(page));
+  });
+
+  function render() {
+    list.replaceChildren();
+    const cur = resolve(current);
+    const pageCount = getPageCount();
+
+    // Prev button
+    const prevBtn = buttonTag({
+      class: cx('d-pagination-btn', 'd-pagination-prev', cur <= 1 && 'd-pagination-disabled'),
+      type: 'button',
+      'aria-label': 'Previous page',
+      disabled: cur <= 1 ? '' : undefined,
+      'data-page': String(cur - 1)
+    }, caret('left'));
+    list.appendChild(li(prevBtn));
+
+    // Page buttons
+    const range = getRange(cur, pageCount);
+    for (const page of range) {
+      if (page === '...') {
+        list.appendChild(li(span({ class: 'd-pagination-ellipsis' }, '\u2026')));
+        continue;
+      }
+      const btn = buttonTag({
+        class: cx('d-pagination-btn', page === cur && 'd-pagination-active'),
+        type: 'button',
+        'aria-label': `Page ${page}`,
+        'aria-current': page === cur ? 'page' : undefined,
+        'data-page': String(page)
+      }, String(page));
+      list.appendChild(li(btn));
+    }
+
+    // Next button
+    const nextBtn = buttonTag({
+      class: cx('d-pagination-btn', 'd-pagination-next', cur >= pageCount && 'd-pagination-disabled'),
+      type: 'button',
+      'aria-label': 'Next page',
+      disabled: cur >= pageCount ? '' : undefined,
+      'data-page': String(cur + 1)
+    }, caret('right'));
+    list.appendChild(li(nextBtn));
+  }
+
+  render();
+
+  if (typeof current === 'function' || typeof total === 'function') {
+    createEffect(render);
+  }
+
+  return nav;
+}