@mmlogic/components 0.3.3 → 0.3.5

package/dist/collection/components/mrd-secret-field/mrd-secret-field.js

@@ -0,0 +1,229 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdSecretField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '08f1aa9d8ab9f4e41abb6d3286e5e383427a5409' }, h("div", { key: 'fabe38aa130e211cea81f2c2f227bc15ad3ebf7d', class: "mrd-secret-field" }, this.label && (h("label", { key: '69af8844eff8ce84daa622635c79130fb491eb0b', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
+            ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
+            : (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 && h("span", { key: 'e602004f0bb10916d1015e3c2b003523a292997c', class: "mrd-secret-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-secret-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-secret-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-secret-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/mrd-secret-field/mrd-secret-field.scss

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+}
+
+.mrd-secret-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-secret-field__label {
+  display: block;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-label-font-size);
+  font-weight: var(--mrd-label-font-weight);
+  color: var(--mrd-label-color);
+}
+
+.mrd-secret-field__label--required::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-secret-field__input {
+  display: block;
+  width: 100%;
+  height: var(--mrd-input-height);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  font-family: var(--mrd-font-family);
+  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);
+  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
+  outline: none;
+  appearance: none;
+  box-sizing: border-box;
+}
+
+.mrd-secret-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
+
+.mrd-secret-field__input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-secret-field__input--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-secret-field__input--error:focus {
+  box-shadow: var(--mrd-shadow-focus-error);
+}
+
+.mrd-secret-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+
+.mrd-secret-field__masked {
+  display: block;
+  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;
+}

package/dist/collection/components/mrd-table/mrd-table.js

@@ -21,6 +21,8 @@ export class MrdTable {
         this.debounceTimer = null;
         this.outsideClickHandler = null;
         this.keydownHandler = null;
+        this.createPickerClickHandler = null;
+        this.viewPopoverClickHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
         this.item = null;
@@ -57,6 +59,10 @@ export class MrdTable {
         this.pendingFilter = null;
         /** Viewport-relative position for the filter popup. */
         this.popupPos = { top: 0, left: 0 };
+        /** Whether the create-type picker dropdown is open. */
+        this.createPickerOpen = false;
+        /** Whether the view-switcher popover (full list) is open. */
+        this.viewPopoverOpen = false;
         /** Current scroll offset of the scroll container — drives pagination footer. */
         this.scrollTop = 0;
         /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
@@ -193,10 +199,18 @@ export class MrdTable {
             document.removeEventListener('click', this.outsideClickHandler);
             this.outsideClickHandler = null;
         }
+        if (this.createPickerClickHandler) {
+            document.removeEventListener('click', this.createPickerClickHandler);
+            this.createPickerClickHandler = null;
+        }
         if (this.keydownHandler) {
             document.removeEventListener('keydown', this.keydownHandler);
             this.keydownHandler = null;
         }
+        if (this.viewPopoverClickHandler) {
+            document.removeEventListener('click', this.viewPopoverClickHandler);
+            this.viewPopoverClickHandler = null;
+        }
     }
     componentDidRender() {
         if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
@@ -248,7 +262,7 @@ export class MrdTable {
         }
         return `/excel/${(_d = v.dataClass) !== null && _d !== void 0 ? _d : ''}`;
     }
-    buildActionDetail(action) {
+    buildActionDetail(action, basicType) {
         var _a, _b, _c;
         if (action === 'export') {
             return { action, path: this.buildExcelPath(), qs: this.buildQueryParams(0) };
@@ -258,7 +272,7 @@ export class MrdTable {
             const parentPath = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW'
                 ? `/${(_b = v === null || v === void 0 ? void 0 : v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}`
                 : null;
-            return { action, dataClass: (_c = v === null || v === void 0 ? void 0 : v.dataClass) !== null && _c !== void 0 ? _c : '', parentPath };
+            return Object.assign({ action, dataClass: (_c = v === null || v === void 0 ? void 0 : v.dataClass) !== null && _c !== void 0 ? _c : '', parentPath }, (basicType ? { basicType } : {}));
         }
         return { action };
     }
@@ -356,6 +370,29 @@ export class MrdTable {
             return acc;
         }, []);
     }
+    toggleCreatePicker() {
+        if (this.createPickerOpen) {
+            this.closeCreatePicker();
+        }
+        else {
+            this.createPickerOpen = true;
+            if (this.createPickerClickHandler)
+                document.removeEventListener('click', this.createPickerClickHandler);
+            this.createPickerClickHandler = (ev) => {
+                const wrap = this.el.querySelector('.mrd-table__create-picker-wrap');
+                if (wrap && !wrap.contains(ev.target))
+                    this.closeCreatePicker();
+            };
+            document.addEventListener('click', this.createPickerClickHandler);
+        }
+    }
+    closeCreatePicker() {
+        this.createPickerOpen = false;
+        if (this.createPickerClickHandler) {
+            document.removeEventListener('click', this.createPickerClickHandler);
+            this.createPickerClickHandler = null;
+        }
+    }
     colName(col) {
         var _a;
         return (_a = col.name) !== null && _a !== void 0 ? _a : '';
@@ -767,20 +804,52 @@ export class MrdTable {
         this.activeFilters = new Map();
         this.init();
     }
+    toggleViewPopover(e) {
+        e.stopPropagation();
+        if (this.viewPopoverOpen) {
+            this.viewPopoverOpen = false;
+            if (this.viewPopoverClickHandler) {
+                document.removeEventListener('click', this.viewPopoverClickHandler);
+                this.viewPopoverClickHandler = null;
+            }
+            return;
+        }
+        this.viewPopoverOpen = true;
+        this.viewPopoverClickHandler = () => {
+            this.viewPopoverOpen = false;
+            document.removeEventListener('click', this.viewPopoverClickHandler);
+            this.viewPopoverClickHandler = null;
+        };
+        document.addEventListener('click', this.viewPopoverClickHandler);
+    }
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
+        var _a;
         const filterCount = this.activeFilters.size;
         const actions = this.tableActions;
         const allViews = this.allViews;
         const hasActions = actions.length > 0;
         const hasViewSwitcher = allViews.length > 1;
-        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("select", { class: "mrd-table__view-select", onChange: (e) => {
-                const idx = parseInt(e.target.value, 10);
-                if (!isNaN(idx) && idx !== this.activeViewIdx)
-                    this.handleViewSwitch(idx);
-            } }, allViews.map((v, i) => (h("option", { value: String(i), selected: i === this.activeViewIdx }, v.label)))))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
-            var _a;
-            return (h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit(this.buildActionDetail(a.action)) }, a.icon
+        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("div", { class: "mrd-table__view-switcher" }, h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => this.handleViewSwitch((this.activeViewIdx - 1 + allViews.length) % allViews.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => this.toggleViewPopover(e) }, (_a = allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), this.viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, allViews.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === this.activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
+                if (i !== this.activeViewIdx)
+                    this.handleViewSwitch(i);
+                this.viewPopoverOpen = false;
+                if (this.viewPopoverClickHandler) {
+                    document.removeEventListener('click', this.viewPopoverClickHandler);
+                    this.viewPopoverClickHandler = null;
+                }
+            } }, v.label)))))), h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => this.handleViewSwitch((this.activeViewIdx + 1) % allViews.length) }, "\u25B6")))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
+            var _a, _b, _c;
+            const createTypes = a.action === 'create' ? (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes : null;
+            if (createTypes === null || createTypes === void 0 ? void 0 : createTypes.length) {
+                return (h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, h("button", { class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, onClick: () => this.toggleCreatePicker() }, a.icon
+                    ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
+                    : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)), this.createPickerOpen && (h("div", { class: "mrd-table__create-picker" }, createTypes.map(ct => (h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => {
+                        this.mrdAction.emit(this.buildActionDetail('create', ct.type));
+                        this.closeCreatePicker();
+                    } }, ct.label)))))));
+            }
+            return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_c = a.variant) !== null && _c !== void 0 ? _c : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit(this.buildActionDetail(a.action)) }, a.icon
                 ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
                 : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)));
         })))));
@@ -1222,6 +1291,8 @@ export class MrdTable {
             "openFilterCol": {},
             "pendingFilter": {},
             "popupPos": {},
+            "createPickerOpen": {},
+            "viewPopoverOpen": {},
             "scrollTop": {},
             "textblockModal": {},
             "jsonModal": {},
@@ -1277,8 +1348,8 @@ export class MrdTable {
                     "text": "Fired when a toolbar action button is clicked.\nFor 'export': includes `path` (relative excel path) and `qs` (current sort+filter params).\nFor 'create': includes `dataClass` (target type) and `parentPath` (e.g. /buyers/123 for RELATED_VIEW)."
                 },
                 "complexType": {
-                    "original": "{ action: string; path?: string; qs?: string; dataClass?: string; parentPath?: string | null }",
-                    "resolved": "{ action: string; path?: string | undefined; qs?: string | undefined; dataClass?: string | undefined; parentPath?: string | null | undefined; }",
+                    "original": "{ action: string; path?: string; qs?: string; dataClass?: string; parentPath?: string | null; basicType?: string }",
+                    "resolved": "{ action: string; path?: string | undefined; qs?: string | undefined; dataClass?: string | undefined; parentPath?: string | null | undefined; basicType?: string | undefined; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -183,9 +183,32 @@
   gap: var(--mrd-space-1);
 }
 
-/* ── View title ──────────────────────────────────────────────────────────── */
 /* ── View switcher ───────────────────────────────────────────────────────── */
-.mrd-table__view-select {
+.mrd-table__view-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__view-arrow {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--mrd-space-1);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-xs);
+  line-height: 1;
+}
+
+.mrd-table__view-arrow:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__view-title-wrap {
+  position: relative;
+}
+
+.mrd-table__view-title {
   font-size: var(--mrd-font-size-sm);
   font-weight: 600;
   color: var(--mrd-color-neutral-800);
@@ -194,8 +217,52 @@
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0;
+  padding: 0 var(--mrd-space-1);
   max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mrd-table__view-title:hover {
+  color: var(--mrd-color-primary);
+}
+
+.mrd-table__view-popover {
+  position: absolute;
+  top: calc(100% + var(--mrd-space-1));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  z-index: 100;
+  min-width: 160px;
+  padding: var(--mrd-space-1) 0;
+}
+
+.mrd-table__view-popover-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-700);
+  white-space: nowrap;
+}
+
+.mrd-table__view-popover-item:hover {
+  background: var(--mrd-color-neutral-50);
+}
+
+.mrd-table__view-popover-item--active {
+  font-weight: 600;
+  color: var(--mrd-color-primary);
 }
 
 .mrd-table__action {
@@ -273,6 +340,42 @@
   display: block;
 }
 
+/* ── Create-type picker ──────────────────────────────────────────────────── */
+.mrd-table__create-picker-wrap {
+  position: relative;
+}
+
+.mrd-table__create-picker {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  background: var(--mrd-color-white, #fff);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
+  z-index: 10;
+  min-width: 10rem;
+  padding: var(--mrd-space-1) 0;
+}
+
+.mrd-table__create-picker-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__create-picker-item:hover {
+  background: var(--mrd-color-neutral-50);
+  color: var(--mrd-color-neutral-900);
+}
+
 /* ── Filter toggle active state ────────────────────────────────────────── */
 .mrd-table__filter-toggle--active {
   background: var(--mrd-color-primary);

package/dist/collection/components/mrd-text-field/mrd-text-field.js

@@ -28,7 +28,7 @@ export class MrdTextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'b1ea3dce848a4ad41b60599804c69a35ccd35570' }, h("div", { key: '2e327824843fe02c5851beae96d52f9eb9ee67ce', class: "mrd-text-field" }, this.label && (h("label", { key: '99026834b30a53d7cf715c59099895211ff6ddb7', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '0e56c9115b2016ad3cb3ce8e734297354c70c7e2', 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 && h("span", { key: '0430c32b083484747962147e167b11ed7a1597cc', class: "mrd-text-field__error" }, this.error))));
+        return (h(Host, { key: 'fd4e1f389cb452ab80a1e1c7295d884ca935999e' }, h("div", { key: '7b7bde7a18fcd9b8d5779daab88ddabb45dd8692', class: "mrd-text-field" }, this.label && (h("label", { key: '8e2ad4053473cfad4eae4c4634b863ac5ef32fea', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: 'd32712a6dc2aee4691bc4a580d5ca2ad81e0ff9f', 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 && h("span", { key: '31585dbf82020c81834e1eeada5cd9907a5ead56', class: "mrd-text-field__error" }, this.error))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.js

@@ -66,7 +66,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: '7bc05fae8d48c43b56bde892537930552605727a' }, h("div", { key: '3416e9c5fdf6362602715de8427c5d2ccfa52925', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'c6bd35076738b1a700b53092fb0754250c73e085', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: 'ed0483a25a62399d1ac8ee14bc59e3eb44b91814', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: 'd17c6997602b81e8b7f66f1e5cfb12b4836cb892', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '30a068872e73ca78781c9a5e1fac2c9e3ce30765', class: "mrd-textarea-field__error" }, this.error))));
+        return (h(Host, { key: 'e1fd819c598f01e3986946357ec18d608f2c7adc' }, h("div", { key: '20c28e54e61429655b2d4f297bd84e183ad7e971', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'fa46a20badc35c931563600f24a32e0a8c8c07ad', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: 'ee928eca0a1b85401b346b7fae8adbe9214a7664', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '89b00f3c526623c47f0aff7ad862f70dfdc2fe15', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '458cf8fddee36ddbc384ce4d25765e5aacd3c9d5', class: "mrd-textarea-field__error" }, this.error))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }