mithril-materialized 2.0.0 → 3.0.0

package/dist/button.d.ts

@@ -21,16 +21,16 @@ export interface HtmlAttrs {
  *
  * // Submit button with icon
  * m(Button, {
- *   variant: { type: 'submit' },
+ *   variant: 'submit',
  *   label: 'Save',
  *   iconName: 'save',
  *   iconClass: 'small left'
  * })
  *
- * // Modal trigger button
+ * // Reset button
  * m(Button, {
- *   variant: { type: 'modal', modalId: 'my-modal' },
- *   label: 'Open Modal'
+ *   variant: 'reset',
+ *   label: 'Clear Form'
  * })
  * ```
  */
@@ -45,19 +45,21 @@ export interface ButtonAttrs extends Attributes {
      */
     iconClass?: IconClass;
     /**
-     * Button behavior variant - determines button type and behavior
+     * Button type - determines the HTML button behavior
+     * @default 'button'
      * @example
-     * { type: 'button' } - Standard button
-     * { type: 'submit' } - Form submit button
-     * { type: 'modal', modalId: 'my-modal' } - Modal trigger
-     * { type: 'reset' } - Form reset button
+     * ```typescript
+     * // Standard clickable button (default)
+     * variant: 'button'
+     *
+     * // Form submission button
+     * variant: 'submit'
+     *
+     * // Form reset button
+     * variant: 'reset'
+     * ```
      */
     variant?: ButtonVariant;
-    /**
-     * @deprecated Use variant instead
-     * If the button is intended to open a modal, specify its modal id so we can trigger it
-     */
-    modalId?: string;
     /**
      * @deprecated Use native HTML attributes directly instead
      * Some additional HTML attributes that can be attached to the button

package/dist/index.esm.js

@@ -161,7 +161,7 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
 const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
 
 // import './styles/input.css';
-const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
+const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
 /** Simple label element, used for most components. */
 const Label = () => {
     return {
@@ -416,22 +416,17 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
     return () => {
         return {
             view: ({ attrs }) => {
-                const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
-                iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
-                // Handle both new variant prop and legacy modalId/type
-                const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
-                const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
-                const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                const { tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
+                // Use variant or fallback to factory type
+                const buttonType = variant || type || 'button';
+                const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
                     .filter(Boolean)
                     .join(' ')
                     .trim();
                 // Use tooltipPosition if available, fallback to legacy tooltipPostion
                 const position = tooltipPosition || tooltipPostion || 'top';
-                return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
-                // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
-                //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
-                // }${toAttributeString(attr)}`, {}
-                iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
             },
         };
     };
@@ -483,7 +478,10 @@ const Carousel = () => {
         dim: 1, // Make sure dim is non zero for divisions
         // Animation
         ticker: null,
-        scrollingTimeout: null};
+        scrollingTimeout: null,
+        // Instance options (properly typed with defaults)
+        options: Object.assign({}, defaults),
+    };
     // Utility functions
     const xpos = (e) => {
         // Touch event
@@ -516,7 +514,7 @@ const Carousel = () => {
     const autoScroll = () => {
         if (state.amplitude) {
             const elapsed = Date.now() - state.timestamp;
-            const delta = state.amplitude * Math.exp(-elapsed / defaults.duration);
+            const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
             if (delta > 2 || delta < -2) {
                 scroll(state.target - delta);
                 requestAnimationFrame(autoScroll);
@@ -545,14 +543,14 @@ const Carousel = () => {
         }
         state.scrollingTimeout = window.setTimeout(() => {
             carouselEl.classList.remove('scrolling');
-        }, defaults.duration);
+        }, state.options.duration);
         // Start actual scroll
         const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
         const count = items.length;
         if (count === 0)
             return;
         const lastCenter = state.center;
-        const numVisibleOffset = 1 / defaults.numVisible;
+        const numVisibleOffset = 1 / state.options.numVisible;
         state.offset = typeof x === 'number' ? x : state.offset;
         state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
         const delta = state.offset - state.center * state.dim;
@@ -561,7 +559,7 @@ const Carousel = () => {
         const half = count >> 1;
         let alignment;
         let centerTweenedOpacity;
-        if (defaults.fullWidth) {
+        if (state.options.fullWidth) {
             alignment = 'translateX(0)';
             centerTweenedOpacity = 1;
         }
@@ -584,7 +582,7 @@ const Carousel = () => {
             // Add active class to center item
             items.forEach((item) => item.classList.remove('active'));
             el.classList.add('active');
-            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * defaults.shift * tween}px) translateZ(${defaults.dist * tween}px)`;
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
             updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
         // Side items
@@ -592,31 +590,31 @@ const Carousel = () => {
             let zTranslation;
             let tweenedOpacity;
             // Right side
-            if (defaults.fullWidth) {
-                zTranslation = defaults.dist;
+            if (state.options.fullWidth) {
+                zTranslation = state.options.dist;
                 tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
             }
             else {
-                zTranslation = defaults.dist * (i * 2 + tween * dir);
+                zTranslation = state.options.dist * (i * 2 + tween * dir);
                 tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
             }
             if (!state.noWrap || state.center + i < count) {
                 const el = items[wrap(state.center + i, count)];
-                const transformString = `${alignment} translateX(${defaults.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
             // Left side
-            if (defaults.fullWidth) {
-                zTranslation = defaults.dist;
+            if (state.options.fullWidth) {
+                zTranslation = state.options.dist;
                 tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
             }
             else {
-                zTranslation = defaults.dist * (i * 2 - tween * dir);
+                zTranslation = state.options.dist * (i * 2 - tween * dir);
                 tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
             }
             if (!state.noWrap || state.center - i >= 0) {
                 const el = items[wrap(state.center - i, count)];
-                const transformString = `${alignment} translateX(${-defaults.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
         }
@@ -749,7 +747,7 @@ const Carousel = () => {
             e.stopPropagation();
             return false;
         }
-        else if (!defaults.fullWidth) {
+        else if (!state.options.fullWidth) {
             const target = e.target.closest('.carousel-item');
             if (target) {
                 const items = Array.from(document.querySelectorAll('.carousel-item'));
@@ -778,24 +776,27 @@ const Carousel = () => {
             const { items, indicators = false } = attrs;
             if (!items || items.length === 0)
                 return undefined;
-            // Merge options
-            Object.assign(defaults, attrs);
+            // Create instance-specific options without mutating globals
+            const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
+            // Update state options for this render
+            state.options = instanceOptions;
             const supportTouch = typeof window.ontouchstart !== 'undefined';
             return m('.carousel', {
                 oncreate: ({ attrs, dom }) => {
                     const carouselEl = dom;
                     const items = carouselEl.querySelectorAll('.carousel-item');
                     state.hasMultipleSlides = items.length > 1;
-                    state.showIndicators = defaults.indicators && state.hasMultipleSlides;
-                    state.noWrap = defaults.noWrap || !state.hasMultipleSlides;
+                    state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
+                    state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
                     if (items.length > 0) {
                         const firstItem = items[0];
                         state.itemWidth = firstItem.offsetWidth;
                         state.itemHeight = firstItem.offsetHeight;
-                        state.dim = state.itemWidth * 2 + defaults.padding || 1;
+                        state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
                     }
                     // Cap numVisible at count
-                    defaults.numVisible = Math.min(items.length, defaults.numVisible);
+                    instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
+                    state.options = instanceOptions;
                     // Initial scroll
                     scroll(state.offset, attrs);
                 },
@@ -1168,7 +1169,7 @@ const CodeBlock = () => ({
         const label = lang.replace('lang-', '');
         const cb = code instanceof Array ? code.join('\n') : code;
         const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
-        return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
+        return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
             m('div', m('label', label)),
             m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
         ]);

package/dist/index.js

@@ -163,7 +163,7 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
 const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
 
 // import './styles/input.css';
-const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
+const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
 /** Simple label element, used for most components. */
 const Label = () => {
     return {
@@ -418,22 +418,17 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
     return () => {
         return {
             view: ({ attrs }) => {
-                const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
-                iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
-                // Handle both new variant prop and legacy modalId/type
-                const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
-                const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
-                const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                const { tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
+                // Use variant or fallback to factory type
+                const buttonType = variant || type || 'button';
+                const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
                     .filter(Boolean)
                     .join(' ')
                     .trim();
                 // Use tooltipPosition if available, fallback to legacy tooltipPostion
                 const position = tooltipPosition || tooltipPostion || 'top';
-                return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
-                // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
-                //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
-                // }${toAttributeString(attr)}`, {}
-                iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
             },
         };
     };
@@ -485,7 +480,10 @@ const Carousel = () => {
         dim: 1, // Make sure dim is non zero for divisions
         // Animation
         ticker: null,
-        scrollingTimeout: null};
+        scrollingTimeout: null,
+        // Instance options (properly typed with defaults)
+        options: Object.assign({}, defaults),
+    };
     // Utility functions
     const xpos = (e) => {
         // Touch event
@@ -518,7 +516,7 @@ const Carousel = () => {
     const autoScroll = () => {
         if (state.amplitude) {
             const elapsed = Date.now() - state.timestamp;
-            const delta = state.amplitude * Math.exp(-elapsed / defaults.duration);
+            const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
             if (delta > 2 || delta < -2) {
                 scroll(state.target - delta);
                 requestAnimationFrame(autoScroll);
@@ -547,14 +545,14 @@ const Carousel = () => {
         }
         state.scrollingTimeout = window.setTimeout(() => {
             carouselEl.classList.remove('scrolling');
-        }, defaults.duration);
+        }, state.options.duration);
         // Start actual scroll
         const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
         const count = items.length;
         if (count === 0)
             return;
         const lastCenter = state.center;
-        const numVisibleOffset = 1 / defaults.numVisible;
+        const numVisibleOffset = 1 / state.options.numVisible;
         state.offset = typeof x === 'number' ? x : state.offset;
         state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
         const delta = state.offset - state.center * state.dim;
@@ -563,7 +561,7 @@ const Carousel = () => {
         const half = count >> 1;
         let alignment;
         let centerTweenedOpacity;
-        if (defaults.fullWidth) {
+        if (state.options.fullWidth) {
             alignment = 'translateX(0)';
             centerTweenedOpacity = 1;
         }
@@ -586,7 +584,7 @@ const Carousel = () => {
             // Add active class to center item
             items.forEach((item) => item.classList.remove('active'));
             el.classList.add('active');
-            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * defaults.shift * tween}px) translateZ(${defaults.dist * tween}px)`;
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
             updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
         // Side items
@@ -594,31 +592,31 @@ const Carousel = () => {
             let zTranslation;
             let tweenedOpacity;
             // Right side
-            if (defaults.fullWidth) {
-                zTranslation = defaults.dist;
+            if (state.options.fullWidth) {
+                zTranslation = state.options.dist;
                 tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
             }
             else {
-                zTranslation = defaults.dist * (i * 2 + tween * dir);
+                zTranslation = state.options.dist * (i * 2 + tween * dir);
                 tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
             }
             if (!state.noWrap || state.center + i < count) {
                 const el = items[wrap(state.center + i, count)];
-                const transformString = `${alignment} translateX(${defaults.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
             // Left side
-            if (defaults.fullWidth) {
-                zTranslation = defaults.dist;
+            if (state.options.fullWidth) {
+                zTranslation = state.options.dist;
                 tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
             }
             else {
-                zTranslation = defaults.dist * (i * 2 - tween * dir);
+                zTranslation = state.options.dist * (i * 2 - tween * dir);
                 tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
             }
             if (!state.noWrap || state.center - i >= 0) {
                 const el = items[wrap(state.center - i, count)];
-                const transformString = `${alignment} translateX(${-defaults.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
         }
@@ -751,7 +749,7 @@ const Carousel = () => {
             e.stopPropagation();
             return false;
         }
-        else if (!defaults.fullWidth) {
+        else if (!state.options.fullWidth) {
             const target = e.target.closest('.carousel-item');
             if (target) {
                 const items = Array.from(document.querySelectorAll('.carousel-item'));
@@ -780,24 +778,27 @@ const Carousel = () => {
             const { items, indicators = false } = attrs;
             if (!items || items.length === 0)
                 return undefined;
-            // Merge options
-            Object.assign(defaults, attrs);
+            // Create instance-specific options without mutating globals
+            const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
+            // Update state options for this render
+            state.options = instanceOptions;
             const supportTouch = typeof window.ontouchstart !== 'undefined';
             return m('.carousel', {
                 oncreate: ({ attrs, dom }) => {
                     const carouselEl = dom;
                     const items = carouselEl.querySelectorAll('.carousel-item');
                     state.hasMultipleSlides = items.length > 1;
-                    state.showIndicators = defaults.indicators && state.hasMultipleSlides;
-                    state.noWrap = defaults.noWrap || !state.hasMultipleSlides;
+                    state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
+                    state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
                     if (items.length > 0) {
                         const firstItem = items[0];
                         state.itemWidth = firstItem.offsetWidth;
                         state.itemHeight = firstItem.offsetHeight;
-                        state.dim = state.itemWidth * 2 + defaults.padding || 1;
+                        state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
                     }
                     // Cap numVisible at count
-                    defaults.numVisible = Math.min(items.length, defaults.numVisible);
+                    instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
+                    state.options = instanceOptions;
                     // Initial scroll
                     scroll(state.offset, attrs);
                 },
@@ -1170,7 +1171,7 @@ const CodeBlock = () => ({
         const label = lang.replace('lang-', '');
         const cb = code instanceof Array ? code.join('\n') : code;
         const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
-        return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
+        return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
             m('div', m('label', label)),
             m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
         ]);

package/dist/index.umd.js

@@ -165,7 +165,7 @@
     const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
 
     // import './styles/input.css';
-    const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
+    const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
     /** Simple label element, used for most components. */
     const Label = () => {
         return {
@@ -420,22 +420,17 @@
         return () => {
             return {
                 view: ({ attrs }) => {
-                    const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
-                    iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
-                    // Handle both new variant prop and legacy modalId/type
-                    const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
-                    const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
-                    const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                    const { tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                    iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
+                    // Use variant or fallback to factory type
+                    const buttonType = variant || type || 'button';
+                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
                         .filter(Boolean)
                         .join(' ')
                         .trim();
                     // Use tooltipPosition if available, fallback to legacy tooltipPostion
                     const position = tooltipPosition || tooltipPostion || 'top';
-                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
-                    // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
-                    //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
-                    // }${toAttributeString(attr)}`, {}
-                    iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                    return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
                 },
             };
         };
@@ -487,7 +482,10 @@
             dim: 1, // Make sure dim is non zero for divisions
             // Animation
             ticker: null,
-            scrollingTimeout: null};
+            scrollingTimeout: null,
+            // Instance options (properly typed with defaults)
+            options: Object.assign({}, defaults),
+        };
         // Utility functions
         const xpos = (e) => {
             // Touch event
@@ -520,7 +518,7 @@
         const autoScroll = () => {
             if (state.amplitude) {
                 const elapsed = Date.now() - state.timestamp;
-                const delta = state.amplitude * Math.exp(-elapsed / defaults.duration);
+                const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
                 if (delta > 2 || delta < -2) {
                     scroll(state.target - delta);
                     requestAnimationFrame(autoScroll);
@@ -549,14 +547,14 @@
             }
             state.scrollingTimeout = window.setTimeout(() => {
                 carouselEl.classList.remove('scrolling');
-            }, defaults.duration);
+            }, state.options.duration);
             // Start actual scroll
             const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
             const count = items.length;
             if (count === 0)
                 return;
             const lastCenter = state.center;
-            const numVisibleOffset = 1 / defaults.numVisible;
+            const numVisibleOffset = 1 / state.options.numVisible;
             state.offset = typeof x === 'number' ? x : state.offset;
             state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
             const delta = state.offset - state.center * state.dim;
@@ -565,7 +563,7 @@
             const half = count >> 1;
             let alignment;
             let centerTweenedOpacity;
-            if (defaults.fullWidth) {
+            if (state.options.fullWidth) {
                 alignment = 'translateX(0)';
                 centerTweenedOpacity = 1;
             }
@@ -588,7 +586,7 @@
                 // Add active class to center item
                 items.forEach((item) => item.classList.remove('active'));
                 el.classList.add('active');
-                const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * defaults.shift * tween}px) translateZ(${defaults.dist * tween}px)`;
+                const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
                 updateItemStyle(el, centerTweenedOpacity, 0, transformString);
             }
             // Side items
@@ -596,31 +594,31 @@
                 let zTranslation;
                 let tweenedOpacity;
                 // Right side
-                if (defaults.fullWidth) {
-                    zTranslation = defaults.dist;
+                if (state.options.fullWidth) {
+                    zTranslation = state.options.dist;
                     tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
                 }
                 else {
-                    zTranslation = defaults.dist * (i * 2 + tween * dir);
+                    zTranslation = state.options.dist * (i * 2 + tween * dir);
                     tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
                 }
                 if (!state.noWrap || state.center + i < count) {
                     const el = items[wrap(state.center + i, count)];
-                    const transformString = `${alignment} translateX(${defaults.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                     updateItemStyle(el, tweenedOpacity, -i, transformString);
                 }
                 // Left side
-                if (defaults.fullWidth) {
-                    zTranslation = defaults.dist;
+                if (state.options.fullWidth) {
+                    zTranslation = state.options.dist;
                     tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
                 }
                 else {
-                    zTranslation = defaults.dist * (i * 2 - tween * dir);
+                    zTranslation = state.options.dist * (i * 2 - tween * dir);
                     tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
                 }
                 if (!state.noWrap || state.center - i >= 0) {
                     const el = items[wrap(state.center - i, count)];
-                    const transformString = `${alignment} translateX(${-defaults.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                     updateItemStyle(el, tweenedOpacity, -i, transformString);
                 }
             }
@@ -753,7 +751,7 @@
                 e.stopPropagation();
                 return false;
             }
-            else if (!defaults.fullWidth) {
+            else if (!state.options.fullWidth) {
                 const target = e.target.closest('.carousel-item');
                 if (target) {
                     const items = Array.from(document.querySelectorAll('.carousel-item'));
@@ -782,24 +780,27 @@
                 const { items, indicators = false } = attrs;
                 if (!items || items.length === 0)
                     return undefined;
-                // Merge options
-                Object.assign(defaults, attrs);
+                // Create instance-specific options without mutating globals
+                const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
+                // Update state options for this render
+                state.options = instanceOptions;
                 const supportTouch = typeof window.ontouchstart !== 'undefined';
                 return m('.carousel', {
                     oncreate: ({ attrs, dom }) => {
                         const carouselEl = dom;
                         const items = carouselEl.querySelectorAll('.carousel-item');
                         state.hasMultipleSlides = items.length > 1;
-                        state.showIndicators = defaults.indicators && state.hasMultipleSlides;
-                        state.noWrap = defaults.noWrap || !state.hasMultipleSlides;
+                        state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
+                        state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
                         if (items.length > 0) {
                             const firstItem = items[0];
                             state.itemWidth = firstItem.offsetWidth;
                             state.itemHeight = firstItem.offsetHeight;
-                            state.dim = state.itemWidth * 2 + defaults.padding || 1;
+                            state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
                         }
                         // Cap numVisible at count
-                        defaults.numVisible = Math.min(items.length, defaults.numVisible);
+                        instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
+                        state.options = instanceOptions;
                         // Initial scroll
                         scroll(state.offset, attrs);
                     },
@@ -1172,7 +1173,7 @@
             const label = lang.replace('lang-', '');
             const cb = code instanceof Array ? code.join('\n') : code;
             const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
-            return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
+            return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
                 m('div', m('label', label)),
                 m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
             ]);

package/dist/types.d.ts

@@ -96,24 +96,20 @@ export declare const isValidationSuccess: (result: ValidationResult) => result i
  */
 export declare const isValidationError: (result: ValidationResult) => result is ValidationError;
 /**
- * Button variant discriminated union for type-safe button configurations
+ * Button type - determines the HTML button behavior
+ * @example
+ * ```typescript
+ * // Standard clickable button (default)
+ * variant: 'button'
+ *
+ * // Form submission button
+ * variant: 'submit'
+ *
+ * // Form reset button
+ * variant: 'reset'
+ * ```
  */
-export type ButtonVariant = {
-    type: 'button';
-    submit?: never;
-    modalId?: never;
-} | {
-    type: 'submit';
-    modalId?: never;
-} | {
-    type: 'modal';
-    modalId: string;
-    submit?: never;
-} | {
-    type: 'reset';
-    modalId?: never;
-    submit?: never;
-};
+export type ButtonVariant = 'button' | 'submit' | 'reset';
 /**
  * Input type union with proper HTML input types
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",