@soxa-ui/solid 0.0.0-stage → 0.3.0-beta.1

package/dist/source/adapter/runtime/Root.jsx

@@ -0,0 +1,51 @@
+/**
+ * Корень компонента по `tag` — то, что делал `Dynamic`, без его прокси и
+ * лишних вычислений: тег — одно мемо, атрибуты — один эффект `assign`, `ref`
+ * зовётся под мемо, а не своим эффектом. На сервере и для компонента в `tag`
+ * — `createDynamic`, без вызова компонента над ним: ключи гидратации у
+ * сервера и браузера те же, что были у `Dynamic`. AGENTS.md (Solid), «Корень и
+ * узлы частей».
+ */
+import { createMemo, createRenderEffect, mergeProps, untrack, } from 'solid-js';
+import { SVGElements, assign, createDynamic, getNextElement, insert, isServer, use, } from 'solid-js/web';
+import { rootTag } from './tag';
+const SVG = 'http://www.w3.org/2000/svg';
+/** Корень через `createDynamic`: атрибуты, `ref` и содержимое — одними пропсами. */
+function dynamicRoot(tag, props) {
+    return createDynamic(tag, mergeProps(props.attributes, {
+        ref: props.ref,
+        get children() {
+            return props.children;
+        },
+    }));
+}
+/** Узел тега: в окне гидратации — узел сервера, иначе — новый. */
+function nodeOf(tag, is) {
+    return getNextElement(() => SVGElements.has(tag)
+        ? document.createElementNS(SVG, tag)
+        : document.createElement(tag, typeof is === 'string' ? { is } : undefined));
+}
+export function Root(props) {
+    if (isServer)
+        return dynamicRoot(() => rootTag(props.tag), props);
+    // Мемо идёт только за тегом: смена тега — новый узел, очистки `ref` — прежнему
+    const root = createMemo(() => {
+        const tag = rootTag(props.tag);
+        if (tag === undefined)
+            return undefined;
+        // Компонент в `tag` — редкость, и его не облегчали
+        if (typeof tag === 'function')
+            return untrack(() => dynamicRoot(() => tag, props));
+        const node = nodeOf(tag, untrack(() => props.attributes().is));
+        const svg = SVGElements.has(tag);
+        // Записанное — память `assign`: следующий проход пишет только разницу
+        const assigned = {};
+        // Порядок — как у спреда `Dynamic`: содержимое, `ref`, атрибуты
+        insert(node, () => props.children);
+        use(props.ref, node);
+        createRenderEffect(() => assign(node, props.attributes(), svg, true, assigned, true));
+        return node;
+    });
+    // Само мемо, а не фрагмент: фрагмент над ним — ещё мемо на каждый корень
+    return root;
+}

package/dist/source/adapter/runtime/Teleport.jsx

@@ -0,0 +1,28 @@
+/**
+ * Teleport — аналог `<teleport :to>` Vue поверх `Portal`: цели нет — нет и
+ * содержимого, `disabled` рисует на месте. Смена цели или `disabled` переносит
+ * те же узлы. AGENTS.md (Solid), «Teleport».
+ */
+import { Show, children, getOwner, runWithOwner } from 'solid-js';
+import { Portal, isServer } from 'solid-js/web';
+function targetOf(selector) {
+    if (isServer || !selector)
+        return null;
+    return document.querySelector(selector);
+}
+export function Teleport(props) {
+    const owner = getOwner();
+    let resolved;
+    // Содержимое одно на обе ветки: мемо — с первым чтением, под владельцем
+    // Teleport. Без мемо `runWithOwner` возвращается, только когда сборка
+    // бросила и ошибку взяла граница ошибок
+    const content = () => {
+        resolved ??= runWithOwner(owner, () => children(() => props.children));
+        return resolved?.();
+    };
+    return (<Show when={!props.disabled} fallback={content()}>
+			<Show when={targetOf(props.to)}>
+				{(target) => <Portal mount={target()}>{content()}</Portal>}
+			</Show>
+		</Show>);
+}

package/dist/source/adapter/runtime/field-text.js

@@ -0,0 +1,44 @@
+/**
+ * Текст поля на узле — только когда он разошёлся с узлом, как `:value` у Vue.
+ * Привязку `value` Solid пишет на каждую смену, и запись узлу его же текста
+ * снимала бы с поля пометку «изменено пользователем» (`minlength` перестаёт
+ * проверяться). Атрибуты ложатся на поле последними.
+ * AGENTS.md (Solid), «Текст поля».
+ */
+import { createEffect } from 'solid-js';
+import { isServer } from 'solid-js/web';
+/**
+ * `ref` поля, который ведёт его текст. Эффект — пользовательский: Solid
+ * выполняет его после атрибутов узла, а `range` прижимает значение к `min` и
+ * `max`.
+ */
+function textRef(getText) {
+    return (node) => {
+        createEffect(() => {
+            const text = getText() ?? '';
+            if (node.value !== text)
+                node.value = text;
+        });
+    };
+}
+export function fieldText(getText) {
+    if (isServer) {
+        return {
+            get value() {
+                return getText();
+            },
+        };
+    }
+    return { ref: textRef(getText) };
+}
+/** У `<textarea>` атрибута `value` нет: на сервере текст — её содержимое. */
+export function textareaText(getText) {
+    if (isServer) {
+        return {
+            get textContent() {
+                return getText();
+            },
+        };
+    }
+    return { ref: textRef(getText) };
+}

package/dist/source/adapter/runtime/flow.js

@@ -0,0 +1,74 @@
+/**
+ * `Show`, `For` и `Index` — как у Solid 1.9, но переживают окна гидратации:
+ * пересчёт в окне до конца окна отдаёт прежнюю структуру. На сервере — сами
+ * примитивы Solid. В бочку адаптера модуль не входит: имена столкнулись бы с
+ * `solid-js`. AGENTS.md (Solid), «Ветки и петли».
+ */
+import { $TRACK, For as SolidFor, Index as SolidIndex, Show as SolidShow, createMemo, indexArray, mapArray, untrack, } from 'solid-js';
+import { isServer } from 'solid-js/web';
+import { createHeldMemo } from '../common/hydration';
+/** Без `keyed` ветка сменяется только с истинностью условия. */
+const SAME_TRUTHINESS = { equals: (a, b) => !a === !b };
+const NO_ITEMS = [];
+/** Функция-ребёнок — с параметром: ленивое мемо компилятора параметров не имеет. */
+function isRenderFunction(child) {
+    return typeof child === 'function' && child.length > 0;
+}
+function conditionOf(props) {
+    return props.when;
+}
+export function Show(props) {
+    // Ветвь выбирает перегрузку `Show` Solid
+    if (isServer)
+        return props.keyed ? SolidShow(props) : SolidShow(props);
+    const value = createHeldMemo(props, (conditionOf));
+    return props.keyed ? keyedBranch(props, value) : unkeyedBranch(props, value);
+}
+/** `keyed`: на каждое новое значение условия — функция-ребёнок заново. */
+function keyedBranch(props, value) {
+    return createMemo(() => {
+        const current = value();
+        if (!current)
+            return props.fallback;
+        const child = props.children;
+        return isRenderFunction(child) ? untrack(() => child(current)) : child;
+    });
+}
+/** Без `keyed`: значение функция-ребёнок читает аксессором. */
+function unkeyedBranch(props, value) {
+    const condition = createMemo(value, undefined, SAME_TRUTHINESS);
+    return createMemo(() => {
+        if (!condition())
+            return props.fallback;
+        const child = props.children;
+        return isRenderFunction(child) ? untrack(() => child(() => present(value))) : child;
+    });
+}
+/** Аксессор снятой ветки значения уже не найдёт — ошибка, как у Solid. */
+function present(value) {
+    const current = value();
+    if (!current)
+        throw new Error('<Show>: значение прочитано у снятой ветки — условие уже ложно');
+    return current;
+}
+export function For(props) {
+    if (isServer)
+        return SolidFor(props);
+    return createLoopMemo(props, mapArray(() => props.each, props.children, fallbackOf(props)));
+}
+export function Index(props) {
+    if (isServer)
+        return SolidIndex(props);
+    return createLoopMemo(props, indexArray(() => props.each, props.children, fallbackOf(props)));
+}
+/** `fallback` петли — как у Solid: только когда проп задан. */
+function fallbackOf(props) {
+    return 'fallback' in props ? { fallback: () => props.fallback } : undefined;
+}
+/**
+ * Мемо отображения петли (`mapArray`, `indexArray`): в окне оно читает список
+ * и элементы стора (`$TRACK`), но строк не строит.
+ */
+function createLoopMemo(props, map) {
+    return createHeldMemo(map, (live) => live(), () => Reflect.get(props.each || NO_ITEMS, $TRACK));
+}

package/dist/source/adapter/runtime/index.js

@@ -0,0 +1,8 @@
+export { useAdapter, useCollectionAdapter, joinBindings, } from './useAdapter';
+export { createShallowState, joinState } from './state';
+export { KeyedFor } from './KeyedFor';
+export { createPartNode, createPartNodes, } from './part-node';
+export { Root } from './Root';
+export { Teleport } from './Teleport';
+export { isTagComponent, rootTag } from './tag';
+export { fieldText, textareaText } from './field-text';

package/dist/source/adapter/runtime/part-node.js

@@ -0,0 +1,82 @@
+/**
+ * Узлы частей без экземпляра, которых тысячи, — ячейки таблицы, поле флажка в
+ * каждой её строке. Без спреда: спред на узле давал прокси `mergeProps`,
+ * эффект `ref` и эффект атрибутов. На сервере — `createDynamic`, в
+ * гидратации — узлы сервера. AGENTS.md (Solid), «Корень и узлы частей».
+ *
+ * - `createPartNode` — узел: атрибуты — один эффект, содержимое — вставкой;
+ * - `createPartNodes` — узлы записей списка с текстом: одно мемо на весь
+ *   список, без вычислений на узел.
+ */
+import { createRenderEffect } from 'solid-js';
+import { assign, createDynamic, getNextElement, insert, isServer } from 'solid-js/web';
+import { createHeldMemo } from '../common/hydration';
+import { createPartProps } from '../common/root';
+/** Создатель узла на тег — один на модуль: узлов тысячи, тегов два. */
+const creators = new Map();
+function creatorOf(tag) {
+    let creator = creators.get(tag);
+    if (!creator)
+        creators.set(tag, (creator = () => document.createElement(tag)));
+    return creator;
+}
+/** Узел на сервере: содержимое — геттером, после метки гидратации узла, как у разметки. */
+function serverNode(tag, attributes, children) {
+    return createDynamic(() => tag, {
+        ...attributes,
+        get children() {
+            return children();
+        },
+    });
+}
+/**
+ * Узел `tag` с атрибутами `read` и содержимым `children` (без него — пустой,
+ * как `input`). Зовётся там, где узел рисуется, — в теле или в функции петли:
+ * эффекты узла уходят с его владельцем. Атрибуты в окне гидратации держит
+ * `createPartProps`, как набор части.
+ */
+export function createPartNode(tag, read, children) {
+    if (isServer)
+        return serverNode(tag, read(), () => children?.());
+    // Узел сервера в окне гидратации, иначе — новый
+    const node = getNextElement(creatorOf(tag));
+    const attributes = createPartProps(read);
+    // Записанное — память `assign`: следующий проход пишет только разницу
+    const assigned = {};
+    createRenderEffect(() => assign(node, attributes(), false, true, assigned, true));
+    if (children)
+        insert(node, children);
+    return node;
+}
+export function createPartNodes(source) {
+    if (isServer) {
+        return source
+            .each()
+            ?.map((entry) => serverNode(source.tag(entry), source.attributes(entry), () => source.text(entry)));
+    }
+    const records = new Map();
+    let shown = [];
+    const draw = (entries) => {
+        const seen = new Set();
+        const nodes = entries.map((entry) => {
+            const key = source.by(entry);
+            let record = records.get(key);
+            if (!record) {
+                const node = getNextElement(creatorOf(source.tag(entry)));
+                records.set(key, (record = { node, assigned: {}, text: undefined }));
+            }
+            assign(record.node, source.attributes(entry), false, true, record.assigned, true);
+            record.text = insert(record.node, source.text(entry), undefined, record.text);
+            seen.add(key);
+            return record.node;
+        });
+        for (const key of records.keys())
+            if (!seen.has(key))
+                records.delete(key);
+        // Те же узлы тем же порядком — тот же список: вставке родителя переставлять нечего
+        if (nodes.length !== shown.length || nodes.some((node, index) => node !== shown[index]))
+            shown = nodes;
+        return shown;
+    };
+    return createHeldMemo(source, (current) => draw(current.each() ?? []), (current) => current.each());
+}

package/dist/source/adapter/runtime/state.js

@@ -0,0 +1,127 @@
+/**
+ * The binding's state and the view of two states. AGENTS.md (Solid), «Связка».
+ *
+ * - The state is a signal per property, and a value is handed over as it is:
+ *   the core hands out values, and a changed one comes as a new object
+ *   (AGENTS.md, «Контракт границы core → ui»). Solid's store wrapped every
+ *   nested object — a row's cells, their `aria` and `dataset` — in a proxy
+ *   with a signal per read property that never changes. Like `shallowRef` in
+ *   Vue.
+ * - A signal is made by the first read of a property: the markup reads less
+ *   than half of the binding's properties, and the subscription hands over the
+ *   value of each.
+ * - Writes of an update of the exchange are applied at its end, in one
+ *   `batch` (`IUpdateListener`): Solid renders on a signal write, and a write
+ *   applied in the middle of the update rendered before the update's event
+ *   reached the consumer — the panel opened by `change:open` mounted, and its
+ *   items joined the menu first. A read in the middle of the update sees the
+ *   written value already: only the signal's notification waits.
+ * - The view of two contexts is a proxy that reads a property from the state
+ *   on every read: a spread would read it once, in the component's body, and
+ *   getters by keys would lose the properties not set by the assembly. The
+ *   component and the facade have no properties of the same name — the
+ *   facade's names are prefixed.
+ */
+import { batch, createSignal } from 'solid-js';
+/** Значения и сигналы свойств — за прокси состояния. */
+class TShallowState {
+    /** Записанные, но ещё не прочитанные — без сигнала. */
+    _values = new Map();
+    /** Прочитанные записанные. */
+    _signals = new Map();
+    /** Прочитанные до записи: подписка связки отдаёт каждое свойство сразу, и здесь — чужие. */
+    _unwritten = new Map();
+    /** Writes of the update in progress — applied at its end. */
+    _pending;
+    /** Updates of the exchange in progress: a sink's write to a participant nests one. */
+    _depth = 0;
+    /** The property was written: for the binding, one of its properties, from the subscription. */
+    written(key) {
+        return this._values.has(key) || this._signals.has(key) || this._pending?.has(key) === true;
+    }
+    read(key) {
+        const value = this._signalOf(key)[0]();
+        const pending = this._pending;
+        return pending?.has(key) ? pending.get(key) : value;
+    }
+    write(name, value) {
+        if (this._depth > 0)
+            (this._pending ??= new Map()).set(name, value);
+        else
+            this._apply(name, value);
+    }
+    begin() {
+        this._depth++;
+    }
+    /** The outermost update ended: its writes go to the signals, and Solid renders once. */
+    end() {
+        // The listener may have come in the middle of an update and missed its beginning
+        if (this._depth === 0 || --this._depth > 0)
+            return;
+        const pending = this._pending;
+        if (pending === undefined)
+            return;
+        this._pending = undefined;
+        batch(() => pending.forEach((value, name) => this._apply(name, value)));
+    }
+    _apply(name, value) {
+        const signal = this._signals.get(name) ?? this._adopt(name);
+        // A setter of a signal would take a function value for an updater
+        if (signal)
+            signal[1](() => value);
+        else
+            this._values.set(name, value);
+    }
+    _signalOf(key) {
+        const signal = this._signals.get(key) ?? this._unwritten.get(key);
+        if (signal)
+            return signal;
+        const values = this._values;
+        const created = createSignal(values.get(key), { internal: true });
+        if (values.delete(key))
+            this._signals.set(key, created);
+        else
+            this._unwritten.set(key, created);
+        return created;
+    }
+    /** Свойство, прочитанное до записи, записано: его сигнал — к записанным. */
+    _adopt(name) {
+        const signal = this._unwritten.get(name);
+        if (!signal)
+            return undefined;
+        this._unwritten.delete(name);
+        this._signals.set(name, signal);
+        return signal;
+    }
+}
+/** Состояния связок по их прокси — виду двух состояний. */
+const shallowStates = new WeakMap();
+/**
+ * A property with the value `undefined` is unset: `in` does not see it. The
+ * listener of the exchange's updates holds the writes of an update back to
+ * its end.
+ */
+export function createShallowState() {
+    const values = new TShallowState();
+    const state = new Proxy({}, {
+        get: (_target, key) => values.read(key),
+        has: (_target, key) => values.read(key) !== undefined,
+    });
+    shallowStates.set(state, values);
+    return [state, (name, value) => values.write(name, value), values];
+}
+/**
+ * Свойство, которого у верхнего состояния связки нет вовсе, читается снизу и
+ * сигнала наверху не заводит: фасад строки таблицы не держит сигналов под
+ * свойства компонента.
+ */
+export function joinState(below, above) {
+    const lines = shallowStates.get(above);
+    const joined = new Proxy({}, {
+        get: (_target, key) => (!lines || lines.written(key)) && Reflect.has(above, key)
+            ? Reflect.get(above, key)
+            : Reflect.get(below, key),
+    });
+    // Связь прокси с именами обоих состояний TypeScript не видит
+    return joined;
+}

package/dist/source/adapter/runtime/tag.js

@@ -0,0 +1,10 @@
+/** Компонент Solid — функция; других функций в `tag` ядро не ждёт. */
+export function isTagComponent(tag) {
+    return typeof tag === 'function';
+}
+/** Корень по `tag` для `Root`: строка или компонент Solid, иначе корня нет. */
+export function rootTag(tag) {
+    if (typeof tag === 'string' || isTagComponent(tag))
+        return tag;
+    return undefined;
+}

package/dist/source/adapter/runtime/useAdapter.js

@@ -0,0 +1,116 @@
+/**
+ * useAdapter — binds an adapter context to Solid, the counterpart of Vue's
+ * `useAdapter`.
+ *
+ * - state is shallow, a signal per property read (`createShallowState`),
+ *   filled by the subscription to the binding;
+ * - inputs: an effect over all props, the binding writes the changed ones;
+ * - the component body runs once, on the server too: that is the acceptance
+ *   (`attach()`), and the cleanup is `onCleanup`;
+ * - events go to the `onXxx` callback props, after the acceptance, until
+ *   `detach`.
+ *
+ * The adapter's `ref` binds the root to `TElementPlugin` and hands the same
+ * node to the consumer's `ref`. A collection has two contexts: the facade is
+ * bound by `useCollectionAdapter`, before the component, and `joinBindings`
+ * joins it with the component's binding. AGENTS.md (Solid), «Связка».
+ */
+import { createComputed, createEffect, createMemo, createSignal, getOwner, onCleanup, onMount, runWithOwner, } from 'solid-js';
+import { toInstanceState } from '@soxa-ui/setup';
+import { SolidProfile } from '../common';
+import { createShallowState, joinState } from './state';
+/** What the component and a facade share: exchange, state, inputs, acceptance, events, cleanup. */
+function useExchange(adapter, props) {
+    const binding = adapter.connect(SolidProfile);
+    const [state, write, updates] = createShallowState();
+    onCleanup(binding.updates.listen(updates));
+    onCleanup(binding.state.subscribe(write));
+    createEffect(() => binding.inputs.full(props));
+    // Children run in document order, so items join the collection in DOM order
+    adapter.attach();
+    // Events after the acceptance: what it writes is the starting state, as in
+    // the other adapters (benchmarks/parity/README.md). A component with
+    // collection facades binds them first: the facade, accepted, writes into
+    // the component (the months of Calendar's grids, Table's `dataset`)
+    const stop = binding.events.listen((exportName, args) => {
+        const callback = Reflect.get(props, exportName);
+        if (typeof callback === 'function')
+            callback(...args);
+    });
+    // The consumer stops on `detach`, which comes from the teardown's first
+    // moment (`detachFirst`) or, for a collection item, from its collection
+    // before the siblings go one by one (`TCollectionMembers`)
+    adapter.events.on('detach', stop);
+    onCleanup(stop);
+    detachFirst(adapter);
+    // Solid runs cleanups in reverse order of registration
+    onCleanup(() => adapter.destroy());
+    return { binding, state };
+}
+/**
+ * Sends `detach` at the teardown's first moment: the consumer hears nothing
+ * from then on, as in the other adapters (benchmarks/parity/README.md). Solid
+ * cleans an owner's computations first, the last made first, and its cleanups
+ * after them, so the children (markup items leaving the collection with an
+ * ever shorter list, the root's unbinding) went before `onCleanup` of the
+ * component's body. A computation made on mount, when the children already
+ * exist, is the owner's last one, and its cleanup is the first of the
+ * teardown. Before the mount, and on the server, where effects do not run,
+ * `onCleanup(stop)` unsubscribes and `destroy` detaches.
+ */
+function detachFirst(adapter) {
+    const owner = getOwner();
+    onMount(() => runWithOwner(owner, () => createComputed(() => onCleanup(() => adapter.detach()))));
+}
+export function useAdapter(adapter, props) {
+    const { binding, state } = useExchange(adapter, props);
+    const forwardProps = createMemo(() => binding.forward(props));
+    const [rootElement, setRootElement] = createSignal(null);
+    // Unbinding is a cleanup of the node's owner: a tag change (`Root`) unbinds the previous node
+    const bindRef = (el) => {
+        adapter.bindElement(el);
+        setRootElement(el);
+        onCleanup(() => {
+            adapter.bindElement(null);
+            setRootElement(null);
+        });
+    };
+    const consumerRef = (el) => {
+        const consumer = Reflect.get(props, 'ref');
+        if (typeof consumer === 'function')
+            consumer(el);
+    };
+    return {
+        ctrl: adapter.instance,
+        state: toInstanceState(state),
+        forwardProps,
+        rootElement,
+        bindRef,
+        consumerRef,
+        ref(el) {
+            bindRef(el);
+            consumerRef(el);
+        },
+    };
+}
+/**
+ * The adapter of a collection facade: the facade takes its inputs and events
+ * from `props` and leaves the attributes that are not its own (`forward`).
+ * No `ctrl` and no `ref`: `joinBindings` joins the facade with the
+ * component's binding. Bound before the component: the facade, accepted,
+ * writes into it, and that is its starting state.
+ */
+export function useCollectionAdapter(adapter, props) {
+    const { binding, state } = useExchange(adapter, props);
+    return {
+        state: toInstanceState(state),
+        forward: (rest) => binding.forward(rest),
+    };
+}
+export function joinBindings(owner, ...facades) {
+    return {
+        ...owner,
+        state: facades.reduce((state, facade) => joinState(state, facade.state), owner.state),
+        forwardProps: createMemo(() => facades.reduce((rest, facade) => facade.forward(rest), owner.forwardProps())),
+    };
+}

package/dist/source/adapter/toasts/index.js

@@ -0,0 +1,2 @@
+export { useToasts } from './useToasts';
+export { isToastRender } from './render';

package/dist/source/adapter/toasts/render.js

@@ -0,0 +1,4 @@
+/** Своё содержимое тоста рисуется, только когда это компонент Solid — функция. */
+export function isToastRender(value) {
+    return typeof value === 'function';
+}

package/dist/source/adapter/toasts/types.js

@@ -0,0 +1 @@
+export {};

package/dist/source/adapter/toasts/useToasts.js

@@ -0,0 +1,14 @@
+import { TOASTS_ELEVATOR } from '@soxa-ui/setup';
+import { useElevator } from '../elevator';
+/**
+ * API тостов ближайшего `<Toasts>`: `const { show } = useToasts()`. Берётся
+ * лифтом из слоя, который компонент видит в теле, — поэтому зовётся в теле
+ * компонента под менеджером. Менеджера нет — ошибка, а не молчаливый `show`.
+ */
+export function useToasts() {
+    const api = useElevator().elevator(TOASTS_ELEVATOR).up();
+    if (!api) {
+        throw new Error('useToasts(): выше по дереву нет <Toasts>. Оберните приложение менеджером: <Toasts><App /></Toasts>');
+    }
+    return api;
+}

package/dist/source/components/accordion/Accordion.jsx

@@ -0,0 +1,27 @@
+import { Elevate, ResolvedSlot, createRootProps, relaySlot, renderSlot } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { AccordionItem } from './item';
+import { setupAccordion } from './setup.component';
+/** Набор раскрывающихся секций: секции — содержимое или `shown`. */
+export function Accordion(props) {
+    const binding = setupAccordion(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<div {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<ResolvedSlot content={props.children} fallback={<For each={state.shown}>
+								{(item) => (<AccordionItem ctrl={item} arrow-icon={renderSlot(props['item-arrow-icon'], {
+                    item,
+                })} leading={renderSlot(props['item-leading'], { item })} header={relaySlot(props.item, { item })} trailing={renderSlot(props['item-trailing'], { item })}>
+										{renderSlot(props['item-content'], { item })}
+									</AccordionItem>)}
+							</For>}/>
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/accordion/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/accordion/index.js

@@ -0,0 +1,7 @@
+import { withParts } from '@soxa-ui/setup';
+import { Accordion as AccordionComponent } from './Accordion';
+import { AccordionItem } from './item';
+export * from './base.component';
+export { setupAccordion } from './setup.component';
+export * from './item';
+export const Accordion = withParts(AccordionComponent, { Item: AccordionItem });