mithril-materialized 3.17.0 → 3.17.2

package/dist/core.css

@@ -2411,6 +2411,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
 
 .input-field input.number-input:not(.browser-default) {
   -moz-appearance: textfield;
+  box-sizing: border-box;
+  width: calc(100% - 0.75rem);
   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 {
@@ -2420,7 +2422,7 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .input-field .number-input-controls {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0.25rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2443,10 +2445,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .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;

package/dist/forms.css

@@ -1020,6 +1020,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
 
 .input-field input.number-input:not(.browser-default) {
   -moz-appearance: textfield;
+  box-sizing: border-box;
+  width: calc(100% - 0.75rem);
   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 {
@@ -1029,7 +1031,7 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .input-field .number-input-controls {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0.25rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1052,10 +1054,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .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;

package/dist/index.css

@@ -6160,6 +6160,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
 
 .input-field input.number-input:not(.browser-default) {
   -moz-appearance: textfield;
+  box-sizing: border-box;
+  width: calc(100% - 0.75rem);
   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 {
@@ -6169,7 +6171,7 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .input-field .number-input-controls {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0.25rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -6192,10 +6194,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
 .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;

package/dist/index.esm.js

@@ -3780,7 +3780,7 @@ const InputField = (type, defaultClass = '') => () => {
             }
         },
         view: ({ attrs }) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
@@ -4014,12 +4014,14 @@ const InputField = (type, defaultClass = '') => () => {
                         m('button.number-input-control.number-input-control-up[type=button]', {
                             'aria-label': `Increase ${label || 'value'}`,
                             title: 'Increase value',
+                            tabindex: -1,
                             onmousedown: (event) => event.preventDefault(),
                             onclick: () => stepNumberInput('up'),
                         }, m(MaterialIcon, { name: 'chevron', direction: 'up' })),
                         m('button.number-input-control.number-input-control-down[type=button]', {
                             'aria-label': `Decrease ${label || 'value'}`,
                             title: 'Decrease value',
+                            tabindex: -1,
                             onmousedown: (event) => event.preventDefault(),
                             onclick: () => stepNumberInput('down'),
                         }, m(MaterialIcon, { name: 'chevron' })),
@@ -4045,7 +4047,7 @@ const InputField = (type, defaultClass = '') => () => {
                     initialValue: value !== undefined && value !== '',
                     helperText,
                     dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
-                    dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
+                    dataSuccess: state.hasInteracted && state.isValid && ((_g = state.inputElement) === null || _g === void 0 ? void 0 : _g.value) ? dataSuccess : undefined,
                 }),
                 maxLength && typeof value === 'string'
                     ? m(CharacterCounter, {
@@ -7260,12 +7262,12 @@ const Select = () => {
             opacity: 1,
         };
     };
-    const formatSelectionSummary = (attrs, selectedOptions, selectedIds, placeholder) => {
+    const formatSelectionSummary = (attrs, selectedLabels, selectedIds, placeholder) => {
         const mode = attrs.summaryMode || 'labels';
         const selectedCount = selectedIds.length;
         const totalCount = attrs.options.filter((option) => !option.disabled).length;
         if (mode === 'labels') {
-            return selectedOptions.length > 0 ? selectedOptions.map((o) => o.label || o.id).join(', ') : placeholder;
+            return selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
         }
         const defaultCountLabel = `${selectedCount}/${totalCount} selected`;
         const formattedCount = attrs.countLabel ? attrs.countLabel(selectedCount, totalCount) : defaultCountLabel;
@@ -7419,7 +7421,8 @@ const Select = () => {
             const shouldInlineLabel = appearance === 'outlined' && !!label;
             const selectedOptionsUnsorted = options.filter((opt) => isSelected(opt.id, selectedIds));
             const selectedOptions = sortOptions(selectedOptionsUnsorted, attrs.sortSelected);
-            const triggerValue = formatSelectionSummary(attrs, selectedOptions, selectedIds, placeholder);
+            const selectedLabels = selectedOptions.map((o) => o.label || o.id.toString());
+            const triggerValue = formatSelectionSummary(attrs, selectedLabels, selectedIds, placeholder);
             // Update portal dropdown when inside modal
             if (state.isInsideModal) {
                 updatePortalDropdown(attrs, selectedIds, multiple, placeholder);