mithril-materialized 3.15.0 → 3.17.0

package/README.md

@@ -58,11 +58,12 @@ Components marked with an * are not included in the original materialize-css lib
   - TimePicker (with inline mode and switchable AM/PM/24h)*
 - [Selections](https://erikvullings.github.io/mithril-materialized/#!/selections)
   - Select
-  - SearchSelect*, a searchable select dropdown
+  - SearchSelect*, a searchable select dropdown (supports async remote loading via `loadOptions`)
   - Options
-  - RadioButtons
+  - RadioButtons (HTML labels/descriptions require explicit `allowHtml: true`)
   - Switch
   - Dropdown
+  - ToggleButton* (single toggle button component)
 - [Collections](https://erikvullings.github.io/mithril-materialized/#!/collections)
   - Basic, Link and Avatar Collections
   - Collapsible or accordion
@@ -412,6 +413,35 @@ See our [contributing guide](CONTRIBUTING.md) for detailed information.
 - File upload processing: Real-time without blocking
 - TextArea auto-resize: <1ms per keystroke
 
+### Button semantics
+
+`Button`, `LargeButton`, `SmallButton`, and `FlatButton` render native `<button>` elements for actions. Use `href` when the component represents navigation; it then renders an `<a>` without a button `type`.
+
+```typescript
+m(Button, { label: 'Save', onclick: save });
+m(Button, { label: 'Read the docs', href: '/docs' });
+```
+
+> **Migration:** If you relied on the previous anchor markup for navigation, add `href`. Action buttons now correctly use native button semantics.
+
+### Async SearchSelect
+
+Use `loadOptions(query)` to retrieve options remotely. The component displays loading, empty, and error states; `i18n` customizes their messages.
+
+```typescript
+m(SearchSelect<number>, {
+  label: 'Remote search',
+  checkedId: selectedIds,
+  options: [],
+  loadOptions: (query) => fetchOptions(query),
+  onchange: (ids) => {
+    selectedIds = ids;
+  },
+});
+```
+
+`SearchSelect` uses combobox/listbox ARIA roles and supports `ArrowDown`, `ArrowUp`, `Enter`/`Space`, and `Escape`.
+
 ## Build instructions
 
 This repository consists of two packages, combined using `lerna`: the `lib` package that is published to `npm`, as well as an `example` project which uses this library to display the Mithril components that it contains.

package/dist/advanced.css

@@ -80,6 +80,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;
 }
@@ -572,7 +597,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);
@@ -701,6 +726,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;
 }
@@ -861,18 +952,32 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   margin: 0;
   transform: translateX(-100%);
   height: 100%;
-  height: calc(100% + 60px);
-  height: -moz-calc(100%);
-  padding-bottom: 60px;
+  padding-bottom: 0;
   background-color: var(--mm-surface-color, #fff);
   z-index: 999;
   overflow-y: auto;
+  overflow-x: hidden;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
   display: flex;
   flex-direction: column;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
+}
+.sidenav::-webkit-scrollbar {
+  width: 4px;
+}
+.sidenav::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidenav::-webkit-scrollbar-thumb {
+  background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
+  border-radius: 2px;
+}
+.sidenav::-webkit-scrollbar-thumb:hover {
+  background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
 }
 .sidenav.sidenav-left {
   left: 0;

package/dist/button.d.ts

@@ -38,6 +38,8 @@ export interface HtmlAttrs {
 export interface ButtonAttrs extends Attributes {
     /** Button label text (optional for icon-only buttons) */
     label?: string;
+    /** Optional navigation destination. When provided, the component renders an anchor instead of a button. */
+    href?: string;
     /** Material icon name - see https://materializecss.com/icons.html */
     iconName?: string;
     /**
@@ -77,7 +79,7 @@ export interface ButtonAttrs extends Attributes {
 /**
  * A factory to create new buttons.
  *
- * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
+ * @example FlatButton = ButtonFactory('button.waves-effect.waves-teal.btn-flat');
  */
 export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: string) => FactoryComponent<ButtonAttrs>;
 export declare const Button: m.FactoryComponent<ButtonAttrs>;

package/dist/circular-progress.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-import { MaterialColor, ColorIntensity } from './types';
+import { MaterialColor, ColorIntensity, ComponentStyle } from './types';
 /** Progress mode - determinate shows specific progress, indeterminate shows loading animation */
 export type ProgressMode = 'determinate' | 'indeterminate';
 /** Progress size options */
@@ -25,7 +25,7 @@ export interface CircularProgressAttrs 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/combobox.d.ts

@@ -0,0 +1,35 @@
+export type ComboboxKeyAction = 'none' | 'open' | 'close' | 'selectFocused' | 'selectAction';
+export interface ComboboxKeyInput {
+    key: string;
+    isOpen: boolean;
+    focusedIndex: number;
+    optionCount: number;
+    includeActionRow: boolean;
+}
+export interface ComboboxKeyResult {
+    isOpen: boolean;
+    focusedIndex: number;
+    action: ComboboxKeyAction;
+    preventDefault: boolean;
+}
+export type ComboboxViewState = 'loading' | 'error' | 'empty' | 'ready';
+export interface AsyncComboboxState<TOption> {
+    options: TOption[];
+    isLoading: boolean;
+    error: string | null;
+    latestRequestId: number;
+}
+export declare const getComboboxKeyResult: ({ key, isOpen, focusedIndex, optionCount, includeActionRow, }: ComboboxKeyInput) => ComboboxKeyResult;
+export declare const getComboboxOptionId: (baseId: string, optionIndex: number) => string;
+export declare const createAsyncComboboxState: <TOption>(initialOptions?: TOption[]) => AsyncComboboxState<TOption>;
+export declare const startAsyncComboboxRequest: <TOption>(state: AsyncComboboxState<TOption>) => {
+    requestId: number;
+    nextState: AsyncComboboxState<TOption>;
+};
+export declare const resolveAsyncComboboxRequest: <TOption>(state: AsyncComboboxState<TOption>, requestId: number, options: TOption[]) => AsyncComboboxState<TOption>;
+export declare const rejectAsyncComboboxRequest: <TOption>(state: AsyncComboboxState<TOption>, requestId: number, errorMessage: string) => AsyncComboboxState<TOption>;
+export declare const getComboboxViewState: ({ isLoading, error, optionCount, }: {
+    isLoading: boolean;
+    error: string | null;
+    optionCount: number;
+}) => ComboboxViewState;

package/dist/components.css

@@ -3,6 +3,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;
 }
@@ -495,7 +520,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);
@@ -624,6 +649,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;
 }
@@ -745,24 +836,24 @@ td, th {
 
 .btn:focus, .btn-small:focus, .btn-large:focus,
 .btn-floating:focus {
-  background-color: rgb(28.5, 124.5, 115.5);
+  background-color: var(--mm-primary-color-dark, rgb(11.1764705882%, 48.8235294118%, 45.2941176471%));
 }
 
 .btn, .btn-small, .btn-large {
   text-decoration: none;
-  color: #fff;
-  background-color: #26a69a;
+  color: var(--mm-button-text, #fff);
+  background-color: var(--mm-primary-color, #26a69a);
   text-align: center;
   letter-spacing: 0.5px;
   transition: background-color 0.2s ease-out;
   cursor: pointer;
 }
 .btn:hover, .btn-small:hover, .btn-large:hover {
-  background-color: rgb(42.75, 186.75, 173.25);
+  background-color: var(--mm-primary-color-dark, rgb(16.7647058824%, 73.2352941176%, 67.9411764706%));
 }
 
 .btn-floating:hover {
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color-dark, #26a69a);
 }
 .btn-floating:before {
   border-radius: 0;
@@ -799,7 +890,7 @@ td, th {
 }
 .btn-floating {
   display: inline-block;
-  color: #fff;
+  color: var(--mm-button-text, #fff);
   position: relative;
   overflow: hidden;
   z-index: 1;
@@ -807,7 +898,7 @@ td, th {
   height: 40px;
   line-height: 40px;
   padding: 0;
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color, #26a69a);
   border-radius: 50%;
   transition: background-color 0.3s;
   cursor: pointer;
@@ -817,7 +908,7 @@ td, th {
   width: inherit;
   display: inline-block;
   text-align: center;
-  color: #fff;
+  color: var(--mm-button-text, #fff);
   font-size: 1.6rem;
   line-height: 40px;
 }
@@ -935,7 +1026,7 @@ button.btn-floating {
   z-index: -1;
   width: 40px;
   height: 40px;
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color, #26a69a);
   border-radius: 50%;
   transform: scale(0);
 }
@@ -955,7 +1046,7 @@ button.btn-floating {
 }
 .btn-flat.disabled, .btn-flat.btn-flat[disabled] {
   background-color: transparent !important;
-  color: var(--mm-text-disabled, rgb(178.5, 178.5, 178.5)) !important;
+  color: var(--mm-text-disabled, rgb(70%, 70%, 70%)) !important;
   cursor: default;
 }
 
@@ -1142,7 +1233,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
+  background-color: var(--mm-dropdown-focus, rgb(85.3333333333%, 85.3333333333%, 85.3333333333%));
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {
@@ -1198,7 +1289,7 @@ body.keyboard-focused .dropdown-content li:focus {
   text-transform: uppercase;
 }
 .tabs .tab a:focus, .tabs .tab a:focus.active {
-  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
+  background-color: rgba(96.4814814815%, 69.9891067538%, 71.0239651416%, 0.2);
   outline: none;
 }
 .tabs .tab a:hover, .tabs .tab a.active {
@@ -1224,7 +1315,7 @@ body.keyboard-focused .dropdown-content li:focus {
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: rgb(246.0277777778, 178.4722222222, 181.1111111111);
+  background-color: rgb(96.4814814815%, 69.9891067538%, 71.0239651416%);
   will-change: left, right;
 }
 
@@ -1659,18 +1750,32 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   margin: 0;
   transform: translateX(-100%);
   height: 100%;
-  height: calc(100% + 60px);
-  height: -moz-calc(100%);
-  padding-bottom: 60px;
+  padding-bottom: 0;
   background-color: var(--mm-surface-color, #fff);
   z-index: 999;
   overflow-y: auto;
+  overflow-x: hidden;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
   display: flex;
   flex-direction: column;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
+}
+.sidenav::-webkit-scrollbar {
+  width: 4px;
+}
+.sidenav::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidenav::-webkit-scrollbar-thumb {
+  background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
+  border-radius: 2px;
+}
+.sidenav::-webkit-scrollbar-thumb:hover {
+  background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -3115,6 +3220,7 @@ body.dark {
   --mm-primary-color: #26a69a;
   --mm-primary-color-light: #80cbc4;
   --mm-primary-color-dark: #00695c;
+  --mm-range-value-text: #000000;
   --mm-secondary-color: #ff6f00;
   --mm-secondary-color-light: #ffa726;
   --mm-secondary-color-dark: #ef6c00;
@@ -3125,6 +3231,7 @@ body.dark {
   --mm-text-secondary: rgba(0, 0, 0, 0.6);
   --mm-text-disabled: rgba(0, 0, 0, 0.38);
   --mm-text-hint: rgba(0, 0, 0, 0.38);
+  --mm-error-color: #f44336;
   --mm-border-color: rgba(0, 0, 0, 0.12);
   --mm-divider-color: rgba(0, 0, 0, 0.12);
   --mm-input-background: #ffffff;
@@ -3149,6 +3256,9 @@ body.dark {
   --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
+  --mm-scrollbar-track-color: #f1f1f1;
+  --mm-scrollbar-thumb-color: rgba(0, 0, 0, 0.35);
+  --mm-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
   --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
   --mm-switch-checked-thumb: #26a69a;
   --mm-switch-unchecked-track: rgba(0, 0, 0, 0.6);
@@ -3172,6 +3282,7 @@ body {
   --mm-primary-color: #80cbc4;
   --mm-primary-color-light: #b2dfdb;
   --mm-primary-color-dark: #4db6ac;
+  --mm-range-value-text: #000000;
   --mm-secondary-color: #ffa726;
   --mm-secondary-color-light: #ffcc02;
   --mm-secondary-color-dark: #ff8f00;
@@ -3182,6 +3293,7 @@ body {
   --mm-text-secondary: rgba(255, 255, 255, 0.6);
   --mm-text-disabled: rgba(255, 255, 255, 0.38);
   --mm-text-hint: rgba(255, 255, 255, 0.38);
+  --mm-error-color: #ef5350;
   --mm-border-color: rgba(255, 255, 255, 0.12);
   --mm-divider-color: rgba(255, 255, 255, 0.12);
   --mm-input-background: #2d2d2d;
@@ -3207,6 +3319,9 @@ body {
   --mm-dropdown-selected: #1e3a8a;
   --mm-row-hover: rgba(255, 255, 255, 0.04);
   --mm-row-stripe: rgba(255, 255, 255, 0.02);
+  --mm-scrollbar-track-color: #1e1e1e;
+  --mm-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+  --mm-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
   --mm-switch-checked-thumb: #80cbc4;
   --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
@@ -3221,6 +3336,7 @@ body {
     --mm-primary-color: #80cbc4;
     --mm-primary-color-light: #b2dfdb;
     --mm-primary-color-dark: #4db6ac;
+    --mm-range-value-text: #000000;
     --mm-secondary-color: #ffa726;
     --mm-secondary-color-light: #ffcc02;
     --mm-secondary-color-dark: #ff8f00;
@@ -3231,6 +3347,7 @@ body {
     --mm-text-secondary: rgba(255, 255, 255, 0.6);
     --mm-text-disabled: rgba(255, 255, 255, 0.38);
     --mm-text-hint: rgba(255, 255, 255, 0.38);
+    --mm-error-color: #ef5350;
     --mm-border-color: rgba(255, 255, 255, 0.12);
     --mm-divider-color: rgba(255, 255, 255, 0.12);
     --mm-input-background: #2d2d2d;
@@ -3256,6 +3373,9 @@ body {
     --mm-switch-disabled-track: rgba(255, 255, 255, 0.2);
     --mm-switch-disabled-thumb: #424242;
     --mm-table-striped-color: rgba(255, 255, 255, 0.05);
+    --mm-scrollbar-track-color: #1e1e1e;
+    --mm-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --mm-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
   }
 }
 .timeline {
@@ -4543,6 +4663,13 @@ nav .theme-toggle:focus {
   flex-shrink: 0;
 }
 
+.badge-showcase {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-badge-showcase-gap, 20px);
+}
+
 .m-badge {
   position: absolute;
   display: flex;