decantr 0.9.0

package/src/components/accordion.js

@@ -0,0 +1,207 @@
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret } from './_behaviors.js';
+
+const { div, button: buttonTag } = tags;
+
+const ANIM_MS = 250;
+
+function animateOpen(region) {
+  if (typeof region.scrollHeight !== 'number') {
+    region.style.height = '';
+    region.style.overflow = '';
+    return;
+  }
+  region.style.height = '0px';
+  region.style.overflow = 'hidden';
+  void region.offsetHeight;
+  region.style.height = region.scrollHeight + 'px';
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    region.removeEventListener('transitionend', onEnd);
+    region.style.height = '';
+    region.style.overflow = '';
+  };
+  const onEnd = (e) => { if (e.propertyName === 'height') finish(); };
+  region.addEventListener('transitionend', onEnd);
+  setTimeout(finish, ANIM_MS + 50);
+}
+
+function animateClose(region) {
+  if (typeof region.offsetHeight !== 'number') {
+    region.style.height = '0px';
+    region.style.overflow = 'hidden';
+    return;
+  }
+  region.style.height = region.offsetHeight + 'px';
+  region.style.overflow = 'hidden';
+  void region.offsetHeight;
+  region.style.height = '0px';
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    region.removeEventListener('transitionend', onEnd);
+  };
+  const onEnd = (e) => { if (e.propertyName === 'height') finish(); };
+  region.addEventListener('transitionend', onEnd);
+  setTimeout(finish, ANIM_MS + 50);
+}
+
+let uid = 0;
+
+/**
+ * @param {Object} [props]
+ * @param {{ id: string, title: string, content: Function|string, disabled?: boolean }[]} props.items
+ * @param {boolean} [props.multiple]
+ * @param {boolean} [props.collapsible]
+ * @param {string[]} [props.defaultOpen]
+ * @param {boolean|Function} [props.disabled]
+ * @param {Function} [props.onValueChange]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Accordion(props = {}) {
+  injectBase();
+
+  const {
+    items = [],
+    multiple = false,
+    collapsible = true,
+    defaultOpen = [],
+    disabled,
+    onValueChange,
+    class: cls
+  } = props;
+
+  const instanceId = ++uid;
+  const openSet = new Set();
+  const rootCls = cx('d-accordion', cls);
+  const container = div({ class: rootCls });
+  const regions = [];
+  const sections = [];
+  const triggers = [];
+
+  function isItemDisabled(item) {
+    if (item.disabled) return true;
+    if (typeof disabled === 'function') return disabled(item);
+    return !!disabled;
+  }
+
+  function notifyChange() {
+    if (onValueChange) onValueChange(Array.from(openSet));
+  }
+
+  function findNextEnabled(fromIdx, direction) {
+    const len = triggers.length;
+    let idx = fromIdx;
+    for (let i = 0; i < len; i++) {
+      idx = (idx + direction + len) % len;
+      if (!triggers[idx].hasAttribute('data-disabled')) return idx;
+    }
+    return fromIdx;
+  }
+
+  items.forEach((item, index) => {
+    const triggerId = `d-acc-t-${instanceId}-${index}`;
+    const regionId = `d-acc-r-${instanceId}-${index}`;
+
+    const content = div({ class: 'd-accordion-content', role: 'region', id: regionId, 'aria-labelledby': triggerId });
+    const region = div({ class: 'd-accordion-region' });
+    region.appendChild(content);
+    region.style.height = '0px';
+    region.style.overflow = 'hidden';
+    regions.push(region);
+
+    const triggerAttrs = {
+      type: 'button',
+      class: 'd-accordion-trigger',
+      id: triggerId,
+      'aria-expanded': 'false',
+      'aria-controls': regionId
+    };
+    if (isItemDisabled(item)) triggerAttrs['data-disabled'] = '';
+
+    const trigger = buttonTag(triggerAttrs, item.title, caret('down', { class: 'd-accordion-icon' }));
+
+    const section = div({ class: 'd-accordion-item' }, trigger, region);
+    sections.push(section);
+    triggers.push(trigger);
+
+    trigger.addEventListener('click', () => {
+      if (isItemDisabled(item)) return;
+
+      const isOpen = openSet.has(item.id);
+      if (isOpen) {
+        if (!multiple && !collapsible) return;
+        openSet.delete(item.id);
+        animateClose(region);
+        section.classList.remove('d-accordion-open');
+        trigger.setAttribute('aria-expanded', 'false');
+      } else {
+        if (!multiple) {
+          items.forEach((other, i) => {
+            if (openSet.has(other.id)) {
+              animateClose(regions[i]);
+              sections[i].classList.remove('d-accordion-open');
+              triggers[i].setAttribute('aria-expanded', 'false');
+            }
+          });
+          openSet.clear();
+        }
+        openSet.add(item.id);
+        content.replaceChildren();
+        const rendered = typeof item.content === 'function' ? item.content() : item.content;
+        if (typeof rendered === 'string') content.appendChild(document.createTextNode(rendered));
+        else if (rendered) content.appendChild(rendered);
+        animateOpen(region);
+        section.classList.add('d-accordion-open');
+        trigger.setAttribute('aria-expanded', 'true');
+      }
+      notifyChange();
+    });
+
+    trigger.addEventListener('keydown', (e) => {
+      const idx = triggers.indexOf(trigger);
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        triggers[findNextEnabled(idx, 1)].focus();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        triggers[findNextEnabled(idx, -1)].focus();
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        const first = findNextEnabled(triggers.length - 1, 1);
+        triggers[first].focus();
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        const last = findNextEnabled(0, -1);
+        triggers[last].focus();
+      }
+    });
+
+    container.appendChild(section);
+  });
+
+  if (defaultOpen.length) {
+    items.forEach((item, i) => {
+      if (!defaultOpen.includes(item.id)) return;
+      openSet.add(item.id);
+      const content = regions[i].querySelector('.d-accordion-content');
+      if (content) {
+        content.replaceChildren();
+        const rendered = typeof item.content === 'function' ? item.content() : item.content;
+        if (typeof rendered === 'string') content.appendChild(document.createTextNode(rendered));
+        else if (rendered) content.appendChild(rendered);
+      }
+      regions[i].style.height = '';
+      regions[i].style.overflow = '';
+      sections[i].classList.add('d-accordion-open');
+      triggers[i].setAttribute('aria-expanded', 'true');
+    });
+  }
+
+  return container;
+}

package/src/components/affix.js

@@ -0,0 +1,62 @@
+/**
+ * Affix — Pins content to viewport on scroll (sticky wrapper).
+ *
+ * @module decantr/components/affix
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number} [props.offsetTop=0] - Offset from top in px when fixed
+ * @param {number} [props.offsetBottom] - If set, pins to bottom instead
+ * @param {Function} [props.onChange] - Called with (fixed: boolean) on state change
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Affix(props = {}, ...children) {
+  injectBase();
+  const { offsetTop = 0, offsetBottom, onChange, class: cls, ...rest } = props;
+
+  const placeholder = h('div', { class: cx('d-affix', cls), ...rest });
+  const content = h('div', null, ...children);
+  placeholder.appendChild(content);
+
+  let fixed = false;
+
+  function check() {
+    const rect = placeholder.getBoundingClientRect();
+    const shouldFix = offsetBottom !== undefined
+      ? (window.innerHeight - rect.bottom) < offsetBottom
+      : rect.top < offsetTop;
+
+    if (shouldFix && !fixed) {
+      fixed = true;
+      content.classList.add('d-affix-fixed');
+      if (offsetBottom !== undefined) {
+        content.style.bottom = `${offsetBottom}px`;
+      } else {
+        content.style.top = `${offsetTop}px`;
+      }
+      content.style.width = `${rect.width}px`;
+      placeholder.style.height = `${rect.height}px`;
+      if (onChange) onChange(true);
+    } else if (!shouldFix && fixed) {
+      fixed = false;
+      content.classList.remove('d-affix-fixed');
+      content.style.top = '';
+      content.style.bottom = '';
+      content.style.width = '';
+      placeholder.style.height = '';
+      if (onChange) onChange(false);
+    }
+  }
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('scroll', check, { passive: true });
+    window.addEventListener('resize', check, { passive: true });
+  }
+
+  return placeholder;
+}

package/src/components/alert-dialog.js

@@ -0,0 +1,75 @@
+/**
+ * AlertDialog — Confirmation dialog that requires explicit user action.
+ * Uses native <dialog> with focus trap. Blocks interaction until resolved.
+ *
+ * @module decantr/components/alert-dialog
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.title]
+ * @param {string} [props.description]
+ * @param {Function} props.visible - Signal getter for visibility
+ * @param {Function} [props.onConfirm]
+ * @param {Function} [props.onCancel]
+ * @param {string} [props.confirmText='Confirm']
+ * @param {string} [props.cancelText='Cancel']
+ * @param {string} [props.variant='destructive'] - Confirm button variant
+ * @param {string} [props.class]
+ * @returns {HTMLDialogElement}
+ */
+export function AlertDialog(props = {}) {
+  injectBase();
+  const { title, description, visible, onConfirm, onCancel, confirmText = 'Confirm', cancelText = 'Cancel', variant = 'destructive', class: cls } = props;
+
+  const body = h('div', { class: 'd-alertdialog-body' });
+  if (title) body.appendChild(h('div', { class: 'd-alertdialog-title', id: 'd-alertdialog-title' }, title));
+  if (description) body.appendChild(h('div', { class: 'd-alertdialog-desc' }, description));
+
+  const cancelBtn = h('button', { type: 'button', class: 'd-btn d-btn-outline' }, cancelText);
+  const confirmBtn = h('button', { type: 'button', class: `d-btn d-btn-${variant}` }, confirmText);
+
+  const footer = h('div', { class: 'd-alertdialog-footer' }, cancelBtn, confirmBtn);
+
+  const panel = h('div', { class: cx('d-alertdialog-panel', cls) }, body, footer);
+
+  const dialog = h('dialog', {
+    class: 'd-alertdialog',
+    role: 'alertdialog',
+    'aria-modal': 'true',
+    'aria-labelledby': title ? 'd-alertdialog-title' : undefined
+  }, panel);
+
+  function close() {
+    if (dialog.open) dialog.close();
+  }
+
+  cancelBtn.addEventListener('click', () => {
+    close();
+    if (onCancel) onCancel();
+  });
+
+  confirmBtn.addEventListener('click', () => {
+    close();
+    if (onConfirm) onConfirm();
+  });
+
+  // Prevent backdrop close (user must use buttons)
+  dialog.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close();
+    if (onCancel) onCancel();
+  });
+
+  if (typeof visible === 'function') {
+    createEffect(() => {
+      if (visible()) { if (!dialog.open) dialog.showModal(); }
+      else close();
+    });
+  }
+
+  return dialog;
+}

package/src/components/alert.js

@@ -0,0 +1,47 @@
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.variant] - info|success|warning|error (default: info)
+ * @param {boolean} [props.dismissible]
+ * @param {Function} [props.onDismiss]
+ * @param {string|Node} [props.icon]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Alert(props = {}, ...children) {
+  injectBase();
+
+  const { variant = 'info', dismissible, onDismiss, icon, class: cls } = props;
+
+  const alertRole = (variant === 'error' || variant === 'warning') ? 'alert' : 'status';
+  const alertClass = cx('d-alert', `d-alert-${variant}`, cls);
+  const el = h('div', { class: alertClass, role: alertRole });
+
+  if (icon) {
+    const iconEl = typeof icon === 'string'
+      ? h('span', { class: 'd-alert-icon', 'aria-hidden': 'true' }, icon)
+      : h('span', { class: 'd-alert-icon', 'aria-hidden': 'true' }, icon);
+    el.appendChild(iconEl);
+  }
+
+  const body = h('div', { class: 'd-alert-body' }, ...children);
+  el.appendChild(body);
+
+  if (dismissible) {
+    const closeBtn = h('button', {
+      class: 'd-alert-dismiss',
+      'aria-label': 'Dismiss',
+      type: 'button'
+    }, '\u00d7');
+    closeBtn.addEventListener('click', () => {
+      el.remove();
+      if (onDismiss) onDismiss();
+    });
+    el.appendChild(closeBtn);
+  }
+
+  return el;
+}

package/src/components/aspect-ratio.js

@@ -0,0 +1,24 @@
+/**
+ * AspectRatio — Constrains child to a fixed aspect ratio.
+ *
+ * @module decantr/components/aspect-ratio
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number} [props.ratio=16/9] - Width/height ratio
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function AspectRatio(props = {}, ...children) {
+  injectBase();
+  const { ratio = 16 / 9, class: cls, ...rest } = props;
+  return h('div', {
+    class: cx('d-aspect', cls),
+    style: { aspectRatio: String(ratio) },
+    ...rest
+  }, ...children);
+}

package/src/components/avatar-group.js

@@ -0,0 +1,55 @@
+/**
+ * AvatarGroup — Stacked avatar display with overflow count.
+ * Shows up to `max` avatars with a +N overflow indicator.
+ *
+ * @module decantr/components/avatar-group
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number} [props.max=5] - Max visible avatars
+ * @param {string} [props.size] - sm|lg|xl
+ * @param {string} [props.class]
+ * @param {...Node} children - Avatar components
+ * @returns {HTMLElement}
+ */
+export function AvatarGroup(props = {}, ...children) {
+  injectBase();
+  const { max = 5, size, class: cls } = props;
+
+  const group = h('div', {
+    class: cx('d-avatar-group', cls),
+    role: 'group',
+    'aria-label': 'Avatar group'
+  });
+
+  // Flatten children
+  const avatars = children.flat().filter(c => c && c.nodeType);
+  const total = avatars.length;
+  const visible = avatars.slice(0, max);
+
+  // Apply size class if provided
+  if (size) {
+    visible.forEach(av => {
+      if (av.classList && !av.classList.contains(`d-avatar-${size}`)) {
+        av.classList.add(`d-avatar-${size}`);
+      }
+    });
+  }
+
+  visible.forEach(av => group.appendChild(av));
+
+  // Overflow count
+  if (total > max) {
+    const sizeClass = size ? `d-avatar d-avatar-${size}` : 'd-avatar';
+    const overflow = h('span', {
+      class: cx('d-avatar-group-count', sizeClass),
+      'aria-label': `${total - max} more`
+    }, `+${total - max}`);
+    group.appendChild(overflow);
+  }
+
+  return group;
+}

package/src/components/avatar.js

@@ -0,0 +1,38 @@
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.src] - Image URL
+ * @param {string} [props.alt] - Alt text
+ * @param {string} [props.size] - sm|lg|xl
+ * @param {string} [props.fallback] - Fallback text (initials)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Avatar(props = {}) {
+  injectBase();
+
+  const { src, alt = '', size, fallback, class: cls } = props;
+
+  const avatarClass = cx('d-avatar', size && `d-avatar-${size}`, cls);
+  const container = h('div', { class: avatarClass });
+
+  if (src) {
+    const img = h('img', { class: 'd-avatar-img', src, alt });
+    img.addEventListener('error', () => {
+      img.remove();
+      container.appendChild(createFallback());
+    });
+    container.appendChild(img);
+  } else {
+    container.appendChild(createFallback());
+  }
+
+  function createFallback() {
+    const text = fallback || alt.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() || '?';
+    return h('span', { class: 'd-avatar-fallback', 'aria-hidden': 'true' }, text);
+  }
+
+  return container;
+}

package/src/components/back-top.js

@@ -0,0 +1,75 @@
+/**
+ * BackTop — Floating scroll-to-top button that appears after scrolling.
+ *
+ * @module decantr/components/back-top
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number} [props.visibilityHeight=400] - Scroll threshold in px
+ * @param {HTMLElement} [props.target] - Scroll container (default: window)
+ * @param {string} [props.class]
+ * @param {...Node} children - Custom button content
+ * @returns {HTMLElement}
+ */
+export function BackTop(props = {}, ...children) {
+  injectBase();
+  const { visibilityHeight = 400, target, class: cls } = props;
+
+  const hasCustomContent = children.flat().filter(c => c && c.nodeType).length > 0;
+  const content = hasCustomContent
+    ? children.flat().filter(c => c && c.nodeType)
+    : [icon('arrow-up', { size: '1.25em' })];
+
+  const btn = h('button', {
+    type: 'button',
+    class: cx('d-backtop', 'd-backtop-hidden', cls),
+    'aria-label': 'Scroll to top'
+  }, ...content);
+
+  function getScrollTop() {
+    if (target) return target.scrollTop;
+    return document.documentElement.scrollTop || document.body.scrollTop;
+  }
+
+  function scrollToTop() {
+    const scrollEl = target || window;
+    if (scrollEl.scrollTo) {
+      scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      scrollEl.scrollTop = 0;
+    }
+  }
+
+  function onScroll() {
+    const scrollTop = getScrollTop();
+    if (scrollTop >= visibilityHeight) {
+      btn.classList.remove('d-backtop-hidden');
+      btn.classList.add('d-backtop-visible');
+    } else {
+      btn.classList.remove('d-backtop-visible');
+      btn.classList.add('d-backtop-hidden');
+    }
+  }
+
+  btn.addEventListener('click', scrollToTop);
+
+  // Attach scroll listener
+  const scrollTarget = target || window;
+  scrollTarget.addEventListener('scroll', onScroll, { passive: true });
+
+  // Initial check
+  if (typeof requestAnimationFrame !== 'undefined') {
+    requestAnimationFrame(onScroll);
+  }
+
+  // Expose destroy for cleanup
+  btn._destroy = () => {
+    scrollTarget.removeEventListener('scroll', onScroll);
+  };
+
+  return btn;
+}

package/src/components/badge.js

@@ -0,0 +1,74 @@
+import { h, text } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} [props.count]
+ * @param {string} [props.color] - CSS color override
+ * @param {boolean} [props.dot] - Show as dot instead of pill
+ * @param {string} [props.status] - success|error|warning|processing
+ * @param {string} [props.variant] - Alias for status
+ * @param {string} [props.class]
+ * @param {...Node} children - If provided, badge wraps as superscript
+ * @returns {HTMLElement}
+ */
+export function Badge(props = {}, ...children) {
+  injectBase();
+
+  const { count, color, dot, status, variant, class: cls } = props;
+  const resolvedStatus = status || variant;
+
+  const statusColor = resolvedStatus === 'success' ? 'var(--d-success)'
+    : resolvedStatus === 'error' ? 'var(--d-error)'
+    : resolvedStatus === 'warning' ? 'var(--d-warning)'
+    : resolvedStatus === 'processing' ? 'var(--d-primary)'
+    : resolvedStatus === 'primary' ? 'var(--d-primary)'
+    : resolvedStatus === 'accent' ? 'var(--d-accent)'
+    : resolvedStatus === 'info' ? 'var(--d-info)'
+    : null;
+
+  const bgColor = color || statusColor;
+
+  if (dot) {
+    const dotEl = h('span', {
+      class: cx('d-badge-dot', resolvedStatus === 'processing' && 'd-badge-processing', cls)
+    });
+    if (bgColor) dotEl.style.background = bgColor;
+
+    if (children.length) {
+      return h('span', { class: 'd-badge-wrapper' },
+        ...children,
+        h('span', { class: 'd-badge-sup' }, dotEl)
+      );
+    }
+    return dotEl;
+  }
+
+  const badgeClass = cx('d-badge', resolvedStatus === 'processing' && 'd-badge-processing', cls);
+  const badgeEl = h('span', { class: badgeClass });
+  if (bgColor) badgeEl.style.background = bgColor;
+
+  if (typeof count === 'function') {
+    badgeEl.appendChild(text(() => String(count())));
+  } else if (count !== undefined) {
+    badgeEl.appendChild(document.createTextNode(String(count)));
+  }
+
+  if (children.length) {
+    // Label mode: string children are the badge's own text (e.g. Badge({variant:'primary'}, 'New'))
+    // Wrapper mode: DOM element children get the badge as a superscript overlay
+    const isLabel = children.every(c => typeof c === 'string' || typeof c === 'number');
+    if (isLabel) {
+      for (const child of children) {
+        badgeEl.appendChild(document.createTextNode(String(child)));
+      }
+      return badgeEl;
+    }
+    return h('span', { class: 'd-badge-wrapper' },
+      ...children,
+      h('span', { class: 'd-badge-sup' }, badgeEl)
+    );
+  }
+
+  return badgeEl;
+}