decantr 0.9.0

package/src/components/banner.js

@@ -0,0 +1,68 @@
+/**
+ * Banner — Full-width announcement bar for cookie consent, maintenance notices, promotions.
+ * Optionally sticky to top or bottom of viewport.
+ *
+ * @module decantr/components/banner
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {'info'|'success'|'warning'|'error'} [props.variant='info']
+ * @param {boolean} [props.dismissible=false]
+ * @param {Function} [props.onDismiss]
+ * @param {'top'|'bottom'|false} [props.sticky=false] - Sticky position
+ * @param {string|Node} [props.icon]
+ * @param {string|Node} [props.action] - Action slot (button/link)
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Banner(props = {}, ...children) {
+  injectBase();
+
+  const { variant = 'info', dismissible = false, onDismiss, sticky = false, icon, action, class: cls } = props;
+
+  const bannerClass = cx(
+    'd-banner',
+    `d-banner-${variant}`,
+    sticky === 'top' && 'd-banner-sticky-top',
+    sticky === 'bottom' && 'd-banner-sticky-bottom',
+    cls
+  );
+
+  const el = h('div', { class: bannerClass, role: 'banner' });
+
+  if (icon) {
+    const iconEl = typeof icon === 'string'
+      ? h('span', { class: 'd-banner-icon', 'aria-hidden': 'true' }, icon)
+      : h('span', { class: 'd-banner-icon', 'aria-hidden': 'true' }, icon);
+    el.appendChild(iconEl);
+  }
+
+  const body = h('div', { class: 'd-banner-body' }, ...children);
+  el.appendChild(body);
+
+  if (action) {
+    const actionEl = h('div', { class: 'd-banner-action' },
+      typeof action === 'string' ? h('span', null, action) : action
+    );
+    el.appendChild(actionEl);
+  }
+
+  if (dismissible) {
+    const closeBtn = h('button', {
+      class: 'd-banner-dismiss',
+      'aria-label': 'Dismiss banner',
+      type: 'button'
+    }, '\u00d7');
+    closeBtn.addEventListener('click', () => {
+      el.remove();
+      if (onDismiss) onDismiss();
+    });
+    el.appendChild(closeBtn);
+  }
+
+  return el;
+}

package/src/components/breadcrumb.js

@@ -0,0 +1,162 @@
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon } from './icon.js';
+import { createOverlay, createListbox } from './_behaviors.js';
+
+const { nav: navTag, ol, li, span, button: buttonTag, a } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ label: string, href?: string, onclick?: Function, icon?: string, disabled?: boolean }[]} props.items
+ * @param {'chevron'|'slash'|'dot'|string|HTMLElement} [props.separator] - Separator type (default: 'chevron')
+ * @param {'sm'|'lg'} [props.size] - Size variant
+ * @param {number} [props.maxItems] - Collapse middle items into ellipsis dropdown
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Breadcrumb(props = {}) {
+  injectBase();
+
+  const { items = [], separator = 'chevron', size, maxItems, class: cls } = props;
+
+  const nav = navTag({
+    class: cx('d-breadcrumb', size && `d-breadcrumb-${size}`, cls),
+    'aria-label': 'Breadcrumb'
+  });
+  const list = ol({ class: 'd-breadcrumb-list' });
+
+  function renderSeparator() {
+    const sep = span({ class: 'd-breadcrumb-separator', 'aria-hidden': 'true' });
+    if (separator === 'chevron') {
+      sep.appendChild(icon('chevron-right', { size: '1em' }));
+    } else if (separator === 'slash') {
+      sep.textContent = '/';
+    } else if (separator === 'dot') {
+      sep.textContent = '\u00B7';
+    } else if (typeof separator === 'object' && separator.nodeType === 1) {
+      sep.appendChild(separator.cloneNode(true));
+    } else {
+      sep.textContent = separator;
+    }
+    return sep;
+  }
+
+  function renderIcon(name) {
+    return icon(name, { size: '1em', class: 'd-breadcrumb-icon' });
+  }
+
+  function renderItem(item, isLast) {
+    const el = li({ class: 'd-breadcrumb-item' });
+
+    if (isLast) {
+      const cur = span({ class: 'd-breadcrumb-current', 'aria-current': 'page' });
+      if (item.icon) cur.appendChild(renderIcon(item.icon));
+      cur.appendChild(document.createTextNode(item.label));
+      el.appendChild(cur);
+    } else if (item.disabled) {
+      const s = span({ class: 'd-breadcrumb-link d-breadcrumb-link-disabled', 'aria-disabled': 'true' });
+      if (item.icon) s.appendChild(renderIcon(item.icon));
+      s.appendChild(document.createTextNode(item.label));
+      el.appendChild(s);
+      el.appendChild(renderSeparator());
+    } else if (item.href) {
+      const link = a({ class: 'd-breadcrumb-link', href: item.href });
+      if (item.icon) link.appendChild(renderIcon(item.icon));
+      link.appendChild(document.createTextNode(item.label));
+      el.appendChild(link);
+      el.appendChild(renderSeparator());
+    } else {
+      const linkProps = { class: 'd-breadcrumb-link' };
+      if (item.onclick) linkProps.onclick = item.onclick;
+      const btn = buttonTag(linkProps);
+      if (item.icon) btn.appendChild(renderIcon(item.icon));
+      btn.appendChild(document.createTextNode(item.label));
+      el.appendChild(btn);
+      el.appendChild(renderSeparator());
+    }
+
+    return el;
+  }
+
+  // Determine visible items and whether to collapse
+  const shouldCollapse = maxItems && maxItems > 1 && items.length > maxItems;
+
+  if (shouldCollapse) {
+    const firstItems = items.slice(0, 1);
+    const hiddenItems = items.slice(1, items.length - (maxItems - 1));
+    const lastItems = items.slice(items.length - (maxItems - 1));
+
+    // Render first item
+    firstItems.forEach(item => list.appendChild(renderItem(item, false)));
+
+    // Render ellipsis collapse
+    const collapseWrap = li({ class: 'd-breadcrumb-item' });
+    const collapseInner = span({ class: 'd-breadcrumb-collapse' });
+
+    const ellipsisBtn = buttonTag({
+      class: 'd-breadcrumb-ellipsis',
+      'aria-haspopup': 'menu',
+      'aria-label': 'Show more breadcrumbs'
+    });
+    ellipsisBtn.appendChild(icon('more-horizontal', { size: '1em' }));
+
+    const menu = span({
+      class: 'd-breadcrumb-menu',
+      role: 'menu'
+    });
+    menu.style.display = 'none';
+
+    hiddenItems.forEach(item => {
+      const menuItem = item.href
+        ? a({ class: 'd-dropdown-item', href: item.href, role: 'menuitem' })
+        : buttonTag({ class: 'd-dropdown-item', role: 'menuitem' });
+      if (item.onclick) menuItem.onclick = item.onclick;
+      if (item.disabled) {
+        menuItem.classList.add('d-dropdown-item-disabled');
+        menuItem.setAttribute('aria-disabled', 'true');
+      }
+      if (item.icon) menuItem.appendChild(renderIcon(item.icon));
+      menuItem.appendChild(document.createTextNode(item.label));
+      menu.appendChild(menuItem);
+    });
+
+    collapseInner.appendChild(ellipsisBtn);
+    collapseInner.appendChild(menu);
+    collapseWrap.appendChild(collapseInner);
+    collapseWrap.appendChild(renderSeparator());
+    list.appendChild(collapseWrap);
+
+    // Wire overlay + listbox behaviors
+    const overlay = createOverlay(ellipsisBtn, menu, {
+      trigger: 'click',
+      closeOnEscape: true,
+      closeOnOutside: true
+    });
+
+    const listbox = createListbox(menu, {
+      itemSelector: '.d-dropdown-item:not(.d-dropdown-item-disabled)',
+      activeClass: 'd-dropdown-item-highlight',
+      orientation: 'vertical',
+      onSelect: (el) => el.click()
+    });
+
+    onDestroy(() => {
+      overlay.destroy();
+      listbox.destroy();
+    });
+
+    // Render last items
+    lastItems.forEach((item, i) => {
+      const isLast = i === lastItems.length - 1;
+      list.appendChild(renderItem(item, isLast));
+    });
+  } else {
+    items.forEach((item, i) => {
+      list.appendChild(renderItem(item, i === items.length - 1));
+    });
+  }
+
+  nav.appendChild(list);
+  return nav;
+}

package/src/components/button.js

@@ -0,0 +1,115 @@
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx, reactiveAttr } from './_base.js';
+import { Spinner } from './spinner.js';
+import { icon as renderIcon } from './icon.js';
+
+const SPINNER_SIZE = {
+  xs: 'xs', sm: 'xs', default: 'sm', lg: 'default',
+  icon: 'sm', 'icon-xs': 'xs', 'icon-sm': 'xs', 'icon-lg': 'sm'
+};
+
+/**
+ * Shared variant resolver — reusable by any element needing button styles.
+ * @param {Object} [props]
+ * @param {string} [props.variant] - default|primary|secondary|tertiary|destructive|success|warning|outline|ghost|link
+ * @param {string} [props.size] - xs|sm|lg|icon|icon-xs|icon-sm|icon-lg
+ * @returns {string} CSS class string
+ */
+export function buttonVariants({ variant = 'default', size = 'default' } = {}) {
+  return cx('d-btn', `d-btn-${variant}`, size && size !== 'default' && `d-btn-${size}`);
+}
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.variant] - default|primary|secondary|tertiary|destructive|success|warning|outline|ghost|link
+ * @param {string} [props.size] - xs|sm|lg|icon|icon-xs|icon-sm|icon-lg
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|Function} [props.loading]
+ * @param {string} [props.class]
+ * @param {boolean} [props.block]
+ * @param {boolean} [props.rounded]
+ * @param {Function} [props.onclick]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Button(props = {}, ...children) {
+  injectBase();
+
+  const { variant, size, disabled, loading, block, rounded, iconLeft, iconRight, class: cls, onclick, type, ...rest } = props;
+
+  const variantCls = buttonVariants({ variant, size });
+  const className = cx(
+    variantCls,
+    block && 'd-btn-block',
+    rounded && 'd-btn-rounded',
+    cls
+  );
+
+  const btnProps = { class: className, type: type || 'button', ...rest };
+  if (onclick) btnProps.onclick = onclick;
+
+  // Resolve icon props — accept string name or Node
+  const leftIcon = iconLeft ? (typeof iconLeft === 'string' ? renderIcon(iconLeft, { size: '1em' }) : iconLeft) : null;
+  const rightIcon = iconRight ? (typeof iconRight === 'string' ? renderIcon(iconRight, { size: '1em' }) : iconRight) : null;
+
+  const allChildren = [];
+  if (leftIcon) allChildren.push(leftIcon);
+  allChildren.push(...children);
+  if (rightIcon) allChildren.push(rightIcon);
+
+  const el = h('button', btnProps, ...allChildren);
+
+  reactiveAttr(el, disabled, 'disabled');
+
+  const resolvedSize = size || 'default';
+
+  if (typeof loading === 'function') {
+    createEffect(() => {
+      const v = loading();
+      if (v) {
+        el.className = cx(className, 'd-btn-loading');
+        el.setAttribute('disabled', '');
+        _addSpinner(el, resolvedSize);
+      } else {
+        el.className = className;
+        _removeSpinner(el);
+        if (typeof disabled === 'function' ? !disabled() : !disabled) {
+          el.removeAttribute('disabled');
+        }
+      }
+    });
+  } else if (loading) {
+    el.className = cx(className, 'd-btn-loading');
+    el.setAttribute('disabled', '');
+    _addSpinner(el, resolvedSize);
+  }
+
+  return el;
+}
+
+function _addSpinner(el, size) {
+  if (el.querySelector('.d-btn-spinner')) return;
+  const overlay = document.createElement('span');
+  overlay.className = 'd-btn-spinner';
+  overlay.appendChild(Spinner({ size: SPINNER_SIZE[size] || 'sm' }));
+  el.appendChild(overlay);
+}
+
+function _removeSpinner(el) {
+  const overlay = el.querySelector('.d-btn-spinner');
+  if (overlay) overlay.remove();
+}
+
+/**
+ * Button.Group — groups buttons with connected borders.
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Button.Group = function Group(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('div', { class: cx('d-btn-group', cls), role: 'group', ...rest }, ...children);
+};

package/src/components/calendar.js

@@ -0,0 +1,131 @@
+/**
+ * Calendar — Full calendar display with day cells and events.
+ *
+ * @module decantr/components/calendar
+ */
+import { h } from '../core/index.js';
+import { createEffect, createSignal } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret } from './_behaviors.js';
+
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+/**
+ * @param {Object} [props]
+ * @param {Date|Function} [props.value] - Selected date
+ * @param {'month'|'year'} [props.mode='month']
+ * @param {boolean} [props.mini=false] - Compact mode (no cell content)
+ * @param {Function} [props.dateCellRender] - (date) => Node — custom cell content
+ * @param {Function} [props.onSelect] - Called with selected date
+ * @param {Function} [props.onPanelChange] - Called with (date, mode)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Calendar(props = {}) {
+  injectBase();
+  const { value, mode: initMode = 'month', mini = false, dateCellRender, onSelect, onPanelChange, class: cls } = props;
+
+  const [getView, setView] = createSignal(typeof value === 'function' ? (value() || new Date()) : (value || new Date()));
+  const [getMode, setMode] = createSignal(initMode);
+
+  const container = h('div', { class: cx('d-calendar', mini && 'd-calendar-mini', cls) });
+
+  function render() {
+    container.replaceChildren();
+    const viewDate = getView();
+    const mode = getMode();
+
+    // Header
+    const headerRow = h('div', { class: 'd-calendar-header' });
+    const prevBtn = h('button', { type: 'button', class: 'd-datepicker-nav-btn', 'aria-label': 'Previous' }, caret('left'));
+    const nextBtn = h('button', { type: 'button', class: 'd-datepicker-nav-btn', 'aria-label': 'Next' }, caret('right'));
+    const title = h('span', { class: 'd-calendar-title' },
+      mode === 'month' ? `${MONTHS[viewDate.getMonth()]} ${viewDate.getFullYear()}` : String(viewDate.getFullYear())
+    );
+
+    prevBtn.addEventListener('click', () => {
+      const d = new Date(viewDate);
+      if (mode === 'month') d.setMonth(d.getMonth() - 1);
+      else d.setFullYear(d.getFullYear() - 1);
+      setView(d);
+      if (onPanelChange) onPanelChange(d, mode);
+    });
+    nextBtn.addEventListener('click', () => {
+      const d = new Date(viewDate);
+      if (mode === 'month') d.setMonth(d.getMonth() + 1);
+      else d.setFullYear(d.getFullYear() + 1);
+      setView(d);
+      if (onPanelChange) onPanelChange(d, mode);
+    });
+
+    headerRow.appendChild(h('div', { class: 'd-datepicker-nav' }, prevBtn));
+    headerRow.appendChild(title);
+    headerRow.appendChild(h('div', { class: 'd-datepicker-nav' }, nextBtn));
+    container.appendChild(headerRow);
+
+    if (mode === 'month') renderMonth(viewDate);
+    else renderYear(viewDate);
+  }
+
+  function renderMonth(viewDate) {
+    const grid = h('div', { class: 'd-calendar-grid' });
+    DAYS.forEach(d => grid.appendChild(h('div', { class: 'd-calendar-weekday' }, mini ? d[0] : d)));
+
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const today = new Date();
+    const selected = typeof value === 'function' ? value() : value;
+
+    // Filler for previous month
+    for (let i = 0; i < firstDay; i++) {
+      grid.appendChild(h('div', { class: 'd-calendar-cell', style: { opacity: '0.3' } }));
+    }
+
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(year, month, i);
+      const isToday = d.toDateString() === today.toDateString();
+      const isSel = selected && d.toDateString() === new Date(selected).toDateString();
+
+      const cell = h('button', {
+        type: 'button',
+        class: cx('d-calendar-cell', isToday && 'd-datepicker-day-today', isSel && 'd-datepicker-day-selected')
+      });
+
+      cell.appendChild(h('div', { class: 'd-calendar-cell-content' }, String(i)));
+      if (dateCellRender && !mini) {
+        const custom = dateCellRender(d);
+        if (custom) cell.appendChild(custom);
+      }
+
+      cell.addEventListener('click', () => {
+        if (onSelect) onSelect(d);
+      });
+
+      grid.appendChild(cell);
+    }
+
+    container.appendChild(grid);
+  }
+
+  function renderYear(viewDate) {
+    const grid = h('div', { class: 'd-datepicker-months' });
+    MONTHS.forEach((m, i) => {
+      const btn = h('button', { type: 'button', class: 'd-datepicker-month' }, m.slice(0, 3));
+      btn.addEventListener('click', () => {
+        const d = new Date(viewDate);
+        d.setMonth(i);
+        setView(d);
+        setMode('month');
+        if (onPanelChange) onPanelChange(d, 'month');
+      });
+      grid.appendChild(btn);
+    });
+    container.appendChild(grid);
+  }
+
+  createEffect(render);
+  return container;
+}

package/src/components/card.js

@@ -0,0 +1,192 @@
+import { h, cond } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { Skeleton } from './skeleton.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string|Node} [props.title]
+ * @param {Node|Function} [props.extra] - Top-right header content
+ * @param {boolean} [props.hoverable]
+ * @param {boolean} [props.bordered] - Toggle border (default true)
+ * @param {boolean|Function} [props.loading] - Skeleton loading placeholder
+ * @param {'default'|'sm'} [props.size]
+ * @param {'inner'} [props.type] - Inner card variant
+ * @param {Node} [props.cover] - Cover image shorthand
+ * @param {Node[]} [props.actions] - Bottom action bar items
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Card(props = {}, ...children) {
+  injectBase();
+
+  const {
+    title, extra, hoverable, bordered = true, loading, size, type,
+    cover, actions, class: cls
+  } = props;
+
+  const cardClass = cx(
+    'd-card',
+    hoverable && 'd-card-hover',
+    !bordered && 'd-card-borderless',
+    size === 'sm' && 'd-card-sm',
+    type === 'inner' && 'd-card-inner',
+    cls
+  );
+
+  // Reactive loading — signal or boolean
+  if (typeof loading === 'function') {
+    const el = h('div', { class: cardClass });
+    const buildContent = () => {
+      el.innerHTML = '';
+      if (loading()) {
+        el.appendChild(h('div', { class: 'd-card-loading' }, Skeleton({ lines: 4 })));
+      } else {
+        buildCardContent(el, { title, extra, cover, actions }, children);
+      }
+    };
+    createEffect(buildContent);
+    return el;
+  }
+
+  if (loading) {
+    return h('div', { class: cardClass },
+      h('div', { class: 'd-card-loading' }, Skeleton({ lines: 4 }))
+    );
+  }
+
+  const parts = [];
+  buildCardContent(null, { title, extra, cover, actions }, children, parts);
+  return h('div', { class: cardClass }, ...parts);
+}
+
+/**
+ * Build card content parts — either appends to el or pushes to parts array.
+ */
+function buildCardContent(el, { title, extra, cover, actions }, children, parts) {
+  const out = parts || [];
+  const append = (node) => {
+    if (el) el.appendChild(node);
+    else out.push(node);
+  };
+
+  // Cover shorthand
+  if (cover) append(Card.Cover({}, cover));
+
+  // Title + extra → auto-create header
+  if (title) append(Card.Header({ extra }, title));
+
+  // Check if children use Card section pattern
+  const hasSection = children.some(c =>
+    c && typeof c === 'object' && c.nodeType === 1 &&
+    (c.className || '').split(/\s+/).some(cls =>
+      cls === 'd-card-header' || cls === 'd-card-body' || cls === 'd-card-footer' ||
+      cls === 'd-card-cover' || cls === 'd-card-meta' || cls === 'd-card-grid' ||
+      cls === 'd-card-actions'
+    )
+  );
+
+  if (hasSection) {
+    children.forEach(c => { if (c) append(c); });
+  } else if (children.length) {
+    append(h('div', { class: 'd-card-body' }, ...children));
+  }
+
+  // Actions shorthand
+  if (actions && actions.length) append(Card.Actions({}, ...actions));
+}
+
+/**
+ * Card.Header - card header section
+ * @param {Object} [props]
+ * @param {Node|Function} [props.extra] - Top-right header content
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Card.Header = function CardHeader(props = {}, ...children) {
+  const { extra, class: cls } = props;
+  if (extra) {
+    const extraNode = typeof extra === 'function' ? extra() : extra;
+    return h('div', { class: cx('d-card-header d-card-header-extra', cls) },
+      h('div', { class: 'd-card-header-content' }, ...children),
+      h('div', { class: 'd-card-extra' }, extraNode)
+    );
+  }
+  return h('div', { class: cx('d-card-header', cls) }, ...children);
+};
+
+/**
+ * Card.Body - card body section
+ * @param {Object} [props]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Card.Body = function CardBody(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-card-body', cls) }, ...children);
+};
+
+/**
+ * Card.Footer - card footer section
+ * @param {Object} [props]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+Card.Footer = function CardFooter(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-card-footer', cls) }, ...children);
+};
+
+/**
+ * Card.Cover - cover media area
+ * @param {Object} [props]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Card.Cover = function CardCover(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-card-cover', cls) }, ...children);
+};
+
+/**
+ * Card.Meta - avatar + title + description
+ * @param {Object} [props]
+ * @param {Node} [props.avatar]
+ * @param {string|Node} [props.title]
+ * @param {string|Node} [props.description]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+Card.Meta = function CardMeta(props = {}) {
+  const { avatar, title, description, class: cls } = props;
+  const detail = h('div', { class: 'd-card-meta-detail' });
+  if (title) detail.appendChild(h('div', { class: 'd-card-meta-title' }, title));
+  if (description) detail.appendChild(h('div', { class: 'd-card-meta-description' }, description));
+  return h('div', { class: cx('d-card-meta', cls) },
+    ...(avatar ? [avatar, detail] : [detail])
+  );
+};
+
+/**
+ * Card.Grid - grid sub-layout
+ * @param {Object} [props]
+ * @param {boolean} [props.hoverable]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Card.Grid = function CardGrid(props = {}, ...children) {
+  const { hoverable, class: cls } = props;
+  return h('div', { class: cx('d-card-grid', hoverable && 'd-card-grid-hover', cls) }, ...children);
+};
+
+/**
+ * Card.Actions - equal-width bottom action bar
+ * @param {Object} [props]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Card.Actions = function CardActions(props = {}, ...children) {
+  const { class: cls } = props;
+  return h('div', { class: cx('d-card-actions', cls) }, ...children);
+};