mithril-materialized 3.2.2 → 3.3.0

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.0.0 - Latest Release
+## 🚀 v3.2.2 - Latest Release
 
 The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.
 
@@ -10,11 +10,12 @@ The current stable release that provides a complete Mithril.js Material Design c
 
 - **🔥 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 (caret, close)
 - **⚡ Better Performance**: Direct implementations without jQuery or other heavy dependencies
-- **🛠️ Enhanced Components**: Improved DatePicker and TimePicker with custom implementations
+- **🛠️ Enhanced Components**: Improved DatePicker with date ranges, week numbers, and TimePicker with configurable AM/PM/24h or inline style
+- **🛠️ New Components**: DataTable, TreeView, Timeline, Masonry, RatingControl, ImageList, Wizard/Stepper, Breadcrumb
 - **📱 Modern Architecture**: Factory components with proper TypeScript support
 - **🎯 CSS-Only Styling**: Uses only CSS for styling - no JavaScript initialization needed
+- **🎨 Custom SVG Icons**: Built-in MaterialIcon component with custom SVG icons (caret, close)
 
 ### ✨ Key Features
 
@@ -23,9 +24,9 @@ The current stable release that provides a complete Mithril.js Material Design c
 - **🎨 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
+- **📱 Modern Architecture**: Factory components with proper TypeScript support, and clear separation between [controlled and uncontrolled](CONTROLLED_COMPONENTS.md) component state
+- **🎯 CSS-Only Styling**: Uses only CSS for styling - no JavaScript initialization needed
 
 ### 📦 Installation
 
@@ -35,6 +36,8 @@ npm install mithril mithril-materialized
 
 ## Supported Components
 
+Components marked with an * are not included in the original materialize-css library.
+
 - [Buttons](https://erikvullings.github.io/mithril-materialized/#!/buttons)
   - Button
   - FlatButton
@@ -48,13 +51,14 @@ npm install mithril mithril-materialized
   - EmailInput
   - NumberInput
   - ColorInput
-  - RangeInput (with vertical, double-thumb support, and smart tooltip display)
+  - RangeInput* (with vertical, double-thumb support, and smart tooltip display)
   - Chips
 - [Pickers](https://erikvullings.github.io/mithril-materialized/#!/pickers)
-  - DatePicker (with optional week numbers and date range selection)
-  - TimePicker
+  - DatePicker (with optional week numbers and date range selection)*
+  - TimePicker (with inline mode and switchable AM/PM/24h)*
 - [Selections](https://erikvullings.github.io/mithril-materialized/#!/selections)
   - Select
+  - SearchSelect*, a searchable select dropdown
   - Options
   - RadioButtons
   - Switch
@@ -63,32 +67,33 @@ npm install mithril mithril-materialized
   - Basic, Link and Avatar Collections
   - Collapsible or accordion
 - [Theme & Upload](https://erikvullings.github.io/mithril-materialized/#!/theme)
-  - ThemeSwitcher (light/dark/auto theme switching)
-  - ThemeToggle (simple light/dark toggle)
-  - FileUpload (drag-and-drop with validation and preview)
+  - ThemeSwitcher* (light/dark/auto theme switching)
+  - ThemeToggle* (simple light/dark toggle)
+  - FileUpload* (drag-and-drop with validation and preview)
 - [Navigation](https://erikvullings.github.io/mithril-materialized/#!/navigation)
   - Sidenav (responsive navigation drawer)
-  - Breadcrumb (navigation path indicator)
-  - Wizard/Stepper (multi-step process guidance)
+  - Breadcrumb* (navigation path indicator)
+  - Wizard/Stepper* (multi-step process guidance)
 - [Others](https://erikvullings.github.io/mithril-materialized/#!/modals)
   - ModalPanel
   - MaterialBox
   - Carousel
   - Pagination
-  - PaginationControls
+  - PaginationControls*
   - Parallax
-- [Layout & Display](https://erikvullings.github.io/mithril-materialized/#!/layout)
-  - Masonry (Pinterest-style responsive grid layout)
-  - ImageList (responsive image galleries with various layouts)
-  - Timeline (vertical timeline with events and milestones)
-- Data & Tables
-  - DataTable (sorting, filtering, pagination, selection)
-  - TreeView (hierarchical data with expand/collapse, selection, and customizable icons)
+- Layout & Display
+  - [Masonry](https://erikvullings.github.io/mithril-materialized/#!/masonry)* (Pinterest-style responsive grid layout)
+  - [ImageList](https://erikvullings.github.io/mithril-materialized/#!/image-list)* (responsive image galleries with various layouts)
+  - [Timeline](https://erikvullings.github.io/mithril-materialized/#!/timeline)* (vertical timeline with events and milestones)
+- [Rating](https://erikvullings.github.io/mithril-materialized/#!/rating)*
+  - RatingControl (Horizontal control, configurable range and step size, optionally with custom icons)
+- [Data & Tables](https://erikvullings.github.io/mithril-materialized/#!/datatable)
+  - DataTable* (sorting, filtering, pagination, selection)
+  - TreeView* (hierarchical data with expand/collapse, selection, and customizable icons)
 - Additional
   - Label
   - HelperText
   - CodeBlock
-  - SearchSelect, a searchable select dropdown
   - Icon, a simple wrapper for creating icons using material-icons font
   - MaterialIcon, for creating the close/clear and caret as SVG
 
@@ -308,8 +313,11 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 - ✅ Breadcrumb navigation component
 - ✅ Wizard/Stepper component for multi-step forms
 
-**✅ Recently Completed:**
+**✅ Recently Completed (v3.2.x):**
 
+- ✅ **TextArea Height Alignment**: Fixed single-line `textarea` height to match TextInput components perfectly
+- ✅ **Improved AutoResize Logic**: TextArea now only sets custom height for multi-line content, matching Materialize CSS reference behavior
+- ✅ **Better Mithril Integration**: Hidden div for height measurement now properly managed within Mithril's render cycle
 - ✅ DataTable component with sorting, filtering, and pagination
 - ✅ TreeView component for hierarchical data with expand/collapse, selection, and VSCode-style connectors
 - ✅ Enhanced TypeScript definitions with better JSDoc comments
@@ -317,6 +325,7 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 - ✅ Enhanced RangeInput with vertical orientation, double-thumb range selection, and smart tooltip display
 - ✅ Advanced DatePicker with date range selection, constraints, and format support
 - ✅ Layout components: Masonry (Pinterest-style grid), Timeline (vertical event display), ImageList (responsive galleries)
+- ✅ RatingControl with configurable icons, min/max, tooltip/helpers, readonly and disabled mode
 - ✅ Improved RangeInput components converted to proper Mithril components with better lifecycle management
 - ✅ Enhanced accessibility with individual thumb slider elements and PageUp/PageDown keyboard support
 
@@ -357,10 +366,11 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 
 ### 📊 Bundle Size Targets
 
-**Current Status (v3.0.0):**
+**Current Status (v3.2.2):**
 
-- Total: 70KB gzipped (44KB JS + 26KB CSS)
+- Total: ~65KB gzipped (42KB JS + 23KB CSS)
 - Modular CSS can reduce bundle by 30-50%
+- Optimized component implementations reduce overhead
 
 **Phase 1 Targets:**
 
@@ -388,7 +398,7 @@ See our [contributing guide](CONTRIBUTING.md) for detailed information.
 
 **Bundle Size Comparison:**
 
-- mithril-materialized v3.0: 64KB gzipped
+- mithril-materialized v3.2.2: ~65KB gzipped
 - Material-UI: ~350KB gzipped
 - Materialize CSS + jQuery: ~180KB gzipped
 - Vuetify: ~250KB gzipped
@@ -398,6 +408,7 @@ See our [contributing guide](CONTRIBUTING.md) for detailed information.
 - Component initialization: <5ms average
 - Theme switching: <10ms for full page
 - File upload processing: Real-time without blocking
+- TextArea auto-resize: <1ms per keystroke
 
 ## Build instructions
 
@@ -583,5 +594,4 @@ input[type='color']:not(.browser-default) {
 .codeblock > label {
   display: inline-block;
 }
-
 ```

package/dist/advanced.css

@@ -430,7 +430,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;
@@ -439,7 +439,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/dist/components.css

@@ -353,7 +353,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;
@@ -362,7 +362,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;
@@ -2601,7 +2601,7 @@ body.keyboard-focused .dropdown-content li:focus {
   }
   :root:not([data-theme]) .datatable-container .datatable.striped tbody tr:nth-child(odd),
   [data-theme=dark] .datatable-container .datatable.striped tbody tr:nth-child(odd) {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
   }
   :root:not([data-theme]) .datatable-container .datatable.fixed-header thead th,
   [data-theme=dark] .datatable-container .datatable.fixed-header thead th {
@@ -2949,6 +2949,7 @@ body.dark {
   --mm-switch-unchecked-thumb: #f5f5f5;
   --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
   --mm-switch-disabled-thumb: #bdbdbd;
+  --mm-table-striped-color: rgba(0, 0, 0, 0.05);
 }
 
 body {
@@ -3004,6 +3005,7 @@ body {
   --mm-switch-unchecked-thumb: #616161;
   --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
   --mm-switch-disabled-thumb: #424242;
+  --mm-table-striped-color: rgba(255, 255, 255, 0.05);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -3045,6 +3047,7 @@ body {
     --mm-switch-unchecked-thumb: #616161;
     --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
     --mm-switch-disabled-thumb: #424242;
+    --mm-table-striped-color: rgba(255, 255, 255, 0.05);
   }
 }
 .timeline {
@@ -3979,3 +3982,238 @@ body {
     color: black;
   }
 }
+/* Rating Component
+   ========================================================================== */
+.rating {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.rating:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.rating--read-only {
+  cursor: default;
+}
+.rating--read-only .rating__item {
+  cursor: default;
+}
+.rating--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.rating--disabled .rating__item {
+  cursor: not-allowed;
+}
+.rating--focused:not(.rating--read-only):not(.rating--disabled) .rating__items {
+  transform: scale(1.05);
+}
+
+.rating__items {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  transition: transform 0.15s ease;
+}
+
+.rating__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rating__item > .rating__item {
+  display: flex;
+}
+.rating__item:hover:not(.rating__item--disabled) {
+  transform: scale(1.1);
+}
+.rating__item--filled .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--active .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--preview .rating__icon--filled {
+  color: var(--mm-secondary-color, #26a69a);
+}
+.rating__item--half .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.rating__item--disabled .rating__icon--empty {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+}
+.rating__item--disabled.rating__item--filled .rating__icon--filled, .rating__item--disabled.rating__item--active .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+  opacity: 0.7;
+}
+
+.rating__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.rating__icon--empty {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+.rating__icon--filled {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: transparent;
+  overflow: hidden;
+  transition: color 0.15s ease;
+}
+
+.rating--small .rating__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+.rating--medium .rating__icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.rating--large .rating__icon {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}
+
+.rating--compact .rating__items {
+  gap: 2px;
+}
+
+.rating--standard .rating__items {
+  gap: 4px;
+}
+
+.rating--comfortable .rating__items {
+  gap: 8px;
+}
+
+.rating__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 1000;
+}
+.rating__tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.8);
+}
+
+.rating__item:hover .rating__tooltip {
+  opacity: 1;
+}
+
+.rating__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (pointer: coarse) {
+  .rating__item {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+[dir=rtl] .rating__tooltip::after {
+  transform: translateX(50%);
+}
+[dir=rtl] .rating__item--half .rating__icon--filled {
+  clip-path: inset(0 0 0 50%) !important;
+}
+
+@media (prefers-contrast: high) {
+  .rating__icon--empty {
+    color: currentColor;
+  }
+  .rating__item--active .rating__icon--filled {
+    color: currentColor;
+  }
+}
+[data-theme=dark] .rating__tooltip {
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(0, 0, 0, 0.87);
+}
+[data-theme=dark] .rating__tooltip::after {
+  border-top-color: rgba(255, 255, 255, 0.9);
+}
+
+@keyframes rating-fill {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.rating__item--filled .rating__icon--filled {
+  animation: rating-fill 0.2s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rating,
+  .rating__item,
+  .rating__icon,
+  .rating__tooltip,
+  .rating__items {
+    transition: none !important;
+    animation: none !important;
+  }
+  .rating__item:hover:not(.rating__item--disabled) {
+    transform: none;
+  }
+  .rating--focused:not(.rating--read-only):not(.rating--disabled) .rating__items {
+    transform: none;
+  }
+}

package/dist/core.css

@@ -750,7 +750,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;
@@ -759,7 +759,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/dist/forms.css

@@ -353,7 +353,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;
@@ -362,7 +362,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;