decantr 0.9.0

package/src/components/tree-select.js

@@ -0,0 +1,274 @@
+/**
+ * TreeSelect — Dropdown with hierarchical tree selection.
+ * Supports single/multiple selection, checkboxes, and search.
+ * Uses createFieldOverlay behavior.
+ *
+ * @module decantr/components/tree-select
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret, createCheckControl, createFormField } from './_behaviors.js';
+import { applyFieldState, createFieldOverlay } from './_primitives.js';
+
+const { div, button: buttonTag, span, input: inputTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ value: string, label: string, disabled?: boolean, children?: Object[] }[]} [props.options]
+ * @param {string|Array<string>|Function} [props.value]
+ * @param {boolean} [props.multiple=false]
+ * @param {boolean} [props.checkable=false]
+ * @param {Function} [props.onchange]
+ * @param {string} [props.placeholder='Select']
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function TreeSelect(props = {}) {
+  injectBase();
+  const {
+    options = [], value, multiple = false, checkable = false,
+    onchange, placeholder = 'Select', disabled, error, success,
+    variant, size, label, help, required, class: cls
+  } = props;
+
+  const selected = new Set();
+  const expanded = new Set();
+  let searchText = '';
+
+  function parseValue(v) {
+    selected.clear();
+    if (!v) return;
+    const val = typeof v === 'function' ? v() : v;
+    if (Array.isArray(val)) val.forEach(s => selected.add(s));
+    else if (val) selected.add(val);
+  }
+
+  parseValue(value);
+
+  function findLabel(nodes, val) {
+    for (const n of nodes) {
+      if (n.value === val) return n.label;
+      if (n.children) { const r = findLabel(n.children, val); if (r) return r; }
+    }
+    return null;
+  }
+
+  function getDisplayText() {
+    if (!selected.size) return '';
+    return [...selected].map(v => findLabel(options, v) || v).join(', ');
+  }
+
+  // Trigger
+  const displayEl = span({ class: 'd-treeselect-display' });
+  const arrowEl = caret('down', { class: 'd-treeselect-arrow' });
+  const trigger = buttonTag({
+    type: 'button',
+    class: cx('d-treeselect-trigger', 'd-select'),
+    'aria-haspopup': 'listbox',
+    'aria-expanded': 'false'
+  }, displayEl, arrowEl);
+
+  const panel = div({ class: 'd-treeselect-panel', role: 'tree' });
+  const wrap = div({ class: cx('d-treeselect', cls) }, trigger, panel);
+
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  function updateDisplay() {
+    const text = getDisplayText();
+    displayEl.textContent = text || placeholder;
+    if (!text) displayEl.classList.add('d-select-placeholder');
+    else displayEl.classList.remove('d-select-placeholder');
+  }
+
+  function emit() {
+    updateDisplay();
+    if (!onchange) return;
+    if (multiple || checkable) onchange([...selected]);
+    else onchange(selected.size ? [...selected][0] : null);
+  }
+
+  function selectNode(node) {
+    if (node.disabled) return;
+    if (multiple || checkable) {
+      if (selected.has(node.value)) selected.delete(node.value);
+      else selected.add(node.value);
+    } else {
+      selected.clear();
+      selected.add(node.value);
+      overlay.close();
+    }
+    emit();
+    renderTree();
+  }
+
+  function toggleExpand(node) {
+    if (expanded.has(node.value)) expanded.delete(node.value);
+    else expanded.add(node.value);
+    renderTree();
+  }
+
+  function matchesSearch(node) {
+    if (!searchText) return true;
+    const q = searchText.toLowerCase();
+    if (node.label.toLowerCase().includes(q)) return true;
+    if (node.children) return node.children.some(c => matchesSearch(c));
+    return false;
+  }
+
+  function renderNode(node, depth) {
+    if (!matchesSearch(node)) return null;
+
+    const hasChildren = node.children && node.children.length;
+    const isExpanded = expanded.has(node.value);
+    const isSelected = selected.has(node.value);
+
+    const content = div({
+      class: cx('d-tree-node-content', isSelected && 'd-tree-node-selected'),
+      role: 'treeitem',
+      'aria-selected': String(isSelected),
+      'aria-expanded': hasChildren ? String(isExpanded) : undefined
+    });
+
+    for (let i = 0; i < depth; i++) {
+      content.appendChild(span({ class: 'd-tree-node-indent' }));
+    }
+
+    if (hasChildren) {
+      const switcher = buttonTag({
+        type: 'button',
+        class: cx('d-tree-node-switcher', isExpanded && 'd-tree-node-switcher-open'),
+        'aria-label': isExpanded ? 'Collapse' : 'Expand',
+        tabindex: '-1'
+      }, caret('right', { size: '0.875em' }));
+      switcher.addEventListener('click', (e) => { e.stopPropagation(); toggleExpand(node); });
+      content.appendChild(switcher);
+    } else {
+      content.appendChild(span({ class: 'd-tree-node-indent' }));
+    }
+
+    if (checkable) {
+      const { wrap: cbWrap, input: cb } = createCheckControl({
+        tabindex: '-1',
+        disabled: node.disabled ? '' : undefined
+      });
+      cb.checked = isSelected;
+      cb.addEventListener('change', (e) => { e.stopPropagation(); selectNode(node); });
+      content.appendChild(cbWrap);
+    }
+
+    content.appendChild(span({ class: 'd-tree-node-label' }, node.label));
+
+    if (!checkable && !node.disabled) {
+      content.addEventListener('click', () => selectNode(node));
+    }
+
+    const wrapper = div({ class: 'd-tree-node' }, content);
+
+    if (hasChildren && isExpanded) {
+      const childContainer = div({ class: 'd-tree-children', role: 'group' });
+      node.children.forEach(child => {
+        const childEl = renderNode(child, depth + 1);
+        if (childEl) childContainer.appendChild(childEl);
+      });
+      wrapper.appendChild(childContainer);
+    }
+
+    return wrapper;
+  }
+
+  function renderTree() {
+    const existingSearch = panel.querySelector('.d-treeselect-search');
+    const hadFocus = existingSearch && document.activeElement === existingSearch;
+    const cursorPos = existingSearch ? existingSearch.selectionStart : 0;
+
+    panel.replaceChildren();
+
+    const searchInput = inputTag({
+      type: 'text',
+      class: 'd-treeselect-search',
+      placeholder: 'Search...',
+      'aria-label': 'Search options'
+    });
+    searchInput.value = searchText;
+    searchInput.addEventListener('input', (e) => {
+      searchText = e.target.value;
+      renderTree();
+    });
+    panel.appendChild(searchInput);
+
+    const treeWrap = div({ class: 'd-tree', role: 'tree' });
+    options.forEach(node => {
+      const el = renderNode(node, 0);
+      if (el) treeWrap.appendChild(el);
+    });
+    panel.appendChild(treeWrap);
+
+    if (hadFocus) {
+      requestAnimationFrame(() => {
+        searchInput.focus();
+        searchInput.setSelectionRange(cursorPos, cursorPos);
+      });
+    }
+  }
+
+  const overlay = createFieldOverlay(trigger, panel, {
+    matchWidth: false,
+    onOpen: () => { searchText = ''; wrap.classList.add('d-treeselect-open'); renderTree(); },
+    onClose: () => { searchText = ''; wrap.classList.remove('d-treeselect-open'); }
+  });
+
+  trigger.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    overlay.toggle();
+  });
+
+  trigger.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      overlay.isOpen() ? overlay.close() : overlay.open();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!overlay.isOpen()) overlay.open();
+    } else if (e.key === 'Escape') {
+      overlay.close();
+    }
+  });
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const dis = disabled();
+      trigger.disabled = dis;
+      trigger.setAttribute('aria-disabled', String(!!dis));
+    });
+  } else if (disabled) {
+    trigger.disabled = true;
+    trigger.setAttribute('aria-disabled', 'true');
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { parseValue(value); updateDisplay(); });
+  }
+
+  onDestroy(() => { overlay.destroy(); });
+
+  updateDisplay();
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/tree.js

@@ -0,0 +1,141 @@
+/**
+ * Tree — Hierarchical tree view with expand/collapse, checkboxes, and selection.
+ * Uses createDisclosure behavior for node expand/collapse.
+ *
+ * @module decantr/components/tree
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret, createCheckControl } from './_behaviors.js';
+
+/**
+ * @typedef {Object} TreeNode
+ * @property {string} key - Unique identifier
+ * @property {string} label
+ * @property {string|Node} [icon]
+ * @property {boolean} [disabled]
+ * @property {boolean} [isLeaf]
+ * @property {TreeNode[]} [children]
+ */
+
+/**
+ * @param {Object} [props]
+ * @param {TreeNode[]} [props.data]
+ * @param {string[]} [props.expandedKeys] - Initially expanded keys
+ * @param {string[]} [props.selectedKeys] - Selected keys
+ * @param {string[]} [props.checkedKeys] - Checked keys (requires checkable)
+ * @param {boolean} [props.checkable=false] - Show checkboxes
+ * @param {boolean} [props.selectable=true]
+ * @param {boolean} [props.defaultExpandAll=false]
+ * @param {Function} [props.onSelect] - Called with (selectedKeys, {node, selected})
+ * @param {Function} [props.onCheck] - Called with (checkedKeys, {node, checked})
+ * @param {Function} [props.onExpand] - Called with (expandedKeys, {node, expanded})
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Tree(props = {}) {
+  injectBase();
+  const { data = [], expandedKeys: initExpanded = [], selectedKeys: initSelected = [], checkedKeys: initChecked = [], checkable = false, selectable = true, defaultExpandAll = false, onSelect, onCheck, onExpand, class: cls } = props;
+
+  const expanded = new Set(initExpanded);
+  const selected = new Set(initSelected);
+  const checked = new Set(initChecked);
+
+  if (defaultExpandAll) {
+    const collectKeys = (nodes) => { nodes.forEach(n => { if (n.children?.length) { expanded.add(n.key); collectKeys(n.children); } }); };
+    collectKeys(data);
+  }
+
+  const tree = h('div', { class: cx('d-tree', cls), role: 'tree' });
+
+  function renderNode(node, depth) {
+    const hasChildren = node.children && node.children.length;
+    const isExpanded = expanded.has(node.key);
+    const isSelected = selected.has(node.key);
+    const isChecked = checked.has(node.key);
+
+    const nodeEl = h('div', { class: cx('d-tree-node', isSelected && 'd-tree-node-selected'), role: 'treeitem', 'aria-expanded': hasChildren ? String(isExpanded) : undefined });
+
+    const content = h('div', { class: 'd-tree-node-content' });
+
+    // Indent
+    for (let i = 0; i < depth; i++) {
+      content.appendChild(h('span', { class: 'd-tree-node-indent' }));
+    }
+
+    // Switcher
+    if (hasChildren) {
+      const switcher = h('button', {
+        type: 'button',
+        class: cx('d-tree-node-switcher', isExpanded && 'd-tree-node-switcher-open'),
+        'aria-label': isExpanded ? 'Collapse' : 'Expand'
+      }, caret('right'));
+      switcher.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (expanded.has(node.key)) expanded.delete(node.key);
+        else expanded.add(node.key);
+        render();
+        if (onExpand) onExpand([...expanded], { node, expanded: expanded.has(node.key) });
+      });
+      content.appendChild(switcher);
+    } else {
+      content.appendChild(h('span', { class: 'd-tree-node-indent' }));
+    }
+
+    // Checkbox
+    if (checkable) {
+      const { wrap: cbWrap, input: cb } = createCheckControl({
+        disabled: node.disabled ? '' : undefined
+      });
+      cb.checked = isChecked;
+      cb.addEventListener('change', (e) => {
+        e.stopPropagation();
+        if (cb.checked) checked.add(node.key);
+        else checked.delete(node.key);
+        if (onCheck) onCheck([...checked], { node, checked: cb.checked });
+      });
+      content.appendChild(cbWrap);
+    }
+
+    // Icon
+    if (node.icon) {
+      const icon = typeof node.icon === 'string'
+        ? h('span', { 'aria-hidden': 'true' }, node.icon)
+        : node.icon;
+      content.appendChild(icon);
+    }
+
+    // Label
+    const label = h('span', { class: 'd-tree-node-label' }, node.label);
+    content.appendChild(label);
+
+    // Selection
+    if (selectable && !node.disabled) {
+      content.addEventListener('click', () => {
+        if (selected.has(node.key)) selected.delete(node.key);
+        else { selected.clear(); selected.add(node.key); }
+        render();
+        if (onSelect) onSelect([...selected], { node, selected: selected.has(node.key) });
+      });
+    }
+
+    nodeEl.appendChild(content);
+
+    // Children
+    if (hasChildren && isExpanded) {
+      const childContainer = h('div', { class: 'd-tree-children', role: 'group' });
+      node.children.forEach(child => childContainer.appendChild(renderNode(child, depth + 1)));
+      nodeEl.appendChild(childContainer);
+    }
+
+    return nodeEl;
+  }
+
+  function render() {
+    tree.replaceChildren();
+    data.forEach(node => tree.appendChild(renderNode(node, 0)));
+  }
+
+  render();
+  return tree;
+}

package/src/components/typography.js

@@ -0,0 +1,136 @@
+/**
+ * Typography — Title, Text, Paragraph, Link, Blockquote.
+ * Semantic text components with consistent token-based sizing.
+ *
+ * @module decantr/components/typography
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * Title — Heading element (h1-h5) with consistent styling.
+ * @param {Object} [props]
+ * @param {1|2|3|4|5} [props.level=3] - Heading level (1-5)
+ * @param {string} [props.type] - secondary|success|warning|danger
+ * @param {boolean} [props.mark]
+ * @param {boolean} [props.underline]
+ * @param {boolean} [props.strikethrough]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Title(props = {}, ...children) {
+  injectBase();
+  const { level = 3, type, mark, underline, strikethrough, disabled, class: cls, ...rest } = props;
+  const tag = `h${Math.max(1, Math.min(5, level))}`;
+  const className = cx(
+    'd-title',
+    `d-title-${level}`,
+    type && `d-text-${type}`,
+    disabled && 'd-text-disabled',
+    cls
+  );
+  let content = children;
+  if (mark) content = [h('mark', { class: 'd-text-mark' }, ...content)];
+  if (underline) content = [h('u', null, ...content)];
+  if (strikethrough) content = [h('s', null, ...content)];
+  return h(tag, { class: className, ...rest }, ...content);
+}
+
+/**
+ * Text — Inline text with semantic variants.
+ * @param {Object} [props]
+ * @param {string} [props.type] - secondary|success|warning|danger
+ * @param {boolean} [props.strong]
+ * @param {boolean} [props.italic]
+ * @param {boolean} [props.underline]
+ * @param {boolean} [props.strikethrough]
+ * @param {boolean} [props.code]
+ * @param {boolean} [props.keyboard]
+ * @param {boolean} [props.mark]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Text(props = {}, ...children) {
+  injectBase();
+  const { type, strong, italic, underline, strikethrough, code, keyboard, mark, disabled, class: cls, ...rest } = props;
+
+  if (code) return h('code', { class: cx('d-text-code', type && `d-text-${type}`, cls), ...rest }, ...children);
+  if (keyboard) return h('kbd', { class: cx('d-kbd', cls), ...rest }, ...children);
+
+  const className = cx(
+    'd-text',
+    type && `d-text-${type}`,
+    strong && 'd-text-strong',
+    italic && 'd-text-italic',
+    underline && 'd-text-underline',
+    strikethrough && 'd-text-strikethrough',
+    disabled && 'd-text-disabled',
+    cls
+  );
+
+  let content = children;
+  if (mark) content = [h('mark', { class: 'd-text-mark' }, ...content)];
+
+  return h('span', { class: className, ...rest }, ...content);
+}
+
+/**
+ * Paragraph — Block-level text with relaxed line-height.
+ * @param {Object} [props]
+ * @param {string} [props.type] - secondary|success|warning|danger
+ * @param {boolean} [props.strong]
+ * @param {boolean} [props.italic]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Paragraph(props = {}, ...children) {
+  injectBase();
+  const { type, strong, italic, class: cls, ...rest } = props;
+  const className = cx(
+    'd-paragraph',
+    type && `d-text-${type}`,
+    strong && 'd-text-strong',
+    italic && 'd-text-italic',
+    cls
+  );
+  return h('p', { class: className, ...rest }, ...children);
+}
+
+/**
+ * Link — Anchor element with consistent styling.
+ * @param {Object} [props]
+ * @param {string} [props.href]
+ * @param {string} [props.target]
+ * @param {string} [props.type] - secondary|success|warning|danger
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Link(props = {}, ...children) {
+  injectBase();
+  const { href, target, type, disabled, class: cls, ...rest } = props;
+  const className = cx('d-link', type && `d-text-${type}`, disabled && 'd-text-disabled', cls);
+  const el = h('a', { class: className, href, target, ...rest }, ...children);
+  if (target === '_blank') el.setAttribute('rel', 'noopener noreferrer');
+  if (disabled) { el.setAttribute('aria-disabled', 'true'); el.setAttribute('tabindex', '-1'); }
+  return el;
+}
+
+/**
+ * Blockquote — Styled quotation block.
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Blockquote(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('blockquote', { class: cx('d-blockquote', cls), ...rest }, ...children);
+}

package/src/components/upload.js

@@ -0,0 +1,118 @@
+/**
+ * Upload — File upload with drag-and-drop, file list, and progress.
+ *
+ * @module decantr/components/upload
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {boolean} [props.multiple=false]
+ * @param {string} [props.accept] - File type filter (e.g. 'image/*,.pdf')
+ * @param {boolean} [props.drag=false] - Enable drag-and-drop zone
+ * @param {number} [props.maxSize] - Max file size in bytes
+ * @param {number} [props.maxCount] - Max number of files
+ * @param {Function} [props.onchange] - Called with FileList
+ * @param {Function} [props.onRemove] - Called with file on remove
+ * @param {Function} [props.customRequest] - Custom upload handler (file) => void
+ * @param {boolean|Function} [props.disabled]
+ * @param {string} [props.class]
+ * @param {...Node} children - Custom trigger content (for drag mode, shown inside drop zone)
+ * @returns {HTMLElement}
+ */
+export function Upload(props = {}, ...children) {
+  injectBase();
+  const { multiple = false, accept, drag = false, maxSize, maxCount, onchange, onRemove, customRequest, disabled, class: cls } = props;
+
+  const files = [];
+  const fileInput = h('input', {
+    type: 'file',
+    class: 'd-upload-input',
+    multiple: multiple ? '' : undefined,
+    accept
+  });
+
+  const fileList = h('div', { class: 'd-upload-list' });
+  const container = h('div', { class: cx('d-upload', cls) });
+
+  function addFiles(newFiles) {
+    for (const file of newFiles) {
+      if (maxSize && file.size > maxSize) continue;
+      if (maxCount && files.length >= maxCount) break;
+      files.push(file);
+      renderFileItem(file);
+      if (customRequest) customRequest(file);
+    }
+    if (onchange) onchange([...files]);
+  }
+
+  function removeFile(file) {
+    const idx = files.indexOf(file);
+    if (idx >= 0) files.splice(idx, 1);
+    renderFileList();
+    if (onRemove) onRemove(file);
+    if (onchange) onchange([...files]);
+  }
+
+  function renderFileItem(file) {
+    const item = h('div', { class: 'd-upload-item' });
+    item.appendChild(h('span', { class: 'd-upload-item-name' }, file.name));
+    const removeBtn = h('button', { type: 'button', class: 'd-upload-item-remove', 'aria-label': `Remove ${file.name}` }, '\u00d7');
+    removeBtn.addEventListener('click', () => removeFile(file));
+    item.appendChild(removeBtn);
+    fileList.appendChild(item);
+  }
+
+  function renderFileList() {
+    fileList.replaceChildren();
+    files.forEach(renderFileItem);
+  }
+
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files.length) addFiles(fileInput.files);
+    fileInput.value = '';
+  });
+
+  if (drag) {
+    const dragger = h('div', { class: 'd-upload-dragger' },
+      ...children.length ? children : [h('span', null, 'Click or drag files here')]
+    );
+
+    dragger.addEventListener('click', () => {
+      if (typeof disabled === 'function' ? disabled() : disabled) return;
+      fileInput.click();
+    });
+
+    dragger.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dragger.classList.add('d-upload-dragger-active');
+    });
+    dragger.addEventListener('dragleave', () => {
+      dragger.classList.remove('d-upload-dragger-active');
+    });
+    dragger.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dragger.classList.remove('d-upload-dragger-active');
+      if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+    });
+
+    container.appendChild(fileInput);
+    container.appendChild(dragger);
+  } else {
+    const triggerBtn = children.length
+      ? h('div', { class: 'd-upload-trigger' }, ...children)
+      : h('button', { type: 'button', class: 'd-btn d-btn-default' }, 'Upload');
+
+    triggerBtn.addEventListener('click', () => {
+      if (typeof disabled === 'function' ? disabled() : disabled) return;
+      fileInput.click();
+    });
+
+    container.appendChild(fileInput);
+    container.appendChild(triggerBtn);
+  }
+
+  container.appendChild(fileList);
+  return container;
+}

package/src/components/visually-hidden.js

@@ -0,0 +1,20 @@
+/**
+ * VisuallyHidden — Screen-reader-only content wrapper.
+ * Renders content that is visually hidden but accessible to assistive technology.
+ *
+ * @module decantr/components/visually-hidden
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function VisuallyHidden(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('span', { class: cx('d-sr-only', cls), ...rest }, ...children);
+}