@optionfactory/ful 0.102.0 → 0.103.0

package/dist/ful.iife.js

@@ -1,4 +1,4 @@
-var ful = (function (exports) {
+var ful = (function (exports, ftl, TomSelect) {
     'use strict';
 
     class Base64 {
@@ -1043,464 +1043,158 @@ var ful = (function (exports) {
         }
     }
 
-    class Fragments {
-        /**
-         * 
-         * @param  {...string} html 
-         * @returns 
-         */
-        static fromHtml(...html) {
-            const el = document.createElement("template");
-            el.innerHTML = html.join("");
-            return document.adoptNode(el.content);
-        }
-        /**
-         * 
-         * @param {DocumentFragment} fragment 
-         * @returns 
-         */
-        static toHtml(fragment) {
-            var el = document.createElement("template");
-            el.content.appendChild(fragment);
-            return el.innerHTML;
-        }
-        /**
-         * 
-         * @param  {...Node} nodes 
-         * @returns 
-         */
-        static from(...nodes) {
-            const fragment = new DocumentFragment();
-            fragment.append(...nodes);
-            return fragment;
-        }
-        /**
-         * 
-         * @param {HTMLElement} el 
-         * @returns 
-         */
-        static fromChildNodes(el) {
-            const fragment = new DocumentFragment();
-            fragment.append(...el.childNodes);
-            return fragment;
-        }
-    }
+    class Bindings {
 
-    class Attributes {
-        static id = 0;
         /**
-         * 
-         * @param {string} prefix 
-         * @returns 
+         * @param {{ [x: string]: any; }} obj
+         * @param {string} prefix
+         * @return {{ [x: string]: any; }}
          */
-        static uid(prefix) {
-            return `${prefix}-${++Attributes.id}`;
-        }
-        /**
-         * 
-         * @param {HTMLElement} el 
-         * @param {string} k 
-         * @param {string} v 
-         * @returns 
-         */
-        static defaultValue(el, k, v) {
-            if (!el.hasAttribute(k)) {
-                el.setAttribute(k, v);
-            }
-            return el.getAttribute(k);
+        static flatten(obj, prefix) {
+            return Object.keys(obj).reduce((acc, k) => {
+                const pre = prefix.length ? prefix + '.' : '';
+                if (typeof obj[k] === 'object' && obj[k] !== null) {
+                    Object.assign(acc, Bindings.flatten(obj[k], pre + k));
+                } else {
+                    acc[pre + k] = obj[k];
+                }
+                return acc;
+            }, {});
         }
+        
         /**
-         * 
-         * @param {string} prefix 
-         * @param {HTMLElement} from 
-         * @param {HTMLElement} to 
+         * @param {any} result
+         * @param {string} path
+         * @param {any} value
          */
-        static forward(prefix, from, to) {
-            from.getAttributeNames()
-                .filter(a => a.startsWith(prefix))
-                .forEach(a => {
-                    const target = a.substring(prefix.length);
-                    if (target === 'class') {
-                        const classes = from.getAttribute(prefix + "class")?.split(" ").filter(a => a.length) ?? [];
-                        to.classList.add(...classes);
-                        return;
+        static providePath(result, path, value) {
+            const keys = path.split(".").map((k) => /^[0-9]+$/.test(k) ? +k : k);
+            let current = result ?? {};
+            let previous = null;
+            for (let i = 0; ; ++i) {
+                const ckey = keys[i];
+                const pkey = keys[i - 1];
+                if (Number.isInteger(ckey) && !Array.isArray(current)) {
+                    if (previous !== null) {
+                        previous[pkey] = current = [];
+                    } else {
+                        result = current = [];
                     }
-                    // @ts-ignore
-                    to.setAttribute(target, from.getAttribute(a));
-                });
-        }
-        /**
-         * 
-         * @param {HTMLElement} el 
-         * @param {string} attr 
-         * @param {boolean} value 
-         */
-        static toggle(el, attr, value) {
-            if (value) {
-                el.setAttribute(attr, '');
-            } else {
-                el.removeAttribute(attr);
-            }
-        }
-        static flip(el, attr) {
-            if (el.hasAttribute(attr)) {
-                el.removeAttribute(attr);
-            } else {
-                el.setAttribute(attr, '');
-            }
-        }
-
-    }
-
-    class LightSlots {
-        /**
-         * 
-         * @param {HTMLElement} el 
-         * @returns the slots
-         */
-        static from(el) {
-            /** @type [string, Element][] */
-            const namedSlots = Array.from(el.children)
-                .filter(el => el.matches('[slot]'))
-                .map(el => {
-                    el.remove();
-                    const slot = el.getAttribute("slot");
-                    el.removeAttribute("slot");
-                    return [slot ?? 'unnamed', el];
-                });
-            const slots = {};
-            slots.default = new DocumentFragment();
-            slots.default.append(...el.childNodes);
-            for (const [name, el] of namedSlots) {
-                if (!(name in slots)) {
-                    slots[name] = new DocumentFragment();
                 }
-                slots[name].append(el);
-            }
-            return slots;
-        }
-    }
-
-    class Nodes {
-        static isParsed(el) {
-            for (let c = el; c; c = c.parentNode) {
-                if (c.nextSibling) {
-                    return true;
+                if (i === keys.length - 1) {
+                    //when value is undefined we only want to define the property if it's not defined 
+                    current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
+                    return result;
                 }
-            }
-            return false;
-        }
-        static queryChildren(node, selector) {
-            for (const c of node.children) {
-                if (c.matches(selector)) {
-                    return c;
+                if (current[ckey] === undefined) {
+                    current[ckey] = {};
                 }
+                previous = current;
+                current = current[ckey];
             }
-            return null;
         }
-        static queryChildrenAll(node, selector) {
-            const r = [];
-            for (const c of node.children) {
-                if (c.matches(selector)) {
-                    r.push(c);
+        /**
+         * 
+         * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el 
+         * @returns 
+         */
+        static extract(el) {
+            if (el.getAttribute('type') === 'radio') {
+                if (!el.checked) {
+                    return undefined;
                 }
+                return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
             }
-            return r;
-        }
-    }
-
-    class TemplatesRegistry {
-        #idToFragment = {};
-        #idToTemplate = {};
-        #ec;
-        put(k, fragment) {
-            if (this.#ec) {
-                // @ts-ignore
-                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, this.#ec);
-                return;
-            }
-            this.#idToFragment[k] = fragment;
-        }
-        get(k) {
-            if (!this.#ec) {
-                throw new Error("TemplatesRegistry is not configured");
+            if (el.getAttribute('type') === 'checkbox') {
+                return el.checked;
             }
-            const tpl = this.#idToTemplate[k];
-            if (!tpl) {
-                throw new Error(`missing template: '${k}'`);
+            if (el.dataset['fulBindType'] === 'boolean') {
+                return !el.value ? null : el.value === 'true';
             }
-            return tpl;
-        }
-        configure(ec, ...data) {
-            this.#ec = ec;
-            for (const [k, fragment] of Object.entries(this.#idToFragment)) {
-                delete this.#idToFragment[k];
-                // @ts-ignore
-                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec, ...data);
+            if (el.tagName === 'INPUT' || el.tagName === 'SELECT') {
+                return el.value === '' || el.value === undefined ? null : el.value;
             }
+            return el.value;
         }
-    }
-
 
-    class ElementsRegistry {
-        #templates;
-        #tagToclass;
-        #configured;
-        #id = 0;
-        constructor() {
-            this.#templates = new TemplatesRegistry();
-            this.#tagToclass = {};
-        }
-        defineTemplate(html) {
-            if (html === null || html === undefined) {
-                return undefined;
-            }
-            const name = `unnamed-${++this.#id}`;
-            this.#templates.put(name, Fragments.fromHtml(html));
-            return name;
-        }
-        define(tag, klass) {
-            if (!this.#configured) {
-                this.#tagToclass[tag] = klass;
-                return this;
+        static extractFrom(root, ignoredChildrenSelector){
+            let result = {};
+            for(const el of /** @type {NodeListOf<HTMLElement>} */(root.querySelectorAll('[name]'))){
+                if (el.dataset['fulBindInclude'] === 'never') {
+                    continue;
+                }
+                if(ignoredChildrenSelector && el.dataset['fulBindInclude'] !== 'always' && el.closest(ignoredChildrenSelector) !== null){
+                    continue;
+                }
+                result = Bindings.providePath(result, /** @type {string} */(el.getAttribute('name')), Bindings.extract(el));
             }
-            customElements.define(tag, klass);
-            return this;
+            return result;
         }
-        configure(ec, ...data) {
-            this.#templates.configure(ec, ...data);
-            for (const [tag, klass] of Object.entries(this.#tagToclass)) {
-                customElements.define(tag, klass);
-                delete this.#tagToclass[tag];
+       
+        /**
+         * 
+         * @param {Element  & {checked?: boolean} & {value?: any}} el 
+         * @returns 
+         */    
+        static mutate(el, raw) {
+            if (el.getAttribute('type') === 'radio') {
+                el.checked = el.getAttribute('value') === raw;
+                return;
             }
-            this.#configured = true;
-        }
-        template(k) {
-            if (k === null || k === undefined) {
-                return undefined;
+            if (el.getAttribute('type') === 'checkbox') {
+                el.checked = raw;
+                return;
             }
-            return this.#templates.get(k);
+            el.value = raw;
         }
-    }
 
-    const elements = new ElementsRegistry();
-
-
-    class UpgradeQueue {
-        #q = [];
-        constructor() {
-            document.addEventListener('DOMContentLoaded', this.dequeue.bind(this));
-        }
-        enqueue(el) {
-            if (!this.#q.length) {
-                requestAnimationFrame(this.dequeue.bind(this));
+        static mutateIn(root, values){
+            for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, ''))) {
+                for(const el of root.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)){
+                    Bindings.mutate(el, value);
+                }
             }
-            this.#q.push(el);
-        }
-        dequeue() {
-            this.#q.splice(0).forEach(el => el.upgrade());
         }
-    }
-
-    const upgradeQueue = new UpgradeQueue();
-
-    const mappers = {
-        'string': attr => attr,
-        'number': attr => attr === null ? null : Number(attr),
-        'presence': attr => attr !== null,
-        'state': attr => attr !== null,
-        'bool': attr => attr === 'true',
-        'json': attr => JSON.parse(attr)
-    };
-
-    const ParsedElement = (conf) => {
-        const { observed, template, slots } = conf ?? {};
-
-        const attrsAndTypes = (observed ?? []).map(a => {
-            const [attr, maybeType] = a.split(":");
-            const type = maybeType?.trim() ?? 'string';
-            if (!(type in mappers)) {
-                throw new Error(`unsupported attribute type: ${type}`);
-            }
-            return [attr.trim(), type];
-        });
-
-        const attrsAndMappers = attrsAndTypes.map(([attr, type]) => [attr, mappers[type]]);
-
-        const attrToMapper = Object.fromEntries(attrsAndMappers);
 
-        const templateId = elements.defineTemplate(template);
 
-        const k = class extends HTMLElement {
-            static get observedAttributes() {
-                return Object.keys(attrToMapper);
-            }
-            #parsed;
-            #initialized;
-            #reflecting;
-            #internals;
-            constructor() {
-                super();
-                this.#internals = this.attachInternals();
-            }
-            get initialized() {
-                return this.#initialized;
-            }
-            get internals() {
-                return this.#internals;
-            }
-            connectedCallback() {
-                if (this.#parsed) {
-                    return;
-                }
-                if (this.ownerDocument.readyState === 'complete' || Nodes.isParsed(this)) {
-                    upgradeQueue.enqueue(this);
-                    return;
-                }
-                this.ownerDocument.addEventListener('DOMContentLoaded', () => {
-                    observer.disconnect();
-                    upgradeQueue.enqueue(this);
-                });
-                const observer = new MutationObserver(() => {
-                    if (!Nodes.isParsed(this)) {
-                        return;
-                    }
-                    observer.disconnect();
-                    upgradeQueue.enqueue(this);
+        static errors(root, es, invalidClass){
+            const fieldErrors = es.filter(e => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
+            const globalErrors = es.filter(e => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
+            root.querySelectorAll(`.${CSS.escape(invalidClass)}`).forEach(el => el.classList.remove(invalidClass));
+            root.querySelectorAll("ful-errors").forEach(el => {
+                el.replaceChildren();
+                el.setAttribute('hidden', '');
+            });
+            fieldErrors.forEach(e => {
+                const name = e.context.replace("[", ".").replace("].", ".");
+                const validationTargetsSelector = `[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`;
+                root.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(invalidClass));
+                const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
+                root.querySelectorAll(fieldErrorsSelector).forEach(el => {
+                    const hel = /** @type HTMLElement} */ (el);
+                    hel.innerText = e.reason;
                 });
-                // @ts-ignore
-                observer.observe(this.parentNode, { childList: true, subtree: true });
-            }
-            attributeChangedCallback(attr, oldValue, newValue) {
-                if (!this.#parsed || oldValue === newValue) {
-                    return;
-                }
-                if (this.#reflecting) {
-                    return;
-                }
-                const mapper = attrToMapper[attr];
-                this[attr] = mapper(newValue);
-            }
-            reflect(fn) {
-                this.#reflecting = true;
-                try {
-                    fn();
-                } finally {
-                    this.#reflecting = false;
-                }
-            }
-            async upgrade() {
-                if (this.#parsed) {
-                    return;
-                }
-                this.#parsed = true;
-                // @ts-ignore
-                await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
-
-                for (const [attr, mapper] of attrsAndMappers) {
-                    if (this.hasAttribute(attr)) {
-                        this[attr] = mapper(this.getAttribute(attr));
-                    }
-                }
-                this.#initialized = true;
-            }
-        };
-
-        for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'state')) {
-            Object.defineProperty(k.prototype, attr, {
-                enumerable: true,
-                configurable: true,
-                get() {
-                    return this.internals.states ? this.internals.states.has(`--${attr}`) : this.hasAttribute(attr);
-                },
-                set(value) {
-                    this.internals.states?.[value ? 'add' : 'delete'](`--${attr}`);
-                    this.reflect(() => Attributes.toggle(this, attr, value));
-                }
             });
-        }
-
-        return k;
-    };
-
-    function flatten(obj, prefix) {
-        return Object.keys(obj).reduce((acc, k) => {
-            const pre = prefix.length ? prefix + '.' : '';
-            if (typeof obj[k] === 'object' && obj[k] !== null) {
-                Object.assign(acc, flatten(obj[k], pre + k));
-            } else {
-                acc[pre + k] = obj[k];
-            }
-            return acc;
-        }, {});
-    }
-
-    function providePath(result, path, value) {
-        const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
-        let current = result;
-        let previous = null;
-        for (let i = 0; ; ++i) {
-            const ckey = keys[i];
-            const pkey = keys[i - 1];
-            if (Number.isInteger(ckey) && !Array.isArray(current)) {
-                if (previous !== null) {
-                    previous[pkey] = current = [];
-                } else {
-                    result = current = [];
+            root.querySelectorAll("ful-errors").forEach(el => {
+                const hel = /** @type HTMLElement} */ (el);
+                hel.innerText = globalErrors.map(e => e.reason).join("\n");
+                if (globalErrors.length !== 0) {
+                    el.removeAttribute('hidden');
                 }
-            }
-            if (i === keys.length - 1) {
-                //when value is undefined we only want to define the property if it's not defined 
-                current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
-                return result;
-            }
-            if (current[ckey] === undefined) {
-                current[ckey] = {};
-            }
-            previous = current;
-            current = current[ckey];
-        }
-    }
+            });
 
-    function extract(el) {
-        if (el.getAttribute('type') === 'radio') {
-            if (!el.checked) {
-                return undefined;
-            }
-            return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            return el.checked;
-        }
-        if (el.dataset['fulBindType'] === 'boolean') {
-            return !el.value ? null : el.value === 'true';
-        }
-        if (el.tagName === 'INPUT' || el.tagName === 'SELECT'){
-            return el.value === '' || el.value === undefined ? null : el.value;    
-        }
-        return el.value;
-    }
 
-    function mutate(el, raw) {
-        if (el.getAttribute('type') === 'radio') {
-            el.checked = el.getAttribute('value') === raw;
-            return;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            el.checked = raw;
-            return;
         }
-        el.value = raw;
     }
 
-    class Form extends ParsedElement() {
+    class Form extends ftl.ParsedElement() {
         static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
         static SCROLL_OFFSET = 50;
         static INVALID_CLASS = 'is-invalid';
         submitter;
         render() {
             const form = document.createElement('form');
-            Attributes.forward('form-', this, form);
+            ftl.Attributes.forward('form-', this, form);
             form.replaceChildren(...this.childNodes);
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
@@ -1508,12 +1202,12 @@ var ful = (function (exports) {
                     await this.submitter?.(this.values, this);
                 });
             });
-            if(this.hasAttribute("clear-invalid-on-change")){
+            if (this.hasAttribute("clear-invalid-on-change")) {
                 this.addEventListener('change', evt => {
                     const target = /** @type HTMLElement */ (evt.target);
                     target?.querySelectorAll(`.${CSS.escape(Form.INVALID_CLASS)}`).forEach(el => {
                         el.classList.remove(Form.INVALID_CLASS);
-                    });        
+                    });
                 });
             }
             this.replaceChildren(form);
@@ -1542,7 +1236,7 @@ var ful = (function (exports) {
             this.spinner(true);
             try {
                 await this.remoting(fn);
-            } catch(e) {
+            } catch (e) {
                 this.spinner(false);
                 throw e;
             }
@@ -1556,48 +1250,14 @@ var ful = (function (exports) {
             }
         }
         set values(vs) {
-            for (const [flattenedKey, value] of Object.entries(flatten(vs, ''))) {
-                this.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`).forEach(el => mutate(el, value));
-            }
+            Bindings.mutateIn(this, vs);
         }
         get values() {
-            return Array.from(/** @type {NodeListOf<HTMLElement>} */ (this.querySelectorAll('[name]')))
-                .filter(el => {
-                    if (el.dataset['fulBindInclude'] === 'never') {
-                        return false;
-                    }
-                    return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
-                })
-                .reduce((result, el) => {
-                    return providePath(result, el.getAttribute('name'), extract(el));
-                }, {});
+            return Bindings.extractFrom(this, Form.IGNORED_CHILDREN_SELECTOR);
         }
         set errors(es) {
-            const fieldErrors = es.filter(e => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
-            const globalErrors = es.filter(e => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
-            this.querySelectorAll(`.${Form.INVALID_CLASS}`).forEach(el => el.classList.remove(Form.INVALID_CLASS));
-            this.querySelectorAll("ful-errors").forEach(el => {
-                el.replaceChildren();
-                el.setAttribute('hidden', '');
-            });
-            fieldErrors.forEach(e => {
-                const name = e.context.replace("[", ".").replace("].", ".");
-                const validationTargetsSelector = `[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`;
-                this.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(Form.INVALID_CLASS));
-                const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
-                this.querySelectorAll(fieldErrorsSelector).forEach(el => {
-                    const hel = /** @type HTMLElement} */ (el);
-                    hel.innerText = e.reason;
-                });
-            });
-            this.querySelectorAll("ful-errors").forEach(el => {
-                const hel = /** @type HTMLElement} */ (el);
-                hel.innerText = globalErrors.map(e => e.reason).join("\n");
-                if (globalErrors.length !== 0) {
-                    el.removeAttribute('hidden');
-                }
-            });
-            if (!this.hasAttribute('scroll-on-error')) {
+            Bindings.errors(this, es, Form.INVALID_CLASS);
+            if (es.length == 0 || !this.hasAttribute('scroll-on-error')) {
                 return;
             }
             const ys = Array.from(this.querySelectorAll(`ful-errors:not([hidden]), [ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
@@ -1641,23 +1301,23 @@ var ful = (function (exports) {
                 }
             }));
         });
-        const id = input.getAttribute('id') ?? el.getAttribute('input-id') ?? Attributes.uid('ful-input');
-        Attributes.forward('input-', el, slots.input);
-        Attributes.defaultValue(slots.input, "id", id);
-        Attributes.defaultValue(slots.input, "type", "text");
-        Attributes.defaultValue(slots.input, "placeholder", " ");
+        const id = input.getAttribute('id') ?? el.getAttribute('input-id') ?? ftl.Attributes.uid('ful-input');
+        ftl.Attributes.forward('input-', el, slots.input);
+        ftl.Attributes.defaultValue(slots.input, "id", id);
+        ftl.Attributes.defaultValue(slots.input, "type", "text");
+        ftl.Attributes.defaultValue(slots.input, "placeholder", " ");
         const name = el.getAttribute('name');
-        return template.render(el, { id, name, slots });
+        return template.withOverlay(el, { id, name, slots }).render();
     };
 
-    class Input extends ParsedElement({
+    class Input extends ftl.ParsedElement({
         observed: ['value'],
         slots: true,
         template: INPUT_TEMPLATE
     }){
         input;
-        render(template, slots) {
-            const fragment = makeInputFragment(this, template, slots);
+        render({slots}) {
+            const fragment = makeInputFragment(this, this.template(), slots);
             this.replaceChildren(fragment);
         }
         get value() {
@@ -1673,7 +1333,7 @@ var ful = (function (exports) {
      * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
      */
 
-    class Select extends ParsedElement({
+    class Select extends ftl.ParsedElement({
         observed: ["value"],
         slots: true,
         template: `
@@ -1693,11 +1353,12 @@ var ful = (function (exports) {
     }) {
         shouldLoad;
         _unwrappedRemoteLoad;
+        ts;
         constructor(tsConfig) {
             super();
             this.tsConfig = tsConfig;
         }
-        render(template, slots) {
+        render({slots}) {
             const type = this.getAttribute("type") ?? 'local';
             const remote = type != 'local';
             const loadOnce = this.getAttribute('load') != 'always';
@@ -1707,15 +1368,15 @@ var ful = (function (exports) {
             })();
             input.setAttribute('ful-validation-target', '');
 
-            const id = input.getAttribute('id') ?? this.getAttribute('input-id') ?? Attributes.uid('ful-select');
+            const id = input.getAttribute('id') ?? this.getAttribute('input-id') ?? ftl.Attributes.uid('ful-select');
             const tsId = `${id}-ts-control`;
-            Attributes.forward('input-', this, input);
-            Attributes.defaultValue(input, "id", id);
-            Attributes.defaultValue(input, "placeholder", " ");
+            ftl.Attributes.forward('input-', this, input);
+            ftl.Attributes.defaultValue(input, "id", id);
+            ftl.Attributes.defaultValue(input, "placeholder", " ");
 
             //tomselect needs the input to have a parent.
             //se we move the input to a fragment
-            slots.input = Fragments.from(input);
+            slots.input = ftl.Fragments.from(input);
 
             this.loaded = !remote;
 
@@ -1744,7 +1405,6 @@ var ful = (function (exports) {
                 }
                 callback(data);
             };
-            // @ts-ignore
             this.ts = new TomSelect(input, Object.assign(remote ? {
                 preload: 'focus',
                 load: this._unwrappedRemoteLoad,
@@ -1764,7 +1424,7 @@ var ful = (function (exports) {
                 evt.stopPropagation();
             });
             input.remove();
-            template.renderTo(this, { id, tsId, name, input, slots });
+            this.template().withOverlay({ id, tsId, name, input, slots }).renderTo(this);
         }
         #loader;
         set loader(l) {
@@ -1789,8 +1449,8 @@ var ful = (function (exports) {
         }
     }
 
-    class RadioGroup extends ParsedElement({
-        observed: ['value', 'disabled:state'],
+    class RadioGroup extends ftl.ParsedElement({
+        observed: ['value', 'disabled:presence'],
         slots: true,
         template: `
         <fieldset ful-validated-field>
@@ -1815,14 +1475,14 @@ var ful = (function (exports) {
         </fieldset>
     `
     }) {
-        render(template, slots) {
-            const name = this.getAttribute('name') ?? Attributes.uid('ful-radiogroup');
+        render({slots}) {
+            const name = this.getAttribute('name') ?? ftl.Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
                 const input = document.createElement('input');
                 input.setAttribute('type', 'radio');
-                Attributes.forward('input-', this, input);
-                Attributes.forward('', el, input);
+                ftl.Attributes.forward('input-', this, input);
+                ftl.Attributes.forward('', el, input);
                 input.setAttribute('name', `${name}-ignore`);
                 input.setAttribute('ful-validation-target', '');
                 input.dataset['fulBindInclude'] = 'never';
@@ -1837,13 +1497,19 @@ var ful = (function (exports) {
                         }
                     }));
                 });
-                const label = Fragments.fromChildNodes(el);
+                const label = ftl.Fragments.fromChildNodes(el);
                 return [input, label];
             });
 
             radioEls.forEach(el => el.remove());
-            template.renderTo(this, { name, slots, inputsAndLabels });
+            this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+        }
+        get disabled() {
+            return this.hasAttribute('disabled');
         }
+        set disabled(value) {
+            this.reflect(() => ftl.Attributes.toggle(this, 'disabled', value));
+        }    
         get value() {
             /** @type {HTMLInputElement|null} */
             const checked = this.querySelector('input[type=radio]:checked');
@@ -1851,10 +1517,8 @@ var ful = (function (exports) {
         }
         set value(value) {
             if (value === null) {
-                /** @type {HTMLInputElement[]} */
                 this.querySelectorAll(`input[type=radio]`).forEach(el => {
-                    // @ts-ignore
-                    el.checked = false;
+                    (/** @type {HTMLInputElement} */(el)).checked = false;
                 });
                 return;
             }
@@ -1866,7 +1530,7 @@ var ful = (function (exports) {
         }
     }
 
-    class Spinner extends ParsedElement({
+    class Spinner extends ftl.ParsedElement({
         slots: true,
         template: `
         <div class="ful-spinner-wrapper">
@@ -1875,42 +1539,35 @@ var ful = (function (exports) {
         </div>
     `
     }) {
-        render(template, slots) {
-            template.renderTo(this, { slots });
+        render({slots}) {
+            this.template().withOverlay({ slots }).renderTo(this);
         }
     }
 
-    exports.Attributes = Attributes;
     exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
     exports.Base64 = Base64;
+    exports.Bindings = Bindings;
     exports.Deferred = Deferred;
-    exports.ElementsRegistry = ElementsRegistry;
     exports.Failure = Failure;
     exports.Form = Form;
-    exports.Fragments = Fragments;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
     exports.HttpClientError = HttpClientError;
     exports.INPUT_TEMPLATE = INPUT_TEMPLATE;
     exports.Input = Input;
-    exports.LightSlots = LightSlots;
     exports.LocalStorage = LocalStorage;
     exports.MediaType = MediaType;
-    exports.Nodes = Nodes;
-    exports.ParsedElement = ParsedElement;
     exports.RadioGroup = RadioGroup;
     exports.Select = Select;
     exports.SessionStorage = SessionStorage;
     exports.Spinner = Spinner;
-    exports.TemplatesRegistry = TemplatesRegistry;
     exports.VersionedStorage = VersionedStorage;
-    exports.elements = elements;
     exports.makeInputFragment = makeInputFragment;
     exports.timing = timing;
 
     return exports;
 
-})({});
+})({}, ftl, window?.TomSelect || {});
 //# sourceMappingURL=ful.iife.js.map