mithril-materialized 3.0.0 → 3.2.0

package/README.md

@@ -2,9 +2,9 @@
 
 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**.
 
-## 🚀 v2.0.0 Beta - Major Release
+## 🚀 v3.0.0 - Latest Release
 
-This is a **major breaking release** that removes all external JavaScript dependencies, making the library completely self-contained and significantly reducing bundle sizes.
+The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.
 
 ### ✨ What's New
 
@@ -16,29 +16,23 @@ This is a **major breaking release** that removes all external JavaScript depend
 - **📱 Modern Architecture**: Factory components with proper TypeScript support
 - **🎯 CSS-Only Styling**: Uses only CSS for styling - no JavaScript initialization needed
 
-### 💥 Breaking Changes from v1.x
+### ✨ Key Features
 
-- **Removed dependencies**: No longer requires `materialize-css` or `material-icons` packages
-- **Component updates**: DatePicker and TimePicker now have custom implementations
-- **Icon changes**: Library uses custom SVG icons. Material Icons font is supported too, but not required.
-- **Installation**: Simpler installation process with fewer dependencies
-
-### 📈 Migration from v1.x
-
-**Old installation (v1.x):**
-
-```bash
-npm install materialize-css material-icons mithril mithril-materialized
-```
+- **🔥 Zero External JS Dependencies**: No longer requires `materialize-css` JavaScript or `material-icons` fonts
+- **📦 Smaller Bundle Size**: Reduced package size by eliminating external dependencies  
+- **🎨 Custom SVG Icons**: Built-in MaterialIcon component with custom SVG icons
+- **⚡ Better Performance**: Direct implementations without jQuery or other heavy dependencies
+- **🛠️ Enhanced Components**: Comprehensive component library with modern features
+- **📱 Modern Architecture**: Factory components with proper TypeScript support
+- **🎯 CSS-Only Styling**: Uses only CSS for styling - no JavaScript initialization needed
+- **🌗 Dark Theme Support**: Built-in light/dark theme system with CSS custom properties
 
-**New installation (v2.x):**
+### 📦 Installation
 
 ```bash
 npm install mithril mithril-materialized
 ```
 
-Your CSS imports can remain the same, but you no longer need the materialize-css JavaScript.
-
 ## Supported Components
 
 - [Buttons](https://erikvullings.github.io/mithril-materialized/#!/buttons)
@@ -363,7 +357,7 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 
 ### 📊 Bundle Size Targets
 
-**Current Status (v2.0.0-beta.15):**
+**Current Status (v3.0.0):**
 
 - Total: 70KB gzipped (44KB JS + 26KB CSS)
 - Modular CSS can reduce bundle by 30-50%
@@ -394,7 +388,7 @@ See our [contributing guide](CONTRIBUTING.md) for detailed information.
 
 **Bundle Size Comparison:**
 
-- mithril-materialized v2.0: 64KB gzipped
+- mithril-materialized v3.0: 64KB gzipped
 - Material-UI: ~350KB gzipped
 - Materialize CSS + jQuery: ~180KB gzipped
 - Vuetify: ~250KB gzipped

package/dist/components.css

@@ -1116,6 +1116,9 @@ button.btn-floating {
   margin: 0 24px 0 0;
   width: 24px;
 }
+.dropdown-content li.disabled {
+  cursor: not-allowed;
+}
 
 body.keyboard-focused .dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));

package/dist/core.css

@@ -2675,6 +2675,24 @@ textarea.materialize-textarea {
   min-height: 18px;
 }
 
+/* Input Clear Button */
+.input-clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 1rem;
+  cursor: pointer;
+  z-index: 1;
+  color: var(--mm-text-hint, #d1d1d1);
+  transition: color 0.2s ease;
+}
+.input-clear-btn:hover {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
+}
+.input-clear-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
 /* Radio Buttons
    ========================================================================== */
 [type=radio]:not(:checked),
@@ -2799,6 +2817,10 @@ textarea.materialize-textarea {
   pointer-events: none;
 }
 
+[type=checkbox]:disabled + span {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+}
+
 [type=checkbox] {
   /* checkbox aspect */
 }
@@ -2959,6 +2981,7 @@ textarea.materialize-textarea {
 .switch * {
   -webkit-tap-highlight-color: transparent;
   user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {
@@ -3173,6 +3196,137 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   padding-left: 1rem;
 }
 
+/* Dark theme overrides to ensure proper colors */
+[data-theme=dark] .select-dropdown.dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li.active {
+  background-color: #444 !important;
+}
+[data-theme=dark] .chip {
+  background-color: #424242 !important;
+  color: var(--mm-text-secondary) !important;
+}
+
+/* Auto dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) .select-dropdown.dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li.active {
+    background-color: #444 !important;
+  }
+  :root:not([data-theme=light]) .chip {
+    background-color: #424242 !important;
+    color: var(--mm-text-secondary) !important;
+  }
+}
+/* SearchSelect Specific Styles
+   ========================================================================== */
+.search-wrapper {
+  padding: 0 16px;
+  position: relative;
+}
+
+.search-select-input {
+  width: 100%;
+  outline: none;
+  font-size: 0.875rem;
+  border: none;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
+  background-color: transparent;
+  color: var(--mm-text-primary, inherit);
+}
+.search-select-input:focus {
+  border-bottom-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-input::placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+
+.search-select-no-options {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+}
+.search-select-no-options:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.search-select-option-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  min-height: var(--mm-dropdown-item-height, 50px);
+}
+.search-select-option-label input[type=checkbox] {
+  margin-right: 8px;
+  position: relative;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--mm-border-color, #9e9e9e);
+  border-radius: 2px;
+  background-color: transparent;
+}
+.search-select-option-label input[type=checkbox]:checked {
+  background-color: var(--mm-primary-color, #2196F3);
+  border-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-option-label input[type=checkbox]:checked:after {
+  content: "✓";
+  color: white;
+  font-size: 12px;
+  position: absolute;
+  top: -2px;
+  left: 2px;
+}
+.search-select-option-label input[type=checkbox]:focus {
+  outline: 2px solid var(--mm-primary-color, #2196F3);
+  outline-offset: 2px;
+}
+.search-select-option-label span {
+  flex: 1;
+}
+
+.multi-select-dropdown .chips-container {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  cursor: pointer;
+  position: relative;
+  min-height: var(--mm-input-height, 3rem);
+  padding: 4px 0;
+}
+.multi-select-dropdown .chips-container .chip {
+  margin: 2px 4px 2px 0;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close {
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 4px;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close:hover {
+  color: var(--mm-error-color, #f44336);
+}
+.multi-select-dropdown .chips-container .placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+  flex-grow: 1;
+  padding: 8px 0;
+}
+.multi-select-dropdown .chips-container .spacer {
+  flex-grow: 1;
+}
+.multi-select-dropdown .chips-container .caret {
+  margin-left: auto;
+  cursor: pointer;
+}
+
 /* File Input
    ========================================================================== */
 .file-field {
@@ -3386,17 +3540,3 @@ input[type=range]::-ms-thumb {
   cursor: text;
   text-align: initial;
 }
-
-select:focus {
-  outline: 1px solid rgb(201.05, 242.65, 238.75);
-}
-
-button:focus {
-  outline: none;
-  background-color: rgb(41.8, 182.6, 169.4);
-}
-
-label {
-  font-size: 0.8rem;
-  color: #9e9e9e;
-}

package/dist/dropdown.d.ts

@@ -28,13 +28,16 @@ export interface DropdownAttrs<T extends string | number> extends Attributes {
     /** Item array to show in the dropdown. If the value is not supplied, uses he name. */
     items: DropdownItem<T>[];
     /**
-     * Selected value or name
-     * @deprecated Use initialValue instead
+     * Currently selected item id for controlled mode. If provided along with `onchange`, the component operates in controlled mode
+     * where the parent manages the state. The parent must update this value in response to `onchange` callbacks.
      */
     checkedId?: T;
-    /** Selected value or name */
-    initialValue?: T;
-    /** When a value or name is selected */
+    /**
+     * Default selected item id for uncontrolled mode. Only used when `checkedId` and `onchange` are not provided.
+     * The component will manage its own internal state in uncontrolled mode.
+     */
+    defaultCheckedId?: T;
+    /** When a value or name is selected. Optional for uncontrolled mode. */
     onchange?: (value: T) => void;
     /** Uses Materialize icons as a prefix or postfix. */
     iconName?: string;

package/dist/forms.css

@@ -1284,6 +1284,24 @@ textarea.materialize-textarea {
   min-height: 18px;
 }
 
+/* Input Clear Button */
+.input-clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 1rem;
+  cursor: pointer;
+  z-index: 1;
+  color: var(--mm-text-hint, #d1d1d1);
+  transition: color 0.2s ease;
+}
+.input-clear-btn:hover {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
+}
+.input-clear-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
 /* Select Field
    ========================================================================== */
 select.browser-default {
@@ -1423,6 +1441,137 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   padding-left: 1rem;
 }
 
+/* Dark theme overrides to ensure proper colors */
+[data-theme=dark] .select-dropdown.dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li.active {
+  background-color: #444 !important;
+}
+[data-theme=dark] .chip {
+  background-color: #424242 !important;
+  color: var(--mm-text-secondary) !important;
+}
+
+/* Auto dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) .select-dropdown.dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li.active {
+    background-color: #444 !important;
+  }
+  :root:not([data-theme=light]) .chip {
+    background-color: #424242 !important;
+    color: var(--mm-text-secondary) !important;
+  }
+}
+/* SearchSelect Specific Styles
+   ========================================================================== */
+.search-wrapper {
+  padding: 0 16px;
+  position: relative;
+}
+
+.search-select-input {
+  width: 100%;
+  outline: none;
+  font-size: 0.875rem;
+  border: none;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
+  background-color: transparent;
+  color: var(--mm-text-primary, inherit);
+}
+.search-select-input:focus {
+  border-bottom-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-input::placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+
+.search-select-no-options {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+}
+.search-select-no-options:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.search-select-option-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  min-height: var(--mm-dropdown-item-height, 50px);
+}
+.search-select-option-label input[type=checkbox] {
+  margin-right: 8px;
+  position: relative;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--mm-border-color, #9e9e9e);
+  border-radius: 2px;
+  background-color: transparent;
+}
+.search-select-option-label input[type=checkbox]:checked {
+  background-color: var(--mm-primary-color, #2196F3);
+  border-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-option-label input[type=checkbox]:checked:after {
+  content: "✓";
+  color: white;
+  font-size: 12px;
+  position: absolute;
+  top: -2px;
+  left: 2px;
+}
+.search-select-option-label input[type=checkbox]:focus {
+  outline: 2px solid var(--mm-primary-color, #2196F3);
+  outline-offset: 2px;
+}
+.search-select-option-label span {
+  flex: 1;
+}
+
+.multi-select-dropdown .chips-container {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  cursor: pointer;
+  position: relative;
+  min-height: var(--mm-input-height, 3rem);
+  padding: 4px 0;
+}
+.multi-select-dropdown .chips-container .chip {
+  margin: 2px 4px 2px 0;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close {
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 4px;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close:hover {
+  color: var(--mm-error-color, #f44336);
+}
+.multi-select-dropdown .chips-container .placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+  flex-grow: 1;
+  padding: 8px 0;
+}
+.multi-select-dropdown .chips-container .spacer {
+  flex-grow: 1;
+}
+.multi-select-dropdown .chips-container .caret {
+  margin-left: auto;
+  cursor: pointer;
+}
+
 /* Checkboxes
    ========================================================================== */
 /* Remove default checkbox */
@@ -1433,6 +1582,10 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   pointer-events: none;
 }
 
+[type=checkbox]:disabled + span {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+}
+
 [type=checkbox] {
   /* checkbox aspect */
 }
@@ -1707,6 +1860,7 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .switch * {
   -webkit-tap-highlight-color: transparent;
   user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {

package/dist/index.css

@@ -5283,6 +5283,9 @@ button.btn-floating {
   margin: 0 24px 0 0;
   width: 24px;
 }
+.dropdown-content li.disabled {
+  cursor: not-allowed;
+}
 
 body.keyboard-focused .dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
@@ -6324,6 +6327,24 @@ textarea.materialize-textarea {
   min-height: 18px;
 }
 
+/* Input Clear Button */
+.input-clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 1rem;
+  cursor: pointer;
+  z-index: 1;
+  color: var(--mm-text-hint, #d1d1d1);
+  transition: color 0.2s ease;
+}
+.input-clear-btn:hover {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
+}
+.input-clear-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
 /* Radio Buttons
    ========================================================================== */
 [type=radio]:not(:checked),
@@ -6450,6 +6471,10 @@ textarea.materialize-textarea {
   pointer-events: none;
 }
 
+[type=checkbox]:disabled + span {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+}
+
 [type=checkbox] {
   /* checkbox aspect */
 }
@@ -6614,6 +6639,7 @@ textarea.materialize-textarea {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {
@@ -6832,6 +6858,142 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   padding-left: 1rem;
 }
 
+/* Dark theme overrides to ensure proper colors */
+[data-theme=dark] .select-dropdown.dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li:hover,
+[data-theme=dark] .dropdown-content li.active {
+  background-color: #444 !important;
+}
+[data-theme=dark] .chip {
+  background-color: #424242 !important;
+  color: var(--mm-text-secondary) !important;
+}
+
+/* Auto dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) .select-dropdown.dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li:hover,
+  :root:not([data-theme=light]) .dropdown-content li.active {
+    background-color: #444 !important;
+  }
+  :root:not([data-theme=light]) .chip {
+    background-color: #424242 !important;
+    color: var(--mm-text-secondary) !important;
+  }
+}
+/* SearchSelect Specific Styles
+   ========================================================================== */
+.search-wrapper {
+  padding: 0 16px;
+  position: relative;
+}
+
+.search-select-input {
+  width: 100%;
+  outline: none;
+  font-size: 0.875rem;
+  border: none;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
+  background-color: transparent;
+  color: var(--mm-text-primary, inherit);
+}
+.search-select-input:focus {
+  border-bottom-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-input::-moz-placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+.search-select-input::placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+
+.search-select-no-options {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+}
+.search-select-no-options:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.search-select-option-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  min-height: var(--mm-dropdown-item-height, 50px);
+}
+.search-select-option-label input[type=checkbox] {
+  margin-right: 8px;
+  position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--mm-border-color, #9e9e9e);
+  border-radius: 2px;
+  background-color: transparent;
+}
+.search-select-option-label input[type=checkbox]:checked {
+  background-color: var(--mm-primary-color, #2196F3);
+  border-color: var(--mm-primary-color, #2196F3);
+}
+.search-select-option-label input[type=checkbox]:checked:after {
+  content: "✓";
+  color: white;
+  font-size: 12px;
+  position: absolute;
+  top: -2px;
+  left: 2px;
+}
+.search-select-option-label input[type=checkbox]:focus {
+  outline: 2px solid var(--mm-primary-color, #2196F3);
+  outline-offset: 2px;
+}
+.search-select-option-label span {
+  flex: 1;
+}
+
+.multi-select-dropdown .chips-container {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  cursor: pointer;
+  position: relative;
+  min-height: var(--mm-input-height, 3rem);
+  padding: 4px 0;
+}
+.multi-select-dropdown .chips-container .chip {
+  margin: 2px 4px 2px 0;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close {
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 4px;
+}
+.multi-select-dropdown .chips-container .chip .material-icons.close:hover {
+  color: var(--mm-error-color, #f44336);
+}
+.multi-select-dropdown .chips-container .placeholder {
+  color: var(--mm-text-hint, #9e9e9e);
+  flex-grow: 1;
+  padding: 8px 0;
+}
+.multi-select-dropdown .chips-container .spacer {
+  flex-grow: 1;
+}
+.multi-select-dropdown .chips-container .caret {
+  margin-left: auto;
+  cursor: pointer;
+}
+
 /* File Input
    ========================================================================== */
 .file-field {
@@ -7049,20 +7211,6 @@ input[type=range]::-ms-thumb {
   text-align: initial;
 }
 
-select:focus {
-  outline: 1px solid rgb(201.05, 242.65, 238.75);
-}
-
-button:focus {
-  outline: none;
-  background-color: rgb(41.8, 182.6, 169.4);
-}
-
-label {
-  font-size: 0.8rem;
-  color: #9e9e9e;
-}
-
 /* Enhanced Range Sliders
    ========================================================================== */
 .range-slider.vertical {