mithril-materialized 3.1.0 → 3.2.0

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

@@ -2817,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 */
 }
@@ -2977,6 +2981,7 @@ textarea.materialize-textarea {
 .switch * {
   -webkit-tap-highlight-color: transparent;
   user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {
@@ -3191,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 {
@@ -3404,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

@@ -1441,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 */
@@ -1451,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 */
 }
@@ -1725,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));
@@ -6468,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 */
 }
@@ -6632,6 +6639,7 @@ textarea.materialize-textarea {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  margin: 13px 0 17px 0;
 }
 
 .switch label {
@@ -6850,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 {
@@ -7067,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 {