mithril-materialized 3.3.4 → 3.3.5

package/README.md

@@ -2,7 +2,7 @@
 
 A Mithril.js component library inspired by [materialize-css](https://materializecss.com) design principles, [available on npm](https://www.npmjs.com/package/mithril-materialized). This library provides you with ready-to-use Mithril components that follow Material Design guidelines, with **no external JavaScript dependencies**.
 
-## 🚀 v3.3.0 - Latest Release
+## 🚀 v3.3 - Latest Release
 
 The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.
 
@@ -99,6 +99,8 @@ Components marked with an * are not included in the original materialize-css lib
 
 ## 📖 Usage Instructions
 
+Online [flems](flems.io) examples: [FlatButton](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6AnAJgDQgGd4EBjAF3imRHTIJHwDMIF6kBtUAOwEMxEkNABZkwsBiBIB7LhVnUAPLAhcA1gAIATsQC8AHUJkAnqyHx4ZA+qHbG+kCLIAHAkgD0bgK5cnqgObo0mBukGQ2LAC0YDwUmhA8ygBelG5QEARkbipQ8AAegQQEBgB8elwSRKRkEDJsIACMSAAMIAC+uNx8AjR0EtKy8PKC-RnqwOoAYrAxAEKeZGQy6q3qOuoA7tlS6+wA5KHhsFEx8HEJEMlQuwC6ANxlZSNk6jIkyiQaawAUAJSrxeoEqcyF9dqoAFZCCG7H4PLhgdDaLg5TRfKBSEiefiydAAIykUCMuHUYC+U1m80WXGJ42muOISHUBgAskZJtNnrjKTIDMTXu8NK0fj97lwyhViPByDUuHUAGzNNodEC8fjUAr0fD9ORkahta74ZRqNicFVdagHOLifCeTTiQSOFzuLw+fyBKTBS0sAAC2HQAGZ0AB2EIQMJW9CQLjocGakDGJzdAgkOJOXXtTpqwReo7RWLxJKUCS2+0OBZOjzeXwBIKh8ORPOnAsXSjewOBgAsqXSmWyeXQWKgMbjCaTKYgaf1rSAA) and [Select](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6AnAJgDQgGd4EBjAF3imRHTIJHwDMIF6kBtUAOwEMxEkNABZkwsBiBIB7LhVnUAPLAhcA1gAIATsQC8AHUJkAnqyHx4ZA+qHbG+kCLIAHAkgD0bgK5cnqgObo0mBukGQ2LAC0YDwUmhA8ygBelG5QEARkbipQ8AAegQQEBgB8elwSRKRkEDJsIACMSAAMIAC+uNx8AjR0EtKy8PKC-RnqwOoAysTw5Oqt6jrqAO7ZUkvsAOSh4bBRMfBxCRDJUBsAugDcZWUjZOokZiSqlACSUAvqG9gbV1xlYOhtFwcpoABRQKQkTz8WToABGUigRlw6jK6nUYFBG0Baw2KPGGRM8CQYwxPE0fhUABUpE4SRt6k0nLkNnM5ii0eiMaCplV8epYDw4cR6byZnd+HjUVwuVynIKSPAhFJYCD6QBhZRPdQyeB4zmyh4zZ5QN64A1c2nVWok9gW2XjaD0+pSwXC2D0gDyTmtMpd7PtXMdUHp3xRbpFn29vvU3wDMtlQfUTs+AGZXULIxtozUZen44n1GdzQnZTIHjwuH5iepQQA3ACUC2K6gSBzI9YbJdlrQbnL7XAbvzKFWm5FzdXqAA5mm0OiBePxqAV6Ph+nIyNQ2sWQMo1GxOAuutRtnFxPhPJpxIJHC53F4fP5AlJgqeWAABbDoVPoADsIQgMIz3QSAuHQAArVcQGMJxugIEg4h9OdOiXQQ312aJYniJJKAkS9rwcMhnFcDxvF8AIggAoDIkwg5sOOSh3x-H8ABZUnSTJsjydBoSgCCoJguCEIgJDWjOVogA).
+
 ### Quick Start
 
 1. **Install the package**:

package/dist/components.css

@@ -4223,3 +4223,102 @@ body {
     transform: none;
   }
 }
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.theme-switcher .theme-switcher-label {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+}
+.theme-switcher .theme-switcher-buttons {
+  display: flex;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 0.875rem;
+  border-radius: 0;
+  min-width: auto;
+  height: auto;
+  line-height: 1;
+  text-transform: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active:hover {
+  background: var(--mm-primary-color-dark, #00695c);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
+  font-size: 1rem;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat span {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.theme-toggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.theme-toggle:hover {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+  border-color: var(--mm-primary-color, #26a69a);
+}
+.theme-toggle .material-icons {
+  font-size: 1.25rem;
+}
+
+nav .theme-toggle {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: 64px;
+  height: 64px;
+}
+nav .theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+}
+nav .theme-toggle:focus {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 600px) {
+  .theme-switcher .theme-switcher-buttons .btn-flat {
+    padding: 0.5rem;
+  }
+  .theme-switcher .theme-switcher-buttons .btn-flat span {
+    display: none;
+  }
+}

package/dist/index.esm.js

@@ -874,6 +874,14 @@ const iconPaths = {
         'M19 13H5v-2h14v2z', // minus
         'M0 0h24v24H0z', // background
     ],
+    light_mode: [
+        'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
+        'M0 0h24v24H0z', // background
+    ],
+    dark_mode: [
+        'M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z',
+        'M0 0h24v24H0z', // background
+    ],
 };
 const MaterialIcon = () => {
     return {
@@ -7162,20 +7170,23 @@ const ThemeSwitcher = () => {
                 showLabels && m('span.theme-switcher-label', labels.theme),
                 m('.theme-switcher-buttons', [
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'light' ? 'active' : '',
                         onclick: () => handleThemeChange('light'),
                         title: labels.lightTitle,
-                    }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
+                    }, [m(MaterialIcon, { name: 'light_mode' }), showLabels && m('span', labels.light)]),
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'auto' ? 'active' : '',
                         onclick: () => handleThemeChange('auto'),
                         title: labels.autoTitle,
                     }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'dark' ? 'active' : '',
                         onclick: () => handleThemeChange('dark'),
                         title: labels.darkTitle,
-                    }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                    }, [m(MaterialIcon, { name: 'dark_mode' }), showLabels && m('span', labels.dark)]),
                 ]),
             ]);
         },
@@ -7196,16 +7207,16 @@ const ThemeToggle = () => {
             const currentTheme = ThemeManager.getEffectiveTheme();
             const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
             return m('button.btn-flat.theme-toggle', {
+                type: 'button',
                 class: attrs.className || '',
                 onclick: () => {
                     ThemeManager.toggle();
                 },
                 title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
-                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
             }, [
-                m('i.material-icons', {
-                    style: 'color: inherit; font-size: 24px;',
-                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
+                m(MaterialIcon, {
+                    name: currentTheme === 'light' ? 'dark_mode' : 'light_mode',
+                }),
             ]);
         },
     };

package/dist/index.js

@@ -876,6 +876,14 @@ const iconPaths = {
         'M19 13H5v-2h14v2z', // minus
         'M0 0h24v24H0z', // background
     ],
+    light_mode: [
+        'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
+        'M0 0h24v24H0z', // background
+    ],
+    dark_mode: [
+        'M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z',
+        'M0 0h24v24H0z', // background
+    ],
 };
 const MaterialIcon = () => {
     return {
@@ -7164,20 +7172,23 @@ const ThemeSwitcher = () => {
                 showLabels && m('span.theme-switcher-label', labels.theme),
                 m('.theme-switcher-buttons', [
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'light' ? 'active' : '',
                         onclick: () => handleThemeChange('light'),
                         title: labels.lightTitle,
-                    }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
+                    }, [m(MaterialIcon, { name: 'light_mode' }), showLabels && m('span', labels.light)]),
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'auto' ? 'active' : '',
                         onclick: () => handleThemeChange('auto'),
                         title: labels.autoTitle,
                     }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                     m('button.btn-flat', {
+                        type: 'button',
                         class: theme === 'dark' ? 'active' : '',
                         onclick: () => handleThemeChange('dark'),
                         title: labels.darkTitle,
-                    }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                    }, [m(MaterialIcon, { name: 'dark_mode' }), showLabels && m('span', labels.dark)]),
                 ]),
             ]);
         },
@@ -7198,16 +7209,16 @@ const ThemeToggle = () => {
             const currentTheme = ThemeManager.getEffectiveTheme();
             const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
             return m('button.btn-flat.theme-toggle', {
+                type: 'button',
                 class: attrs.className || '',
                 onclick: () => {
                     ThemeManager.toggle();
                 },
                 title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
-                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
             }, [
-                m('i.material-icons', {
-                    style: 'color: inherit; font-size: 24px;',
-                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
+                m(MaterialIcon, {
+                    name: currentTheme === 'light' ? 'dark_mode' : 'light_mode',
+                }),
             ]);
         },
     };

package/dist/index.umd.js

@@ -878,6 +878,14 @@
             'M19 13H5v-2h14v2z', // minus
             'M0 0h24v24H0z', // background
         ],
+        light_mode: [
+            'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
+            'M0 0h24v24H0z', // background
+        ],
+        dark_mode: [
+            'M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z',
+            'M0 0h24v24H0z', // background
+        ],
     };
     const MaterialIcon = () => {
         return {
@@ -7166,20 +7174,23 @@
                     showLabels && m('span.theme-switcher-label', labels.theme),
                     m('.theme-switcher-buttons', [
                         m('button.btn-flat', {
+                            type: 'button',
                             class: theme === 'light' ? 'active' : '',
                             onclick: () => handleThemeChange('light'),
                             title: labels.lightTitle,
-                        }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
+                        }, [m(MaterialIcon, { name: 'light_mode' }), showLabels && m('span', labels.light)]),
                         m('button.btn-flat', {
+                            type: 'button',
                             class: theme === 'auto' ? 'active' : '',
                             onclick: () => handleThemeChange('auto'),
                             title: labels.autoTitle,
                         }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                         m('button.btn-flat', {
+                            type: 'button',
                             class: theme === 'dark' ? 'active' : '',
                             onclick: () => handleThemeChange('dark'),
                             title: labels.darkTitle,
-                        }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                        }, [m(MaterialIcon, { name: 'dark_mode' }), showLabels && m('span', labels.dark)]),
                     ]),
                 ]);
             },
@@ -7200,16 +7211,16 @@
                 const currentTheme = ThemeManager.getEffectiveTheme();
                 const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
                 return m('button.btn-flat.theme-toggle', {
+                    type: 'button',
                     class: attrs.className || '',
                     onclick: () => {
                         ThemeManager.toggle();
                     },
                     title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
-                    style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
                 }, [
-                    m('i.material-icons', {
-                        style: 'color: inherit; font-size: 24px;',
-                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
+                    m(MaterialIcon, {
+                        name: currentTheme === 'light' ? 'dark_mode' : 'light_mode',
+                    }),
                 ]);
             },
         };

package/dist/material-icon.d.ts

@@ -5,6 +5,8 @@ declare const iconPaths: {
     readonly chevron: readonly ["M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "M0 0h24v24H0z"];
     readonly expand: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", "M0 0h24v24H0z"];
     readonly collapse: readonly ["M19 13H5v-2h14v2z", "M0 0h24v24H0z"];
+    readonly light_mode: readonly ["M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z", "M0 0h24v24H0z"];
+    readonly dark_mode: readonly ["M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z", "M0 0h24v24H0z"];
 };
 type IconName = keyof typeof iconPaths;
 export interface MaterialIconAttrs extends Attributes {

package/package.json

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