@mmlogic/components 0.3.11 → 0.4.0

package/dist/collection/components/fields/field-helpers.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+/**
+ * Shared building blocks for the leaf field components.
+ * `base` is the BEM block name, e.g. 'mrd-text-field'.
+ */
+export const FieldLabel = ({ base, label, required }) => label ? h("label", { class: `${base}__label${required ? ` ${base}__label--required` : ''}` }, label) : null;
+export const FieldError = ({ base, error }) => error ? h("span", { class: `${base}__error` }, error) : null;
+/** Class string for the form control, with the --error modifier when applicable. */
+export function controlClass(base, hasError, element = 'input') {
+    return `${base}__${element}${hasError ? ` ${base}__${element}--error` : ''}`;
+}
+/** Returns the localised required-error, or '' when the value passes. */
+export function requiredError(value, required, locale) {
+    return required && !validateRequired(value) ? t('required', locale) : '';
+}

package/dist/collection/components/fields/file-upload-common.js

@@ -0,0 +1,38 @@
+import { t } from "../../utils/i18n";
+/**
+ * Shared upload behaviour for mrd-file-field and mrd-image-field:
+ * file validation, drop-zone class building and drag-drop wiring.
+ */
+/** Validates a selected/dropped file; returns a localised error message or '' when accepted. */
+export function validateUploadFile(file, maxSize, locale, requireImage = false) {
+    if (maxSize > 0 && file.size > maxSize)
+        return t('file_too_large', locale);
+    if (requireImage && !file.type.startsWith('image/'))
+        return t('invalid_image', locale);
+    return '';
+}
+/** BEM class string for the drop zone, e.g. base 'mrd-file-field' → 'mrd-file-field__zone …'. */
+export function uploadZoneClass(base, opts) {
+    return [
+        `${base}__zone`,
+        opts.dragging ? `${base}__zone--dragging` : '',
+        opts.error ? `${base}__zone--error` : '',
+        opts.disabled ? `${base}__zone--disabled` : '',
+    ].filter(Boolean).join(' ');
+}
+/** Drag-drop handlers for the drop zone; the component owns the dragging state and file handling. */
+export function makeDragHandlers(setDragging, onFile) {
+    return {
+        onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+            var _a, _b, _c;
+            e.preventDefault();
+            setDragging(false);
+            onFile((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null);
+        },
+    };
+}

package/dist/collection/components/{mrd-boolean-field/mrd-boolean-field.scss → fields/mrd-boolean-field/mrd-boolean-field.css}

@@ -53,7 +53,7 @@
 }
 
 .mrd-boolean-field__toggle::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 2px;
   left: 2px;
@@ -72,6 +72,6 @@
 }
 
 .mrd-boolean-field__text--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
-}
+}

package/dist/collection/components/{mrd-boolean-field → fields/mrd-boolean-field}/mrd-boolean-field.js

@@ -20,7 +20,7 @@ export class MrdBooleanField {
         this.checked = !!this.value;
     }
     render() {
-        return (h(Host, { key: '38e65a1c7971912f8259d09281b272d7cbd446f2' }, h("div", { key: 'e10919998731d744cc2a13130c5f355c9b8fc9aa', class: "mrd-boolean-field" }, h("label", { key: 'db85a2c80cc62fdfd25237e3f5c7750bf1666819', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'cddd7004593fa4671abb89f4f805c4a009db99ef', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: 'f90f0ed6d74d6688e51b8d85a5397a0597d95ad8', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '7e4582b1d9a5b08c00c220bec53baa6c14cbfe43', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+        return (h(Host, { key: 'f7851813646d31c565c262bf3c8d4083177dd993' }, h("div", { key: '4b3c9f46e8b79bdc97ef5815afb85ba5ddde0c9a', class: "mrd-boolean-field" }, h("label", { key: 'f81fa28d5a79de0445c2c192352343f0807609a1', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '510a4f5533cbe2741b8df34cb64fc739475a26cf', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '949e042c8af0f2872cf973a0d5407fce972eb240', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: 'e8c52b5820887b2a8ec9a20eb7e4116a528d27d4', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
     }
     static get is() { return "mrd-boolean-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-currency-field/mrd-currency-field.scss → fields/mrd-currency-field/mrd-currency-field.css}

@@ -16,9 +16,8 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-currency-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
 
@@ -29,7 +28,8 @@
 }
 
 .mrd-currency-field__amount {
-  flex: 1;
+  display: block;
+  width: 100%;
   height: var(--mrd-input-height);
   padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
   font-family: var(--mrd-font-family);
@@ -41,28 +41,30 @@
   transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
   outline: none;
   appearance: none;
-  text-align: right;
   box-sizing: border-box;
 }
-
+.mrd-currency-field__amount::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-currency-field__amount:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-currency-field__amount:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-currency-field__amount--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-currency-field__amount--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-currency-field__amount {
+  flex: 1;
+  text-align: right;
+}
 
 .mrd-currency-field__currency {
   width: 90px;
@@ -97,4 +99,4 @@
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
-}
+}

package/dist/collection/components/{mrd-currency-field → fields/mrd-currency-field}/mrd-currency-field.js

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
-import { parseLocalizedNumber } from "../../utils/format";
+import { parseLocalizedNumber } from "../../../utils/format";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 const COMMON_CURRENCIES = [
     'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
     'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
@@ -24,12 +23,7 @@ export class MrdCurrencyField {
         this.handleAmountBlur = (e) => {
             const raw = e.target.value;
             const parsed = parseLocalizedNumber(raw, this.locale);
-            if (this.required && !validateRequired(raw)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(raw, this.required, this.locale);
             const val = { amount: parsed, currency: this.currency };
             this.mrdChange.emit({ name: this.name, value: val });
             this.mrdBlur.emit({ name: this.name, value: val });
@@ -48,7 +42,7 @@ export class MrdCurrencyField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'fe3520c44d831caf36b388cb5968a9518b16cb8b' }, h("div", { key: '50c1fd2d53038e46da575d3e46e1ec26c2da423b', class: "mrd-currency-field" }, this.label && (h("label", { key: 'a2649d41bf6e3765c8a62ba6559c64c41615027a', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: '952b51f315b4a5c05a8373ce3a3f1041086ba8b8', class: "mrd-currency-field__row" }, h("input", { key: '137a72ffc5d79fc8e0a8cf44c012d84a50c26d5b', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '1755854ca9b76dc4b41ad84b6b788685931ace36', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '0f10eb98c2e6444651d79d1de92acd0dbcc7133b', class: "mrd-currency-field__error" }, this.error))));
+        return (h(Host, { key: '24c530db6e0420af39fa0a35b31e966286f2d00c' }, h("div", { key: '795bc336425fbf1b86828f4a8f5df93930169a3c', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b302cd9296c29ed5719b1f768bd5d4eea86f6406', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '7efca51615f405ffd660e120accae32f55a9b5a0', class: "mrd-currency-field__row" }, h("input", { key: '5c6fd3549d5631fba49a8a701e6c3a1d0a672890', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '83ad5e92b623c3c60d161b8828e780adb476682c', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'b059290bb566b119c4f192e750b3e365446243e6', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }
@@ -113,7 +107,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }
@@ -215,7 +209,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }
@@ -237,7 +231,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }

package/dist/collection/components/{mrd-date-field/mrd-date-field.scss → fields/mrd-date-field/mrd-date-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-date-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,12 +15,10 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-date-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-date-field__input {
   display: block;
   width: 100%;
@@ -37,30 +34,31 @@
   outline: none;
   appearance: none;
   box-sizing: border-box;
-  cursor: pointer;
 }
-
+.mrd-date-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-date-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-date-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-date-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-date-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-date-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
 }
+
+.mrd-date-field__input {
+  cursor: pointer;
+}

package/dist/collection/components/{mrd-date-field → fields/mrd-date-field}/mrd-date-field.js

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDateField {
     constructor() {
         this.name = '';
@@ -12,12 +11,7 @@ export class MrdDateField {
         this.error = '';
         this.handleChange = (e) => {
             const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(val, this.required, this.locale);
             this.mrdChange.emit({ name: this.name, value: val });
         };
         this.handleBlur = (e) => {
@@ -26,8 +20,7 @@ export class MrdDateField {
         };
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '2c0dc2311068a5c759fe8efe58a98a71a9cf4b7b' }, h("div", { key: 'ee1cc0e9a2943cc42439825b8f21cd3492eaca05', class: "mrd-date-field" }, this.label && (h("label", { key: '3f836a991e676b6070a8b3800edfce00cc0d3b3d', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), h("input", { key: '575185661987eea3dc91950f51995b2cc75debea', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '480ec99200989f3dc543d9afc648d83d31992b3c', class: "mrd-date-field__error" }, this.error))));
+        return (h(Host, { key: '71be9e4bcc87b40cf3b777d3fe0bff23c1a0fa94' }, h("div", { key: '40ced03df5d4185264ba9d03c832b3870ce8ae19', class: "mrd-date-field" }, h(FieldLabel, { key: 'd85ec7c4617a22c8c5862253e8090c85484f8c41', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'c9211fdefdd9527c7ff40ed9de33153303fc1742', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '9dd64475bf8a77bea5344faa71f20485b34b86f9', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-datetime-field/mrd-datetime-field.scss → fields/mrd-datetime-field/mrd-datetime-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-datetime-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,12 +15,10 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-datetime-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-datetime-field__input {
   display: block;
   width: 100%;
@@ -37,30 +34,31 @@
   outline: none;
   appearance: none;
   box-sizing: border-box;
-  cursor: pointer;
 }
-
+.mrd-datetime-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-datetime-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-datetime-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-datetime-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-datetime-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-datetime-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
 }
+
+.mrd-datetime-field__input {
+  cursor: pointer;
+}

package/dist/collection/components/{mrd-datetime-field → fields/mrd-datetime-field}/mrd-datetime-field.js

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDatetimeField {
     constructor() {
         this.name = '';
@@ -14,12 +13,7 @@ export class MrdDatetimeField {
         this.handleChange = (e) => {
             const localVal = e.target.value;
             this.localValue = localVal;
-            if (this.required && !validateRequired(localVal)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(localVal, this.required, this.locale);
             this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
         this.handleBlur = (e) => {
@@ -53,8 +47,7 @@ export class MrdDatetimeField {
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: 'ea8b3b68100ffdb316bc5048f82d85d238bb2e4b' }, h("div", { key: 'c192c6998ee474aaf4df7b3b97ae0bd61f6d624d', class: "mrd-datetime-field" }, this.label && (h("label", { key: '1fbd66c17d76508f0d698a2c258be6779e98d85e', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: 'fc9612c062a1cab5076a06598cabf227adce996c', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '8788ac01739302f6ad61010b238ff38d45e1b68a', class: "mrd-datetime-field__error" }, this.error))));
+        return (h(Host, { key: 'ac07ec2ba79cde998d1247e9d71de336c0e72a64' }, h("div", { key: '8144cf68c4b6b9cbc8396903b84bb355f380ceda', class: "mrd-datetime-field" }, h(FieldLabel, { key: '972686469f68c932e33b8d2c3806422553a3cce3', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '370b6032c38fbee22e662c1b2871f96b53b58956', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'b7a812f82a6b0d2c938aa1f1c2494df685258555', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-email-field/mrd-email-field.scss → fields/mrd-email-field/mrd-email-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-email-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,12 +15,10 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-email-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-email-field__input {
   display: block;
   width: 100%;
@@ -38,32 +35,26 @@
   appearance: none;
   box-sizing: border-box;
 }
-
 .mrd-email-field__input::placeholder {
   color: var(--mrd-input-placeholder-color);
 }
-
 .mrd-email-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-email-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-email-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-email-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-email-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
-}
+}

package/dist/collection/components/{mrd-email-field → fields/mrd-email-field}/mrd-email-field.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired, validateEmail } from "../../utils/validation";
+import { t } from "../../../utils/i18n";
+import { validateEmail } from "../../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdEmailField {
     constructor() {
         this.name = '';
@@ -17,21 +18,13 @@ export class MrdEmailField {
         };
         this.handleBlur = (e) => {
             const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else if (val && !validateEmail(val)) {
-                this.error = t('invalid_email', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(val, this.required, this.locale)
+                || (val && !validateEmail(val) ? t('invalid_email', this.locale) : '');
             this.mrdBlur.emit({ name: this.name, value: val });
         };
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '0d442ab2a711c26c83fcdbf0fd8cd006d8dd8649' }, h("div", { key: 'ceb2a80679514c4c5b888fe096c90ed6cc973f64', class: "mrd-email-field" }, this.label && (h("label", { key: '663f95eff1002ee56cfc3104514bf31b47e26750', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '42dbdec25a47b37cfd68d00d0b8a481f96fe8241', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '626ee856ceaa7051fb9dd1de8b7cbd708e83f617', class: "mrd-email-field__error" }, this.error))));
+        return (h(Host, { key: '93f7c4975c24e6001e772f2858344edec04cda10' }, h("div", { key: '4f49a2a1f68a4161762861c5d54fd3690c88ac5d', class: "mrd-email-field" }, h(FieldLabel, { key: '23b20799f3e7c04889b7bc3a271e61b0bb5d7537', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '0fc452bfb9295a80102eeed4b32bcc9475c9d17b', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '34945fff9c69cf2f0aeb56492c95052250514d5c', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-file-field/mrd-file-field.scss → fields/mrd-file-field/mrd-file-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-file-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,17 +15,20 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-file-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
+.mrd-file-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
 
 .mrd-file-field__zone {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--mrd-space-6);
   border: 2px dashed var(--mrd-border-color);
   border-radius: var(--mrd-border-radius-md);
   background-color: var(--mrd-color-neutral-50);
@@ -35,30 +37,24 @@
   min-height: 100px;
   position: relative;
 }
-
-.mrd-file-field__zone:hover {
+.mrd-file-field__zone:hover, .mrd-file-field__zone--dragging {
   border-color: var(--mrd-color-primary);
   background-color: var(--mrd-color-primary-light);
 }
-
-.mrd-file-field__zone--dragging {
-  border-color: var(--mrd-color-primary);
-  background-color: var(--mrd-color-primary-light);
-}
-
 .mrd-file-field__zone--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-file-field__zone--disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
-
 .mrd-file-field__zone--disabled:hover {
   border-color: var(--mrd-border-color);
   background-color: var(--mrd-color-neutral-50);
 }
+.mrd-file-field__zone {
+  padding: var(--mrd-space-6);
+}
 
 .mrd-file-field__input {
   position: absolute;
@@ -66,8 +62,8 @@
   opacity: 0;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   pointer-events: none;
+  cursor: pointer;
 }
 
 .mrd-file-field__prompt {
@@ -93,6 +89,7 @@
   text-decoration: underline;
 }
 
+/* Selected file row */
 .mrd-file-field__selected {
   display: flex;
   align-items: center;
@@ -135,19 +132,17 @@
 
 .mrd-file-field__spinner {
   display: inline-block;
-  flex-shrink: 0;
   width: 18px;
   height: 18px;
   border: 2px solid var(--mrd-color-neutral-300);
   border-top-color: var(--mrd-color-primary);
   border-radius: 50%;
-  animation: mrd-file-spin 0.6s linear infinite;
+  animation: mrd-spin 0.6s linear infinite;
+  flex-shrink: 0;
 }
 
-@keyframes mrd-file-spin { to { transform: rotate(360deg); } }
-
-.mrd-file-field__error {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-error-font-size);
-  color: var(--mrd-error-color);
-}
+@keyframes mrd-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}