mithril-materialized 3.16.0 → 3.17.1

package/dist/core.css

@@ -400,6 +400,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;
 }
@@ -892,7 +917,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);
@@ -1021,6 +1046,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;
 }
@@ -2318,6 +2409,51 @@ textarea.materialize-textarea::-ms-input-placeholder {
   color: var(--mm-text-hint, #d1d1d1) !important;
 }
 
+.input-field input.number-input:not(.browser-default) {
+  -moz-appearance: textfield;
+  padding-right: 2rem;
+}
+.input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input-field .number-input-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 3rem;
+}
+.input-field .number-input-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--mm-button-flat-text, #ee6e73);
+  cursor: pointer;
+  line-height: 1;
+}
+.input-field .number-input-control:hover {
+  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+}
+.input-field .number-input-control:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: -2px;
+}
+.input-field .number-input-control svg {
+  font-size: 1.25rem;
+  line-height: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 /* Validation Sass Placeholders */
 .select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid:not([readonly]):not([disabled]), input:not([type]):not(.browser-default):focus.valid:not([readonly]):not([disabled]),
 input[type=text]:not(.browser-default).valid:not([readonly]):not([disabled]),
@@ -3008,7 +3144,7 @@ textarea.materialize-textarea {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: var(--mm-switch-checked-track, rgb(132.0625, 199.4375, 193.12109375));
+  background-color: var(--mm-switch-checked-track, rgb(51.7892156863%, 78.2107843137%, 75.7337622549%));
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
   left: 18px;
@@ -3158,6 +3294,63 @@ select:disabled {
   user-select: none;
 }
 
+.input-field.select-space.select-appearance-outlined {
+  position: relative;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons {
+  position: absolute;
+  left: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons + .select-wrapper {
+  padding-left: 54px;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix ~ .select-wrapper {
+  margin-left: 0;
+  width: 100%;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper {
+  border: 1px solid var(--mm-input-border, #9e9e9e);
+  border-radius: 8px;
+  background-color: var(--mm-surface-color, transparent);
+  padding: 0 12px;
+  min-height: var(--mm-input-height, 3rem);
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper:focus-within {
+  border-color: var(--mm-primary-color, #2196f3);
+  box-shadow: 0 0 0 1px var(--mm-primary-color, #2196f3);
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper input.select-dropdown {
+  border-bottom: none;
+  margin: 0;
+  width: auto;
+  flex: 1 1 auto;
+  height: var(--mm-input-height, 3rem);
+  line-height: var(--mm-input-height, 3rem);
+  padding-right: 24px;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .select-inline-label {
+  color: var(--mm-text-hint, #9e9e9e);
+  font-size: 16px;
+  margin-right: 8px;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .caret {
+  right: 10px;
+  z-index: 2;
+  pointer-events: none;
+}
+
 .select-wrapper i {
   color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
@@ -3273,6 +3466,24 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   cursor: default;
 }
 
+.search-select-loading-info,
+.search-select-error-info {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+}
+.search-select-loading-info:hover,
+.search-select-error-info:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.dropdown-content li.search-select-error-info {
+  color: var(--mm-error-color, #f44336) !important;
+}
+
 .search-select-option-label {
   display: flex;
   align-items: center;
@@ -3540,7 +3751,7 @@ input[type=range]::-ms-thumb {
   /* Create columns that are at least 150px wide and fill the available space */
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   /* Add space between grid items */
-  gap: 15px;
+  gap: var(--mm-layout-gap-form, 15px);
   padding-top: 10px;
   padding-bottom: 20px;
 }
@@ -3558,3 +3769,67 @@ input[type=range]::-ms-thumb {
   cursor: text;
   text-align: initial;
 }
+
+.mm-fieldset {
+  border: 1px solid var(--mm-border-color);
+  border-radius: 4px;
+  margin: 0 0 1.5rem;
+  padding: 1rem;
+}
+
+.mm-fieldset__legend {
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0 0.35rem;
+}
+
+.mm-fieldset__required,
+.mm-fieldset__error,
+.mm-validation-summary {
+  color: var(--mm-error-color);
+}
+
+.mm-fieldset__description,
+.mm-form-section__description {
+  color: var(--mm-text-secondary);
+  margin: 0 0 1rem;
+}
+
+.mm-fieldset__error {
+  margin: 0.75rem 0 0;
+}
+
+.mm-form-section {
+  margin-bottom: 2rem;
+}
+
+.mm-form-section__header {
+  margin-bottom: 1rem;
+}
+
+.mm-form-section__title {
+  font-size: 1.3rem;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary {
+  background: color-mix(in srgb, var(--mm-error-color) 10%, transparent);
+  border-left: 4px solid var(--mm-error-color);
+  margin: 0 0 1.25rem;
+  padding: 0.8rem 1rem;
+}
+
+.mm-validation-summary__title {
+  font-weight: 600;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary__list {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+.mm-validation-summary a {
+  color: inherit;
+  text-decoration: underline;
+}

package/dist/floating-action-button.d.ts

@@ -1,9 +1,10 @@
 import { FactoryComponent } from 'mithril';
+import { ComponentStyle } from './types';
 export interface FloatingActionButtonAttrs {
     /** Optional classes to add to the top element */
     className?: string;
     /** Optional style to add to the top element, e.g. for positioning it inline */
-    style?: string;
+    style?: ComponentStyle;
     /** Material-icons name for the main FAB, @see https://materializecss.com/icons.html */
     iconName: string;
     /** Helper option to place the FAB inline instead of the bottom right of the display */

package/dist/form-section.d.ts

@@ -0,0 +1,35 @@
+import m, { Attributes, FactoryComponent } from 'mithril';
+export interface ValidationSummaryError {
+    /** The ID of the invalid field. Used to link and focus the field from the summary. */
+    fieldId?: string;
+    /** Use a custom target when the error does not belong to a focusable field. */
+    href?: string;
+    /** Error text shown in the summary. */
+    message: m.Children;
+}
+export interface FieldsetAttrs extends Attributes {
+    /** Accessible label for the group of controls. */
+    legend: m.Children;
+    /** Optional explanatory text below the legend. */
+    description?: m.Children;
+    /** Mark the group as required. */
+    required?: boolean;
+    /** Disable native controls contained in the group. */
+    disabled?: boolean;
+    /** Group-level validation message. */
+    error?: m.Children;
+}
+/** A semantic native fieldset for related controls. */
+export declare const Fieldset: FactoryComponent<FieldsetAttrs>;
+export interface FormSectionAttrs extends Attributes {
+    /** Visible section heading. */
+    title?: m.Children;
+    /** Optional explanatory text below the heading. */
+    description?: m.Children;
+    /** Errors supplied by the application's form validation state. */
+    errors?: ValidationSummaryError[];
+    /** Heading used by the validation summary. */
+    summaryTitle?: m.Children;
+}
+/** A visual form section with an optional accessible validation summary. */
+export declare const FormSection: FactoryComponent<FormSectionAttrs>;