@mmlogic/components 0.3.9 → 0.3.10

package/dist/cjs/{mrd-boolean-field_22.cjs.entry.js → mrd-boolean-field_23.cjs.entry.js}

@@ -100,6 +100,11 @@ const translations = {
         history_until: 'tot',
         history_badge_tooltip: 'Vorige waarden',
         hyperlink_name: 'Linktekst (optioneel)',
+        // mrd-document-list
+        new_folder: 'Nieuwe folder',
+        folder_name_placeholder: 'Foldernaam',
+        folder_no_slash: "Een foldernaam mag geen '/' bevatten",
+        folder_duplicate: 'Er bestaat al een folder met deze naam',
     },
     en: {
         required: 'This field is required',
@@ -166,6 +171,11 @@ const translations = {
         history_until: 'until',
         history_badge_tooltip: 'Previous values',
         hyperlink_name: 'Link text (optional)',
+        // mrd-document-list
+        new_folder: 'New folder',
+        folder_name_placeholder: 'Folder name',
+        folder_no_slash: "A folder name cannot contain '/'",
+        folder_duplicate: 'A folder with this name already exists',
     },
     ar: {
         required: 'هذا الحقل مطلوب',
@@ -854,7 +864,112 @@ const MrdDatetimeField = class {
 };
 MrdDatetimeField.style = mrdDatetimeFieldScss();
 
-const mrdDocumentListScss = () => `.sc-mrd-document-list-h{display:block}.mrd-document-list.sc-mrd-document-list{padding:var(--mrd-space-2) 0}.mrd-document-list__row.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-2);height:2.125rem;padding:0 var(--mrd-space-4);cursor:pointer;user-select:none;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-document-list__row.sc-mrd-document-list:hover{background:var(--mrd-color-neutral-50)}.mrd-document-list__row--dossier.sc-mrd-document-list .mrd-document-list__label.sc-mrd-document-list{font-weight:var(--mrd-font-weight-semibold)}.mrd-document-list__indent.sc-mrd-document-list{flex:none}.mrd-document-list__chev.sc-mrd-document-list{width:1rem;height:1rem;flex:none;display:grid;place-items:center;color:var(--mrd-color-neutral-400);transition:transform var(--mrd-transition-fast)}.mrd-document-list__chev.sc-mrd-document-list svg.sc-mrd-document-list{width:0.6875rem;height:0.6875rem}.mrd-document-list__chev--open.sc-mrd-document-list{transform:rotate(90deg)}.mrd-document-list__chev--leaf.sc-mrd-document-list{visibility:hidden}.mrd-document-list__icon.sc-mrd-document-list{width:1.0625rem;height:1.0625rem;flex:none}.mrd-document-list__icon--dossier.sc-mrd-document-list{color:var(--mrd-color-primary)}.mrd-document-list__icon--folder.sc-mrd-document-list{color:#d9a441}.mrd-document-list__icon--doc.sc-mrd-document-list{color:var(--mrd-color-neutral-400)}.mrd-document-list__label.sc-mrd-document-list{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-document-list__count.sc-mrd-document-list{flex:none;font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius-full);padding:0.0625rem 0.5rem}.mrd-document-list__date.sc-mrd-document-list{flex:none;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400);font-variant-numeric:tabular-nums}.mrd-document-list__loading.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-2);height:1.875rem;padding:0 var(--mrd-space-4);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400)}.mrd-document-list__spinner.sc-mrd-document-list{width:0.75rem;height:0.75rem;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-document-list-spin 0.7s linear infinite}@keyframes mrd-document-list-spin{to{transform:rotate(360deg)}}.mrd-document-list__empty.sc-mrd-document-list{padding:var(--mrd-space-8) var(--mrd-space-4);text-align:center;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm)}`;
+const mrdDocumentContainerScss = () => `.sc-mrd-document-container-h{display:block}.mrd-document-container__toolbar.sc-mrd-document-container{display:flex;align-items:center;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-color-neutral-100)}.mrd-document-container__action.sc-mrd-document-container{display:inline-flex;align-items:center;gap:var(--mrd-space-2);height:1.625rem;padding:0 var(--mrd-space-3);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700);background:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background var(--mrd-transition-fast), border-color var(--mrd-transition-fast)}.mrd-document-container__action.sc-mrd-document-container svg.sc-mrd-document-container{width:1rem;height:1rem;color:#d9a441}.mrd-document-container__action.sc-mrd-document-container:hover:not(:disabled){background:var(--mrd-color-neutral-50);border-color:var(--mrd-color-neutral-300)}.mrd-document-container__action.sc-mrd-document-container:disabled{opacity:0.5;cursor:not-allowed}.mrd-document-container__seg.sc-mrd-document-container{display:inline-flex;gap:2px;padding:2px;background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius)}.mrd-document-container__seg-btn.sc-mrd-document-container{width:1.875rem;height:1.625rem;display:grid;place-items:center;border:none;background:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-500);cursor:pointer;transition:color var(--mrd-transition-fast), background var(--mrd-transition-fast)}.mrd-document-container__seg-btn.sc-mrd-document-container:hover{color:var(--mrd-color-neutral-800)}.mrd-document-container__seg-btn[aria-pressed='true'].sc-mrd-document-container{background:var(--mrd-color-white);color:var(--mrd-color-primary-dark);box-shadow:var(--mrd-shadow-sm)}.mrd-document-container__seg-btn.sc-mrd-document-container svg.sc-mrd-document-container{width:1rem;height:1rem}`;
+
+const MrdDocumentContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
+        this.mrdLoadDistinct = index.createEvent(this, "mrdLoadDistinct");
+        this.mrdLoadAggregations = index.createEvent(this, "mrdLoadAggregations");
+        this.mrdNavigate = index.createEvent(this, "mrdNavigate");
+        this.mrdAction = index.createEvent(this, "mrdAction");
+        this.mrdUpdateObject = index.createEvent(this, "mrdUpdateObject");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
+        this.mrdCreateObject = index.createEvent(this, "mrdCreateObject");
+        /** The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config). */
+        this.item = null;
+        /** Parent record id — required for RELATED_VIEW path building. */
+        this.parentId = '';
+        /** Lookup key used for the embedded `data-doclist` / `data-view` attributes. */
+        this.viewKey = '';
+        this.locale = navigator.language;
+        /** Active body: folder tree or flat table. */
+        this.mode = 'tree';
+        /** Whether the folder tree currently has a valid target for "New folder". */
+        this.canCreate = false;
+        /** Whether the currently mounted table has been init()'d. Reset on every mode switch. */
+        this.tableInited = false;
+        this.createFolder = () => {
+            var _a, _b;
+            (_b = (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }
+    /** The embedded table does not self-load: like every mrd-table it waits for the
+     *  host to call init() (which emits mrdLoadPage, and — once page 0 lands —
+     *  mrdLoadAggregations). The section only init()s tables mounted at load time, so
+     *  when the user switches to list view we init the freshly mounted table here. */
+    componentDidRender() {
+        var _a;
+        if (this.mode === 'list' && this.tableEl && !this.tableInited) {
+            this.tableInited = true;
+            const table = this.tableEl;
+            Promise.resolve((_a = table.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(table)).then(() => { var _a; return (_a = table.init) === null || _a === void 0 ? void 0 : _a.call(table); });
+        }
+    }
+    setMode(mode) {
+        if (mode === this.mode)
+            return;
+        // The tree remounts on switch and re-emits mrdCanCreate; until then, disable.
+        this.canCreate = false;
+        // The table remounts on switch; re-init it once it is back in the DOM.
+        this.tableInited = false;
+        this.mode = mode;
+    }
+    // ── Toolbar ────────────────────────────────────────────────────────────────
+    renderToolbar() {
+        return (index.h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (index.h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), index.h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), index.h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, index.h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M3 5h6M3 12h9M3 19h6" }), index.h("circle", { cx: "18", cy: "5", r: "1.6" }), index.h("circle", { cx: "18", cy: "19", r: "1.6" }), index.h("path", { d: "M16 12h4" }))), index.h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+    }
+    // ── Bodies ───────────────────────────────────────────────────────────────
+    renderTree() {
+        return (index.h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, locale: this.locale, onMrdLoadDistinct: (e) => {
+                e.stopPropagation();
+                this.mrdLoadDistinct.emit(e.detail);
+            }, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdNavigate: (e) => {
+                e.stopPropagation();
+                this.mrdNavigate.emit(e.detail);
+            }, onMrdCanCreate: (e) => {
+                e.stopPropagation();
+                this.canCreate = e.detail;
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdUpload: (e) => {
+                e.stopPropagation();
+                this.mrdUpload.emit(e.detail);
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(e.detail);
+            } }));
+    }
+    renderList() {
+        return (index.h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdLoadAggregations: (e) => {
+                e.stopPropagation();
+                this.mrdLoadAggregations.emit(e.detail);
+            }, onMrdRowClick: (e) => {
+                var _a, _b, _c;
+                e.stopPropagation();
+                const row = e.detail;
+                this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
+            }, onMrdAction: (e) => {
+                e.stopPropagation();
+                this.mrdAction.emit(e.detail);
+            } }));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a5393d484bdc202b57c6d32d9ce917e760aff95a' }, this.renderToolbar(), index.h("div", { key: '52f82de8f7734e13f34d323e3e831e6de5676f46', class: "mrd-document-container__body" }, this.mode === 'tree' ? this.renderTree() : this.renderList())));
+    }
+    get el() { return index.getElement(this); }
+};
+MrdDocumentContainer.style = mrdDocumentContainerScss();
+
+const mrdDocumentListScss = () => `.sc-mrd-document-list-h{display:block}.mrd-document-list.sc-mrd-document-list{padding:var(--mrd-space-2) 0}.mrd-document-list__row.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-2);height:2.125rem;padding:0 var(--mrd-space-4);cursor:pointer;user-select:none;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-document-list__row.sc-mrd-document-list:hover{background:var(--mrd-color-neutral-50)}.mrd-document-list__row--selected.sc-mrd-document-list{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--selected.sc-mrd-document-list:hover{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--pending.sc-mrd-document-list .mrd-document-list__label.sc-mrd-document-list{font-style:italic;color:var(--mrd-color-neutral-500)}.mrd-document-list__row--doc.sc-mrd-document-list{cursor:grab}.mrd-document-list__row--doc.sc-mrd-document-list:active{cursor:grabbing}.mrd-document-list__row--drop.sc-mrd-document-list{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));box-shadow:inset 0 0 0 1px var(--mrd-color-primary)}.mrd-document-list__row--drop.sc-mrd-document-list:hover{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--edit.sc-mrd-document-list{cursor:default}.mrd-document-list__name-input.sc-mrd-document-list{flex:1;min-width:0;height:1.625rem;padding:0 var(--mrd-space-2);font-size:var(--mrd-font-size-sm);font-family:inherit;color:var(--mrd-color-neutral-800);border:1px solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-document-list__error.sc-mrd-document-list{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-danger, #dc2626);padding-top:0.125rem;padding-bottom:0.25rem}.mrd-document-list__row--dossier.sc-mrd-document-list .mrd-document-list__label.sc-mrd-document-list{font-weight:var(--mrd-font-weight-semibold)}.mrd-document-list__indent.sc-mrd-document-list{flex:none}.mrd-document-list__chev.sc-mrd-document-list{width:1rem;height:1rem;flex:none;display:grid;place-items:center;color:var(--mrd-color-neutral-400);transition:transform var(--mrd-transition-fast)}.mrd-document-list__chev.sc-mrd-document-list svg.sc-mrd-document-list{width:0.6875rem;height:0.6875rem}.mrd-document-list__chev--open.sc-mrd-document-list{transform:rotate(90deg)}.mrd-document-list__chev--leaf.sc-mrd-document-list{visibility:hidden}.mrd-document-list__icon.sc-mrd-document-list{width:1.0625rem;height:1.0625rem;flex:none}.mrd-document-list__icon--dossier.sc-mrd-document-list{color:var(--mrd-color-primary)}.mrd-document-list__icon--folder.sc-mrd-document-list{color:#d9a441}.mrd-document-list__icon--doc.sc-mrd-document-list{color:var(--mrd-color-neutral-400)}.mrd-document-list__label.sc-mrd-document-list{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-document-list__count.sc-mrd-document-list{flex:none;font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius-full);padding:0.0625rem 0.5rem}.mrd-document-list__date.sc-mrd-document-list{flex:none;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400);font-variant-numeric:tabular-nums}.mrd-document-list__loading.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-2);height:1.875rem;padding:0 var(--mrd-space-4);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400)}.mrd-document-list__spinner.sc-mrd-document-list{width:0.75rem;height:0.75rem;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-document-list-spin 0.7s linear infinite}@keyframes mrd-document-list-spin{to{transform:rotate(360deg)}}.mrd-document-list__empty.sc-mrd-document-list{padding:var(--mrd-space-8) var(--mrd-space-4);text-align:center;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm)}`;
 
 const MrdDocumentList = class {
     constructor(hostRef) {
@@ -862,6 +977,10 @@ const MrdDocumentList = class {
         this.mrdLoadDistinct = index.createEvent(this, "mrdLoadDistinct");
         this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
         this.mrdNavigate = index.createEvent(this, "mrdNavigate");
+        this.mrdCanCreate = index.createEvent(this, "mrdCanCreate");
+        this.mrdUpdateObject = index.createEvent(this, "mrdUpdateObject");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
+        this.mrdCreateObject = index.createEvent(this, "mrdCreateObject");
         /** The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config). */
         this.item = null;
         /** Parent record id — required for RELATED_VIEW path building. */
@@ -871,11 +990,168 @@ const MrdDocumentList = class {
         this.rootLoading = true;
         /** True when the single-container level is collapsed away (dossier context). */
         this.singleContainer = false;
+        /** Currently selected node id — the target for "New folder" and (later) drops. */
+        this.selectedId = null;
+        /** Node id currently highlighted as a drag-drop target (null = none). */
+        this.dropTargetId = null;
+        /** Node id showing an "uploading…" indicator while a dropped file is processed. */
+        this.uploadingNodeId = null;
         this.nodeIndex = new Map();
+        // ── New-folder editing state ───────────────────────────────────────────────
+        /** The pending node whose inline name input is open (null = not creating). */
+        this.pendingNode = null;
+        /** The node the pending folder is being created under. */
+        this.pendingParent = null;
+        /** The container the pending folder belongs to. */
+        this.pendingContainer = null;
+        /** Current text in the inline name input. */
+        this.pendingName = '';
+        /** Ref to the inline input, so we can focus it after it mounts. */
+        this.pendingInputEl = null;
+        /** Set when a fresh input needs focus on the next render. */
+        this.pendingNeedsFocus = false;
+        /** Monotonic counter for unique temporary pending-node ids. */
+        this.newFolderSeq = 0;
+        /** Last emitted canCreateFolder value, to only emit mrdCanCreate on change. */
+        this.lastCanCreate = false;
+        // ── Drag & drop (move a document into another folder) ──────────────────────
+        /** The document row currently being dragged. */
+        this.dragDoc = null;
+        /** Id of the node the dragged document currently lives in. */
+        this.dragFromId = null;
+        /** External file dropped onto a node, awaiting its upload to complete. */
+        this.pendingUpload = null;
+        /** The optimistic document row awaiting its self href from the create POST. */
+        this.lastOptimisticDoc = null;
+        this.startCreateFolder = () => {
+            const resolved = this.resolveTarget();
+            if (!resolved || this.pendingNode)
+                return;
+            const { target, container } = resolved;
+            const tempId = `${container.id}/__new__${this.newFolderSeq++}`;
+            const node = this.makeFolderNode(tempId, '', container.id);
+            node.pending = true;
+            node.editing = true;
+            target.children = [...target.children, node];
+            target.open = true;
+            this.nodeIndex.set(node.id, node);
+            this.pendingNode = node;
+            this.pendingParent = target;
+            this.pendingContainer = container;
+            this.pendingName = '';
+            this.pendingNeedsFocus = true;
+            this.bump();
+        };
+        this.onPendingInput = (e) => {
+            var _a;
+            this.pendingName = e.target.value;
+            if ((_a = this.pendingNode) === null || _a === void 0 ? void 0 : _a.error) {
+                this.pendingNode.error = undefined;
+                this.bump();
+            }
+        };
+        this.onPendingKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.commitFolder();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelFolder();
+            }
+        };
+        // ── Drag & drop: move a document into another folder / container ────────────
+        this.onDocDragStart = (e, doc, node) => {
+            var _a, _b, _c;
+            this.dragDoc = doc;
+            this.dragFromId = node.id;
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+                // A payload is required for a drag to start in some browsers.
+                e.dataTransfer.setData('text/plain', (_c = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : '');
+            }
+        };
+        this.onDocDragEnd = () => {
+            this.dragDoc = null;
+            this.dragFromId = null;
+            if (this.dropTargetId !== null)
+                this.dropTargetId = null;
+        };
+        /** A folder/container node (or a document inside it) accepts an internal move
+         *  or an external file drop. Always claims the event so it never bubbles to the
+         *  root drop-zone; a different node is highlighted (its own folder = no-op). */
+        this.onNodeDragOver = (e, node) => {
+            const file = this.isFileDrag(e);
+            if (!this.dragDoc && !file)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = file ? 'copy' : 'move';
+            const target = !file && node.id === this.dragFromId ? null : node.id;
+            if (this.dropTargetId !== target)
+                this.dropTargetId = target;
+        };
+        this.onNodeDragLeave = (node) => {
+            if (this.dropTargetId === node.id)
+                this.dropTargetId = null;
+        };
+        this.onNodeDrop = (e, node, container) => {
+            if (this.isFileDrag(e)) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.startFileUpload(e, node, container);
+                return;
+            }
+            if (!this.dragDoc)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.moveDocument(node, container);
+            this.onDocDragEnd();
+        };
+        /** Root-zone drop (dossier context): target the single container's root. */
+        this.onRootDragOver = (e) => {
+            if (!this.singleContainer)
+                return;
+            const file = this.isFileDrag(e);
+            if (!this.dragDoc && !file)
+                return;
+            e.preventDefault();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = file ? 'copy' : 'move';
+        };
+        this.onRootDrop = (e) => {
+            if (!this.singleContainer)
+                return;
+            const only = this.containers[0];
+            if (this.isFileDrag(e)) {
+                e.preventDefault();
+                this.startFileUpload(e, only, only);
+                return;
+            }
+            if (!this.dragDoc)
+                return;
+            e.preventDefault();
+            this.moveDocument(only, only);
+            this.onDocDragEnd();
+        };
     }
     componentDidLoad() {
         this.emitContainerDistinct();
     }
+    componentDidRender() {
+        if (this.pendingNeedsFocus && this.pendingInputEl) {
+            this.pendingInputEl.focus();
+            this.pendingInputEl.select();
+            this.pendingNeedsFocus = false;
+        }
+        const can = this.canCreateFolder;
+        if (can !== this.lastCanCreate) {
+            this.lastCanCreate = can;
+            this.mrdCanCreate.emit(can);
+        }
+    }
     // ── Slot field names ─────────────────────────────────────────────────────
     get containerField() {
         var _a, _b, _c;
@@ -889,6 +1165,10 @@ const MrdDocumentList = class {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'name';
     }
+    get fileField() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.file) !== null && _c !== void 0 ? _c : 'file';
+    }
     get dateField() {
         var _a, _b;
         return (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.date;
@@ -1041,7 +1321,7 @@ const MrdDocumentList = class {
                 acc.push(seg);
                 let child = node.children.find(c => c.label === seg);
                 if (!child) {
-                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg);
+                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg, container.id);
                     node.children.push(child);
                     this.nodeIndex.set(child.id, child);
                 }
@@ -1077,9 +1357,9 @@ const MrdDocumentList = class {
             open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
         };
     }
-    makeFolderNode(id, label) {
+    makeFolderNode(id, label, containerId) {
         return {
-            id, kind: 'folder', label,
+            id, kind: 'folder', label, containerId,
             hasDocs: false, docCount: 0, totalCount: 0, children: [],
             open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
         };
@@ -1097,6 +1377,7 @@ const MrdDocumentList = class {
     }
     // ── Interaction ──────────────────────────────────────────────────────────
     toggleContainer(node) {
+        this.selectedId = node.id;
         node.open = !node.open;
         if (node.open && !node.foldersLoaded && !node.loading) {
             this.emitFolderDistinct(node);
@@ -1104,12 +1385,235 @@ const MrdDocumentList = class {
         this.bump();
     }
     toggleFolder(container, node) {
+        this.selectedId = node.id;
         node.open = !node.open;
         if (node.open && node.hasDocs && !node.docsLoaded && !node.loading) {
             this.emitDocuments(container, node);
         }
         this.bump();
     }
+    // ── New folder (client-side pending, materialises on document drop) ─────────
+    /** Resolve the node a new folder should be created under, and its container.
+     *  Uses the current selection; falls back to the single container (dossier). */
+    resolveTarget() {
+        if (this.selectedId) {
+            const n = this.nodeIndex.get(this.selectedId);
+            if (n && n.kind === 'container')
+                return { target: n, container: n };
+            if (n && n.kind === 'folder') {
+                const container = n.containerId ? this.nodeIndex.get(n.containerId) : undefined;
+                if (container)
+                    return { target: n, container };
+            }
+        }
+        if (this.singleContainer && this.containers[0]) {
+            const only = this.containers[0];
+            return { target: only, container: only };
+        }
+        return null;
+    }
+    get canCreateFolder() {
+        return !this.pendingNode && this.resolveTarget() !== null;
+    }
+    /** Start creating a folder under the current target. Called by the host toolbar
+     *  (mrd-document-container). No-op when there is no valid target. */
+    async createFolder() {
+        this.startCreateFolder();
+    }
+    /** Folder path segments of a node relative to its container (derived from its id). */
+    segmentsOf(node, container) {
+        if (node.kind === 'container')
+            return [];
+        const prefix = container.id + '/';
+        const rest = node.id.startsWith(prefix) ? node.id.slice(prefix.length) : '';
+        return rest ? rest.split('/') : [];
+    }
+    commitFolder() {
+        const node = this.pendingNode;
+        const parent = this.pendingParent;
+        const container = this.pendingContainer;
+        if (!node || !parent || !container)
+            return;
+        const name = this.pendingName.trim();
+        if (!name) {
+            this.cancelFolder();
+            return;
+        }
+        if (name.includes('/')) {
+            node.error = t('folder_no_slash', this.locale);
+            this.bump();
+            return;
+        }
+        const dup = parent.children.some(c => c !== node && c.label.toLowerCase() === name.toLowerCase());
+        if (dup) {
+            node.error = t('folder_duplicate', this.locale);
+            this.bump();
+            return;
+        }
+        // Finalise: swap the temp id for the real path-derived id so a later distinct
+        // value with the same folder string merges onto this node.
+        const segs = [...this.segmentsOf(parent, container), name];
+        this.nodeIndex.delete(node.id);
+        node.id = container.id + '/' + segs.join('/');
+        node.fullPath = '/' + segs.join('/');
+        node.label = name;
+        node.editing = false;
+        node.error = undefined;
+        node.open = true;
+        this.nodeIndex.set(node.id, node);
+        this.selectedId = node.id;
+        this.clearPending();
+        this.bump();
+    }
+    cancelFolder() {
+        const node = this.pendingNode;
+        const parent = this.pendingParent;
+        if (node && parent) {
+            parent.children = parent.children.filter(c => c !== node);
+            this.nodeIndex.delete(node.id);
+        }
+        this.clearPending();
+        this.bump();
+    }
+    clearPending() {
+        this.pendingNode = null;
+        this.pendingParent = null;
+        this.pendingContainer = null;
+        this.pendingName = '';
+        this.pendingInputEl = null;
+        this.pendingNeedsFocus = false;
+    }
+    /** True when the drag carries external files (an OS file drop, not an internal move). */
+    isFileDrag(e) {
+        return !this.dragDoc && !!e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files');
+    }
+    // ── External file drop → upload → create document ──────────────────────────
+    /** Begin an upload: emit mrdUpload; the host uploads and calls setFileReference. */
+    startFileUpload(e, node, container) {
+        var _a, _b;
+        const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]; // single file per drop
+        this.dropTargetId = null;
+        if (!file)
+            return;
+        this.pendingUpload = { file, node, container };
+        node.open = true;
+        this.uploadingNodeId = node.id;
+        this.bump();
+        this.mrdUpload.emit({ file });
+    }
+    /** Strip a single trailing extension for the document title. */
+    stripExtension(name) {
+        return name.replace(/\.[^./\\]+$/, '');
+    }
+    /** Host callback with the uploaded file reference. Builds the create payload
+     *  from the archetype slots and requests the new document. */
+    async setFileReference(uri) {
+        const up = this.pendingUpload;
+        if (!up)
+            return;
+        const { file, node, container } = up;
+        const folder = this.folderStringOf(node, container);
+        const values = {
+            [this.fileField]: uri,
+            [this.titleField]: this.stripExtension(file.name),
+            [this.folderField]: folder,
+            [this.containerField]: container.href,
+        };
+        this.mrdCreateObject.emit({ path: this.buildDataPath(), values });
+        // Optimistically show the new document (no href until a reload).
+        const optimistic = { [this.titleField]: this.stripExtension(file.name), _optimistic: true };
+        const wasUnloadedEmpty = !node.docsLoaded && node.docCount === 0;
+        node.hasDocs = true;
+        node.pending = false;
+        node.docCount += 1;
+        if (wasUnloadedEmpty) {
+            node.docsLoaded = true;
+            node.docs = [optimistic];
+        }
+        else if (node.docsLoaded)
+            node.docs = [...node.docs, optimistic];
+        this.recomputeContainerTotals(container, 1);
+        this.lastOptimisticDoc = optimistic;
+        this.pendingUpload = null;
+        this.uploadingNodeId = null;
+        this.bump();
+    }
+    /** Host callback with the created document's self href, so the optimistic row
+     *  becomes navigable without waiting for a reload. */
+    async setCreatedHref(href) {
+        var _a;
+        const doc = this.lastOptimisticDoc;
+        if (!doc || !href)
+            return;
+        doc._links = Object.assign(Object.assign({}, ((_a = doc._links) !== null && _a !== void 0 ? _a : {})), { self: { href } });
+        doc._optimistic = false;
+        this.lastOptimisticDoc = null;
+        this.bump();
+    }
+    /** Folder string a node represents: the raw distinct value when it holds
+     *  documents, else derived from its path segments; null for a container root. */
+    folderStringOf(node, container) {
+        if (node.kind === 'container')
+            return null;
+        if (node.fullPath != null && node.fullPath !== '')
+            return node.fullPath;
+        const segs = this.segmentsOf(node, container);
+        return segs.length ? '/' + segs.join('/') : null;
+    }
+    moveDocument(toNode, toContainer) {
+        var _a, _b;
+        const doc = this.dragDoc;
+        const fromNode = this.dragFromId ? this.nodeIndex.get(this.dragFromId) : undefined;
+        if (!doc || !fromNode)
+            return;
+        const fromContainer = fromNode.kind === 'container'
+            ? fromNode
+            : (fromNode.containerId ? this.nodeIndex.get(fromNode.containerId) : undefined);
+        if (!fromContainer)
+            return;
+        const targetFolder = this.folderStringOf(toNode, toContainer);
+        const sourceFolder = this.folderStringOf(fromNode, fromContainer);
+        const sameContainer = toContainer === fromContainer;
+        // No-op: dropped back onto its own folder.
+        if (toNode === fromNode || (sameContainer && targetFolder === sourceFolder))
+            return;
+        // ── Optimistic tree update (fire-and-forget; no refetch) ──
+        fromNode.docs = fromNode.docs.filter(d => d !== doc);
+        fromNode.docCount = Math.max(0, fromNode.docCount - 1);
+        // A now-empty folder should stop showing an expand chevron (it disappears on
+        // the next reload anyway, since it is derived from document folder strings).
+        if (fromNode.docsLoaded)
+            fromNode.hasDocs = fromNode.docs.length > 0;
+        toNode.hasDocs = true;
+        toNode.pending = false; // a pending folder is now materialised
+        toNode.docCount += 1;
+        if (toNode.kind === 'folder')
+            toNode.fullPath = targetFolder !== null && targetFolder !== void 0 ? targetFolder : '';
+        if (toNode.docsLoaded)
+            toNode.docs = [...toNode.docs, doc];
+        this.recomputeContainerTotals(fromContainer, -1);
+        if (!sameContainer)
+            this.recomputeContainerTotals(toContainer, 1);
+        // ── Emit the generic update; host PATCHes the document ──
+        const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
+        if (href) {
+            const values = { [this.folderField]: targetFolder };
+            if (!sameContainer)
+                values[this.containerField] = toContainer.href;
+            this.mrdUpdateObject.emit({ href, values });
+        }
+        this.bump();
+    }
+    /** Recompute a container's subtree totals from docCounts when its folders are
+     *  loaded; otherwise just nudge the aggregate badge by the delta. */
+    recomputeContainerTotals(container, delta) {
+        if (container.foldersLoaded) {
+            this.computeTotals(container);
+        }
+        else {
+            container.totalCount = Math.max(0, container.totalCount + delta);
+        }
+    }
     openDoc(doc) {
         var _a, _b, _c, _d;
         const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
@@ -1132,12 +1636,12 @@ const MrdDocumentList = class {
     indent(depth) {
         return index.h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
     }
-    renderDocRow(doc, depth) {
+    renderDocRow(doc, node, container, depth) {
         var _a, _b, _c, _d, _e;
         const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
         const dateRaw = this.dateField ? doc === null || doc === void 0 ? void 0 : doc[this.dateField] : undefined;
         const date = dateRaw ? formatDate(dateRaw, this.locale) : '';
-        return (index.h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, onClick: () => this.openDoc(doc) }, this.indent(depth), this.renderChevron(false, true), this.renderDocIcon(), index.h("span", { class: "mrd-document-list__label" }, label), date && index.h("span", { class: "mrd-document-list__date" }, date)));
+        return (index.h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => this.openDoc(doc), onDragStart: (e) => this.onDocDragStart(e, doc, node), onDragEnd: this.onDocDragEnd, onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, container) }, this.indent(depth), this.renderChevron(false, true), this.renderDocIcon(), index.h("span", { class: "mrd-document-list__label" }, label), date && index.h("span", { class: "mrd-document-list__date" }, date)));
     }
     renderLoadingRow(depth) {
         return (index.h("div", { class: "mrd-document-list__loading", key: "loading" }, this.indent(depth), index.h("span", { class: "mrd-document-list__spinner" }), t('loading', this.locale)));
@@ -1148,7 +1652,7 @@ const MrdDocumentList = class {
         if (node.hasDocs) {
             if (node.docsLoaded) {
                 for (const doc of node.docs)
-                    out.push(this.renderDocRow(doc, depth));
+                    out.push(this.renderDocRow(doc, node, container, depth));
             }
             else if (node.loading) {
                 out.push(this.renderLoadingRow(depth));
@@ -1158,14 +1662,34 @@ const MrdDocumentList = class {
         for (const child of node.children) {
             out.push(this.renderFolderNode(container, child, depth));
         }
+        // An uploading file dropped onto this node.
+        if (node.id === this.uploadingNodeId)
+            out.push(this.renderUploadingRow(depth));
         return out;
     }
+    renderUploadingRow(depth) {
+        return (index.h("div", { class: "mrd-document-list__loading", key: "uploading" }, this.indent(depth), index.h("span", { class: "mrd-document-list__spinner" }), t('upload_file', this.locale)));
+    }
+    renderFolderEditRow(node, depth) {
+        return (index.h("div", { class: "mrd-document-list__node", key: node.id }, index.h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, this.indent(depth), this.renderChevron(false, true), this.renderFolderIcon(), index.h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', this.locale), ref: el => (this.pendingInputEl = el), onInput: this.onPendingInput, onKeyDown: this.onPendingKeyDown, onBlur: () => this.cancelFolder() })), node.error && (index.h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth * 18 + 52}px` } }, node.error))));
+    }
     renderFolderNode(container, node, depth) {
+        if (node.editing)
+            return this.renderFolderEditRow(node, depth);
         const leaf = node.children.length === 0 && !node.hasDocs;
-        return (index.h("div", { class: "mrd-document-list__node", key: node.id }, index.h("div", { class: "mrd-document-list__row", onClick: () => this.toggleFolder(container, node) }, this.indent(depth), this.renderChevron(node.open, leaf), this.renderFolderIcon(), index.h("span", { class: "mrd-document-list__label" }, node.label), index.h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && index.h("div", { class: "mrd-document-list__kids" }, this.renderChildren(container, node, depth + 1))));
+        const selected = node.id === this.selectedId;
+        const cls = 'mrd-document-list__row'
+            + (selected ? ' mrd-document-list__row--selected' : '')
+            + (node.pending ? ' mrd-document-list__row--pending' : '')
+            + (node.id === this.dropTargetId ? ' mrd-document-list__row--drop' : '');
+        return (index.h("div", { class: "mrd-document-list__node", key: node.id }, index.h("div", { class: cls, onClick: () => this.toggleFolder(container, node), onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, container) }, this.indent(depth), this.renderChevron(node.open, leaf), this.renderFolderIcon(), index.h("span", { class: "mrd-document-list__label" }, node.label), index.h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && index.h("div", { class: "mrd-document-list__kids" }, this.renderChildren(container, node, depth + 1))));
     }
     renderContainerNode(node, depth) {
-        return (index.h("div", { class: "mrd-document-list__node", key: node.id }, index.h("div", { class: "mrd-document-list__row mrd-document-list__row--dossier", onClick: () => this.toggleContainer(node) }, this.indent(depth), this.renderChevron(node.open, false), this.renderDossierIcon(), index.h("span", { class: "mrd-document-list__label" }, node.label), index.h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (index.h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
+        const selected = node.id === this.selectedId;
+        const cls = 'mrd-document-list__row mrd-document-list__row--dossier'
+            + (selected ? ' mrd-document-list__row--selected' : '')
+            + (node.id === this.dropTargetId ? ' mrd-document-list__row--drop' : '');
+        return (index.h("div", { class: "mrd-document-list__node", key: node.id }, index.h("div", { class: cls, onClick: () => this.toggleContainer(node), onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, node) }, this.indent(depth), this.renderChevron(node.open, false), this.renderDossierIcon(), index.h("span", { class: "mrd-document-list__label" }, node.label), index.h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (index.h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
             ? this.renderLoadingRow(depth + 1)
             : this.renderChildren(node, node, depth + 1)))));
     }
@@ -1175,7 +1699,7 @@ const MrdDocumentList = class {
             body = this.renderLoadingRow(0);
         }
         else if (this.containers.length === 0) {
-            body = index.h("div", { key: '0c4190bb86543e2d37cc1584b3495eb6eab5664c', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = index.h("div", { key: 'b8c3297cd7cff5bf79ce694d2ee1a64c570df5ce', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -1187,7 +1711,7 @@ const MrdDocumentList = class {
         else {
             body = this.containers.map(c => this.renderContainerNode(c, 0));
         }
-        return (index.h(index.Host, { key: '4e38d9ef5a1df137a41516a47dc5debbea6b2f35' }, index.h("div", { key: '6d2f162624e5bbc8650a2978a3b045c21fe13ea3', class: "mrd-document-list" }, body)));
+        return (index.h(index.Host, { key: 'ff3b024a79ba2270aa28861923bc6406f98061aa' }, index.h("div", { key: '9db121e5336a4e3c82443257f6424db5ab4f0baf', class: "mrd-document-list", onDragOver: this.onRootDragOver, onDrop: this.onRootDrop }, body)));
     }
     get el() { return index.getElement(this); }
 };
@@ -1245,7 +1769,7 @@ const MrdDocumentView = class {
         const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
         const summaryRaw = this.slotValue('summary');
         const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
-        return (index.h(index.Host, { key: 'b6c2dbc45d5cfe551ac16b43b1a152a0d793b794' }, index.h("div", { key: 'df70848b4aa54ea414ea5d577a600779ee002b13', class: "mrd-document-view" }, this.renderContainer(), title && index.h("h1", { key: '46ff550fccd6de02972c6ee77b3cd5e7e394481a', class: "mrd-document-view__title" }, title), date && index.h("p", { key: '501c75cfc78722bd486d4a1db366675a1c519264', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (index.h("div", { key: 'ee4475d06e5ca81a760e0c9e1e4b5f32ed894d89', class: "mrd-document-view__summary" }, index.h("div", { key: '9d196abdcc56b84b2b07203d7e5167be196a342a', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
+        return (index.h(index.Host, { key: '0a2071925ecdb21738376d66fa4babf4590e694c' }, index.h("div", { key: 'a2d29c0b6e211cab142adc780466bc885a602e96', class: "mrd-document-view" }, this.renderContainer(), title && index.h("h1", { key: '7f5ac202c21bc8a70f0dd15e2e1fa06e651b5bce', class: "mrd-document-view__title" }, title), date && index.h("p", { key: 'b1dce94d5fd8bfd5e078644f631a38f91b87e7ff', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (index.h("div", { key: '588b9ca40a49ae9ea303852620bde75333b440ab', class: "mrd-document-view__summary" }, index.h("div", { key: 'd3b8adb85ac346b72451e789c10aedd539c966de', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
     }
 };
 MrdDocumentView.style = mrdDocumentViewScss();
@@ -1285,7 +1809,7 @@ const MrdEmailField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: 'bf888feadb6585a845f6d610165e192e342be5d2' }, index.h("div", { key: 'ab43101242a92df1643d218c0d35bb7b80452fef', class: "mrd-email-field" }, this.label && (index.h("label", { key: '854c9bd733f5803616ab8b70f0316a7a8a82ffd4', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), index.h("input", { key: '39ed16119a2329fdc67db578dcc7bafc35f4acf0', 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 && index.h("span", { key: 'c5881e21a2314e5d339464b16982add69be9f68a', class: "mrd-email-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '0d442ab2a711c26c83fcdbf0fd8cd006d8dd8649' }, index.h("div", { key: 'ceb2a80679514c4c5b888fe096c90ed6cc973f64', class: "mrd-email-field" }, this.label && (index.h("label", { key: '663f95eff1002ee56cfc3104514bf31b47e26750', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), index.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 && index.h("span", { key: '626ee856ceaa7051fb9dd1de8b7cbd708e83f617', class: "mrd-email-field__error" }, this.error))));
     }
 };
 MrdEmailField.style = mrdEmailFieldScss();
@@ -1568,7 +2092,7 @@ const MrdFileField = class {
             hasError ? 'mrd-file-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: '424a55ff5c141a51ed2e253a126e0046808cf1b1' }, index.h("div", { key: '49407e31c019a27bbaa3ccbc81cd4597d992d03a', class: "mrd-file-field" }, this.label && (index.h("label", { key: '0477b203f2b8df03cf9d11153bc547e9490800f7', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'aff3e5f258cfa8320150048af0b0087081cbbc13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: 'ee4366f0c4b8871524288ca47c98b4749def0b81', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (index.h("div", { class: "mrd-file-field__selected" }, this.uploading ? (index.h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" }))), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: 'b67b7770e194843a1b75caaff807ea14d62eba6a', class: "mrd-file-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '095bb39f3cb1680cf5e7e51bdfd06d8eb087f237' }, index.h("div", { key: '7e5b5fe6e63b6530221083c8bcb82bcac59a5fe7', class: "mrd-file-field" }, this.label && (index.h("label", { key: 'c34723f4199371d6fe8ea87463d878b89c038590', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.h("div", { key: '4727667345d3cd4a5c65a431744a09f366943c13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: '45ed41c0f094dbe269561c8586e473f908cdf4a4', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (index.h("div", { class: "mrd-file-field__selected" }, this.uploading ? (index.h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" }))), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: '00ce94ead3c32ed63e903cfd9d8480084a308d84', class: "mrd-file-field__error" }, this.error))));
     }
     static get watchers() { return {
         "value": [{
@@ -2129,7 +2653,7 @@ const MrdImageField = class {
             hasError ? 'mrd-image-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: '105ebf20023291a1e5c8524eedba4f04573943cd' }, index.h("div", { key: '59e6fe3b81c2ec1c07db7aaba819d79d2525b21f', class: "mrd-image-field" }, this.label && (index.h("label", { key: '2f3815ad6fe3f35932a8cc4d625751935272b629', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: '8b45fbf8d0a229110a53068620a316ab6d48dbb8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: 'b6039e85f3f456e7c8d8e7d4db29e111a7f6d8d9', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && index.h("div", { class: "mrd-image-field__preview-overlay" }, index.h("span", { class: "mrd-image-field__spinner" }))), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (index.h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: 'f53ade0f627f3c840bc133690d40034c12665b5c', class: "mrd-image-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '97db2df72839f36b7a46e153a5dd1c208c52b522' }, index.h("div", { key: 'c8f2d3d858f90d322d26082aaf5adb57acfc78f4', class: "mrd-image-field" }, this.label && (index.h("label", { key: '6625e5031ff0b7c06f76c1ea0387f1bd5c1858a4', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: '364216e6a96e845e21c42e821fdff02bd2612ff8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: '0487706ddd9f48cda1cb0c2a178809d90674486b', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && index.h("div", { class: "mrd-image-field__preview-overlay" }, index.h("span", { class: "mrd-image-field__spinner" }))), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (index.h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: 'bd505ef4f4b67c4e9138d8825c6e600f583f4cab', class: "mrd-image-field__error" }, this.error))));
     }
     static get watchers() { return {
         "value": [{
@@ -2243,7 +2767,7 @@ class CellRenderer {
     }
 }
 
-const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word;display:inline-flex;align-items:center;gap:var(--mrd-space-1)}.mrd-layout-section__history-wrap.sc-mrd-layout-section{position:relative;display:inline-flex;align-items:center}.mrd-layout-section__history-btn.sc-mrd-layout-section{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;flex-shrink:0;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-layout-section__history-btn.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-layout-section__history-btn.sc-mrd-layout-section:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__history-icon.sc-mrd-layout-section{width:0.875rem;height:0.875rem}.mrd-layout-section__history-popover.sc-mrd-layout-section{position:absolute;top:calc(100% + 0.25rem);left:0;min-width:24rem;max-width:24rem;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);box-shadow:var(--mrd-shadow-md);padding:var(--mrd-space-1) 0;z-index:var(--mrd-z-dropdown)}.mrd-layout-section__history-entry.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-700);padding:var(--mrd-space-2) var(--mrd-space-3);line-height:var(--mrd-line-height-normal)}.mrd-layout-section__history-entry.sc-mrd-layout-section:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__secret-masked.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;letter-spacing:0.01em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__doc-toolbar.sc-mrd-layout-section{display:flex;align-items:center;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) 0}.mrd-layout-section__seg.sc-mrd-layout-section{display:inline-flex;gap:2px;padding:2px;background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius)}.mrd-layout-section__seg-btn.sc-mrd-layout-section{width:1.875rem;height:1.625rem;display:grid;place-items:center;border:none;background:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-500);cursor:pointer;transition:color var(--mrd-transition-fast), background var(--mrd-transition-fast)}.mrd-layout-section__seg-btn.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-800)}.mrd-layout-section__seg-btn[aria-pressed='true'].sc-mrd-layout-section{background:var(--mrd-color-white);color:var(--mrd-color-primary-dark);box-shadow:var(--mrd-shadow-sm)}.mrd-layout-section__seg-btn.sc-mrd-layout-section svg.sc-mrd-layout-section{width:1rem;height:1rem}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
+const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word;display:inline-flex;align-items:center;gap:var(--mrd-space-1)}.mrd-layout-section__history-wrap.sc-mrd-layout-section{position:relative;display:inline-flex;align-items:center}.mrd-layout-section__history-btn.sc-mrd-layout-section{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;flex-shrink:0;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-layout-section__history-btn.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-layout-section__history-btn.sc-mrd-layout-section:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__history-icon.sc-mrd-layout-section{width:0.875rem;height:0.875rem}.mrd-layout-section__history-popover.sc-mrd-layout-section{position:absolute;top:calc(100% + 0.25rem);left:0;min-width:24rem;max-width:24rem;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);box-shadow:var(--mrd-shadow-md);padding:var(--mrd-space-1) 0;z-index:var(--mrd-z-dropdown)}.mrd-layout-section__history-entry.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-700);padding:var(--mrd-space-2) var(--mrd-space-3);line-height:var(--mrd-line-height-normal)}.mrd-layout-section__history-entry.sc-mrd-layout-section:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__secret-masked.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;letter-spacing:0.01em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
 
 const MrdLayoutSection = class {
     constructor(hostRef) {
@@ -2256,6 +2780,9 @@ const MrdLayoutSection = class {
         this.mrdViewAction = index.createEvent(this, "mrdViewAction");
         this.mrdLoadViewAggregations = index.createEvent(this, "mrdLoadViewAggregations");
         this.mrdLoadViewDistinct = index.createEvent(this, "mrdLoadViewDistinct");
+        this.mrdUpdateObject = index.createEvent(this, "mrdUpdateObject");
+        this.mrdViewUpload = index.createEvent(this, "mrdViewUpload");
+        this.mrdCreateObject = index.createEvent(this, "mrdCreateObject");
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
         this.items = [];
         /** Record data object; keys are field names, _links holds relation and related-view links. */
@@ -2273,8 +2800,6 @@ const MrdLayoutSection = class {
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
         this.openHistoryField = null;
-        /** Per-view display mode for document collection views. Default 'tree'. */
-        this.docViewMode = {};
         this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
@@ -2391,6 +2916,20 @@ const MrdLayoutSection = class {
         if (list === null || list === void 0 ? void 0 : list.setDistinct)
             await list.setDistinct(nodeId, values);
     }
+    /** Inject the uploaded file reference for a dropped file, so the document view
+     *  can request creation of the new document (see mrdViewUpload). */
+    async setViewFileReference(name, uri) {
+        const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+        if (list === null || list === void 0 ? void 0 : list.setFileReference)
+            await list.setFileReference(uri);
+    }
+    /** Inject the created document's href after a file-drop create, so the
+     *  optimistic row becomes navigable (see mrdCreateObject). */
+    async setViewCreatedObject(name, href) {
+        const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+        if (list === null || list === void 0 ? void 0 : list.setCreatedHref)
+            await list.setCreatedHref(href);
+    }
     /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
     async setImagePreview(fieldName, url) {
         this.imagePreviews = Object.assign(Object.assign({}, this.imagePreviews), { [fieldName]: url });
@@ -2539,7 +3078,7 @@ const MrdLayoutSection = class {
         return (index.h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, index.h("div", { class: "mrd-layout-section__search-wrap" }, index.h("svg", { class: "mrd-layout-section__search-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", "clip-rule": "evenodd" })), index.h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) })), results.length > 0 && (index.h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (index.h("li", { key: r.id, class: "mrd-layout-section__search-result" }, index.h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, index.h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && index.h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
     }
     renderRelatedView(item) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const key = this.viewKeyFor(item);
         if (!key)
             return null;
@@ -2552,25 +3091,40 @@ const MrdLayoutSection = class {
         // The API publishes `archetypes` on the VIEW/RELATED_VIEW item itself
         // (sibling of `view`), not inside `view`.
         const docArchetype = index$1.resolveArchetype((_g = item.archetypes) !== null && _g !== void 0 ? _g : (_h = item.view) === null || _h === void 0 ? void 0 : _h.archetypes, index$1.ARCHETYPE_DOCUMENT);
-        const mode = (_j = this.docViewMode[key]) !== null && _j !== void 0 ? _j : 'tree';
-        return (index.h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && index.h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype && this.renderDocToolbar(key, mode), docArchetype && mode === 'tree'
-            ? this.renderDocumentList(item, key, parentId, docArchetype)
+        return (index.h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && index.h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype
+            ? this.renderDocumentContainer(item, key, parentId, docArchetype)
             : this.renderTable(item, key, parentId)));
     }
-    /** Tree / list segmented toggle for document collection views (+ upload placeholder). */
-    renderDocToolbar(key, mode) {
-        return (index.h("div", { class: "mrd-layout-section__doc-toolbar" }, index.h("div", { class: "mrd-layout-section__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, index.h("button", { class: "mrd-layout-section__seg-btn", "aria-pressed": String(mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => { this.docViewMode = Object.assign(Object.assign({}, this.docViewMode), { [key]: 'tree' }); } }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M3 5h6M3 12h9M3 19h6" }), index.h("circle", { cx: "18", cy: "5", r: "1.6" }), index.h("circle", { cx: "18", cy: "19", r: "1.6" }), index.h("path", { d: "M16 12h4" }))), index.h("button", { class: "mrd-layout-section__seg-btn", "aria-pressed": String(mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => { this.docViewMode = Object.assign(Object.assign({}, this.docViewMode), { [key]: 'list' }); } }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
-    }
-    renderDocumentList(item, key, parentId, archetype) {
-        return (index.h("mrd-document-list", { "data-doclist": key, item: item, archetype: archetype, parentId: parentId, locale: this.locale, onMrdLoadDistinct: (e) => {
+    /** Document collection view: owns the view-switch + collection actions and
+     *  swaps between the folder tree and the flat table. Events are re-emitted to
+     *  the host with the view key, exactly as the raw list/table events were. */
+    renderDocumentContainer(item, key, parentId, archetype) {
+        return (index.h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, viewKey: key, locale: this.locale, onMrdLoadDistinct: (e) => {
                 e.stopPropagation();
                 this.mrdLoadViewDistinct.emit(Object.assign({ name: key }, e.detail));
             }, onMrdLoadPage: (e) => {
                 e.stopPropagation();
                 this.mrdLoadViewPage.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdLoadAggregations: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
             }, onMrdNavigate: (e) => {
                 e.stopPropagation();
                 this.mrdNavigate.emit(e.detail);
+            }, onMrdAction: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdViewAction.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdUpload: (e) => {
+                e.stopPropagation();
+                this.mrdViewUpload.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(Object.assign({ name: key }, e.detail));
             } }));
     }
     renderTable(item, key, parentId) {
@@ -2641,7 +3195,7 @@ const MrdLayoutSection = class {
     }
     render() {
         const docArchetype = index$1.resolveArchetype(this.archetypes, index$1.ARCHETYPE_DOCUMENT);
-        return (index.h(index.Host, { key: '4fbba410f9b8cab2bf21497467f99ff25f109bcc' }, index.h("div", { key: '679d2c34f1eaff694873ba18d679cbccecdae1a6', class: "mrd-layout-section" }, docArchetype
+        return (index.h(index.Host, { key: '6e737354daec0137b6ebe304efcce9990f02739f' }, index.h("div", { key: '31a73a8a78999793f5dacee5f2da41df5f23156e', class: "mrd-layout-section" }, docArchetype
             ? this.renderDocumentObject(docArchetype)
             : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
@@ -2783,7 +3337,7 @@ const MrdLongtextField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: '624be9369a37f0901ada13bd0e8a3bb8b40f54c8' }, index.h("div", { key: '6544e7b10af59a5628a119d5ea907fb968f21d42', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: 'd56386e3fc2984b522bcbf5ec6908e044ed6f3d3', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (index.h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (index.h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && index.h("span", { key: '9423d70dec9c6439cc629746f1038a61a14da5e4', class: "mrd-longtext-field__error" }, this.error))));
+        return (index.h(index.Host, { key: 'f00f81944748f8f09e22d44befe5e288456b7cc8' }, index.h("div", { key: '7b0ae9cf5b6b684cddb648fe4db6005494322535', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: '3fc6a8710d0e98fe685c45d214a88ae1b0947973', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (index.h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (index.h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && index.h("span", { key: 'e96f1dbc6c00a1602f4ce3c97d514a229aeb7cb7', class: "mrd-longtext-field__error" }, this.error))));
     }
 };
 MrdLongtextField.style = mrdLongtextFieldScss();
@@ -2859,7 +3413,7 @@ const MrdNumberField = class {
         const hasError = !!this.error;
         const suffix = this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (index.h(index.Host, { key: '2c844e94a7cbb3fcf33f9552329443260e9490ab' }, index.h("div", { key: 'b87bdc2a17552e74b27d6da16e4db9bfd2f7e4ac', class: "mrd-number-field" }, this.label && (index.h("label", { key: '4aca381054b0ce27c94a9a7c779642d44dbbebcc', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'b7e8d122bfbd92152ce44a7ba56222425eed73f9', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: '906330075f0b8a50ff45344e865217fd1938f199', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && index.h("span", { key: '5f56d6f2e0a878703f35d50b1932a39a82dace3b', class: "mrd-number-field__error" }, this.error))));
+        return (index.h(index.Host, { key: 'b034a3cc8d841641c0ec167e138904586b044121' }, index.h("div", { key: '7379bfadb8bd0c4e0a945a37013053a4e22477ab', class: "mrd-number-field" }, this.label && (index.h("label", { key: '5518d40b7158e17704633c2b95ac7e3efc0c5568', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: '38ad9f3c945d66c23bd77c743306e916eaefed7f', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: 'ac8b4bc1ea4431cc9306664522ebfda21760ae83', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && index.h("span", { key: '09f5a58b769c81acdf4bdd48f9325934c4bb875d', class: "mrd-number-field__error" }, this.error))));
     }
 };
 MrdNumberField.style = mrdNumberFieldScss();
@@ -3153,9 +3707,9 @@ const MrdSecretField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: 'e0d516f7e76c1fab5441567cc371569a8eab07f8' }, index.h("div", { key: 'fac6fb517a0f37560429c828251f7db3841d3301', class: "mrd-secret-field" }, this.label && (index.h("label", { key: 'b2dd3189f2fcf3fd3feea741a39dbd5c3f4d437f', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
+        return (index.h(index.Host, { key: 'c850ec5bc5967ca0aefca7d7cb65ecae121a9dc1' }, index.h("div", { key: '3249ffbc441422af054a20806dd8dfce954a8ffc', class: "mrd-secret-field" }, this.label && (index.h("label", { key: '0b4a86da9cafad32f153af1bc5487a4e9b941e2f', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
             ? (index.h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
-            : (index.h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && index.h("span", { key: 'dbd6667d7f2c6ed26220ac83a46235cf3ad777d7', class: "mrd-secret-field__error" }, this.error))));
+            : (index.h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && index.h("span", { key: 'b0d0105f3d43d2e214f070b24e745dbce0e33977', class: "mrd-secret-field__error" }, this.error))));
     }
 };
 MrdSecretField.style = mrdSecretFieldScss();
@@ -4302,7 +4856,7 @@ const MrdTextField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: '124c46a83d30993aed5045eda42134d5c28ec989' }, index.h("div", { key: '5497fab2938f875fe9b4cd539a9feaaf907007e1', class: "mrd-text-field" }, this.label && (index.h("label", { key: '4d43255f45de8e7c4596a211797403479d2240b6', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'df3d61fc60e41731e9783dc4484f3c3ca3ea8b13', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: '9bf08d3a77d7616674caf3325b6598490f2d50fc', class: "mrd-text-field__error" }, this.error))));
+        return (index.h(index.Host, { key: 'e9252b251faf98ab190e643b97c13fa32d12ef22' }, index.h("div", { key: '37f4259a111c293f2fe12f321f08c00c25e77feb', class: "mrd-text-field" }, this.label && (index.h("label", { key: 'c59e0346fb71a765ea38629b03c06341567ed210', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'dc09953a672472348719f29904d900966d945843', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: '037653857a372854a16b28ebf8994b23e3e0d696', class: "mrd-text-field__error" }, this.error))));
     }
 };
 MrdTextField.style = mrdTextFieldScss();
@@ -4376,7 +4930,7 @@ const MrdTextareaField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2413906076dee3f48118d44574dadd36bcedadfe' }, index.h("div", { key: '59e369a54e906b09a1062c7c5f701b8bbd631479', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: 'd400c499eb6e35581fc2af9d372917287fcc60eb', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '62765821b5280e71918db0d070a136ef07e1eecd', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: 'f41b73291542d4582c492bce0a89240a171aba32', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: 'eaba5b735be7aa8deebfbc46eac03be970bb1d13', class: "mrd-textarea-field__error" }, this.error))));
+        return (index.h(index.Host, { key: 'fe7824c81e082c3f2c1cf18c11dde20cb1f40f2c' }, index.h("div", { key: 'adf394a7e146d16bc79006873a209b11d88b2e17', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: '1b0dd2b4cf26c55a0af05c67a3178edc0c9d56c4', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '7c8fe88b222af0beed08db492aa9f6d890e0dc5b', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '295968283e94812cb04660117c5bdeaf3647469c', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: '5b5ab61053ab0792d4c249de04bd1d13b51469bf', class: "mrd-textarea-field__error" }, this.error))));
     }
     get el() { return index.getElement(this); }
 };
@@ -4413,7 +4967,7 @@ const MrdTimeField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: 'e93a6492a7bdc17f04f5aac0b8ecd63435a6280f' }, index.h("div", { key: 'b9692c11f21ccd354ba5475e1a60e6afc8ead22e', class: "mrd-time-field" }, this.label && (index.h("label", { key: '668492f16b6b96065fe65204a4f053c2ef2796e5', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'bd2df39240c42b4a337554b0747c7b89eb5d8760', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: '19a81211f3b630436a379f785768d28ffa01c12c', class: "mrd-time-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '579219a478e31325b5a676465807c1d936724a2b' }, index.h("div", { key: '51b25f6e083a29989505c0ad79edbcd3b0060736', class: "mrd-time-field" }, this.label && (index.h("label", { key: '67d98bebb8803deea2d2a4a63f36706789ccd8c7', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: '734741e0db1bdd5886fef37bba3b2f8d7200a0ab', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: '0dbd168d14966dc56a77c97cd8fd8f9b208a4bf5', class: "mrd-time-field__error" }, this.error))));
     }
 };
 MrdTimeField.style = mrdTimeFieldScss();
@@ -4422,6 +4976,7 @@ exports.mrd_boolean_field = MrdBooleanField;
 exports.mrd_currency_field = MrdCurrencyField;
 exports.mrd_date_field = MrdDateField;
 exports.mrd_datetime_field = MrdDatetimeField;
+exports.mrd_document_container = MrdDocumentContainer;
 exports.mrd_document_list = MrdDocumentList;
 exports.mrd_document_view = MrdDocumentView;
 exports.mrd_email_field = MrdEmailField;