mithril-materialized 3.2.1 → 3.3.0

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.1",
+  "version": "3.3.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -86,16 +86,16 @@
     "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.1.1",
-    "jest-environment-jsdom": "^30.1.1",
+    "jest": "^30.1.2",
+    "jest-environment-jsdom": "^30.1.2",
     "js-yaml": "^4.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.49.0",
+    "rollup": "^4.50.0",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.91.0",
     "ts-jest": "^29.4.1",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.11",
+    "typedoc": "^0.28.12",
     "typescript": "^5.9.2"
   }
 }

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 {

package/sass/components/_rating.scss

@@ -0,0 +1,341 @@
+@use 'sass:color';
+@use "variables";
+
+/* Rating Component
+   ========================================================================== */
+
+// Rating component variables
+$rating-color-filled: var(--mm-primary-color, variables.$primary-color) !default;
+$rating-color-empty: var(--mm-text-hint, #9e9e9e) !default;
+$rating-color-hover: var(--mm-primary-color-light, color.adjust(variables.$primary-color, $lightness: 10%)) !default;
+$rating-color-disabled: var(--mm-text-disabled, rgba(0, 0, 0, 0.38)) !default;
+$rating-color-preview: var(--mm-secondary-color, variables.$secondary-color) !default;
+
+// Size variants
+$rating-size-small: 16px !default;
+$rating-size-medium: 24px !default;
+$rating-size-large: 32px !default;
+
+// Density spacing
+$rating-gap-compact: 2px !default;
+$rating-gap-standard: 4px !default;
+$rating-gap-comfortable: 8px !default;
+
+// Tooltip
+$rating-tooltip-bg: rgba(0, 0, 0, 0.8) !default;
+$rating-tooltip-text: white !default;
+
+.rating {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  // Focus state
+  &:focus-visible {
+    outline: 2px solid var(--mm-primary-color, #{variables.$primary-color});
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  // Read-only state
+  &--read-only {
+    cursor: default;
+    
+    .rating__item {
+      cursor: default;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .rating__item {
+      cursor: not-allowed;
+    }
+  }
+
+  // Focused state for enhanced visual feedback
+  &--focused:not(&--read-only):not(&--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 {
+    display: flex;     // force flex child
+  }
+
+  // Hover effect
+  &:hover:not(.rating__item--disabled) {
+    transform: scale(1.1);
+  }
+
+  // Filled state
+  &--filled {
+    .rating__icon--filled {
+      color: $rating-color-filled;
+    }
+  }
+
+  // Active state
+  &--active {
+    .rating__icon--filled {
+      color: $rating-color-filled;
+    }
+  }
+
+  // Preview state (on hover)
+  &--preview {
+    .rating__icon--filled {
+      color: $rating-color-preview;
+    }
+  }
+
+  // Half-filled state
+  &--half {
+    .rating__icon--filled {
+      color: $rating-color-filled;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    
+    .rating__icon--empty {
+      color: $rating-color-disabled;
+    }
+    
+    // Keep filled icons visible but muted
+    &.rating__item--filled .rating__icon--filled,
+    &.rating__item--active .rating__icon--filled {
+      color: $rating-color-filled;
+      opacity: 0.7;
+    }
+  }
+}
+
+.rating__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease;
+  line-height: 1;
+  width: $rating-size-medium;
+  height: $rating-size-medium;
+  font-size: $rating-size-medium;
+  
+  // Empty icon (background layer)
+  &--empty {
+    color: $rating-color-empty;
+  }
+
+  // Filled icon (foreground layer)
+  &--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;
+  }
+}
+
+// Size variants
+.rating--small {
+  .rating__icon {
+    width: $rating-size-small;
+    height: $rating-size-small;
+    font-size: $rating-size-small;
+  }
+}
+
+.rating--medium {
+  .rating__icon {
+    width: $rating-size-medium;
+    height: $rating-size-medium;
+    font-size: $rating-size-medium;
+  }
+}
+
+.rating--large {
+  .rating__icon {
+    width: $rating-size-large;
+    height: $rating-size-large;
+    font-size: $rating-size-large;
+  }
+}
+
+// Density variants
+.rating--compact {
+  .rating__items {
+    gap: $rating-gap-compact;
+  }
+}
+
+.rating--standard {
+  .rating__items {
+    gap: $rating-gap-standard;
+  }
+}
+
+.rating--comfortable {
+  .rating__items {
+    gap: $rating-gap-comfortable;
+  }
+}
+
+// Tooltip
+.rating__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: $rating-tooltip-bg;
+  color: $rating-tooltip-text;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 1000;
+
+  // Arrow
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: $rating-tooltip-bg;
+  }
+}
+
+.rating__item:hover .rating__tooltip {
+  opacity: 1;
+}
+
+// Screen reader only content
+.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;
+}
+
+// Material Design touch target (minimum 48x48dp)
+@media (pointer: coarse) {
+  .rating__item {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+
+// RTL support
+[dir="rtl"] {
+  .rating__tooltip {
+    &::after {
+      transform: translateX(50%);
+    }
+  }
+
+  .rating__item--half {
+    .rating__icon--filled {
+      clip-path: inset(0 0 0 50%) !important;
+    }
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  .rating__icon--empty {
+    color: currentColor;
+  }
+
+  .rating__item--active .rating__icon--filled {
+    color: currentColor;
+  }
+}
+
+// Dark theme adjustments
+[data-theme="dark"] {
+  .rating__tooltip {
+    background: rgba(255, 255, 255, 0.9);
+    color: rgba(0, 0, 0, 0.87);
+
+    &::after {
+      border-top-color: rgba(255, 255, 255, 0.9);
+    }
+  }
+}
+
+// Animation for rating changes
+@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;
+}
+
+// Reduced motion support
+@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/sass/components/_theme-variables.scss

@@ -68,6 +68,9 @@
   --mm-switch-unchecked-thumb: #f5f5f5;
   --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
   --mm-switch-disabled-thumb: #bdbdbd;
+  
+  // Table colors
+  --mm-table-striped-color: rgba(0, 0, 0, 0.05);
 }
 
 // Apply theme variables to body and main containers
@@ -148,6 +151,9 @@ body {
   --mm-switch-unchecked-thumb: #616161;
   --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
   --mm-switch-disabled-thumb: #424242;
+  
+  // Table colors (dark theme)
+  --mm-table-striped-color: rgba(255, 255, 255, 0.05);
 }
 
 // Auto dark mode based on user preference
@@ -201,5 +207,8 @@ body {
     --mm-switch-unchecked-thumb: #616161;
     --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
     --mm-switch-disabled-thumb: #424242;
+    
+    // Table colors (auto dark theme)
+    --mm-table-striped-color: rgba(255, 255, 255, 0.05);
   }
 }

package/sass/components/_variables.scss

@@ -291,7 +291,8 @@ $tabs-bg-color: #fff !default;
 // ==========================================================================
 
 $table-border-color: rgba(0,0,0,.12) !default;
-$table-striped-color: rgba(242, 242, 242, 0.5) !default;
+// Use CSS custom property for table striped color to enable better theming
+$table-striped-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5)) !default;
 
 
 // 19. Toasts

package/sass/components/forms/_input-fields.scss

@@ -380,6 +380,9 @@ textarea {
 /* Character Counter */
 .character-counter {
   min-height: 18px;
+  font-size: 12px;
+  display: block;
+  text-align: right;
 }
 
 /* Input Clear Button */

package/sass/materialize.scss

@@ -51,4 +51,5 @@
 @use "components/treeview";
 @use "components/timeline";
 @use "components/masonry";
-@use "components/image-list";
+@use "components/image-list";
+@use 'components/rating';