mithril-materialized 3.15.0 → 3.17.0

package/dist/input-options.d.ts

@@ -1,4 +1,5 @@
 import { Attributes } from 'mithril';
+import { ComponentStyle } from './types';
 export interface InputAttrs<T = string> extends Attributes {
     /** Optional label. */
     label?: string;
@@ -35,6 +36,8 @@ export interface InputAttrs<T = string> extends Attributes {
      * and copy the text from it.
      */
     readOnly?: boolean;
+    /** @deprecated Use readOnly instead. Kept for backward compatibility. */
+    readonly?: boolean;
     /** When true, add the autofocus attribute to the input field. */
     autofocus?: (() => boolean) | boolean;
     /** Key down event */
@@ -70,7 +73,7 @@ export interface InputAttrs<T = string> extends Attributes {
     /** Sets the input field to disabled. */
     disabled?: boolean;
     /** Optional style information. */
-    style?: string;
+    style?: ComponentStyle;
     /** When input type is a number, optionally specify the minimum value. */
     min?: number;
     /** When input type is a number, optionally specify the maximum value. */

package/dist/likert-scale.d.ts

@@ -1,4 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
+import { ComponentStyle } from './types';
 /** Likert scale component size options */
 export type LikertScaleSize = 'small' | 'medium' | 'large';
 /** Likert scale component density options */
@@ -62,7 +63,7 @@ export interface LikertScaleAttrs<T extends number = number> extends Attributes
     /** Class name for the container */
     className?: string;
     /** Additional CSS styles */
-    style?: any;
+    style?: ComponentStyle;
     /** Use CSS grid for label/scale alignment in multi-question surveys (default: false) */
     alignLabels?: boolean;
 }

package/dist/linear-progress.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-import { MaterialColor, ColorIntensity } from './types';
+import { MaterialColor, ColorIntensity, ComponentStyle } from './types';
 import { ProgressMode, ProgressSize } from './circular-progress';
 /** LinearProgress component attributes */
 export interface LinearProgressAttrs extends Attributes {
@@ -22,7 +22,7 @@ export interface LinearProgressAttrs extends Attributes {
     /** Additional CSS class names */
     className?: string;
     /** Additional CSS styles */
-    style?: any;
+    style?: ComponentStyle;
     /** HTML ID for the component */
     id?: string;
     /** ARIA label for accessibility */

package/dist/material-icon.d.ts

@@ -1,4 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
+import { ComponentStyle } from './types';
 declare const iconPaths: {
     readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
     readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
@@ -19,7 +20,7 @@ export type IconName = keyof typeof iconPaths;
 export interface MaterialIconAttrs extends Attributes {
     name: IconName;
     direction?: 'up' | 'down' | 'left' | 'right';
-    style?: Record<string, string>;
+    style?: ComponentStyle;
     onclick?: (e: MouseEvent) => void;
 }
 export declare const MaterialIcon: FactoryComponent<MaterialIconAttrs>;

package/dist/radio.d.ts

@@ -31,6 +31,13 @@ export interface RadioButtonsAttrs<T extends string | number> extends Attributes
     disabled?: boolean;
     /** Layout for the options: 'vertical' (default) or 'horizontal' */
     layout?: 'vertical' | 'horizontal';
+    /** @deprecated Use layout instead. Kept for backward compatibility. */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Explicitly allow HTML in option labels and description.
+     * Disabled by default to prevent unsafe rendering.
+     */
+    allowHtml?: boolean;
 }
 export interface RadioButtonAttrs<T extends string | number> extends Attributes {
     id: T;
@@ -41,6 +48,8 @@ export interface RadioButtonAttrs<T extends string | number> extends Attributes
     disabled?: boolean;
     /** Optional input id for the radio button */
     inputId?: string;
+    /** Explicitly allow trusted HTML in the label */
+    allowHtml?: boolean;
 }
 export declare const RadioButton: <T extends string | number>() => Component<RadioButtonAttrs<T>>;
 /** Component to show a list of radio buttons, from which you can choose one. */

package/dist/range-slider.d.ts

@@ -1,5 +1,6 @@
 import m from 'mithril';
 import { InputAttrs } from './input-options';
+import { ComponentStyle } from './types';
 export declare const SingleRangeSlider: {
     oninit({ state }: {
         state: any;
@@ -10,7 +11,7 @@ export declare const SingleRangeSlider: {
     view({ attrs, state, }: {
         attrs: InputAttrs<any> & {
             cn?: string;
-            style?: any;
+            style?: ComponentStyle;
             iconName?: string;
             id: string;
             label?: string;
@@ -30,7 +31,7 @@ export declare const DoubleRangeSlider: {
     view({ attrs, state, }: {
         attrs: InputAttrs<any> & {
             cn?: string;
-            style?: any;
+            style?: ComponentStyle;
             iconName?: string;
             id: string;
             label?: string;

package/dist/rating.d.ts

@@ -1,4 +1,5 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
+import { ComponentStyle } from './types';
 /** Rating component size options */
 export type RatingSize = 'small' | 'medium' | 'large';
 /** Rating component density options */
@@ -37,7 +38,7 @@ export interface RatingAttrs extends Attributes {
     /** Class name for the container */
     className?: string;
     /** Additional CSS styles */
-    style?: any;
+    style?: ComponentStyle;
     /** Callback when rating changes */
     onchange?: (value: number) => void;
     /** Callback when rating is hovered (preview mode) */

package/dist/search-select.d.ts

@@ -1,9 +1,13 @@
-import { Component } from 'mithril';
+import m, { Component } from 'mithril';
 import { SelectAttrs } from './select';
 import { InputOption } from './option';
 export interface SearchSelectI18n {
     /** Text shown when no options match the search */
     noOptionsFound?: string;
+    /** Text shown while async options are loading */
+    loadingOptions?: string;
+    /** Text shown when async option loading fails */
+    loadingError?: string;
     /** Prefix for adding new option */
     addNewPrefix?: string;
     /** Message template for truncated results. Use {shown} and {total} placeholders */
@@ -12,6 +16,8 @@ export interface SearchSelectI18n {
     maxSelectionsReached?: string;
 }
 export interface SearchSelectAttrs<T extends string | number> extends SelectAttrs<T> {
+    /** Async options loader for remote/large data sets */
+    loadOptions?: (query: string) => Promise<InputOption<T>[]>;
     /** Callback when user creates a new option: should return new ID */
     oncreateNewOption?: (term: string) => InputOption<T> | Promise<InputOption<T>>;
     /** Placeholder text for the search input, default 'Search options...' */
@@ -31,6 +37,7 @@ export interface SearchSelectAttrs<T extends string | number> extends SelectAttr
 }
 interface SearchSelectState<T extends string | number> {
     id: string;
+    listboxId: string;
     isOpen: boolean;
     searchTerm: string;
     inputRef: HTMLElement | null;
@@ -38,9 +45,15 @@ interface SearchSelectState<T extends string | number> {
     focusedIndex: number;
     internalSelectedIds: T[];
     createdOptions: InputOption<T>[];
+    asyncOptions: InputOption<T>[];
+    isLoading: boolean;
+    loadError: string | null;
+    latestRequestId: number;
 }
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search
  */
-export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
+export declare const SearchSelect: <T extends string | number>(maybeVnode?: m.Vnode<SearchSelectAttrs<T>, {
+    __searchSelectInstance?: Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
+}>) => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
 export {};

package/dist/select.d.ts

@@ -1,6 +1,9 @@
 import { Attributes, Component } from 'mithril';
 import { InputOption } from './option';
+import { ComponentStyle } from './types';
 export type SortSelected<T extends string | number> = 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
+export type SelectSummaryMode = 'labels' | 'count' | 'all-or-count';
+export type SelectAppearance = 'standard' | 'outlined';
 export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Options to select from */
     options: InputOption<T>[];
@@ -34,7 +37,7 @@ export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Sets the input field to disabled. */
     disabled?: boolean;
     /** Optional style information. */
-    style?: string;
+    style?: ComponentStyle;
     /** If true, break to a new row */
     newRow?: boolean;
     /**
@@ -50,6 +53,16 @@ export interface SelectAttrs<T extends string | number> extends Attributes {
     maxHeight?: string;
     /** Sort selected items: 'asc' (alphabetically A-Z), 'desc' (Z-A), 'none' (insertion order), or custom sort function */
     sortSelected?: SortSelected<T>;
+    /** Display mode for selected values in the input field. Defaults to 'labels'. */
+    summaryMode?: SelectSummaryMode;
+    /** Label shown when all selectable options are selected in summary mode 'all-or-count'. */
+    allSelectedLabel?: string;
+    /** Label shown when no options are selected in summary mode 'all-or-count'. */
+    noneSelectedLabel?: string;
+    /** Custom formatter for count-based summary modes. */
+    countLabel?: (selectedCount: number, totalCount: number) => string;
+    /** Visual style of the trigger. Defaults to 'standard'. */
+    appearance?: SelectAppearance;
 }
 /** Select component */
 export declare const Select: <T extends string | number>() => Component<SelectAttrs<T>>;

package/dist/sidenav.d.ts

@@ -1,4 +1,4 @@
-import { FactoryComponent, Attributes } from 'mithril';
+import m, { FactoryComponent, Attributes } from 'mithril';
 /** Icon definition - supports material icon name, inline SVG, or image URL */
 export type IconDefinition = string | {
     type: 'svg' | 'image';
@@ -55,6 +55,10 @@ export interface SidenavAttrs extends Attributes {
     header?: SidenavItemAttrs;
     /** Footer item displayed at the bottom of the sidenav */
     footer?: SidenavItemAttrs;
+    /** Custom vnode content rendered in the header slot (first item, before hamburger) */
+    headerContent?: m.Children;
+    /** Custom vnode content rendered in the footer slot (last item, pushed to the bottom) */
+    footerContent?: m.Children;
 }
 export interface SidenavItemAttrs {
     /** Text content of the item */
@@ -71,6 +75,12 @@ export interface SidenavItemAttrs {
     href?: string;
     /** Custom class */
     className?: string;
+    /** Native title attribute text shown on hover */
+    title?: string;
+    /** Alias for title; used when title is not provided */
+    tooltip?: string;
+    /** Show tooltip only while sidenav is collapsed, @default true */
+    tooltipWhenCollapsedOnly?: boolean;
     /** Whether this is a divider */
     divider?: boolean;
     /** Whether this is a subheader */

package/dist/treeview.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-import { EventHandler, SelectionMode } from './types';
+import { EventHandler, SelectionMode, ComponentStyle } from './types';
 export interface TreeNode {
     id: string;
     label: string;
@@ -32,7 +32,7 @@ export interface TreeViewAttrs<T extends TreeNode = TreeNode> extends Attributes
     /** Optional CSS class */
     className?: string;
     /** Optional inline styles */
-    style?: Record<string, any>;
+    style?: ComponentStyle;
     /** Component ID */
     id?: string;
 }

package/dist/types.d.ts

@@ -36,6 +36,11 @@ export type ExtendedPosition = MaterialPosition | 'top-left' | 'top-right' | 'bo
 export type ValidationSuccess = true | '';
 export type ValidationError = false | string;
 export type ValidationResult = ValidationSuccess | ValidationError;
+/**
+ * Shared style prop type used by component attrs.
+ * Supports CSS text strings and Mithril style objects.
+ */
+export type ComponentStyle = string | Record<string, string | number | undefined>;
 /**
  * Generic event handler type with proper typing for value and optional event
  * @template T - The type of the value being handled

package/dist/utilities.css

@@ -2281,6 +2281,31 @@ html {
   box-sizing: border-box;
 }
 
+/* Default themed scrollbar styling for all scroll containers */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35)) var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  border: 2px solid var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
+}
+
 *, *:before, *:after {
   box-sizing: inherit;
 }
@@ -2773,7 +2798,7 @@ td, th {
 }
 .collection .collection-item.active {
   background-color: #26a69a;
-  color: rgb(234.25, 250.25, 248.75);
+  color: rgb(91.862745098%, 98.137254902%, 97.5490196078%);
 }
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
@@ -2902,6 +2927,72 @@ td, th {
 /*******************
   Utility Classes
 *******************/
+.mm-layout-row {
+  display: flex;
+}
+
+.mm-layout-row--center {
+  align-items: center;
+}
+
+.mm-layout-row--align-end {
+  align-items: flex-end;
+}
+
+.mm-layout-row--wrap {
+  flex-wrap: wrap;
+}
+
+.mm-layout-row--justify-start {
+  justify-content: flex-start;
+}
+
+.mm-layout-row--justify-end {
+  justify-content: flex-end;
+}
+
+.mm-layout-row--justify-between {
+  justify-content: space-between;
+}
+
+.mm-layout-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mm-layout-gap, 0);
+}
+
+.mm-layout-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-layout-gap, 8px);
+}
+
+.mm-layout-grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mm-layout-ml-auto {
+  margin-left: auto;
+}
+
+.mm-layout-ml-8 {
+  margin-left: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-mr-8 {
+  margin-right: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-item-icon {
+  margin-right: var(--mm-layout-icon-gap, 32px);
+}
+
+.mm-layout-gap-sm {
+  gap: var(--mm-layout-gap-sm, 8px);
+}
+
 .hide {
   display: none !important;
 }
@@ -3094,7 +3185,7 @@ td, th {
   text-transform: uppercase;
 }
 .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
-  color: rgb(255, 215.8586387435, 166);
+  color: rgb(100%, 84.6504465661%, 65.0980392157%);
 }
 .card .card-reveal {
   padding: 24px;

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import m from 'mithril';
 import { SortSelected } from './select';
 import { InputOption } from '.';
 /**
@@ -36,6 +37,27 @@ export declare const sortOptions: <T extends string | number>(options: InputOpti
  * @returns
  */
 export declare const padLeft: (n: string | number, width?: number, z?: string) => string;
+export declare const normalizeSelection: <T>(value?: T | T[]) => T[];
+export interface ControllableValueOptions<T> {
+    controlled: boolean;
+    disabled?: boolean;
+    controlledValue?: T;
+    defaultValue?: T;
+    internalValue?: T;
+    fallbackValue: T;
+}
+export declare const resolveControllableValue: <T>({ controlled, disabled, controlledValue, defaultValue, internalValue, fallbackValue, }: ControllableValueOptions<T>) => T;
+export interface FieldChromeOptions {
+    label?: string;
+    id?: string;
+    isMandatory?: boolean;
+    isActive?: boolean | string;
+    initialValue?: boolean;
+    helperText?: string;
+    dataError?: string;
+    dataSuccess?: string;
+}
+export declare const renderFieldChrome: ({ label, id, isMandatory, isActive, initialValue, helperText, dataError, dataSuccess, }: FieldChromeOptions) => m.Children[];
 export declare const getDropdownStyles: (inputRef?: HTMLElement | null, overlap?: boolean, options?: {
     /** ID property of the selected item */
     id?: string | number;
@@ -77,7 +99,14 @@ export declare const releasePortalContainer: (id: string) => void;
  * @param vnode - Mithril vnode to render
  * @param zIndex - Z-index for portal container (default: 1004)
  */
-export declare const renderToPortal: (containerId: string, vnode: any, zIndex?: number) => void;
+export declare const renderToPortal: (containerId: string, vnode: m.Children, zIndex?: number) => void;
+export interface PortalSyncOptions {
+    containerId: string;
+    shouldRender: boolean;
+    vnode: m.Children | null;
+    zIndex?: number;
+}
+export declare const syncPortalContent: ({ containerId, shouldRender, vnode, zIndex }: PortalSyncOptions) => void;
 /**
  * Clears portal content and releases container reference.
  * If this is the last reference, the container will be removed from the DOM.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -28,7 +28,10 @@
     "./utilities.css": "./dist/utilities.css",
     "./sass/*": "./sass/*"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "files": [
     "dist",
     "sass"
@@ -40,10 +43,10 @@
     "dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"pnpm run css:watch\"",
     "start": "pnpm run dev",
     "clean": "rimraf dist node_modules/.cache",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:ui": "jest --watch --verbose",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --reporter=verbose",
     "test:server": "node test-server.js",
     "test:visual": "playwright test",
     "test:visual:ui": "playwright test --ui",
@@ -74,26 +77,23 @@
     "mithril": "^2.3.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.61.1",
     "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
     "@types/mithril": "^2.2.8",
-    "autoprefixer": "^10.4.27",
-    "concurrently": "^9.2.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
-    "js-yaml": "^4.1.1",
+    "autoprefixer": "^10.5.4",
+    "concurrently": "^10.0.3",
+    "js-yaml": "^5.2.2",
     "rimraf": "^6.1.3",
-    "rollup": "^4.59.0",
+    "rollup": "^4.62.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.98.0",
-    "ts-jest": "^29.4.6",
+    "sass": "^1.101.7",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.17",
-    "typescript": "^5.9.3"
+    "typedoc": "^0.28.20",
+    "typescript": "^5.9.2",
+    "@vitest/coverage-v8": "^4.1.10",
+    "vitest": "^4.1.10"
   }
 }

package/sass/components/_badge-component.scss

@@ -23,6 +23,14 @@ $badge-dot-border-radius: 50% !default;
   flex-shrink: 0;
 }
 
+// Optional layout helper for dense badge demo/list groups.
+.badge-showcase {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-badge-showcase-gap, 20px);
+}
+
 // Badge element - using .m-badge to avoid conflicts with Materialize's span.badge
 .m-badge {
   position: absolute;

package/sass/components/_buttons.scss

@@ -62,22 +62,22 @@
 .btn,
 .btn-floating {
   &:focus {
-    background-color: color.adjust(variables.$button-raised-background, $lightness: -10%);
+    background-color: var(--mm-primary-color-dark, #{color.adjust(variables.$button-raised-background, $lightness: -10%)});
   }
 }
 
 // Raised Button
 .btn {
   text-decoration: none;
-  color: variables.$button-raised-color;
-  background-color: variables.$button-raised-background;
+  color: var(--mm-button-text, #{variables.$button-raised-color});
+  background-color: var(--mm-primary-color, #{variables.$button-raised-background});
   text-align: center;
   letter-spacing: .5px;
   @extend .z-depth-1 !optional;
   transition: background-color .2s ease-out;
   cursor: pointer;
   &:hover {
-    background-color: variables.$button-raised-background-hover;
+    background-color: var(--mm-primary-color-dark, #{variables.$button-raised-background-hover});
     @extend .z-depth-1-half !optional;
   }
 }
@@ -85,7 +85,7 @@
 // Floating button
 .btn-floating {
   &:hover {
-    background-color: variables.$button-floating-background-hover;
+    background-color: var(--mm-primary-color-dark, #{variables.$button-floating-background-hover});
     @extend .z-depth-1-half !optional;
   }
   &:before {
@@ -124,7 +124,7 @@
     bottom: math.div(-(variables.$button-floating-size), 2);
   }
   display: inline-block;
-  color: variables.$button-floating-color;
+  color: var(--mm-button-text, #{variables.$button-floating-color});
   position: relative;
   overflow: hidden;
   z-index: 1;
@@ -132,7 +132,7 @@
   height: variables.$button-floating-size;
   line-height: variables.$button-floating-size;
   padding: 0;
-  background-color: variables.$button-floating-background;
+  background-color: var(--mm-primary-color, #{variables.$button-floating-background});
   border-radius: variables.$button-floating-radius;
   @extend .z-depth-1 !optional;
   transition: background-color .3s;
@@ -142,7 +142,7 @@
     width: inherit;
     display: inline-block;
     text-align: center;
-    color: variables.$button-floating-color;
+    color: var(--mm-button-text, #{variables.$button-floating-color});
     font-size: variables.$button-large-icon-font-size;
     line-height: variables.$button-floating-size;
   }
@@ -269,7 +269,7 @@ button.btn-floating {
     z-index: -1;
     width: variables.$button-floating-size;
     height: variables.$button-floating-size;
-    background-color: variables.$button-floating-background;
+    background-color: var(--mm-primary-color, #{variables.$button-floating-background});
     border-radius: variables.$button-floating-radius;
     transform: scale(0);
   }