mithril-materialized 3.2.2 → 3.3.1

package/dist/index.umd.js

@@ -2855,20 +2855,40 @@
                 state.height = undefined;
             }
         };
-        const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
+        const isControlled = (attrs) => attrs.value !== undefined && (attrs.oninput !== undefined || attrs.onchange !== undefined);
         return {
             oninit: ({ attrs }) => {
+                const controlled = isControlled(attrs);
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                // Warn developer for improper controlled usage
+                if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                    console.warn(`TextArea received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                        `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+                }
                 // Initialize internal value for uncontrolled mode
-                if (!isControlled(attrs)) {
+                if (!controlled) {
                     state.internalValue = attrs.defaultValue || '';
                 }
             },
             onremove: () => {
             },
             view: ({ attrs }) => {
+                var _a, _b, _c, _d;
                 const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
                 const controlled = isControlled(attrs);
-                const currentValue = controlled ? value || '' : state.internalValue;
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                let currentValue;
+                if (controlled) {
+                    currentValue = value || '';
+                }
+                else if (isNonInteractive) {
+                    // Non-interactive components: prefer defaultValue, fallback to value
+                    currentValue = (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : '';
+                }
+                else {
+                    // Interactive uncontrolled: use internal state
+                    currentValue = (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : '';
+                }
                 return [
                     // Hidden div for height measurement - positioned outside the input-field
                     m('.hiddendiv', {
@@ -2999,7 +3019,8 @@
             isDragging: false,
             activeThumb: null,
         };
-        const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
+        const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' &&
+            (typeof attrs.oninput === 'function' || typeof attrs.onchange === 'function');
         const getValue = (target) => {
             const val = target.value;
             return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
@@ -3045,8 +3066,15 @@
         // Range slider rendering functions are now in separate module
         return {
             oninit: ({ attrs }) => {
+                const controlled = isControlled(attrs);
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                // Warn developer for improper controlled usage
+                if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                    console.warn(`${type} input received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                        `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+                }
                 // Initialize internal value if not in controlled mode
-                if (!isControlled(attrs)) {
+                if (!controlled) {
                     const isNumeric = ['number', 'range'].includes(type);
                     if (attrs.defaultValue !== undefined) {
                         if (isNumeric) {
@@ -3062,7 +3090,7 @@
                 }
             },
             view: ({ attrs }) => {
-                var _a, _b;
+                var _a, _b, _c, _d, _e, _f;
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
                 // const attributes = toAttrs(params);
                 const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
@@ -3082,7 +3110,19 @@
                 }
                 const isNumeric = ['number', 'range'].includes(type);
                 const controlled = isControlled(attrs);
-                const value = (controlled ? attrs.value : state.internalValue);
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                let value;
+                if (controlled) {
+                    value = attrs.value;
+                }
+                else if (isNonInteractive) {
+                    // Non-interactive components: prefer defaultValue, fallback to value
+                    value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                }
+                else {
+                    // Interactive uncontrolled: use internal state
+                    value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                }
                 const rangeType = type === 'range' && !attrs.minmax;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -3248,7 +3288,7 @@
                             }
                         } })),
                     // Clear button - only for text inputs with canClear enabled and has content
-                    canClear && type === 'text' && ((_b = state.inputElement) === null || _b === void 0 ? void 0 : _b.value)
+                    canClear && type === 'text' && ((_f = state.inputElement) === null || _f === void 0 ? void 0 : _f.value)
                         ? m(MaterialIcon, {
                             name: 'close',
                             className: 'input-clear-btn',
@@ -5645,17 +5685,35 @@
         return {
             oninit: ({ attrs }) => {
                 state.componentId = attrs.id || uniqueId();
+                const controlled = isControlled(attrs);
+                // Warn developer for improper controlled usage
+                if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                    console.warn(`RadioButtons component received 'checkedId' prop without 'onchange' handler. ` +
+                        `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+                }
                 // Initialize internal state for uncontrolled mode
-                if (!isControlled(attrs)) {
+                if (!controlled) {
                     state.internalCheckedId = attrs.defaultCheckedId;
                 }
             },
             view: ({ attrs }) => {
+                var _a, _b;
                 const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange, } = attrs;
                 const { groupId, componentId } = state;
                 const controlled = isControlled(attrs);
                 // Get current checked ID from props or internal state
-                const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+                let currentCheckedId;
+                if (controlled) {
+                    currentCheckedId = checkedId;
+                }
+                else if (disabled) {
+                    // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                    currentCheckedId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : checkedId;
+                }
+                else {
+                    // Interactive uncontrolled: use internal state
+                    currentCheckedId = (_b = state.internalCheckedId) !== null && _b !== void 0 ? _b : attrs.defaultCheckedId;
+                }
                 const handleChange = (id) => {
                     // Update internal state for uncontrolled mode
                     if (!controlled) {
@@ -5785,8 +5843,14 @@
         return {
             oninit: ({ attrs }) => {
                 state.id = attrs.id || uniqueId();
+                const controlled = isControlled(attrs);
+                // Warn developer for improper controlled usage
+                if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                    console.warn(`Select component received 'checkedId' prop without 'onchange' handler. ` +
+                        `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+                }
                 // Initialize internal state for uncontrolled mode
-                if (!isControlled(attrs)) {
+                if (!controlled) {
                     const defaultIds = attrs.defaultCheckedId !== undefined
                         ? Array.isArray(attrs.defaultCheckedId)
                             ? attrs.defaultCheckedId
@@ -5802,16 +5866,32 @@
                 document.removeEventListener('click', closeDropdown);
             },
             view: ({ attrs }) => {
+                var _a;
                 const controlled = isControlled(attrs);
+                const { disabled } = attrs;
                 // Get selected IDs from props or internal state
-                const selectedIds = controlled
-                    ? attrs.checkedId !== undefined
+                let selectedIds;
+                if (controlled) {
+                    selectedIds = attrs.checkedId !== undefined
                         ? Array.isArray(attrs.checkedId)
                             ? attrs.checkedId
                             : [attrs.checkedId]
-                        : []
-                    : state.internalSelectedIds;
-                const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
+                        : [];
+                }
+                else if (disabled) {
+                    // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                    const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
+                    selectedIds = fallbackId !== undefined
+                        ? Array.isArray(fallbackId)
+                            ? fallbackId
+                            : [fallbackId]
+                        : [];
+                }
+                else {
+                    // Interactive uncontrolled: use internal state
+                    selectedIds = state.internalSelectedIds;
+                }
+                const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
                 const finalClassName = newRow ? `${className} clear` : className;
                 const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
                 return m('.input-field.select-space', {
@@ -8548,6 +8628,269 @@
         };
     };
 
+    /** Default star icons */
+    const DEFAULT_ICONS = {
+        filled: '★',
+        empty: '☆',
+        half: '☆', // We'll handle half-fill with CSS
+    };
+    /** Create a Rating component */
+    const Rating = () => {
+        const state = {
+            id: uniqueId(),
+            internalValue: 0,
+            hoverValue: null,
+            isHovering: false,
+            isFocused: false,
+        };
+        const isControlled = (attrs) => typeof attrs.value !== 'undefined' && typeof attrs.onchange === 'function';
+        const getCurrentValue = (attrs) => {
+            var _a, _b, _c, _d;
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            if (controlled) {
+                return attrs.value || 0;
+            }
+            // Non-interactive components: prefer defaultValue, fallback to value
+            if (isNonInteractive) {
+                return (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : 0;
+            }
+            // Interactive uncontrolled: use internal state (user can change it)
+            return (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : 0;
+        };
+        const getDisplayValue = (attrs) => state.isHovering && state.hoverValue !== null ? state.hoverValue : getCurrentValue(attrs);
+        const getLabelText = (value, max, getLabelFn) => {
+            if (getLabelFn) {
+                return getLabelFn(value, max);
+            }
+            if (value === 0) {
+                return `No rating`;
+            }
+            if (value === 1) {
+                return `1 star out of ${max}`;
+            }
+            return `${value} stars out of ${max}`;
+        };
+        const getSizeClass = (size = 'medium') => {
+            switch (size) {
+                case 'small':
+                    return 'rating--small';
+                case 'large':
+                    return 'rating--large';
+                default:
+                    return 'rating--medium';
+            }
+        };
+        const getDensityClass = (density = 'standard') => {
+            switch (density) {
+                case 'compact':
+                    return 'rating--compact';
+                case 'comfortable':
+                    return 'rating--comfortable';
+                default:
+                    return 'rating--standard';
+            }
+        };
+        const handleItemClick = (attrs, clickValue) => {
+            var _a;
+            if (attrs.readonly || attrs.disabled)
+                return;
+            const currentValue = getCurrentValue(attrs);
+            const newValue = attrs.clearable && currentValue === clickValue ? 0 : clickValue;
+            if (!isControlled(attrs)) {
+                state.internalValue = newValue;
+            }
+            (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+        };
+        const handleItemHover = (attrs, hoverValue) => {
+            var _a;
+            if (attrs.readonly || attrs.disabled)
+                return;
+            state.hoverValue = hoverValue;
+            state.isHovering = true;
+            (_a = attrs.onmouseover) === null || _a === void 0 ? void 0 : _a.call(attrs, hoverValue);
+        };
+        const handleMouseLeave = (attrs) => {
+            if (attrs.readonly || attrs.disabled)
+                return;
+            state.isHovering = false;
+            state.hoverValue = null;
+        };
+        const handleKeyDown = (attrs, e) => {
+            var _a;
+            if (attrs.readonly || attrs.disabled)
+                return;
+            const max = attrs.max || 5;
+            const step = attrs.step || 1;
+            const currentValue = getCurrentValue(attrs);
+            let newValue = currentValue;
+            switch (e.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    newValue = Math.min(max, currentValue + step);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    newValue = Math.max(0, currentValue - step);
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    newValue = attrs.clearable ? 0 : step;
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    newValue = max;
+                    break;
+                case ' ':
+                case 'Enter':
+                    e.preventDefault();
+                    // If focused and not hovering, increment by step
+                    if (!state.isHovering) {
+                        newValue = currentValue + step > max ? (attrs.clearable ? 0 : step) : currentValue + step;
+                    }
+                    break;
+                case 'Escape':
+                    if (attrs.clearable) {
+                        e.preventDefault();
+                        newValue = 0;
+                    }
+                    break;
+                default:
+                    return;
+            }
+            if (newValue !== currentValue) {
+                if (!isControlled(attrs)) {
+                    state.internalValue = newValue;
+                }
+                (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+            }
+        };
+        const RatingItem = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { index, displayValue, step, icons, allowHalfSteps, disabled, onclick, onmouseover } = attrs;
+                    const itemValue = (index + 1) * step;
+                    // Calculate fill state based on displayValue vs itemValue
+                    const diff = displayValue - itemValue;
+                    const fillState = diff >= 0 ? 'full' : allowHalfSteps && diff >= -step / 2 ? 'half' : 'empty';
+                    return m('.rating__item', {
+                        className: [
+                            fillState === 'full' ? 'rating__item--filled' : '',
+                            fillState === 'half' ? 'rating__item--half' : '',
+                            fillState !== 'empty' ? 'rating__item--active' : '',
+                            disabled ? 'rating__item--disabled' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '),
+                        onclick,
+                        onmouseover,
+                    }, [
+                        // Empty icon (background)
+                        m('.rating__icon.rating__icon--empty', { 'aria-hidden': 'true' }, typeof icons.empty === 'string' ? icons.empty : m(icons.empty)),
+                        // Filled icon (foreground)
+                        m('.rating__icon.rating__icon--filled', {
+                            'aria-hidden': 'true',
+                            style: {
+                                clipPath: fillState === 'half' ? 'inset(0 50% 0 0)' : undefined,
+                            },
+                        }, typeof icons.filled === 'string' ? icons.filled : m(icons.filled)),
+                    ]);
+                },
+            };
+        };
+        return {
+            oninit: ({ attrs }) => {
+                const controlled = isControlled(attrs);
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                // Warn developer for improper controlled usage
+                if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                    console.warn(`Rating component received 'value' prop without 'onchange' handler. ` +
+                        `Use 'defaultValue' for uncontrolled components or add 'onchange' for controlled components.`);
+                }
+                if (!controlled) {
+                    state.internalValue = attrs.defaultValue || 0;
+                }
+            },
+            view: ({ attrs }) => {
+                const { max = 5, step = 1, size = 'medium', density = 'standard', className = '', style = {}, readonly: readonly = false, disabled = false, id = state.id, name } = attrs, ariaAttrs = __rest(attrs, ["max", "step", "size", "density", "className", "style", "readonly", "disabled", "id", "name"]);
+                const currentValue = getCurrentValue(attrs);
+                const displayValue = getDisplayValue(attrs);
+                const itemCount = Math.ceil(max / step);
+                return m('.rating', {
+                    className: [
+                        'rating',
+                        getSizeClass(size),
+                        getDensityClass(density),
+                        readonly ? 'rating--read-only' : '',
+                        disabled ? 'rating--disabled' : '',
+                        state.isFocused ? 'rating--focused' : '',
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '),
+                    style,
+                    id,
+                    role: readonly ? 'img' : 'slider',
+                    tabindex: readonly || disabled ? -1 : 0,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': max,
+                    'aria-valuenow': currentValue,
+                    'aria-valuetext': getLabelText(currentValue, max, attrs.getLabelText),
+                    'aria-label': ariaAttrs['aria-label'] ||
+                        attrs.ariaLabel ||
+                        `Rating: ${getLabelText(currentValue, max, attrs.getLabelText)}`,
+                    'aria-labelledby': ariaAttrs['aria-labelledby'],
+                    'aria-readonly': readonly,
+                    'aria-disabled': disabled,
+                    onkeydown: (e) => handleKeyDown(attrs, e),
+                    onfocus: () => {
+                        state.isFocused = true;
+                    },
+                    onblur: () => {
+                        state.isFocused = false;
+                        handleMouseLeave(attrs);
+                    },
+                    onmouseleave: () => handleMouseLeave(attrs),
+                }, [
+                    // Hidden input for form submission
+                    name &&
+                        m('input', {
+                            type: 'hidden',
+                            name,
+                            value: currentValue,
+                        }),
+                    // Rating items
+                    m('.rating__items', {
+                        className: 'rating__items',
+                    }, 
+                    // Array.from({ length: itemCount }, (_, i) => renderRatingItem(attrs, i))
+                    [...Array(itemCount)].map((_, i) => {
+                        const itemValue = (i + 1) * step;
+                        return m(RatingItem, {
+                            key: `rating-item-${i}`,
+                            index: i,
+                            displayValue: displayValue,
+                            step,
+                            icons: Object.assign(Object.assign({}, DEFAULT_ICONS), attrs.icon),
+                            allowHalfSteps: attrs.allowHalfSteps,
+                            disabled: attrs.disabled,
+                            onclick: () => handleItemClick(attrs, itemValue),
+                            onmouseover: () => handleItemHover(attrs, itemValue),
+                        });
+                    })),
+                    // Screen reader text
+                    m('.rating__sr-only', {
+                        className: 'rating__sr-only',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    }, getLabelText(displayValue, max, attrs.getLabelText)),
+                ]);
+            },
+        };
+    };
+
     /**
      * @fileoverview Core TypeScript utility types for mithril-materialized library
      * These types improve type safety and developer experience across all components
@@ -8616,6 +8959,7 @@
     exports.RadioButton = RadioButton;
     exports.RadioButtons = RadioButtons;
     exports.RangeInput = RangeInput;
+    exports.Rating = Rating;
     exports.RoundIconButton = RoundIconButton;
     exports.SearchSelect = SearchSelect;
     exports.SecondaryContent = SecondaryContent;

package/dist/rating.d.ts

@@ -0,0 +1,65 @@
+import m, { FactoryComponent, Attributes } from 'mithril';
+/** Rating component size options */
+export type RatingSize = 'small' | 'medium' | 'large';
+/** Rating component density options */
+export type RatingDensity = 'compact' | 'standard' | 'comfortable';
+/** Custom icon configuration */
+export interface RatingIconConfig {
+    /** Custom filled icon component or string */
+    filled?: string | m.Component;
+    /** Custom empty icon component or string */
+    empty?: string | m.Component;
+    /** Custom half-filled icon component or string (for fractional ratings) */
+    half?: string | m.Component;
+}
+/** Rating component attributes */
+export interface RatingAttrs extends Attributes {
+    /** Current rating value */
+    value?: number;
+    /** Maximum rating value (default: 5) */
+    max?: number;
+    /** Step size for rating increments (default: 1, can be 0.5 for half-steps) */
+    step?: number;
+    /** Initial value for uncontrolled mode */
+    defaultValue?: number;
+    /** Whether the rating is read-only */
+    readonly?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Whether the rating can be cleared/reset to 0 */
+    clearable?: boolean;
+    /** Size variant */
+    size?: RatingSize;
+    /** Density variant */
+    density?: RatingDensity;
+    /** Custom icon configuration */
+    icon?: RatingIconConfig;
+    /** Class name for the container */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** Callback when rating changes */
+    onchange?: (value: number) => void;
+    /** Callback when rating is hovered (preview mode) */
+    onmouseover?: (value: number) => void;
+    /** Function to get label text for accessibility */
+    getLabelText?: (value: number, max: number) => string;
+    /** Whether to show tooltips on hover */
+    showTooltips?: boolean;
+    /** Custom tooltip labels for each rating value */
+    tooltipLabels?: string[];
+    /** Whether to allow fractional display (e.g., 3.5 stars) */
+    allowHalfSteps?: boolean;
+    /** Name for form submission */
+    name?: string;
+    /** HTML ID for the component */
+    id?: string;
+    /** ARIA label for the component */
+    'aria-label'?: string;
+    /** ARIA label for the component (camelCase alternative) */
+    ariaLabel?: string;
+    /** ARIA labelledby reference */
+    'aria-labelledby'?: string;
+}
+/** Create a Rating component */
+export declare const Rating: FactoryComponent<RatingAttrs>;

package/dist/switch.d.ts

@@ -1,6 +1,6 @@
 import { FactoryComponent } from 'mithril';
 import { InputAttrs } from './input-options';
-export interface SwitchOptions extends Partial<InputAttrs<boolean>> {
+export interface SwitchAttrs extends Pick<InputAttrs<boolean>, 'label' | 'disabled' | 'id' | 'className' | 'onchange' | 'newRow' | 'isMandatory'> {
     /** Left text label */
     left?: string;
     /** Right text label */
@@ -9,4 +9,4 @@ export interface SwitchOptions extends Partial<InputAttrs<boolean>> {
     checked?: boolean;
 }
 /** Component to display a switch with two values. */
-export declare const Switch: FactoryComponent<SwitchOptions>;
+export declare const Switch: FactoryComponent<SwitchAttrs>;

package/dist/utilities.css

@@ -2630,7 +2630,7 @@ table.striped tr {
   border-bottom: none;
 }
 table.striped > tbody > tr:nth-child(odd) {
-  background-color: rgba(242, 242, 242, 0.5);
+  background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
 }
 table.striped > tbody > tr > td {
   border-radius: 0;
@@ -2639,7 +2639,7 @@ table.highlight > tbody > tr {
   transition: background-color 0.25s ease;
 }
 table.highlight > tbody > tr:hover {
-  background-color: rgba(242, 242, 242, 0.5);
+  background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
 }
 table.centered thead tr th, table.centered tbody tr td {
   text-align: center;

package/package.json

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

package/sass/components/_datatable.scss

@@ -373,7 +373,7 @@
     }
 
     .datatable.striped tbody tr:nth-child(odd) {
-      background-color: rgba(255, 255, 255, 0.05);
+      background-color: variables.$table-striped-color;
     }
 
     .datatable.fixed-header thead th {