kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.2 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -400,7 +400,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$o = {
+    const _defaults$x = {
         alignment: 'left',
         autoFocus: true,
         constrainWidth: true,
@@ -453,7 +453,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$o;
+            return _defaults$x;
         }
         /**
          * Initializes instances of Dropdown.
@@ -545,7 +545,7 @@ var M = (function (exports) {
                 // isTouchMoving to check if scrolling on mobile.
                 this.close();
             }
-            else if (!target.closest('.dropdown-content')) {
+            else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
                 // Do this one frame later so that if the element clicked also triggers _handleClick
                 // For example, if a label for a select was clicked, that we don't close/open the dropdown
                 setTimeout(() => {
@@ -904,7 +904,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$n = {
+    const _defaults$w = {
         data: [], // Autocomplete data set
         onAutocomplete: null, // Callback for when autocompleted
         dropdownOptions: {
@@ -964,7 +964,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$n;
+            return _defaults$w;
         }
         /**
          * Initializes instances of Autocomplete.
@@ -1372,7 +1372,177 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$m = {
+    const _defaults$v = {
+        dismissible: true
+    };
+    /** A persistent, contextual feedback banner. */
+    class Alert extends Component {
+        _closeButton = null;
+        _onClose = () => this.dismiss();
+        constructor(el, options) {
+            super(el, options, Alert);
+            this.options = { ...Alert.defaults, ...options };
+            this.el['M_Alert'] = this;
+            this._bindCloseButton();
+        }
+        static get defaults() {
+            return _defaults$v;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Alert);
+        }
+        static getInstance(el) {
+            return el['M_Alert'];
+        }
+        _bindCloseButton() {
+            this._closeButton = this.el.querySelector('.alert-close');
+            if (this.options.dismissible && this._closeButton) {
+                this._closeButton.addEventListener('click', this._onClose);
+            }
+        }
+        /** Hide and remove the alert from the document. */
+        dismiss() {
+            if (!this.el.isConnected)
+                return;
+            this.el.classList.add('alert-dismissing');
+            const remove = () => {
+                this.el.removeEventListener('transitionend', remove);
+                this.el.hidden = true;
+                this.options.onDismiss?.(this);
+            };
+            if (getComputedStyle(this.el).transitionDuration === '0s')
+                remove();
+            else
+                this.el.addEventListener('transitionend', remove, { once: true });
+        }
+        /** Show an alert that was previously dismissed. */
+        open() {
+            this.el.hidden = false;
+            this.el.classList.remove('alert-dismissing');
+        }
+        destroy() {
+            this._closeButton?.removeEventListener('click', this._onClose);
+            delete this.el['M_Alert'];
+        }
+    }
+
+    const _defaults$u = {
+        draggable: true
+    };
+    /** A lightweight, dependency-free board for columns of draggable cards. */
+    class Kanban extends Component {
+        _draggedCard = null;
+        _dragSourceColumn = null;
+        _onDragStart = (event) => {
+            const card = event.target?.closest('.kanban-card');
+            if (!card || !this.options.draggable)
+                return;
+            this._draggedCard = card;
+            this._dragSourceColumn = card.closest('.kanban-column');
+            card.classList.add('is-dragging');
+            event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        _onDragOver = (event) => {
+            if (!this._draggedCard)
+                return;
+            const column = event.target?.closest('.kanban-column');
+            if (!column || !this.el.contains(column))
+                return;
+            event.preventDefault();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'move';
+            this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+            column.classList.add('is-drag-over');
+        };
+        _onDrop = (event) => {
+            if (!this._draggedCard)
+                return;
+            const column = event.target?.closest('.kanban-column');
+            if (!column || !this.el.contains(column))
+                return;
+            event.preventDefault();
+            const body = column.querySelector('.kanban-column-body') || column;
+            const targetCard = event.target?.closest('.kanban-card');
+            const source = this._dragSourceColumn;
+            if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
+                const box = targetCard.getBoundingClientRect();
+                body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+            }
+            else {
+                body.appendChild(this._draggedCard);
+            }
+            this._clearDragState();
+            this._updateCounts();
+            if (source && source !== column)
+                this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+        };
+        _onDragEnd = () => this._clearDragState();
+        constructor(el, options) {
+            super(el, options, Kanban);
+            this.options = { ...Kanban.defaults, ...options };
+            this.el['M_Kanban'] = this;
+            this._prepareMarkup();
+            if (this.options.draggable)
+                this._bindEvents();
+        }
+        static get defaults() {
+            return _defaults$u;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Kanban);
+        }
+        static getInstance(el) {
+            return el['M_Kanban'];
+        }
+        _prepareMarkup() {
+            this.el.setAttribute('role', 'region');
+            this.el.querySelectorAll('.kanban-column').forEach((column) => {
+                column.setAttribute('role', 'group');
+                const body = column.querySelector('.kanban-column-body');
+                if (body)
+                    body.setAttribute('role', 'list');
+                column.querySelectorAll('.kanban-card').forEach((card) => {
+                    card.setAttribute('role', 'listitem');
+                    card.setAttribute('tabindex', '0');
+                    if (this.options.draggable)
+                        card.draggable = true;
+                });
+            });
+            this._updateCounts();
+        }
+        _bindEvents() {
+            this.el.addEventListener('dragstart', this._onDragStart);
+            this.el.addEventListener('dragover', this._onDragOver);
+            this.el.addEventListener('drop', this._onDrop);
+            this.el.addEventListener('dragend', this._onDragEnd);
+        }
+        _clearDragState() {
+            this._draggedCard?.classList.remove('is-dragging');
+            this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+            this._draggedCard = null;
+            this._dragSourceColumn = null;
+        }
+        _updateCounts() {
+            this.el.querySelectorAll('.kanban-column').forEach((column) => {
+                const count = column.querySelector('.kanban-column-count');
+                const body = column.querySelector('.kanban-column-body');
+                if (count && body)
+                    count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+            });
+        }
+        destroy() {
+            this._clearDragState();
+            this.el.removeEventListener('dragstart', this._onDragStart);
+            this.el.removeEventListener('dragover', this._onDragOver);
+            this.el.removeEventListener('drop', this._onDrop);
+            this.el.removeEventListener('dragend', this._onDragEnd);
+            delete this.el['M_Kanban'];
+        }
+    }
+
+    const _defaults$t = {
         direction: 'top',
         hoverEnabled: true,
         toolbarEnabled: false
@@ -1419,7 +1589,7 @@ var M = (function (exports) {
             this.#setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$m;
+            return _defaults$t;
         }
         /**
          * Initializes instances of FloatingActionButton.
@@ -1590,7 +1760,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$l = {
+    const _defaults$s = {
         onOpen: null,
         onClose: null,
         inDuration: 225,
@@ -1626,7 +1796,7 @@ var M = (function (exports) {
             }
         }
         static get defaults() {
-            return _defaults$l;
+            return _defaults$s;
         }
         /**
          * Initializes instances of Cards.
@@ -1737,7 +1907,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$k = {
+    const _defaults$r = {
         duration: 200, // ms
         dist: -100, // zoom scale TODO: make this more intuitive as an option
         shift: 0, // spacing for center image
@@ -1839,7 +2009,7 @@ var M = (function (exports) {
             this._scroll(this.offset);
         }
         static get defaults() {
-            return _defaults$k;
+            return _defaults$r;
         }
         /**
          * Initializes instances of Carousel.
@@ -2311,7 +2481,7 @@ var M = (function (exports) {
     }
 
     var _a;
-    const _defaults$j = {
+    const _defaults$q = {
         data: [],
         placeholder: '',
         secondaryPlaceholder: '',
@@ -2365,7 +2535,7 @@ var M = (function (exports) {
             }
         }
         static get defaults() {
-            return _defaults$j;
+            return _defaults$q;
         }
         /**
          * Initializes instances of Chips.
@@ -2648,7 +2818,7 @@ var M = (function (exports) {
     }
     _a = Chips;
 
-    const _defaults$i = {
+    const _defaults$p = {
         accordion: true,
         onOpenStart: null,
         onOpenEnd: null,
@@ -2684,7 +2854,7 @@ var M = (function (exports) {
             }
         }
         static get defaults() {
-            return _defaults$i;
+            return _defaults$p;
         }
         /**
          * Initializes instances of Collapsible.
@@ -2803,7 +2973,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$h = {
+    const _defaults$o = {
         classes: '',
         dropdownOptions: {}
     };
@@ -2843,7 +3013,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$h;
+            return _defaults$o;
         }
         /**
          * Initializes instances of FormSelect.
@@ -3186,7 +3356,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$g = {
+    const _defaults$n = {
         margin: 5,
         transition: 10,
         duration: 250,
@@ -3203,7 +3373,7 @@ var M = (function (exports) {
         constructor(el, container, options) {
             this.el = el;
             this.options = {
-                ..._defaults$g,
+                ..._defaults$n,
                 ...options
             };
             this.container = document.createElement('div');
@@ -3265,7 +3435,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$f = {
+    const _defaults$m = {
         classList: ['modal'],
         title: null,
         onOpen: null,
@@ -3280,7 +3450,7 @@ var M = (function (exports) {
         constructor(el, container, options) {
             this.el = el;
             this.options = {
-                ..._defaults$f,
+                ..._defaults$m,
                 ...options,
             };
             this.container = document.createElement('dialog');
@@ -3338,7 +3508,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$e = {
+    const _defaults$l = {
         // the default output format for the input field value
         format: 'mmm dd, yyyy',
         // Used to create date object from current input string
@@ -3488,7 +3658,7 @@ var M = (function (exports) {
             this._pickerSetup();
         }
         static get defaults() {
-            return _defaults$e;
+            return _defaults$l;
         }
         /**
          * Initializes instances of Datepicker.
@@ -4541,7 +4711,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$d = {
+    const _defaults$k = {
         inDuration: 275,
         outDuration: 200,
         onOpenStart: null,
@@ -4593,7 +4763,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$d;
+            return _defaults$k;
         }
         /**
          * Initializes instances of MaterialBox.
@@ -4917,7 +5087,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$c = {
+    const _defaults$j = {
         opacity: 0.5,
         inDuration: 250,
         outDuration: 250,
@@ -4942,7 +5112,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$c;
+            return _defaults$j;
         }
         static init(els, options = {}) {
             return super.init(els, options, Modal);
@@ -4985,7 +5155,7 @@ var M = (function (exports) {
         static { }
     }
 
-    const _defaults$b = {
+    const _defaults$i = {
         edge: 'left',
         draggable: true,
         dragTargetWidth: '10px',
@@ -5041,7 +5211,7 @@ var M = (function (exports) {
             Sidenav._sidenavs.push(this);
         }
         static get defaults() {
-            return _defaults$b;
+            return _defaults$i;
         }
         /**
          * Initializes instances of Sidenav.
@@ -5438,7 +5608,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$a = {
+    const _defaults$h = {
         indicators: true,
         height: 400,
         duration: 500,
@@ -5530,7 +5700,7 @@ var M = (function (exports) {
             this.start();
         }
         static get defaults() {
-            return _defaults$a;
+            return _defaults$h;
         }
         /**
          * Initializes instances of Slider.
@@ -5777,7 +5947,7 @@ var M = (function (exports) {
         };
     }
 
-    const _defaults$9 = {
+    const _defaults$g = {
         duration: 300,
         onShow: null,
         swipeable: false,
@@ -5814,7 +5984,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$9;
+            return _defaults$g;
         }
         /**
          * Initializes instances of Tabs.
@@ -6065,7 +6235,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$8 = {
+    const _defaults$f = {
         dialRadius: 135,
         outerRadius: 105,
         innerRadius: 70,
@@ -6152,7 +6322,7 @@ var M = (function (exports) {
             this._pickerSetup();
         }
         static get defaults() {
-            return _defaults$8;
+            return _defaults$f;
         }
         /**
          * Initializes instances of Timepicker.
@@ -6758,7 +6928,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$7 = {
+    const _defaults$e = {
         text: '',
         displayLength: 4000,
         inDuration: 300,
@@ -6811,7 +6981,7 @@ var M = (function (exports) {
             this._setTimer();
         }
         static get defaults() {
-            return _defaults$7;
+            return _defaults$e;
         }
         static getInstance(el) {
             return el['M_Toast'];
@@ -7003,7 +7173,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$6 = {
+    const _defaults$d = {
         exitDelay: 200,
         enterDelay: 0,
         text: '',
@@ -7047,7 +7217,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$6;
+            return _defaults$d;
         }
         /**
          * Initializes instances of Tooltip.
@@ -7272,7 +7442,7 @@ var M = (function (exports) {
         }
     }
 
-    const _defaults$5 = {};
+    const _defaults$c = {};
     // TODO: !!!!!
     class Range extends Component {
         _mousedown;
@@ -7290,7 +7460,7 @@ var M = (function (exports) {
             this._setupEventHandlers();
         }
         static get defaults() {
-            return _defaults$5;
+            return _defaults$c;
         }
         /**
          * Initializes instances of Range.
@@ -7441,6 +7611,896 @@ var M = (function (exports) {
         }
     }
 
+    const _defaults$b = {};
+    // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Environment/Partials/PlanningToolbar.ts
+    // Generic version of that file's track-indicator sliding and expandable
+    // search behavior, decoupled from the page-specific filter/state-binding
+    // system (UtilityFilter) the source used - here it's just plain DOM state.
+    class Toolbar extends Component {
+        _tracks;
+        constructor(el, options) {
+            super(el, options, Toolbar);
+            this.el.M_Toolbar = this;
+            this.options = {
+                ...Toolbar.defaults,
+                ...options
+            };
+            this._tracks = Array.from(this.el.querySelectorAll('.toolbar-track'));
+            this._setupEventHandlers();
+            this._tracks.forEach((track) => this._moveIndicator(track, false));
+            // A custom/web font can still be loading at construction time; its
+            // metrics landing after this first measurement would leave the
+            // indicator very slightly offset from the (now differently-sized)
+            // text it's supposed to sit behind. Re-measure once fonts are ready.
+            if (typeof document !== 'undefined' && document.fonts) {
+                document.fonts.ready.then(() => {
+                    this._tracks.forEach((track) => this._moveIndicator(track, false));
+                });
+            }
+        }
+        static get defaults() {
+            return _defaults$b;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, Toolbar);
+        }
+        static getInstance(el) {
+            return el.M_Toolbar;
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el.M_Toolbar = undefined;
+        }
+        /**
+         * Re-measure and reposition every track's sliding indicator - call this
+         * after changing which .toolbar-track-item is active from your own code,
+         * or after anything that could have changed the toolbar's layout/width.
+         */
+        updateIndicators() {
+            this._tracks.forEach((track) => this._moveIndicator(track, true));
+        }
+        _setupEventHandlers() {
+            this.el.addEventListener('click', this._handleTrackClick);
+            this.el.addEventListener('focusin', this._handleSearchFocusIn);
+            this.el.addEventListener('focusout', this._handleSearchFocusOut);
+            this.el.addEventListener('input', this._handleSearchInput);
+            this.el.addEventListener('keydown', this._handleSearchKeydown);
+            window.addEventListener('resize', this._handleWindowResize);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('click', this._handleTrackClick);
+            this.el.removeEventListener('focusin', this._handleSearchFocusIn);
+            this.el.removeEventListener('focusout', this._handleSearchFocusOut);
+            this.el.removeEventListener('input', this._handleSearchInput);
+            this.el.removeEventListener('keydown', this._handleSearchKeydown);
+            window.removeEventListener('resize', this._handleWindowResize);
+        }
+        _handleTrackClick = (e) => {
+            const item = e.target.closest('.toolbar-track-item');
+            if (!item)
+                return;
+            const track = item.closest('.toolbar-track');
+            if (!track || !this._tracks.includes(track))
+                return;
+            track.querySelectorAll('.toolbar-track-item.is-active').forEach((el) => el.classList.remove('is-active'));
+            item.classList.add('is-active');
+            this._moveIndicator(track, true);
+        };
+        _handleSearchFocusIn = (e) => {
+            const search = e.target.closest('.toolbar-search');
+            if (search)
+                search.classList.add('is-expanded');
+        };
+        _handleSearchFocusOut = (e) => {
+            const search = e.target.closest('.toolbar-search');
+            if (!search)
+                return;
+            const input = search.querySelector('.toolbar-search-input');
+            if (input && input.value === '')
+                search.classList.remove('is-expanded');
+        };
+        _handleSearchInput = (e) => {
+            const input = e.target;
+            if (!input.classList.contains('toolbar-search-input'))
+                return;
+            const search = input.closest('.toolbar-search');
+            if (search)
+                search.classList.toggle('is-expanded', input.value !== '' || document.activeElement === input);
+        };
+        _handleSearchKeydown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            const input = e.target.closest('.toolbar-search')?.querySelector('.toolbar-search-input');
+            if (!input)
+                return;
+            input.value = '';
+            input.blur();
+        };
+        _handleWindowResize = () => {
+            this._tracks.forEach((track) => this._moveIndicator(track, false));
+        };
+        _moveIndicator(track, animate) {
+            const indicator = track.querySelector('.toolbar-track-indicator');
+            const active = track.querySelector('.toolbar-track-item.is-active');
+            if (!indicator || !active)
+                return;
+            if (!animate)
+                indicator.style.transition = 'none';
+            // No "- track.clientLeft" here: offsetLeft is already relative to the
+            // offsetParent's padding edge, same origin as the indicator's own
+            // `left: 0` (an absolutely positioned element's containing block is
+            // its ancestor's padding box) - subtracting the border width again
+            // was double-counting it, nudging the indicator a px too far left.
+            indicator.style.transform = `translateX(${active.offsetLeft}px)`;
+            indicator.style.width = `${active.offsetWidth}px`;
+            track.classList.add('is-armed');
+            if (!animate) {
+                // Force layout so the transition-less move above actually applies
+                // before re-enabling transitions on the next frame.
+                void indicator.offsetWidth;
+                requestAnimationFrame(() => {
+                    indicator.style.transition = '';
+                });
+            }
+        }
+    }
+
+    const _defaults$a = {};
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Password.ts
+    // Show/hide toggle for a password input - no third-party dependency, just
+    // Materialize's own .prefix/.suffix icon-slot convention (see
+    // components/textfield/_input-fields.scss), so unlike the other new form
+    // enhancements in this batch this one needs no peer-loader/dynamic import.
+    class PasswordInput extends Component {
+        _suffixEl;
+        constructor(el, options) {
+            super(el, options, PasswordInput);
+            this.el.M_PasswordInput = this;
+            this.options = {
+                ...PasswordInput.defaults,
+                ...options
+            };
+            this._suffixEl = this.el.parentElement?.querySelector('[data-password-toggle-icon]') ?? null;
+            if (!this.el.dataset.passwordVisible)
+                this.el.dataset.passwordVisible = '0';
+            this._setupEventHandlers();
+        }
+        static get defaults() {
+            return _defaults$a;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, PasswordInput);
+        }
+        static getInstance(el) {
+            return el.M_PasswordInput;
+        }
+        destroy() {
+            this._removeEventHandlers();
+            this.el.M_PasswordInput = undefined;
+        }
+        _setupEventHandlers() {
+            this._suffixEl?.addEventListener('click', this._handleToggleClick);
+        }
+        _removeEventHandlers() {
+            this._suffixEl?.removeEventListener('click', this._handleToggleClick);
+        }
+        _handleToggleClick = () => {
+            const visible = this.el.dataset.passwordVisible === '1';
+            this.el.type = visible ? 'password' : 'text';
+            this.el.dataset.passwordVisible = visible ? '0' : '1';
+            const iconEl = this._suffixEl?.querySelector('i');
+            if (iconEl)
+                iconEl.textContent = visible ? 'visibility' : 'visibility_off';
+        };
+    }
+
+    const _cache = new Map();
+    async function loadPeer(spec, importer) {
+        if (_cache.has(spec.specifier))
+            return _cache.get(spec.specifier);
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const mod = await importer();
+            const resolved = mod?.default ?? mod;
+            _cache.set(spec.specifier, resolved);
+            return resolved;
+        }
+        catch {
+            // fall through to the global-scope lookup below
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const globalScope = typeof window !== 'undefined' ? window : undefined;
+        if (globalScope && globalScope[spec.globalName]) {
+            const resolved = globalScope[spec.globalName];
+            _cache.set(spec.specifier, resolved);
+            return resolved;
+        }
+        throw new Error(`kmaterialize's ${spec.feature} requires "${spec.specifier}", which isn't installed/loaded.\n` +
+            `- If you're using a bundler: npm/pnpm/yarn install "${spec.specifier}".\n` +
+            `- If you're using the plain <script> (no-bundler) build: add\n` +
+            `    ${spec.cdnHint}\n` +
+            `  before initializing this component, so window.${spec.globalName} is defined.`);
+    }
+
+    const _defaults$9 = {
+        thousandsSeparator: ' ',
+        radix: '.',
+        mapToRadix: [',']
+    };
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Number.ts
+    // Masked/formatted numeric input via IMask (thousands separator, decimal
+    // scale, min/max) - deliberately opts in on `type="text" data-type="number"`
+    // rather than `type="number"`, so IMask can format the display value
+    // (thousands separators etc.) that a native number input wouldn't allow.
+    //
+    // IMask is an optional peerDependency, loaded on demand via peer-loader -
+    // see that file for the bundler/no-bundler resolution strategy.
+    class NumberInput extends Component {
+        mask;
+        ready;
+        constructor(el, options) {
+            super(el, options, NumberInput);
+            this.el.M_NumberInput = this;
+            this.options = {
+                ...NumberInput.defaults,
+                ...options
+            };
+            this.ready = this._setup();
+        }
+        static get defaults() {
+            return _defaults$9;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, NumberInput);
+        }
+        static getInstance(el) {
+            return el.M_NumberInput;
+        }
+        destroy() {
+            this.mask?.destroy();
+            this.el.M_NumberInput = undefined;
+        }
+        async _setup() {
+            const IMask = await loadPeer({
+                specifier: 'imask',
+                globalName: 'IMask',
+                feature: 'Number input (IMask) enhancement',
+                cdnHint: '<script src="path/to/imask.min.js"></script> (self-hosted - copy from node_modules/imask/dist/imask.min.js, or a CDN of your choice)'
+            }, () => import('imask'));
+            const maskOptions = {
+                mask: Number,
+                skipInvalid: true,
+                thousandsSeparator: this.options.thousandsSeparator,
+                radix: this.options.radix,
+                mapToRadix: this.options.mapToRadix,
+                autofix: true
+            };
+            const max = this.options.max ?? (this.el.hasAttribute('max') ? Number(this.el.getAttribute('max')) : undefined);
+            if (max !== undefined && !Number.isNaN(max))
+                maskOptions.max = max;
+            const min = this.options.min ?? (this.el.hasAttribute('min') ? Number(this.el.getAttribute('min')) : undefined);
+            if (min !== undefined && !Number.isNaN(min))
+                maskOptions.min = min;
+            const step = this.el.getAttribute('step');
+            const scale = this.options.scale ?? (step?.includes('.') ? step.split('.').at(-1)?.length : undefined);
+            if (scale !== undefined)
+                maskOptions.scale = scale;
+            this.mask = IMask(this.el, maskOptions);
+        }
+    }
+
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+    // Built-in French translation for Pickr's UI strings, activated by
+    // `data-color-locale="fr-fr"` alone - no separate options object required
+    // from the consumer, unlike a fully custom `options.locale` override.
+    const FR_FR = {
+        'ui:dialog': 'boîte de dialogue du sélecteur de couleur',
+        'btn:toggle': 'basculer la boîte de dialogue du sélecteur de couleur',
+        'btn:swatch': 'échantillon de couleur',
+        'btn:last-color': 'utiliser la couleur précédente',
+        'btn:save': 'Enregistrer',
+        'btn:cancel': 'Annuler',
+        'btn:clear': 'Effacer',
+        'aria:btn:save': 'enregistrer et fermer',
+        'aria:btn:cancel': 'annuler et fermer',
+        'aria:btn:clear': 'effacer et fermer',
+        'aria:input': 'champ de saisie de couleur',
+        'aria:palette': 'zone de sélection des couleurs',
+        'aria:hue': 'curseur de sélection de teinte',
+        'aria:opacity': "curseur de sélection d'opacité"
+    };
+    const _defaults$8 = {
+        theme: 'classic',
+        opacity: true,
+        swatches: [
+            'rgba(244, 67, 54, 1)',
+            'rgba(233, 30, 99, 0.95)',
+            'rgba(156, 39, 176, 0.9)',
+            'rgba(103, 58, 183, 0.85)',
+            'rgba(63, 81, 181, 0.8)',
+            'rgba(33, 150, 243, 0.75)',
+            'rgba(3, 169, 244, 0.7)',
+            'rgba(0, 188, 212, 0.7)',
+            'rgba(0, 150, 136, 0.75)',
+            'rgba(76, 175, 80, 0.8)',
+            'rgba(139, 195, 74, 0.85)',
+            'rgba(205, 220, 57, 0.9)',
+            'rgba(255, 235, 59, 0.95)',
+            'rgba(255, 193, 7, 1)'
+        ]
+    };
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+    // Enhances a native `<input type="color" data-color-picker="pickr">` with a
+    // full Pickr popup (palette, hue/opacity sliders, swatches, hex/rgba/hsla).
+    // If `data-color-picker` is absent the input is left completely untouched -
+    // still a plain native color swatch, matching CrazyPHP's own fallback.
+    //
+    // Pickr remains an optional peerDependency and is loaded on demand via peer-loader.
+    class ColorInput extends Component {
+        pickr;
+        ready;
+        _swatchEl;
+        _labels;
+        constructor(el, options) {
+            super(el, options, ColorInput);
+            this.el.M_ColorInput = this;
+            this.options = {
+                ...ColorInput.defaults,
+                ...options
+            };
+            this._swatchEl = document.createElement('div');
+            this.el.after(this._swatchEl);
+            this.el.classList.add('hide');
+            this.el.addEventListener('change', this._handleInputChange);
+            this._labels = Array.from(document.querySelectorAll('label')).filter(label => label.htmlFor === this.el.id);
+            this._labels.forEach(label => label.addEventListener('click', this._handleLabelClick));
+            this.ready = this._setup();
+        }
+        static get defaults() {
+            return _defaults$8;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, ColorInput);
+        }
+        static getInstance(el) {
+            return el.M_ColorInput;
+        }
+        destroy() {
+            this.el.removeEventListener('change', this._handleInputChange);
+            this._labels.forEach(label => label.removeEventListener('click', this._handleLabelClick));
+            this.pickr?.destroyAndRemove();
+            this._swatchEl.remove();
+            this.el.classList.remove('hide');
+            this.el.M_ColorInput = undefined;
+        }
+        _handleInputChange = () => {
+            this.pickr?.setColor(this.el.value);
+        };
+        _handleLabelClick = (event) => {
+            // A label associated with a hidden input[type=color] otherwise opens
+            // the browser's native picker (notably in Firefox). Route the same
+            // accessible label activation to Pickr instead.
+            event.preventDefault();
+            void this.ready.then(() => this.pickr?.show());
+        };
+        async _setup() {
+            const Pickr = await loadPeer({
+                specifier: '@simonwep/pickr',
+                globalName: 'Pickr',
+                feature: 'Color input (Pickr) enhancement',
+                cdnHint: '<link rel="stylesheet" href="path/to/pickr-classic.min.css">\n' +
+                    '    <script src="path/to/pickr.min.js"></script>\n' +
+                    '    (self-hosted - copy from node_modules/@simonwep/pickr/dist/, or a CDN of your choice)'
+            }, () => import('@simonwep/pickr'));
+            const dataset = this.el.dataset;
+            const theme = (['classic', 'monolith', 'nano'].includes(dataset.colorTheme ?? '')
+                ? dataset.colorTheme
+                : this.options.theme);
+            const lockOpacity = dataset.colorOpacity !== undefined
+                ? ['false', '0', '', 'null'].includes(dataset.colorOpacity)
+                : !this.options.opacity;
+            const pickrOptions = {
+                el: this._swatchEl,
+                theme,
+                lockOpacity,
+                swatches: this.options.swatches,
+                components: {
+                    preview: true,
+                    opacity: true,
+                    hue: true,
+                    interaction: {
+                        hex: true,
+                        rgba: true,
+                        hsla: true,
+                        hsva: true,
+                        cmyk: true,
+                        input: true,
+                        clear: true,
+                        save: true
+                    }
+                }
+            };
+            if (this.options.locale) {
+                pickrOptions.i18n = this.options.locale;
+            }
+            else if (dataset.colorLocale === 'fr-fr') {
+                pickrOptions.i18n = FR_FR;
+            }
+            const currentValue = this.el.getAttribute('value');
+            if (currentValue && currentValue !== 'randomHex()') {
+                pickrOptions.default = currentValue;
+            }
+            else if (this.el.hasAttribute('default')) {
+                const currentDefault = this.el.getAttribute('default');
+                if (currentDefault === 'randomHex()') {
+                    const randomColor = Math.floor(Math.random() * 16777216);
+                    pickrOptions.default = `#${randomColor.toString(16).padStart(6, '0')}`;
+                }
+                else if (currentDefault) {
+                    pickrOptions.default = currentDefault;
+                }
+            }
+            this.pickr = Pickr.create(pickrOptions);
+            if (this.el.disabled)
+                this.pickr.disable();
+            this.pickr.on('save', (color, instance) => {
+                const hexa = color?.toHEXA().toString();
+                if (hexa) {
+                    this.el.value = hexa;
+                    this.el.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+                instance.hide();
+            });
+        }
+    }
+
+    const _defaults$7 = {};
+    let activeAirDatepickerField;
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Date.ts
+    // Enhances `<input type="text" data-type="date" data-date-picker="air-datepicker">`
+    // with the air-datepicker calendar/range picker - deliberately separate from
+    // kmaterialize's own native `components/datepicker/` (a different, already
+    // existing class-based component); this one is opted into per-input via the
+    // `data-date-picker` attribute so it never collides with `.datepicker`
+    // elements. The `multiple` attribute switches the picker into range mode,
+    // `data-date-format`/`data-date-lang` (only "fr-FR" ported so far) mirror
+    // CrazyPHP's own dataset convention.
+    //
+    // air-datepicker is an optional peerDependency, loaded on demand via
+    // peer-loader. Its own base stylesheet (air-datepicker/air-datepicker.css)
+    // must be imported separately by the consumer - see the docs page.
+    class AirDatepickerField extends Component {
+        picker;
+        ready;
+        _triggers;
+        _handleOutsideClick = (e) => {
+            const calendarEl = document.querySelector('.air-datepicker');
+            const clickedTrigger = this._triggers.some(trigger => trigger.contains(e.target));
+            if (calendarEl instanceof HTMLElement &&
+                !calendarEl.contains(e.target) &&
+                !this.el.contains(e.target) &&
+                !clickedTrigger) {
+                this.picker?.hide();
+            }
+        };
+        constructor(el, options) {
+            super(el, options, AirDatepickerField);
+            this.el.M_AirDatepickerField = this;
+            this.options = {
+                ...AirDatepickerField.defaults,
+                ...options
+            };
+            const labels = Array.from(document.querySelectorAll('label')).filter(label => label.htmlFor === this.el.id);
+            const icons = Array.from(this.el.parentElement?.querySelectorAll('.prefix, .suffix') ?? []);
+            this._triggers = [...labels, ...icons];
+            this._triggers.forEach(trigger => trigger.addEventListener('click', this._handleTriggerClick));
+            this.ready = this._setup();
+        }
+        static get defaults() {
+            return _defaults$7;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, AirDatepickerField);
+        }
+        static getInstance(el) {
+            return el.M_AirDatepickerField;
+        }
+        destroy() {
+            document.removeEventListener('click', this._handleOutsideClick);
+            this._triggers.forEach(trigger => trigger.removeEventListener('click', this._handleTriggerClick));
+            this.picker?.destroy();
+            if (activeAirDatepickerField === this)
+                activeAirDatepickerField = undefined;
+            this.el.M_AirDatepickerField = undefined;
+        }
+        _handleTriggerClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void this.ready.then(() => this.picker?.show());
+        };
+        async _setup() {
+            const AirDatepicker = await loadPeer({
+                specifier: 'air-datepicker',
+                globalName: 'AirDatepicker',
+                feature: 'Date input (air-datepicker) enhancement',
+                cdnHint: '<link rel="stylesheet" href="path/to/air-datepicker.css">\n' +
+                    '    <script src="path/to/air-datepicker.js"></script>\n' +
+                    '    (self-hosted - copy from node_modules/air-datepicker/, or a CDN of your choice)'
+            }, () => import('air-datepicker'));
+            const dataset = this.el.dataset;
+            const builtInLocale = dataset.dateLang === 'fr-FR'
+                ? (await import('air-datepicker/locale/fr')).default
+                : (await import('air-datepicker/locale/en')).default;
+            const pickerOptions = {
+                dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
+                autoClose: dataset.dateAutoClose !== 'false',
+                locale: (this.options.locale ?? builtInLocale),
+                onShow: isAnimationComplete => {
+                    if (isAnimationComplete)
+                        return;
+                    if (activeAirDatepickerField && activeAirDatepickerField !== this) {
+                        activeAirDatepickerField.picker?.hide();
+                    }
+                    activeAirDatepickerField = this;
+                },
+                onHide: isAnimationComplete => {
+                    if (isAnimationComplete && activeAirDatepickerField === this) {
+                        activeAirDatepickerField = undefined;
+                    }
+                }
+            };
+            let multiple = false;
+            if (this.el.multiple || dataset.dateRange === 'true') {
+                pickerOptions.range = true;
+                pickerOptions.multipleDatesSeparator = ' - ';
+                multiple = true;
+            }
+            const initialValue = this.el.getAttribute('value')?.trim();
+            if (initialValue) {
+                pickerOptions.selectedDates = multiple
+                    ? initialValue.split(' - ').map(value => value.trim())
+                    : [initialValue];
+            }
+            if (dataset.dateTimepicker === 'true') {
+                pickerOptions.timepicker = true;
+                if (dataset.dateTimeFormat)
+                    pickerOptions.timeFormat = dataset.dateTimeFormat;
+            }
+            const supportedViews = ['days', 'months', 'years'];
+            if (supportedViews.includes(dataset.dateView ?? '')) {
+                pickerOptions.view = dataset.dateView;
+            }
+            if (supportedViews.includes(dataset.dateMinView ?? '')) {
+                pickerOptions.minView = dataset.dateMinView;
+            }
+            if (dataset.dateMobile === 'true')
+                pickerOptions.isMobile = true;
+            if (dataset.datePosition) {
+                pickerOptions.position = dataset.datePosition;
+            }
+            if (dataset.dateButtons) {
+                const supportedButtons = ['today', 'clear'];
+                pickerOptions.buttons = dataset.dateButtons
+                    .split(',')
+                    .map(button => button.trim())
+                    .filter(button => supportedButtons.includes(button));
+            }
+            if (this.el.hasAttribute('min') && this.el.getAttribute('min')) {
+                pickerOptions.minDate = new Date(this.el.getAttribute('min'));
+            }
+            if (this.el.hasAttribute('max') && this.el.getAttribute('max')) {
+                pickerOptions.maxDate = new Date(this.el.getAttribute('max'));
+            }
+            if (!this.el.required && !pickerOptions.buttons) {
+                pickerOptions.buttons = ['clear'];
+            }
+            pickerOptions.onSelect = ({ date }) => {
+                if (multiple && Array.isArray(date) && date.length === 1)
+                    return;
+                this.el.dispatchEvent(new Event('input', { bubbles: true }));
+                this.el.dispatchEvent(new Event('change', { bubbles: true }));
+            };
+            this.picker = new AirDatepicker(this.el, pickerOptions);
+            document.addEventListener('click', this._handleOutsideClick);
+        }
+    }
+
+    const _defaults$6 = {
+        plugins: []
+    };
+    // Each plugin needs its own literal `import('literal-string')` call (see
+    // peer-loader.ts) so Vite/webpack/Rollup can statically discover it - a
+    // generic specifier-driven loop can't produce that, hence one entry per
+    // plugin instead of building the import call from PLUGIN_SPECS's string.
+    const PLUGIN_LOADERS = {
+        'image-preview': {
+            specifier: 'filepond-plugin-image-preview',
+            globalName: 'FilePondPluginImagePreview',
+            importer: () => import('filepond-plugin-image-preview')
+        },
+        'file-validate-type': {
+            specifier: 'filepond-plugin-file-validate-type',
+            globalName: 'FilePondPluginFileValidateType',
+            importer: () => import('filepond-plugin-file-validate-type')
+        },
+        'image-exif-orientation': {
+            specifier: 'filepond-plugin-image-exif-orientation',
+            globalName: 'FilePondPluginImageExifOrientation',
+            importer: () => import('filepond-plugin-image-exif-orientation')
+        }
+    };
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/File.ts
+    // Enhances the EXISTING `.file-field` structure in place - add
+    // `data-file-picker="filepond"` (+ optional `data-file-plugins="a,b,c"`) to
+    // an otherwise completely stock `.file-field`, nothing else about the
+    // markup changes. FilePond.create() hides the native `<input type=file>`
+    // and injects its own root as a *sibling*, it never removes anything from
+    // the DOM, so the surrounding button/label/file-path-wrapper stay intact
+    // at rest - only the interactive drop area swaps in visually.
+    //
+    // FilePond and its plugins are optional peerDependencies, loaded on demand
+    // via peer-loader.
+    class FileInput extends Component {
+        pond;
+        ready;
+        _fileEl;
+        _pathEl;
+        constructor(el, options) {
+            super(el, options, FileInput);
+            this.el.M_FileInput = this;
+            const pluginsAttr = this.el.dataset.filePlugins;
+            this.options = {
+                ...FileInput.defaults,
+                plugins: pluginsAttr
+                    ? pluginsAttr.split(',').map((p) => p.trim())
+                    : FileInput.defaults.plugins,
+                ...options
+            };
+            this._fileEl = this.el.querySelector('input[type="file"]');
+            this._pathEl = this.el.querySelector('.file-path');
+            this.ready = this._setup();
+        }
+        static get defaults() {
+            return _defaults$6;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, FileInput);
+        }
+        static getInstance(el) {
+            return el.M_FileInput;
+        }
+        destroy() {
+            this.el.classList.remove('file-field-enhanced');
+            this.el.querySelector('.btn')?.classList.remove('hide');
+            this.el.querySelector('.file-path-wrapper')?.classList.remove('hide');
+            this.pond?.destroy();
+            this.el.M_FileInput = undefined;
+        }
+        /** Convenience wrapper over the underlying FilePond instance's own getFiles(). */
+        getFiles() {
+            return this.pond?.getFiles() ?? [];
+        }
+        async _setup() {
+            if (!this._fileEl) {
+                console.error(Error('.file-field enhanced with data-file-picker="filepond" needs an input[type=file]'));
+                return;
+            }
+            const FilePond = await loadPeer({
+                specifier: 'filepond',
+                globalName: 'FilePond',
+                feature: 'File input (FilePond) enhancement',
+                cdnHint: '<link rel="stylesheet" href="path/to/filepond.min.css">\n' +
+                    '    <script src="path/to/filepond.min.js"></script>\n' +
+                    '    (self-hosted - copy from node_modules/filepond/dist/, or a CDN of your choice)'
+            }, () => import('filepond'));
+            const pluginNames = new Set(this.options.plugins);
+            // file-validate-type is auto-registered whenever the input restricts
+            // `accept`, matching CrazyPHP's own convention, even if the consumer
+            // didn't list it explicitly in data-file-plugins.
+            if (this._fileEl.accept)
+                pluginNames.add('file-validate-type');
+            for (const name of pluginNames) {
+                const loader = PLUGIN_LOADERS[name];
+                if (!loader)
+                    continue;
+                const plugin = await loadPeer({
+                    specifier: loader.specifier,
+                    globalName: loader.globalName,
+                    feature: `File input FilePond plugin "${name}"`,
+                    cdnHint: `<script src="path/to/${loader.specifier}.min.js"></script> (self-hosted - copy from node_modules/${loader.specifier}/dist/, or a CDN of your choice)`
+                }, loader.importer);
+                FilePond.registerPlugin(plugin);
+            }
+            const pondOptions = {};
+            const { dataset } = this._fileEl;
+            const readBoolean = (value) => value !== 'false';
+            pondOptions.allowMultiple = this._fileEl.multiple;
+            pondOptions.disabled = this._fileEl.disabled;
+            if (dataset.defaultFile)
+                pondOptions.files = [dataset.defaultFile];
+            if (dataset.maxFiles)
+                pondOptions.maxFiles = Number(dataset.maxFiles);
+            if (this._fileEl.multiple)
+                pondOptions.allowReorder = readBoolean(dataset.allowReorder);
+            if (dataset.labelIdle)
+                pondOptions.labelIdle = dataset.labelIdle;
+            if (dataset.instantUpload !== undefined)
+                pondOptions.instantUpload = readBoolean(dataset.instantUpload);
+            if (dataset.dropValidation !== undefined)
+                pondOptions.dropValidation = readBoolean(dataset.dropValidation);
+            if (dataset.imagePreviewHeight)
+                pondOptions.imagePreviewHeight = Number(dataset.imagePreviewHeight);
+            if (dataset.stylePanelLayout) {
+                pondOptions.stylePanelLayout = dataset.stylePanelLayout;
+            }
+            if (dataset.stylePanelAspectRatio)
+                pondOptions.stylePanelAspectRatio = dataset.stylePanelAspectRatio;
+            this.pond = FilePond.create(this._fileEl, pondOptions);
+            // FilePond inserts its own root as a *sibling* of the input it was
+            // given - but that input lives inside .btn (stock .file-field markup
+            // is `.btn > input[type=file]`), so the fresh FilePond root lands
+            // inside .btn too. Move it back out to be a direct child of .file-field
+            // itself before hiding .btn, or hiding .btn would take the whole
+            // FilePond widget down with it.
+            const pondRoot = this.pond.element;
+            if (pondRoot) {
+                this.el.appendChild(pondRoot);
+                const fileHeight = Number(dataset.fileHeight);
+                if (Number.isFinite(fileHeight) && fileHeight > 0) {
+                    pondRoot.style.height = `${fileHeight}px`;
+                }
+                // Matches CrazyPHP's own File.ts behavior - FilePond's free-tier
+                // "Powered by FilePond" credit link doesn't fit a themed, branded UI.
+                pondRoot.querySelectorAll('.filepond--credits').forEach((el) => el.remove());
+            }
+            // Everything from the stock .file-field is now redundant - FilePond's
+            // own drop zone is the entire upload affordance. Hidden, not removed,
+            // so the .file-field structure this component promises to preserve is
+            // still there, just not shown alongside FilePond's widget.
+            this.el.classList.add('file-field-enhanced');
+            this.el.querySelector('.btn')?.classList.add('hide');
+            this.el.querySelector('.file-path-wrapper')?.classList.add('hide');
+            this._syncPathInput();
+            this.pond.on('updatefiles', this._syncPathInput);
+        }
+        _syncPathInput = () => {
+            if (!this._pathEl || !this.pond)
+                return;
+            this._pathEl.value = this.pond
+                .getFiles()
+                .map((f) => f.filename)
+                .join(', ');
+        };
+    }
+
+    const _defaults$5 = {};
+    function readRemoteSpec(el) {
+        const raw = el.dataset.selectRemote;
+        if (!raw)
+            return undefined;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    // @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Select.ts
+    // Enhances an EXISTING native `<select class="tomselected">` with Tom
+    // Select - searchable, taggable, remote-loading, dependent-field wiring,
+    // clear button, drag-drop reorder. Ported in a somewhat scoped form: the
+    // CrazyPHP source's remote-loading path goes through its own app-specific
+    // Crazyrequest/Crazyurl HTTP-client and query-param helpers, which have no
+    // equivalent in a standalone UI library - this version uses a plain
+    // `fetch()` instead, keeping the same `data-select-remote` JSON shape
+    // (url/value/label/search/dataKey) and the same `{{field}}` render-template
+    // convention.
+    //
+    // Coexistence with FormSelect: `.tomselected` is a recognized exclusion
+    // marker in FormSelect's own AutoInit selector (see src/index.ts), so a
+    // `.tomselected` select is never picked up by FormSelect regardless of
+    // init ordering. This constructor still defensively tears down any
+    // FormSelect instance found on the same element, belt-and-suspenders, in
+    // case that selector rule is ever violated by hand.
+    //
+    // Tom Select is an optional peerDependency, loaded on demand via
+    // peer-loader.
+    class TomSelectField extends Component {
+        tomSelect;
+        ready;
+        _dependsOnEl = null;
+        constructor(el, options) {
+            super(el, options, TomSelectField);
+            this.el.M_TomSelectField = this;
+            FormSelect.getInstance(this.el)?.destroy();
+            this.options = {
+                remote: readRemoteSpec(this.el),
+                ...TomSelectField.defaults,
+                ...options
+            };
+            this.ready = this._setup();
+        }
+        static get defaults() {
+            return _defaults$5;
+        }
+        static init(els, options = {}) {
+            return super.init(els, options, TomSelectField);
+        }
+        static getInstance(el) {
+            return el.M_TomSelectField;
+        }
+        destroy() {
+            if (this._dependsOnEl)
+                this._dependsOnEl.removeEventListener('change', this._handleDependencyChange);
+            this.tomSelect?.destroy();
+            this.el.M_TomSelectField = undefined;
+        }
+        _handleDependencyChange = () => {
+            this.tomSelect?.clear();
+            this.tomSelect?.clearOptions();
+            this.tomSelect?.load?.('');
+        };
+        async _setup() {
+            const TomSelect = await loadPeer({
+                specifier: 'tom-select',
+                globalName: 'TomSelect',
+                feature: 'Select (Tom Select) enhancement',
+                cdnHint: '<script src="path/to/tom-select.complete.min.js"></script> (self-hosted - copy from node_modules/tom-select/dist/js/, or a CDN of your choice)'
+            }, () => import('tom-select'));
+            const dataset = this.el.dataset;
+            const settings = {
+                persist: false,
+                createOnBlur: true,
+                create: 'selectTag' in dataset,
+                plugins: {},
+                ...this.options.settings
+            };
+            if ('selectClear' in dataset) {
+                settings.plugins.clear_button = { title: dataset.selectClear || 'Clear' };
+            }
+            if ('selectTag' in dataset || this.el.multiple) {
+                settings.plugins.caret_position = {};
+                settings.plugins.drag_drop = {};
+            }
+            if (this.el.classList.contains('icons')) {
+                const renderWithIcon = (data, escape) => {
+                    const icon = data.icon ? `<img src="${escape(String(data.icon))}" alt="" />` : '';
+                    return `<div class="ts-option-content">${icon}<span>${escape(String(data.text ?? ''))}</span></div>`;
+                };
+                settings.render = { ...settings.render, option: renderWithIcon, item: renderWithIcon };
+            }
+            const remote = this.options.remote;
+            if (remote) {
+                settings.valueField = remote.value;
+                if (remote.search)
+                    settings.searchField = [remote.search];
+                if (remote.label && remote.label.includes('{{') && remote.label.includes('}}')) {
+                    const renderTemplate = (data, escape) => `<div>${remote.label.replace(/\{\{(.*?)\}\}/g, (_m, key) => escape(String(data[key] ?? '')))}</div>`;
+                    settings.render = { option: renderTemplate, item: renderTemplate };
+                }
+                else {
+                    settings.labelField = remote.label;
+                }
+                settings.load = (query, callback) => {
+                    fetch(remote.url)
+                        .then((r) => r.json())
+                        .then((value) => {
+                        const results = remote.dataKey
+                            ? remote.dataKey.split('.').reduce((acc, key) => acc && acc[key], value)
+                            : value?.results ?? value;
+                        callback(Array.isArray(results) ? results : []);
+                    })
+                        .catch(() => callback([]));
+                };
+            }
+            this.tomSelect = new TomSelect(this.el, settings);
+            if (dataset.depends) {
+                this._dependsOnEl = document.querySelector(dataset.depends);
+                this._dependsOnEl?.addEventListener('change', this._handleDependencyChange);
+            }
+        }
+    }
+
     const _defaults$4 = {
         onOpen: null,
         onClose: null
@@ -8321,7 +9381,7 @@ var M = (function (exports) {
     }
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    const version = '2.3.3-1.0.2';
+    const version = '2.3.3-1.0.21';
     /**
      * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
      * class in v2 with no bare functional equivalent of its own.
@@ -8336,6 +9396,8 @@ var M = (function (exports) {
      */
     function AutoInit(context = document.body, options) {
         const registry = {
+            Alert: context.querySelectorAll('.alert:not(.no-autoinit)'),
+            Kanban: context.querySelectorAll('.kanban-board:not(.no-autoinit)'),
             Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
             Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
             Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
@@ -8348,15 +9410,28 @@ var M = (function (exports) {
             Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
             Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
             ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
-            FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+            // Excludes .tomselected - a select opted into TomSelectField instead
+            // (see below), never eligible for FormSelect regardless of ordering.
+            FormSelect: context.querySelectorAll('select:not(.no-autoinit):not(.tomselected)'),
             Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
             Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
             TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
             Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
             Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
-            FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+            FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
+            // Excludes .fixed-action-btn.toolbar - that's an unrelated FAB display
+            // mode reusing the same class name, not this component.
+            Toolbar: context.querySelectorAll('.toolbar:not(.fixed-action-btn):not(.no-autoinit)'),
+            PasswordInput: context.querySelectorAll('input[data-password-toggle]:not(.no-autoinit)'),
+            NumberInput: context.querySelectorAll('input[data-type="number"]:not(.no-autoinit)'),
+            ColorInput: context.querySelectorAll('input[type="color"][data-color-picker="pickr"]:not(.no-autoinit)'),
+            AirDatepickerField: context.querySelectorAll('input[data-date-picker="air-datepicker"]:not(.no-autoinit)'),
+            FileInput: context.querySelectorAll('.file-field[data-file-picker="filepond"]:not(.no-autoinit)'),
+            TomSelectField: context.querySelectorAll('select.tomselected:not(.no-autoinit)')
         };
         Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+        Alert.init(registry.Alert, options?.Alert ?? {});
+        Kanban.init(registry.Kanban, options?.Kanban ?? {});
         Cards.init(registry.Cards, options?.Cards ?? {});
         Carousel.init(registry.Carousel, options?.Carousel ?? {});
         Chips.init(registry.Chips, options?.Chips ?? {});
@@ -8375,6 +9450,13 @@ var M = (function (exports) {
         Timepicker.init(registry.Timepicker, options?.Timepicker ?? {});
         Tooltip.init(registry.Tooltip, options?.Tooltip ?? {});
         FloatingActionButton.init(registry.FloatingActionButton, options?.FloatingActionButton ?? {});
+        Toolbar.init(registry.Toolbar, options?.Toolbar ?? {});
+        PasswordInput.init(registry.PasswordInput, options?.PasswordInput ?? {});
+        NumberInput.init(registry.NumberInput, options?.NumberInput ?? {});
+        ColorInput.init(registry.ColorInput, options?.ColorInput ?? {});
+        AirDatepickerField.init(registry.AirDatepickerField, options?.AirDatepickerField ?? {});
+        FileInput.init(registry.FileInput, options?.FileInput ?? {});
+        TomSelectField.init(registry.TomSelectField, options?.TomSelectField ?? {});
     }
     // Init
     if (typeof document !== 'undefined') {
@@ -8389,6 +9471,8 @@ var M = (function (exports) {
     Range.Init();
     Cards.Init();
 
+    exports.AirDatepickerField = AirDatepickerField;
+    exports.Alert = Alert;
     exports.AutoInit = AutoInit;
     exports.Autocomplete = Autocomplete;
     exports.Cards = Cards;
@@ -8396,14 +9480,19 @@ var M = (function (exports) {
     exports.CharacterCounter = CharacterCounter;
     exports.Chips = Chips;
     exports.Collapsible = Collapsible;
+    exports.ColorInput = ColorInput;
     exports.Datepicker = Datepicker;
     exports.Dropdown = Dropdown;
+    exports.FileInput = FileInput;
     exports.FloatingActionButton = FloatingActionButton;
     exports.FormSelect = FormSelect;
     exports.Forms = Forms;
+    exports.Kanban = Kanban;
     exports.Materialbox = Materialbox;
     exports.Modal = Modal;
+    exports.NumberInput = NumberInput;
     exports.Parallax = Parallax;
+    exports.PasswordInput = PasswordInput;
     exports.Pushpin = Pushpin;
     exports.Range = Range;
     exports.ScrollSpy = ScrollSpy;
@@ -8413,6 +9502,8 @@ var M = (function (exports) {
     exports.TapTarget = TapTarget;
     exports.Timepicker = Timepicker;
     exports.Toast = Toast;
+    exports.TomSelectField = TomSelectField;
+    exports.Toolbar = Toolbar;
     exports.Tooltip = Tooltip;
     exports.Waves = Waves;
     exports.toast = toast;