@mosaicoo/kanban 0.2.0 → 0.3.0

package/fesm2022/mosaicoo-kanban-designer.mjs

@@ -1,26 +1,380 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, input, output, effect, untracked } from '@angular/core';
-import * as i7 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/material/tabs';
+import { input, ChangeDetectionStrategy, Component, output, signal, viewChild, computed, Injectable, inject, effect, untracked } from '@angular/core';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MosKanbanBoard } from '@mosaicoo/kanban/ui';
+import { CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i6 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i5 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { validateConfig, createBoard } from '@mosaicoo/kanban/core';
-import * as i7$1 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
+
+class MkbIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbIcon, isStandalone: true, selector: "mkb-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      @switch (name()) {
+        @case ('drag') {
+          <circle cx="9" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="19" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="19" r="1.6" fill="currentColor" stroke="none" />
+        }
+        @case ('up') {
+          <path d="M6 14.5 12 8.5l6 6" />
+        }
+        @case ('down') {
+          <path d="M6 9.5 12 15.5l6-6" />
+        }
+        @case ('close') {
+          <path d="M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5" />
+        }
+        @case ('add') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('upload') {
+          <path d="M12 15.5V4M8 7.5 12 3.5l4 4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('download') {
+          <path d="M12 3.5V15M8 11l4 4 4-4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('expand') {
+          <path d="M7 10l5 5 5-5" />
+        }
+        @case ('trash') {
+          <path d="M4 7h16M10 7V4.5h4V7M6.5 7l1 13h9l1-13" />
+        }
+        @case ('check-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M8.5 12.2l2.6 2.6 4.6-5.2" />
+        }
+        @case ('alert-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M12 7.6v5" />
+          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
+        }
+        @case ('eye') {
+          <path d="M2.5 12S6 6.2 12 6.2 21.5 12 21.5 12 18 17.8 12 17.8 2.5 12 2.5 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        }
+        @case ('rows') {
+          <rect x="3.2" y="4.5" width="17.6" height="15" rx="2.4" />
+          <path d="M3.2 9.5h17.6M3.2 14.5h17.6" />
+        }
+        @case ('reset') {
+          <path d="M4 11a8 8 0 1 0 2.6-5.3" />
+          <path d="M3.6 4.2v4.6h4.6" />
+        }
+      }
+    </svg>
+  `, isInline: true, styles: [":host{display:inline-flex;width:1.25em;height:1.25em;flex:none}svg{width:100%;height:100%;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      @switch (name()) {
+        @case ('drag') {
+          <circle cx="9" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="19" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="19" r="1.6" fill="currentColor" stroke="none" />
+        }
+        @case ('up') {
+          <path d="M6 14.5 12 8.5l6 6" />
+        }
+        @case ('down') {
+          <path d="M6 9.5 12 15.5l6-6" />
+        }
+        @case ('close') {
+          <path d="M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5" />
+        }
+        @case ('add') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('upload') {
+          <path d="M12 15.5V4M8 7.5 12 3.5l4 4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('download') {
+          <path d="M12 3.5V15M8 11l4 4 4-4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('expand') {
+          <path d="M7 10l5 5 5-5" />
+        }
+        @case ('trash') {
+          <path d="M4 7h16M10 7V4.5h4V7M6.5 7l1 13h9l1-13" />
+        }
+        @case ('check-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M8.5 12.2l2.6 2.6 4.6-5.2" />
+        }
+        @case ('alert-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M12 7.6v5" />
+          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
+        }
+        @case ('eye') {
+          <path d="M2.5 12S6 6.2 12 6.2 21.5 12 21.5 12 18 17.8 12 17.8 2.5 12 2.5 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        }
+        @case ('rows') {
+          <rect x="3.2" y="4.5" width="17.6" height="15" rx="2.4" />
+          <path d="M3.2 9.5h17.6M3.2 14.5h17.6" />
+        }
+        @case ('reset') {
+          <path d="M4 11a8 8 0 1 0 2.6-5.3" />
+          <path d="M3.6 4.2v4.6h4.6" />
+        }
+      }
+    </svg>
+  `, styles: [":host{display:inline-flex;width:1.25em;height:1.25em;flex:none}svg{width:100%;height:100%;display:block}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
+/** Comparação tolerante: sem caixa e sem acento (ex.: "icone" acha "Ícone"). */
+function normalize(text) {
+    return text
+        .toLocaleLowerCase('pt-BR')
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .trim();
+}
+/**
+ * Combobox do Designer — gatilho no padrão de campo do DS + painel de menu
+ * (§11 dos Componentes: superfície card, itens navitem, selecionado em
+ * primary-container).
+ *
+ * Existe porque `<select>` nativo abre uma lista renderizada pelo SISTEMA,
+ * que não aceita estilo: dentro do DS ela destoa por completo. Serve tanto
+ * seleção única quanto múltipla; no múltiplo o painel não fecha a cada
+ * escolha e o estado é booleano por item (nada de array em [ngModel], que
+ * realimentava a detecção de mudanças).
+ */
+class MkbCombo {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Valor único (string) ou lista de valores quando `multiple`. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Texto exibido quando nada está selecionado. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    valuesChange = output();
+    /** Acima deste número a varredura visual perde para a digitação: o painel
+     * ganha campo de filtro (convenção de ~10 itens). */
+    static SEARCH_THRESHOLD = 10;
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    search = viewChild('search', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    searchable = computed(() => this.options().length > MkbCombo.SEARCH_THRESHOLD, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Opções após o filtro — sem acento e sem caixa, como se espera em pt-BR. */
+    visible = computed(() => {
+        const query = normalize(this.filter());
+        if (!query)
+            return this.options();
+        return this.options().filter((o) => normalize(o.label).includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    onOpen() {
+        this.open.set(true);
+        // o menu foca o primeiro item; com filtro, o cursor deve ir para a busca
+        if (this.searchable()) {
+            setTimeout(() => this.search()?.nativeElement.focus());
+        }
+    }
+    onClose() {
+        this.open.set(false);
+        this.filter.set('');
+    }
+    /** Deixa passar o que o MENU precisa tratar (fechar, navegar, escolher) e
+     * segura o resto, senão o typeahead do Material rouba a digitação. */
+    onSearchKeydown(event) {
+        const passthrough = event.key === 'Escape' ||
+            event.key === 'Enter' ||
+            event.key === 'Tab' ||
+            event.key.startsWith('Arrow');
+        if (!passthrough)
+            event.stopPropagation();
+    }
+    selected = computed(() => {
+        const v = this.value();
+        if (v == null || v === '')
+            return [];
+        return typeof v === 'string' ? [v] : [...v];
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    isSelected(value) {
+        return this.selected().includes(value);
+    }
+    /** Resumo no gatilho: rótulo da opção, lista curta ou contagem. */
+    summary() {
+        const selected = this.selected();
+        if (!selected.length)
+            return '';
+        const labels = selected.map((v) => this.options().find((o) => o.value === v)?.label ?? v);
+        if (!this.multiple())
+            return labels[0] ?? '';
+        return labels.length <= 2 ? labels.join(', ') : `${labels.length} selecionados`;
+    }
+    pick(value, event) {
+        if (!this.multiple()) {
+            this.valueChange.emit(value);
+            return;
+        }
+        // múltiplo: mantém o painel aberto para várias escolhas seguidas
+        event.stopPropagation();
+        const current = this.selected();
+        this.valuesChange.emit(current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCombo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbCombo, isStandalone: true, selector: "mkb-combo", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="mkbd-field mkbd-field-combo" [class.mkbd-combo-open]="open()">
+      <span class="mkbd-label">{{ label() }}</span>
+      <button
+        type="button"
+        class="mkbd-combo-btn"
+        [matMenuTriggerFor]="menu"
+        (menuOpened)="onOpen()"
+        (menuClosed)="onClose()"
+        [attr.aria-label]="label()"
+      >
+        <span class="mkbd-combo-value" [class.mkbd-combo-empty]="!summary()">
+          {{ summary() || placeholder() }}
+        </span>
+        <mkb-icon name="expand" class="mkbd-combo-caret" />
+      </button>
+    </div>
+
+    <mat-menu #menu="matMenu" class="mkbd-menu">
+      @if (searchable()) {
+        <div class="mkbd-menu-search" (click)="$event.stopPropagation()">
+          <input
+            #search
+            type="text"
+            [value]="filter()"
+            (input)="filter.set($any($event.target).value)"
+            (keydown)="onSearchKeydown($event)"
+            [attr.aria-label]="'Filtrar ' + label()"
+            [placeholder]="'Filtrar ' + options().length + ' opções…'"
+          />
+          @if (filter()) {
+            <span class="mkbd-menu-count">{{ visible().length }}/{{ options().length }}</span>
+          }
+        </div>
+      }
+
+      @for (opt of visible(); track opt.value) {
+        <button
+          mat-menu-item
+          type="button"
+          [role]="multiple() ? 'menuitemcheckbox' : 'menuitemradio'"
+          [attr.aria-checked]="isSelected(opt.value)"
+          [class.mkbd-menu-item-active]="isSelected(opt.value)"
+          (click)="pick(opt.value, $event)"
+        >
+          @if (multiple()) {
+            <span
+              class="mkbd-menu-check"
+              [class.mkbd-menu-check-on]="isSelected(opt.value)"
+              aria-hidden="true"
+            ></span>
+          }
+          {{ opt.label }}
+        </button>
+      } @empty {
+        <p class="mkbd-menu-empty">Nenhuma opção corresponde a “{{ filter() }}”.</p>
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block;min-width:0}:host .mkbd-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCombo, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-combo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MkbIcon], template: `
+    <div class="mkbd-field mkbd-field-combo" [class.mkbd-combo-open]="open()">
+      <span class="mkbd-label">{{ label() }}</span>
+      <button
+        type="button"
+        class="mkbd-combo-btn"
+        [matMenuTriggerFor]="menu"
+        (menuOpened)="onOpen()"
+        (menuClosed)="onClose()"
+        [attr.aria-label]="label()"
+      >
+        <span class="mkbd-combo-value" [class.mkbd-combo-empty]="!summary()">
+          {{ summary() || placeholder() }}
+        </span>
+        <mkb-icon name="expand" class="mkbd-combo-caret" />
+      </button>
+    </div>
+
+    <mat-menu #menu="matMenu" class="mkbd-menu">
+      @if (searchable()) {
+        <div class="mkbd-menu-search" (click)="$event.stopPropagation()">
+          <input
+            #search
+            type="text"
+            [value]="filter()"
+            (input)="filter.set($any($event.target).value)"
+            (keydown)="onSearchKeydown($event)"
+            [attr.aria-label]="'Filtrar ' + label()"
+            [placeholder]="'Filtrar ' + options().length + ' opções…'"
+          />
+          @if (filter()) {
+            <span class="mkbd-menu-count">{{ visible().length }}/{{ options().length }}</span>
+          }
+        </div>
+      }
+
+      @for (opt of visible(); track opt.value) {
+        <button
+          mat-menu-item
+          type="button"
+          [role]="multiple() ? 'menuitemcheckbox' : 'menuitemradio'"
+          [attr.aria-checked]="isSelected(opt.value)"
+          [class.mkbd-menu-item-active]="isSelected(opt.value)"
+          (click)="pick(opt.value, $event)"
+        >
+          @if (multiple()) {
+            <span
+              class="mkbd-menu-check"
+              [class.mkbd-menu-check-on]="isSelected(opt.value)"
+              aria-hidden="true"
+            ></span>
+          }
+          {{ opt.label }}
+        </button>
+      } @empty {
+        <p class="mkbd-menu-empty">Nenhuma opção corresponde a “{{ filter() }}”.</p>
+      }
+    </mat-menu>
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block;min-width:0}:host .mkbd-field{width:100%}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }], search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }] } });
 
 /** Espelho de styles/kanban-tokens.css (defaults de fábrica). */
 const TOKEN_GROUPS = [
@@ -411,10 +765,24 @@ function blankBlock(type) {
 class MkbCardEditor {
     store = inject(DesignerStore);
     config = this.store.config;
-    blockTypes = BLOCK_TYPE_LABELS;
-    tones = ['', 'neutral', 'info', 'success', 'warning', 'danger'];
+    blockTypeOptions = BLOCK_TYPE_LABELS.map((t) => ({
+        value: t.type,
+        label: t.label,
+    }));
+    toneOptions = ['', 'neutral', 'info', 'success', 'warning', 'danger'].map((tone) => ({ value: tone, label: tone || '—' }));
     allCapabilities = ['check', 'reorder', 'move-across', 'action'];
-    newType = 'text';
+    /** Opções por descritor de campo — memoizadas: os defs são constantes do
+     * módulo, então a referência da lista precisa ser estável entre ciclos. */
+    selectOptionsCache = new WeakMap();
+    selectOptions(def) {
+        let options = this.selectOptionsCache.get(def);
+        if (!options) {
+            options = (def.options ?? []).map((opt) => ({ value: opt, label: opt || '—' }));
+            this.selectOptionsCache.set(def, options);
+        }
+        return options;
+    }
+    newType = signal('text', ...(ngDevMode ? [{ debugName: "newType" }] : /* istanbul ignore next */ []));
     selectedPath = signal(null, ...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
     jsonError = signal(null, ...(ngDevMode ? [{ debugName: "jsonError" }] : /* istanbul ignore next */ []));
     selectedBlock = computed(() => {
@@ -468,7 +836,7 @@ class MkbCardEditor {
         return parent?.type === 'row' ? parent.blocks : null;
     }
     add(intoSelectedRow) {
-        const block = blankBlock(this.newType);
+        const block = blankBlock(this.newType());
         const rowPath = intoSelectedRow ? this.selectedPath() : null;
         this.store.update((d) => {
             d.card ??= { blocks: [] };
@@ -495,6 +863,13 @@ class MkbCardEditor {
         });
         this.selectedPath.set(null);
     }
+    /** Arraste (CDK): `parentPath` vazio = lista raiz; [i] = filhos da row i. */
+    dropBlock(parentPath, event) {
+        const { previousIndex, currentIndex } = event;
+        if (previousIndex === currentIndex)
+            return;
+        this.move([...parentPath, previousIndex], currentIndex - previousIndex);
+    }
     move(path, delta) {
         const index = path[path.length - 1];
         const target = index + delta;
@@ -664,153 +1039,217 @@ class MkbCardEditor {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCardEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbCardEditor, isStandalone: true, selector: "mkb-card-editor", ngImport: i0, template: `
-    <div class="mkbd-row">
-      <mat-slide-toggle
-        [ngModel]="config().card?.dragHandle ?? false"
-        (ngModelChange)="setDragHandle($event)"
-      >
-        Arrastar só pela alça ⠿
-      </mat-slide-toggle>
+    <div class="mkbd-options">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().card?.dragHandle ?? false"
+          (ngModelChange)="setDragHandle($event)"
+        />
+        Arrastar só pela alça
+      </label>
     </div>
 
-    <h3 class="mkbd-h">Blocos do cartão</h3>
-    <div class="mkbd-tree" role="tree" aria-label="Blocos do cartão">
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Blocos do cartão</span>
+      <span class="mkbd-count">{{ blocks().length }}</span>
+    </div>
+
+    <!-- Listas AUTÔNOMAS (sem cdkDropListGroup): a raiz e os filhos de cada
+         linha reordenam dentro de si. Conectar ancestral com descendente foi
+         o que quebrou o DnD do board no spike D0. -->
+    <div
+      class="mkbd-rows"
+      role="tree"
+      aria-label="Blocos do cartão"
+      cdkDropList
+      (cdkDropListDropped)="dropBlock([], $event)"
+    >
       @for (block of blocks(); track $index; let i = $index) {
-        <ng-container
-          *ngTemplateOutlet="blockRow; context: { block, path: [i], siblings: blocks().length }"
-        />
+        <!-- cdkDrag e a alça ficam AQUI, no mesmo template do cdkDropList:
+             as queries do CDK seguem a posição de DECLARAÇÃO, então um
+             ng-template com outlet não é registrado pela lista. Só o CORPO
+             da linha continua fatorado no template. -->
+        <div
+          class="mkbd-row mkbd-block"
+          role="treeitem"
+          tabindex="0"
+          cdkDrag
+          cdkDragLockAxis="y"
+          [class.mkbd-row-selected]="isSelected([i])"
+          [attr.aria-selected]="isSelected([i])"
+          (click)="select([i])"
+          (keydown.enter)="select([i])"
+        >
+          <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(block.type)">
+            <mkb-icon name="drag" />
+          </span>
+          <ng-container
+            *ngTemplateOutlet="blockBody; context: { block, path: [i], siblings: blocks().length }"
+          />
+        </div>
+
         @if (block.type === 'row') {
-          @for (child of rowChildren(block); track $index; let j = $index) {
-            <ng-container
-              *ngTemplateOutlet="
-                blockRow;
-                context: { block: child, path: [i, j], siblings: rowChildren(block).length }
-              "
-            />
-          }
+          <div
+            class="mkbd-rows mkbd-nested"
+            cdkDropList
+            (cdkDropListDropped)="dropBlock([i], $event)"
+          >
+            @for (child of rowChildren(block); track $index; let j = $index) {
+              <div
+                class="mkbd-row mkbd-block mkbd-block-child"
+                role="treeitem"
+                tabindex="0"
+                cdkDrag
+                cdkDragLockAxis="y"
+                [class.mkbd-row-selected]="isSelected([i, j])"
+                [attr.aria-selected]="isSelected([i, j])"
+                (click)="select([i, j])"
+                (keydown.enter)="select([i, j])"
+              >
+                <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(child.type)">
+                  <mkb-icon name="drag" />
+                </span>
+                <ng-container
+                  *ngTemplateOutlet="
+                    blockBody;
+                    context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+                  "
+                />
+              </div>
+            }
+          </div>
         }
       } @empty {
         <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
       }
     </div>
 
-    <ng-template #blockRow let-block="block" let-path="path" let-siblings="siblings">
-      <div
-        class="mkbd-node"
-        role="treeitem"
-        tabindex="0"
-        [class.mkbd-node-child]="path.length > 1"
-        [class.mkbd-node-selected]="isSelected(path)"
-        [attr.aria-selected]="isSelected(path)"
-        (click)="select(path)"
-        (keydown.enter)="select(path)"
-      >
-        <span class="mkbd-node-type">{{ typeLabel(block.type) }}</span>
-        <span class="mkbd-node-summary">{{ summary(block) }}</span>
-        <span class="mkbd-spacer"></span>
-        <button matIconButton type="button" (click)="move(path, -1); $event.stopPropagation()" [disabled]="path[path.length - 1] === 0" aria-label="Subir bloco">↑</button>
-        <button matIconButton type="button" (click)="move(path, 1); $event.stopPropagation()" [disabled]="path[path.length - 1] === siblings - 1" aria-label="Descer bloco">↓</button>
-        <button matIconButton type="button" (click)="remove(path); $event.stopPropagation()" aria-label="Remover bloco">✕</button>
+    <!-- Corpo da linha (sem a alça): compartilhado pela raiz e pelos filhos. -->
+    <ng-template #blockBody let-block="block" let-path="path" let-siblings="siblings">
+      <span class="mkbd-block-type">{{ typeLabel(block.type) }}</span>
+      <span class="mkbd-block-summary">{{ summary(block) }}</span>
+      <div class="mkbd-row-ctrls">
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, -1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === 0"
+          aria-label="Mover para cima"
+        >
+          <mkb-icon name="up" />
+        </button>
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, 1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === siblings - 1"
+          aria-label="Mover para baixo"
+        >
+          <mkb-icon name="down" />
+        </button>
+        <button
+          class="mkbd-icon-btn mkbd-icon-btn-danger"
+          type="button"
+          (click)="remove(path); $event.stopPropagation()"
+          aria-label="Remover bloco"
+        >
+          <mkb-icon name="close" />
+        </button>
       </div>
     </ng-template>
 
-    <div class="mkbd-row mkbd-mt">
-      <mat-form-field appearance="outline" class="mkbd-slim">
-        <mat-label>Tipo do novo bloco</mat-label>
-        <mat-select [(ngModel)]="newType">
-          @for (t of blockTypes; track t.type) {
-            <mat-option [value]="t.type">{{ t.label }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <button matButton type="button" (click)="add(false)">+ Adicionar</button>
+    <div class="mkbd-new-block">
+      <mkb-combo
+        label="Tipo do novo bloco"
+        [options]="blockTypeOptions"
+        [value]="newType()"
+        (valueChange)="newType.set($any($event))"
+      />
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="add(false)">
+        <mkb-icon name="add" />
+        Adicionar
+      </button>
       @if (selectedIsRow()) {
-        <button matButton type="button" (click)="add(true)">+ Adicionar DENTRO da linha</button>
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" (click)="add(true)">
+          <mkb-icon name="add" />
+          Dentro da linha
+        </button>
       }
     </div>
 
     @if (selectedBlock(); as block) {
-      <h3 class="mkbd-h">Propriedades — {{ typeLabel(block.type) }}</h3>
-      <div class="mkbd-props">
+      <div class="mkbd-section">
+        <span class="mkbd-overline">Propriedades · {{ typeLabel(block.type) }}</span>
+      </div>
+      <div class="mkbd-stack">
         @for (def of fieldsFor(block.type); track def.key) {
           @switch (def.kind) {
             @case ('text') {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   [ngModel]="str(block, def.key)"
                   (ngModelChange)="setProp(def.key, $event || undefined)"
+                  [placeholder]="def.hint ?? ''"
                 />
-                @if (def.hint) { <mat-hint>{{ def.hint }}</mat-hint> }
-              </mat-form-field>
+              </label>
             }
             @case ('number') {
-              <mat-form-field appearance="outline" class="mkbd-tiny">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field mkbd-field-sm">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   type="number"
                   [ngModel]="num(block, def.key)"
                   (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
                 />
-              </mat-form-field>
+              </label>
             }
             @case ('toggle') {
-              <mat-slide-toggle
-                [ngModel]="bool(block, def.key)"
-                (ngModelChange)="setProp(def.key, $event || undefined)"
-              >
+              <label class="mkbd-switch mkbd-switch-boxed">
+                <input
+                  type="checkbox"
+                  [ngModel]="bool(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
                 {{ def.label }}
-              </mat-slide-toggle>
+              </label>
             }
             @case ('select') {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>{{ def.label }}</mat-label>
-                <mat-select
-                  [ngModel]="str(block, def.key)"
-                  (ngModelChange)="setProp(def.key, $event || undefined)"
-                >
-                  @for (opt of def.options; track opt) {
-                    <mat-option [value]="opt">{{ opt || '—' }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
+              <mkb-combo
+                [label]="def.label"
+                [options]="selectOptions(def)"
+                [value]="str(block, def.key)"
+                (valueChange)="setProp(def.key, $event || undefined)"
+              />
             }
             @case ('csv') {
-              <mat-form-field appearance="outline" class="mkbd-grow">
-                <mat-label>{{ def.label }}</mat-label>
-                <input
-                  matInput
-                  [ngModel]="csv(block, def.key)"
-                  (ngModelChange)="setCsv(def.key, $event)"
-                />
-              </mat-form-field>
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input [ngModel]="csv(block, def.key)" (ngModelChange)="setCsv(def.key, $event)" />
+              </label>
             }
             @case ('json') {
-              <mat-form-field appearance="outline" class="mkbd-full">
-                <mat-label>{{ def.label }}</mat-label>
-                <textarea
-                  matInput
-                  rows="4"
-                  [value]="json(block, def.key)"
-                  (change)="setJson(def.key, $event)"
-                ></textarea>
-                <mat-hint [class.mkbd-error]="jsonError()">
-                  {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
-                </mat-hint>
-              </mat-form-field>
+              <label class="mkbd-field mkbd-field-area mkbd-field-full">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <textarea rows="4" [value]="json(block, def.key)" (change)="setJson(def.key, $event)"></textarea>
+              </label>
+              <p class="mkbd-hint mkbd-full" [class.mkbd-error-text]="jsonError()">
+                {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+              </p>
             }
             @case ('capabilities') {
               <div class="mkbd-caps">
-                <span class="mkbd-caps-label">{{ def.label }}:</span>
+                <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (cap of allCapabilities; track cap) {
-                  <mat-checkbox
-                    [ngModel]="hasCapability(block, cap)"
-                    (ngModelChange)="toggleCapability(cap, $event)"
-                  >
+                  <label class="mkbd-check">
+                    <input
+                      type="checkbox"
+                      [ngModel]="hasCapability(block, cap)"
+                      (ngModelChange)="toggleCapability(cap, $event)"
+                    />
                     {{ cap }}
-                  </mat-checkbox>
+                  </label>
                 }
               </div>
             }
@@ -818,240 +1257,313 @@ class MkbCardEditor {
               <div class="mkbd-sub">
                 <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (fact of facts(block); track $index; let fi = $index) {
-                  <div class="mkbd-subrow">
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Campo</mat-label>
-                      <input matInput [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Ícone</mat-label>
-                      <input matInput [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Rótulo</mat-label>
-                      <input matInput [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Prefixo</mat-label>
-                      <input matInput [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Sufixo</mat-label>
-                      <input matInput [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
-                    </mat-form-field>
-                    <button matIconButton type="button" (click)="removeListItem(def.key, fi)" aria-label="Remover fato">✕</button>
+                  <div class="mkbd-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Campo</span>
+                      <input [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Prefixo</span>
+                      <input [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Sufixo</span>
+                      <input [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, fi)"
+                      aria-label="Remover fato"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
                   </div>
                 }
-                <button matButton type="button" (click)="addFact(def.key)">+ Fato</button>
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addFact(def.key)">
+                  <mkb-icon name="add" />
+                  Fato
+                </button>
               </div>
             }
             @case ('card-actions') {
               <div class="mkbd-sub">
                 <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (action of actions(block, def.key); track $index; let ai = $index) {
-                  <div class="mkbd-subrow">
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Id</mat-label>
-                      <input matInput [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Rótulo</mat-label>
-                      <input matInput [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Ícone</mat-label>
-                      <input matInput [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Tom</mat-label>
-                      <mat-select [ngModel]="action.tone ?? ''" (ngModelChange)="setAction(def.key, ai, 'tone', $event || undefined)">
-                        @for (tone of tones; track tone) {
-                          <mat-option [value]="tone">{{ tone || '—' }}</mat-option>
-                        }
-                      </mat-select>
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Só nas colunas</mat-label>
+                  <div class="mkbd-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm mkbd-field-mono">
+                      <span class="mkbd-label">Id</span>
+                      <input [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </label>
+                    <mkb-combo
+                      class="mkbd-field-sm"
+                      label="Tom"
+                      [options]="toneOptions"
+                      [value]="action.tone ?? ''"
+                      (valueChange)="setAction(def.key, ai, 'tone', $event || undefined)"
+                    />
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Só nas colunas</span>
                       <input
-                        matInput
                         placeholder="col-a, col-b"
                         [ngModel]="whenColumns(action)"
                         (ngModelChange)="setActionWhen(def.key, ai, $event)"
                       />
-                    </mat-form-field>
-                    <button matIconButton type="button" (click)="removeListItem(def.key, ai)" aria-label="Remover ação">✕</button>
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, ai)"
+                      aria-label="Remover ação"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
                   </div>
                 }
-                <button matButton type="button" (click)="addAction(def.key)">+ Ação</button>
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addAction(def.key)">
+                  <mkb-icon name="add" />
+                  Ação
+                </button>
               </div>
             }
           }
         }
       </div>
     } @else {
-      <p class="mkbd-hint mkbd-mt">Selecione um bloco para editar as propriedades.</p>
+      <p class="mkbd-hint">Selecione um bloco para editar as propriedades.</p>
     }
-  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:12px}.mkbd-tree{display:flex;flex-direction:column;gap:3px}.mkbd-node{display:flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;cursor:pointer;background:var(--mkb-card-bg, #fff)}.mkbd-node:focus-visible{outline:2px solid var(--mkb-accent, #5e35b1);outline-offset:1px}.mkbd-node-child{margin-left:26px}.mkbd-node-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:inset 2px 0 0 var(--mkb-accent, #5e35b1)}.mkbd-node-type{font-size:12px;font-weight:600}.mkbd-node-summary{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-spacer{flex:1}.mkbd-props{display:flex;flex-wrap:wrap;gap:18px 10px;align-items:center}.mkbd-slim{width:200px}.mkbd-tiny{width:110px}.mkbd-tiny2{width:130px}.mkbd-grow{flex:1;min-width:220px}.mkbd-full{width:100%}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:4px}.mkbd-subrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mkbd-caps-label{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-block{grid-template-columns:22px auto minmax(0,1fr) auto;cursor:pointer;border-left-color:var(--mkbd-border-strong)}.mkbd-block:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-block-child{border-left-color:var(--mkbd-primary-outline)}.mkbd-nested{margin-left:26px;margin-top:3px;gap:3px}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-block.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-block.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .mkbd-block:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-block-type{font-size:12.5px;font-weight:500}.mkbd-block-summary{font:500 11.5px var(--mkbd-font-mono);color:var(--mkbd-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-new-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.mkbd-new-block .mkbd-field{width:230px}.mkbd-new-block .mkbd-field>.mkbd-label{background:var(--mkbd-canvas)}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:8px}.mkbd-subrow{flex-wrap:wrap}.mkbd-caps-label{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-full{flex:1 0 100%;margin:0}.mkbd-error-text{color:var(--mkbd-error)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCardEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mkb-card-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet,
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatSlideToggleModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                    ], template: `
-    <div class="mkbd-row">
-      <mat-slide-toggle
-        [ngModel]="config().card?.dragHandle ?? false"
-        (ngModelChange)="setDragHandle($event)"
-      >
-        Arrastar só pela alça ⠿
-      </mat-slide-toggle>
+            args: [{ selector: 'mkb-card-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FormsModule, CdkDropList, CdkDrag, CdkDragHandle, MkbCombo, MkbIcon], template: `
+    <div class="mkbd-options">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().card?.dragHandle ?? false"
+          (ngModelChange)="setDragHandle($event)"
+        />
+        Arrastar só pela alça
+      </label>
     </div>
 
-    <h3 class="mkbd-h">Blocos do cartão</h3>
-    <div class="mkbd-tree" role="tree" aria-label="Blocos do cartão">
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Blocos do cartão</span>
+      <span class="mkbd-count">{{ blocks().length }}</span>
+    </div>
+
+    <!-- Listas AUTÔNOMAS (sem cdkDropListGroup): a raiz e os filhos de cada
+         linha reordenam dentro de si. Conectar ancestral com descendente foi
+         o que quebrou o DnD do board no spike D0. -->
+    <div
+      class="mkbd-rows"
+      role="tree"
+      aria-label="Blocos do cartão"
+      cdkDropList
+      (cdkDropListDropped)="dropBlock([], $event)"
+    >
       @for (block of blocks(); track $index; let i = $index) {
-        <ng-container
-          *ngTemplateOutlet="blockRow; context: { block, path: [i], siblings: blocks().length }"
-        />
+        <!-- cdkDrag e a alça ficam AQUI, no mesmo template do cdkDropList:
+             as queries do CDK seguem a posição de DECLARAÇÃO, então um
+             ng-template com outlet não é registrado pela lista. Só o CORPO
+             da linha continua fatorado no template. -->
+        <div
+          class="mkbd-row mkbd-block"
+          role="treeitem"
+          tabindex="0"
+          cdkDrag
+          cdkDragLockAxis="y"
+          [class.mkbd-row-selected]="isSelected([i])"
+          [attr.aria-selected]="isSelected([i])"
+          (click)="select([i])"
+          (keydown.enter)="select([i])"
+        >
+          <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(block.type)">
+            <mkb-icon name="drag" />
+          </span>
+          <ng-container
+            *ngTemplateOutlet="blockBody; context: { block, path: [i], siblings: blocks().length }"
+          />
+        </div>
+
         @if (block.type === 'row') {
-          @for (child of rowChildren(block); track $index; let j = $index) {
-            <ng-container
-              *ngTemplateOutlet="
-                blockRow;
-                context: { block: child, path: [i, j], siblings: rowChildren(block).length }
-              "
-            />
-          }
+          <div
+            class="mkbd-rows mkbd-nested"
+            cdkDropList
+            (cdkDropListDropped)="dropBlock([i], $event)"
+          >
+            @for (child of rowChildren(block); track $index; let j = $index) {
+              <div
+                class="mkbd-row mkbd-block mkbd-block-child"
+                role="treeitem"
+                tabindex="0"
+                cdkDrag
+                cdkDragLockAxis="y"
+                [class.mkbd-row-selected]="isSelected([i, j])"
+                [attr.aria-selected]="isSelected([i, j])"
+                (click)="select([i, j])"
+                (keydown.enter)="select([i, j])"
+              >
+                <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(child.type)">
+                  <mkb-icon name="drag" />
+                </span>
+                <ng-container
+                  *ngTemplateOutlet="
+                    blockBody;
+                    context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+                  "
+                />
+              </div>
+            }
+          </div>
         }
       } @empty {
         <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
       }
     </div>
 
-    <ng-template #blockRow let-block="block" let-path="path" let-siblings="siblings">
-      <div
-        class="mkbd-node"
-        role="treeitem"
-        tabindex="0"
-        [class.mkbd-node-child]="path.length > 1"
-        [class.mkbd-node-selected]="isSelected(path)"
-        [attr.aria-selected]="isSelected(path)"
-        (click)="select(path)"
-        (keydown.enter)="select(path)"
-      >
-        <span class="mkbd-node-type">{{ typeLabel(block.type) }}</span>
-        <span class="mkbd-node-summary">{{ summary(block) }}</span>
-        <span class="mkbd-spacer"></span>
-        <button matIconButton type="button" (click)="move(path, -1); $event.stopPropagation()" [disabled]="path[path.length - 1] === 0" aria-label="Subir bloco">↑</button>
-        <button matIconButton type="button" (click)="move(path, 1); $event.stopPropagation()" [disabled]="path[path.length - 1] === siblings - 1" aria-label="Descer bloco">↓</button>
-        <button matIconButton type="button" (click)="remove(path); $event.stopPropagation()" aria-label="Remover bloco">✕</button>
+    <!-- Corpo da linha (sem a alça): compartilhado pela raiz e pelos filhos. -->
+    <ng-template #blockBody let-block="block" let-path="path" let-siblings="siblings">
+      <span class="mkbd-block-type">{{ typeLabel(block.type) }}</span>
+      <span class="mkbd-block-summary">{{ summary(block) }}</span>
+      <div class="mkbd-row-ctrls">
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, -1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === 0"
+          aria-label="Mover para cima"
+        >
+          <mkb-icon name="up" />
+        </button>
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, 1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === siblings - 1"
+          aria-label="Mover para baixo"
+        >
+          <mkb-icon name="down" />
+        </button>
+        <button
+          class="mkbd-icon-btn mkbd-icon-btn-danger"
+          type="button"
+          (click)="remove(path); $event.stopPropagation()"
+          aria-label="Remover bloco"
+        >
+          <mkb-icon name="close" />
+        </button>
       </div>
     </ng-template>
 
-    <div class="mkbd-row mkbd-mt">
-      <mat-form-field appearance="outline" class="mkbd-slim">
-        <mat-label>Tipo do novo bloco</mat-label>
-        <mat-select [(ngModel)]="newType">
-          @for (t of blockTypes; track t.type) {
-            <mat-option [value]="t.type">{{ t.label }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <button matButton type="button" (click)="add(false)">+ Adicionar</button>
+    <div class="mkbd-new-block">
+      <mkb-combo
+        label="Tipo do novo bloco"
+        [options]="blockTypeOptions"
+        [value]="newType()"
+        (valueChange)="newType.set($any($event))"
+      />
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="add(false)">
+        <mkb-icon name="add" />
+        Adicionar
+      </button>
       @if (selectedIsRow()) {
-        <button matButton type="button" (click)="add(true)">+ Adicionar DENTRO da linha</button>
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" (click)="add(true)">
+          <mkb-icon name="add" />
+          Dentro da linha
+        </button>
       }
     </div>
 
     @if (selectedBlock(); as block) {
-      <h3 class="mkbd-h">Propriedades — {{ typeLabel(block.type) }}</h3>
-      <div class="mkbd-props">
+      <div class="mkbd-section">
+        <span class="mkbd-overline">Propriedades · {{ typeLabel(block.type) }}</span>
+      </div>
+      <div class="mkbd-stack">
         @for (def of fieldsFor(block.type); track def.key) {
           @switch (def.kind) {
             @case ('text') {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   [ngModel]="str(block, def.key)"
                   (ngModelChange)="setProp(def.key, $event || undefined)"
+                  [placeholder]="def.hint ?? ''"
                 />
-                @if (def.hint) { <mat-hint>{{ def.hint }}</mat-hint> }
-              </mat-form-field>
+              </label>
             }
             @case ('number') {
-              <mat-form-field appearance="outline" class="mkbd-tiny">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field mkbd-field-sm">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   type="number"
                   [ngModel]="num(block, def.key)"
                   (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
                 />
-              </mat-form-field>
+              </label>
             }
             @case ('toggle') {
-              <mat-slide-toggle
-                [ngModel]="bool(block, def.key)"
-                (ngModelChange)="setProp(def.key, $event || undefined)"
-              >
+              <label class="mkbd-switch mkbd-switch-boxed">
+                <input
+                  type="checkbox"
+                  [ngModel]="bool(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
                 {{ def.label }}
-              </mat-slide-toggle>
+              </label>
             }
             @case ('select') {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>{{ def.label }}</mat-label>
-                <mat-select
-                  [ngModel]="str(block, def.key)"
-                  (ngModelChange)="setProp(def.key, $event || undefined)"
-                >
-                  @for (opt of def.options; track opt) {
-                    <mat-option [value]="opt">{{ opt || '—' }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
+              <mkb-combo
+                [label]="def.label"
+                [options]="selectOptions(def)"
+                [value]="str(block, def.key)"
+                (valueChange)="setProp(def.key, $event || undefined)"
+              />
             }
             @case ('csv') {
-              <mat-form-field appearance="outline" class="mkbd-grow">
-                <mat-label>{{ def.label }}</mat-label>
-                <input
-                  matInput
-                  [ngModel]="csv(block, def.key)"
-                  (ngModelChange)="setCsv(def.key, $event)"
-                />
-              </mat-form-field>
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input [ngModel]="csv(block, def.key)" (ngModelChange)="setCsv(def.key, $event)" />
+              </label>
             }
             @case ('json') {
-              <mat-form-field appearance="outline" class="mkbd-full">
-                <mat-label>{{ def.label }}</mat-label>
-                <textarea
-                  matInput
-                  rows="4"
-                  [value]="json(block, def.key)"
-                  (change)="setJson(def.key, $event)"
-                ></textarea>
-                <mat-hint [class.mkbd-error]="jsonError()">
-                  {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
-                </mat-hint>
-              </mat-form-field>
+              <label class="mkbd-field mkbd-field-area mkbd-field-full">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <textarea rows="4" [value]="json(block, def.key)" (change)="setJson(def.key, $event)"></textarea>
+              </label>
+              <p class="mkbd-hint mkbd-full" [class.mkbd-error-text]="jsonError()">
+                {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+              </p>
             }
             @case ('capabilities') {
               <div class="mkbd-caps">
-                <span class="mkbd-caps-label">{{ def.label }}:</span>
+                <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (cap of allCapabilities; track cap) {
-                  <mat-checkbox
-                    [ngModel]="hasCapability(block, cap)"
-                    (ngModelChange)="toggleCapability(cap, $event)"
-                  >
+                  <label class="mkbd-check">
+                    <input
+                      type="checkbox"
+                      [ngModel]="hasCapability(block, cap)"
+                      (ngModelChange)="toggleCapability(cap, $event)"
+                    />
                     {{ cap }}
-                  </mat-checkbox>
+                  </label>
                 }
               </div>
             }
@@ -1059,80 +1571,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
               <div class="mkbd-sub">
                 <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (fact of facts(block); track $index; let fi = $index) {
-                  <div class="mkbd-subrow">
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Campo</mat-label>
-                      <input matInput [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Ícone</mat-label>
-                      <input matInput [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Rótulo</mat-label>
-                      <input matInput [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Prefixo</mat-label>
-                      <input matInput [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Sufixo</mat-label>
-                      <input matInput [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
-                    </mat-form-field>
-                    <button matIconButton type="button" (click)="removeListItem(def.key, fi)" aria-label="Remover fato">✕</button>
+                  <div class="mkbd-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Campo</span>
+                      <input [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Prefixo</span>
+                      <input [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Sufixo</span>
+                      <input [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, fi)"
+                      aria-label="Remover fato"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
                   </div>
                 }
-                <button matButton type="button" (click)="addFact(def.key)">+ Fato</button>
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addFact(def.key)">
+                  <mkb-icon name="add" />
+                  Fato
+                </button>
               </div>
             }
             @case ('card-actions') {
               <div class="mkbd-sub">
                 <span class="mkbd-caps-label">{{ def.label }}</span>
                 @for (action of actions(block, def.key); track $index; let ai = $index) {
-                  <div class="mkbd-subrow">
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Id</mat-label>
-                      <input matInput [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Rótulo</mat-label>
-                      <input matInput [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Ícone</mat-label>
-                      <input matInput [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Tom</mat-label>
-                      <mat-select [ngModel]="action.tone ?? ''" (ngModelChange)="setAction(def.key, ai, 'tone', $event || undefined)">
-                        @for (tone of tones; track tone) {
-                          <mat-option [value]="tone">{{ tone || '—' }}</mat-option>
-                        }
-                      </mat-select>
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="mkbd-tiny2">
-                      <mat-label>Só nas colunas</mat-label>
+                  <div class="mkbd-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm mkbd-field-mono">
+                      <span class="mkbd-label">Id</span>
+                      <input [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </label>
+                    <mkb-combo
+                      class="mkbd-field-sm"
+                      label="Tom"
+                      [options]="toneOptions"
+                      [value]="action.tone ?? ''"
+                      (valueChange)="setAction(def.key, ai, 'tone', $event || undefined)"
+                    />
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Só nas colunas</span>
                       <input
-                        matInput
                         placeholder="col-a, col-b"
                         [ngModel]="whenColumns(action)"
                         (ngModelChange)="setActionWhen(def.key, ai, $event)"
                       />
-                    </mat-form-field>
-                    <button matIconButton type="button" (click)="removeListItem(def.key, ai)" aria-label="Remover ação">✕</button>
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, ai)"
+                      aria-label="Remover ação"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
                   </div>
                 }
-                <button matButton type="button" (click)="addAction(def.key)">+ Ação</button>
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addAction(def.key)">
+                  <mkb-icon name="add" />
+                  Ação
+                </button>
               </div>
             }
           }
         }
       </div>
     } @else {
-      <p class="mkbd-hint mkbd-mt">Selecione um bloco para editar as propriedades.</p>
+      <p class="mkbd-hint">Selecione um bloco para editar as propriedades.</p>
     }
-  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:12px}.mkbd-tree{display:flex;flex-direction:column;gap:3px}.mkbd-node{display:flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;cursor:pointer;background:var(--mkb-card-bg, #fff)}.mkbd-node:focus-visible{outline:2px solid var(--mkb-accent, #5e35b1);outline-offset:1px}.mkbd-node-child{margin-left:26px}.mkbd-node-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:inset 2px 0 0 var(--mkb-accent, #5e35b1)}.mkbd-node-type{font-size:12px;font-weight:600}.mkbd-node-summary{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-spacer{flex:1}.mkbd-props{display:flex;flex-wrap:wrap;gap:18px 10px;align-items:center}.mkbd-slim{width:200px}.mkbd-tiny{width:110px}.mkbd-tiny2{width:130px}.mkbd-grow{flex:1;min-width:220px}.mkbd-full{width:100%}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:4px}.mkbd-subrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mkbd-caps-label{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"] }]
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-block{grid-template-columns:22px auto minmax(0,1fr) auto;cursor:pointer;border-left-color:var(--mkbd-border-strong)}.mkbd-block:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-block-child{border-left-color:var(--mkbd-primary-outline)}.mkbd-nested{margin-left:26px;margin-top:3px;gap:3px}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-block.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-block.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .mkbd-block:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-block-type{font-size:12.5px;font-weight:500}.mkbd-block-summary{font:500 11.5px var(--mkbd-font-mono);color:var(--mkbd-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-new-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.mkbd-new-block .mkbd-field{width:230px}.mkbd-new-block .mkbd-field>.mkbd-label{background:var(--mkbd-canvas)}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:8px}.mkbd-subrow{flex-wrap:wrap}.mkbd-caps-label{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-full{flex:1 0 100%;margin:0}.mkbd-error-text{color:var(--mkbd-error)}\n"] }]
         }] });
 
 /** Converte texto digitado no tipo mais provável (números e booleanos). */
@@ -1155,6 +1685,11 @@ class MkbDataEditor {
     store = inject(DesignerStore);
     config = this.store.config;
     filtersError = signal(null, ...(ngDevMode ? [{ debugName: "filtersError" }] : /* istanbul ignore next */ []));
+    /** Índice do item aberto (acordeão de um por vez). */
+    expanded = signal(null, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    toggle(index) {
+        this.expanded.update((current) => (current === index ? null : index));
+    }
     items() {
         return this.config().items ?? [];
     }
@@ -1167,6 +1702,15 @@ class MkbDataEditor {
     hasLanes() {
         return !!this.store.lanesAxis();
     }
+    /** Opções derivadas da config — computed, para a referência ser estável. */
+    columnOptions = computed(() => (this.store.columnsAxis().groups ?? []).map((g) => ({
+        value: g.id,
+        label: g.title ? `${g.id} · ${g.title}` : g.id,
+    })), ...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
+    laneOptions = computed(() => (this.store.lanesAxis()?.groups ?? []).map((g) => ({
+        value: g.id,
+        label: g.title ? `${g.id} · ${g.title}` : g.id,
+    })), ...(ngDevMode ? [{ debugName: "laneOptions" }] : /* istanbul ignore next */ []));
     columnIds() {
         return (this.store.columnsAxis().groups ?? []).map((g) => g.id);
     }
@@ -1242,6 +1786,7 @@ class MkbDataEditor {
                 item[this.laneField()] = lane;
             d.items.push(item);
         });
+        this.expanded.set(this.items().length - 1);
     }
     duplicateItem(index) {
         this.store.update((d) => {
@@ -1255,6 +1800,7 @@ class MkbDataEditor {
     }
     removeItem(index) {
         this.store.update((d) => d.items?.splice(index, 1));
+        this.expanded.set(null);
     }
     setItemProp(index, key, value) {
         this.store.update((d) => {
@@ -1351,250 +1897,384 @@ class MkbDataEditor {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbDataEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbDataEditor, isStandalone: true, selector: "mkb-data-editor", ngImport: i0, template: `
-    <h3 class="mkbd-h">Itens ({{ items().length }})</h3>
-    <mat-accordion displayMode="flat" [multi]="false">
-      @for (item of items(); track item.id; let i = $index) {
-        <mat-expansion-panel class="mat-elevation-z0 mkbd-panel">
-          <mat-expansion-panel-header>
-            <mat-panel-title>{{ label(item) }}</mat-panel-title>
-            <mat-panel-description>{{ position(item) }}</mat-panel-description>
-          </mat-expansion-panel-header>
-
-          <div class="mkbd-row">
-            <mat-form-field appearance="outline" class="mkbd-slim">
-              <mat-label>Id</mat-label>
-              <input matInput [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
-            </mat-form-field>
-            @if (columnIds().length) {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Coluna ({{ columnField() }})</mat-label>
-                <mat-select
-                  [ngModel]="str(item, columnField())"
-                  (ngModelChange)="setItemProp(i, columnField(), $event)"
-                >
-                  @for (id of columnIds(); track id) {
-                    <mat-option [value]="id">{{ id }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
-            } @else {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Coluna ({{ columnField() }})</mat-label>
-                <input matInput [ngModel]="str(item, columnField())" (ngModelChange)="setItemProp(i, columnField(), $event)" />
-              </mat-form-field>
-            }
-            @if (hasLanes()) {
-              @if (laneIds().length) {
-                <mat-form-field appearance="outline" class="mkbd-slim">
-                  <mat-label>Lane ({{ laneField() }})</mat-label>
-                  <mat-select [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)">
-                    @for (id of laneIds(); track id) {
-                      <mat-option [value]="id">{{ id }}</mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-              } @else {
-                <mat-form-field appearance="outline" class="mkbd-slim">
-                  <mat-label>Lane ({{ laneField() }})</mat-label>
-                  <input matInput [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)" />
-                </mat-form-field>
-              }
-            }
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Itens</span>
+      <span class="mkbd-count">{{ items().length }}</span>
+    </div>
+
+    <div class="mkbd-rows">
+      @for (item of items(); track $index; let i = $index) {
+        <div class="mkbd-row mkbd-item" [class.mkbd-row-selected]="expanded() === i">
+          <div class="mkbd-item-head">
+            <button
+              class="mkbd-item-toggle"
+              type="button"
+              [attr.aria-expanded]="expanded() === i"
+              (click)="toggle(i)"
+            >
+              <mkb-icon [name]="expanded() === i ? 'down' : 'expand'" />
+              <span class="mkbd-item-title">{{ label(item) }}</span>
+              <span class="mkbd-item-where">{{ position(item) }}</span>
+            </button>
+            <button class="mkbd-icon-btn" type="button" (click)="duplicateItem(i)" aria-label="Duplicar item">
+              <mkb-icon name="add" />
+            </button>
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeItem(i)"
+              aria-label="Remover item"
+            >
+              <mkb-icon name="close" />
+            </button>
           </div>
 
-          <h4 class="mkbd-h4">Campos</h4>
-          @for (key of freeFields(item); track key) {
-            <div class="mkbd-row">
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Campo</mat-label>
-                <input matInput [ngModel]="key" (change)="renameField(i, key, $event)" />
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="mkbd-grow">
-                <mat-label>Valor</mat-label>
-                <input matInput [ngModel]="display(item, key)" (ngModelChange)="setItemProp(i, key, coerceValue($event))" />
-              </mat-form-field>
-              <button matIconButton type="button" (click)="removeField(i, key)" aria-label="Remover campo">✕</button>
-            </div>
-          }
-          <button matButton type="button" (click)="addField(i)">+ Campo</button>
-
-          @for (def of entryDefs(); track def.field) {
-            <h4 class="mkbd-h4">Itens internos — {{ def.field }}</h4>
-            @for (entry of entriesOf(item, def.field); track entry.id; let ei = $index) {
-              <div class="mkbd-row">
-                @if (def.checkField; as checkField) {
-                  <mat-checkbox
-                    [ngModel]="entry[checkField] === true"
-                    (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
-                    aria-label="Concluído"
+          @if (expanded() === i) {
+            <div class="mkbd-item-body">
+              <div class="mkbd-stack">
+                <label class="mkbd-field mkbd-field-mono">
+                  <span class="mkbd-label">Id</span>
+                  <input [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+                </label>
+
+                @if (columnOptions().length) {
+                  <mkb-combo
+                    [label]="'Coluna (' + columnField() + ')'"
+                    [options]="columnOptions()"
+                    [value]="str(item, columnField())"
+                    (valueChange)="setItemProp(i, columnField(), $event)"
                   />
+                } @else {
+                  <label class="mkbd-field">
+                    <span class="mkbd-label">Coluna ({{ columnField() }})</span>
+                    <input
+                      [ngModel]="str(item, columnField())"
+                      (ngModelChange)="setItemProp(i, columnField(), $event)"
+                    />
+                  </label>
+                }
+
+                @if (hasLanes()) {
+                  @if (laneOptions().length) {
+                    <mkb-combo
+                      [label]="'Lane (' + laneField() + ')'"
+                      [options]="laneOptions()"
+                      [value]="str(item, laneField())"
+                      (valueChange)="setItemProp(i, laneField(), $event)"
+                    />
+                  } @else {
+                    <label class="mkbd-field">
+                      <span class="mkbd-label">Lane ({{ laneField() }})</span>
+                      <input
+                        [ngModel]="str(item, laneField())"
+                        (ngModelChange)="setItemProp(i, laneField(), $event)"
+                      />
+                    </label>
+                  }
                 }
-                <mat-form-field appearance="outline" class="mkbd-grow">
-                  <mat-label>{{ def.labelField }}</mat-label>
-                  <input
-                    matInput
-                    [ngModel]="str(entry, def.labelField)"
-                    (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
-                  />
-                </mat-form-field>
-                <button matIconButton type="button" (click)="removeEntry(i, def.field, ei)" aria-label="Remover item interno">✕</button>
               </div>
-            }
-            <button matButton type="button" (click)="addEntry(i, def)">+ Item interno</button>
-          }
 
-          <div class="mkbd-row mkbd-mt">
-            <button matButton type="button" (click)="duplicateItem(i)">Duplicar</button>
-            <button matButton type="button" (click)="removeItem(i)">Remover item</button>
-          </div>
-        </mat-expansion-panel>
+              <div class="mkbd-subsection">
+                <span class="mkbd-overline">Campos</span>
+              </div>
+              @for (key of freeFields(item); track key) {
+                <div class="mkbd-stack mkbd-field-row">
+                  <label class="mkbd-field mkbd-field-mono mkbd-field-sm">
+                    <span class="mkbd-label">Campo</span>
+                    <input [ngModel]="key" (change)="renameField(i, key, $event)" />
+                  </label>
+                  <label class="mkbd-field mkbd-field-grow">
+                    <span class="mkbd-label">Valor</span>
+                    <input
+                      [ngModel]="display(item, key)"
+                      (ngModelChange)="setItemProp(i, key, coerceValue($event))"
+                    />
+                  </label>
+                  <button
+                    class="mkbd-icon-btn mkbd-icon-btn-danger"
+                    type="button"
+                    (click)="removeField(i, key)"
+                    aria-label="Remover campo"
+                  >
+                    <mkb-icon name="close" />
+                  </button>
+                </div>
+              }
+              <button class="mkbd-add mkbd-add-sm" type="button" (click)="addField(i)">
+                <mkb-icon name="add" />
+                Campo
+              </button>
+
+              @for (def of entryDefs(); track def.field) {
+                <div class="mkbd-subsection">
+                  <span class="mkbd-overline">Itens internos · {{ def.field }}</span>
+                </div>
+                @for (entry of entriesOf(item, def.field); track $index; let ei = $index) {
+                  <div class="mkbd-stack mkbd-field-row">
+                    @if (def.checkField; as checkField) {
+                      <label class="mkbd-check">
+                        <input
+                          type="checkbox"
+                          [ngModel]="entry[checkField] === true"
+                          (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                        />
+                        Feito
+                      </label>
+                    }
+                    <label class="mkbd-field mkbd-field-grow">
+                      <span class="mkbd-label">{{ def.labelField }}</span>
+                      <input
+                        [ngModel]="str(entry, def.labelField)"
+                        (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeEntry(i, def.field, ei)"
+                      aria-label="Remover item interno"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addEntry(i, def)">
+                  <mkb-icon name="add" />
+                  Item interno
+                </button>
+              }
+            </div>
+          }
+        </div>
       }
-    </mat-accordion>
-    <button matButton class="mkbd-mt" type="button" (click)="addItem()">+ Adicionar item</button>
+    </div>
 
-    <h3 class="mkbd-h">Filtros iniciais (JSON)</h3>
+    <button class="mkbd-add" type="button" (click)="addItem()">
+      <mkb-icon name="add" />
+      Adicionar item
+    </button>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Filtros iniciais</span>
+    </div>
     <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
-    <mat-form-field appearance="outline" class="mkbd-full">
-      <mat-label>filters</mat-label>
-      <textarea matInput rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
-      @if (filtersError(); as err) {
-        <mat-hint class="mkbd-error">{{ err }}</mat-hint>
-      }
-    </mat-form-field>
-  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-h:first-child{margin-top:0}.mkbd-h4{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}.mkbd-mt{margin-top:10px}.mkbd-slim{width:180px}.mkbd-grow{flex:1;min-width:180px}.mkbd-full{width:100%}.mkbd-panel{border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px!important;margin-bottom:6px}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7$1.MatExpansionPanelDescription, selector: "mat-panel-description" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <label class="mkbd-field mkbd-field-area mkbd-field-full">
+      <span class="mkbd-label">filters (JSON)</span>
+      <textarea rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+    </label>
+    @if (filtersError(); as err) {
+      <p class="mkbd-error-text">{{ err }}</p>
+    }
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-item{display:block;padding:0;border-left-color:var(--mkbd-border-strong)}.mkbd-item-head{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 4px}.mkbd-item-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:none;border-radius:var(--mkbd-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.mkbd-item-toggle:hover{background:var(--mkbd-panel-3)}.mkbd-item-toggle:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-item-toggle>mkb-icon{font-size:18px;color:var(--mkbd-muted)}.mkbd-item-title{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-item-where{margin-left:auto;font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted);background:var(--mkbd-panel-3);padding:2px 8px;border-radius:var(--mkbd-radius-pill);white-space:nowrap}.mkbd-item-body{padding:4px 12px 14px;border-top:1px solid var(--mkbd-border-soft)}.mkbd-item-body .mkbd-field>.mkbd-label{background:var(--mkbd-panel)}.mkbd-subsection{margin:16px 0 10px}.mkbd-field-row{margin-bottom:10px;flex-wrap:nowrap}.mkbd-add-sm{height:34px;margin-top:0;font-size:12px}.mkbd-error-text{margin:6px 0 0;font-size:11.5px;color:var(--mkbd-error)}.mkbd-field-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbDataEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mkb-data-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatExpansionModule,
-                    ], template: `
-    <h3 class="mkbd-h">Itens ({{ items().length }})</h3>
-    <mat-accordion displayMode="flat" [multi]="false">
-      @for (item of items(); track item.id; let i = $index) {
-        <mat-expansion-panel class="mat-elevation-z0 mkbd-panel">
-          <mat-expansion-panel-header>
-            <mat-panel-title>{{ label(item) }}</mat-panel-title>
-            <mat-panel-description>{{ position(item) }}</mat-panel-description>
-          </mat-expansion-panel-header>
-
-          <div class="mkbd-row">
-            <mat-form-field appearance="outline" class="mkbd-slim">
-              <mat-label>Id</mat-label>
-              <input matInput [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
-            </mat-form-field>
-            @if (columnIds().length) {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Coluna ({{ columnField() }})</mat-label>
-                <mat-select
-                  [ngModel]="str(item, columnField())"
-                  (ngModelChange)="setItemProp(i, columnField(), $event)"
-                >
-                  @for (id of columnIds(); track id) {
-                    <mat-option [value]="id">{{ id }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
-            } @else {
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Coluna ({{ columnField() }})</mat-label>
-                <input matInput [ngModel]="str(item, columnField())" (ngModelChange)="setItemProp(i, columnField(), $event)" />
-              </mat-form-field>
-            }
-            @if (hasLanes()) {
-              @if (laneIds().length) {
-                <mat-form-field appearance="outline" class="mkbd-slim">
-                  <mat-label>Lane ({{ laneField() }})</mat-label>
-                  <mat-select [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)">
-                    @for (id of laneIds(); track id) {
-                      <mat-option [value]="id">{{ id }}</mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-              } @else {
-                <mat-form-field appearance="outline" class="mkbd-slim">
-                  <mat-label>Lane ({{ laneField() }})</mat-label>
-                  <input matInput [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)" />
-                </mat-form-field>
-              }
-            }
+            args: [{ selector: 'mkb-data-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MkbCombo, MkbIcon], template: `
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Itens</span>
+      <span class="mkbd-count">{{ items().length }}</span>
+    </div>
+
+    <div class="mkbd-rows">
+      @for (item of items(); track $index; let i = $index) {
+        <div class="mkbd-row mkbd-item" [class.mkbd-row-selected]="expanded() === i">
+          <div class="mkbd-item-head">
+            <button
+              class="mkbd-item-toggle"
+              type="button"
+              [attr.aria-expanded]="expanded() === i"
+              (click)="toggle(i)"
+            >
+              <mkb-icon [name]="expanded() === i ? 'down' : 'expand'" />
+              <span class="mkbd-item-title">{{ label(item) }}</span>
+              <span class="mkbd-item-where">{{ position(item) }}</span>
+            </button>
+            <button class="mkbd-icon-btn" type="button" (click)="duplicateItem(i)" aria-label="Duplicar item">
+              <mkb-icon name="add" />
+            </button>
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeItem(i)"
+              aria-label="Remover item"
+            >
+              <mkb-icon name="close" />
+            </button>
           </div>
 
-          <h4 class="mkbd-h4">Campos</h4>
-          @for (key of freeFields(item); track key) {
-            <div class="mkbd-row">
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Campo</mat-label>
-                <input matInput [ngModel]="key" (change)="renameField(i, key, $event)" />
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="mkbd-grow">
-                <mat-label>Valor</mat-label>
-                <input matInput [ngModel]="display(item, key)" (ngModelChange)="setItemProp(i, key, coerceValue($event))" />
-              </mat-form-field>
-              <button matIconButton type="button" (click)="removeField(i, key)" aria-label="Remover campo">✕</button>
-            </div>
-          }
-          <button matButton type="button" (click)="addField(i)">+ Campo</button>
-
-          @for (def of entryDefs(); track def.field) {
-            <h4 class="mkbd-h4">Itens internos — {{ def.field }}</h4>
-            @for (entry of entriesOf(item, def.field); track entry.id; let ei = $index) {
-              <div class="mkbd-row">
-                @if (def.checkField; as checkField) {
-                  <mat-checkbox
-                    [ngModel]="entry[checkField] === true"
-                    (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
-                    aria-label="Concluído"
+          @if (expanded() === i) {
+            <div class="mkbd-item-body">
+              <div class="mkbd-stack">
+                <label class="mkbd-field mkbd-field-mono">
+                  <span class="mkbd-label">Id</span>
+                  <input [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+                </label>
+
+                @if (columnOptions().length) {
+                  <mkb-combo
+                    [label]="'Coluna (' + columnField() + ')'"
+                    [options]="columnOptions()"
+                    [value]="str(item, columnField())"
+                    (valueChange)="setItemProp(i, columnField(), $event)"
                   />
+                } @else {
+                  <label class="mkbd-field">
+                    <span class="mkbd-label">Coluna ({{ columnField() }})</span>
+                    <input
+                      [ngModel]="str(item, columnField())"
+                      (ngModelChange)="setItemProp(i, columnField(), $event)"
+                    />
+                  </label>
+                }
+
+                @if (hasLanes()) {
+                  @if (laneOptions().length) {
+                    <mkb-combo
+                      [label]="'Lane (' + laneField() + ')'"
+                      [options]="laneOptions()"
+                      [value]="str(item, laneField())"
+                      (valueChange)="setItemProp(i, laneField(), $event)"
+                    />
+                  } @else {
+                    <label class="mkbd-field">
+                      <span class="mkbd-label">Lane ({{ laneField() }})</span>
+                      <input
+                        [ngModel]="str(item, laneField())"
+                        (ngModelChange)="setItemProp(i, laneField(), $event)"
+                      />
+                    </label>
+                  }
                 }
-                <mat-form-field appearance="outline" class="mkbd-grow">
-                  <mat-label>{{ def.labelField }}</mat-label>
-                  <input
-                    matInput
-                    [ngModel]="str(entry, def.labelField)"
-                    (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
-                  />
-                </mat-form-field>
-                <button matIconButton type="button" (click)="removeEntry(i, def.field, ei)" aria-label="Remover item interno">✕</button>
               </div>
-            }
-            <button matButton type="button" (click)="addEntry(i, def)">+ Item interno</button>
-          }
 
-          <div class="mkbd-row mkbd-mt">
-            <button matButton type="button" (click)="duplicateItem(i)">Duplicar</button>
-            <button matButton type="button" (click)="removeItem(i)">Remover item</button>
-          </div>
-        </mat-expansion-panel>
+              <div class="mkbd-subsection">
+                <span class="mkbd-overline">Campos</span>
+              </div>
+              @for (key of freeFields(item); track key) {
+                <div class="mkbd-stack mkbd-field-row">
+                  <label class="mkbd-field mkbd-field-mono mkbd-field-sm">
+                    <span class="mkbd-label">Campo</span>
+                    <input [ngModel]="key" (change)="renameField(i, key, $event)" />
+                  </label>
+                  <label class="mkbd-field mkbd-field-grow">
+                    <span class="mkbd-label">Valor</span>
+                    <input
+                      [ngModel]="display(item, key)"
+                      (ngModelChange)="setItemProp(i, key, coerceValue($event))"
+                    />
+                  </label>
+                  <button
+                    class="mkbd-icon-btn mkbd-icon-btn-danger"
+                    type="button"
+                    (click)="removeField(i, key)"
+                    aria-label="Remover campo"
+                  >
+                    <mkb-icon name="close" />
+                  </button>
+                </div>
+              }
+              <button class="mkbd-add mkbd-add-sm" type="button" (click)="addField(i)">
+                <mkb-icon name="add" />
+                Campo
+              </button>
+
+              @for (def of entryDefs(); track def.field) {
+                <div class="mkbd-subsection">
+                  <span class="mkbd-overline">Itens internos · {{ def.field }}</span>
+                </div>
+                @for (entry of entriesOf(item, def.field); track $index; let ei = $index) {
+                  <div class="mkbd-stack mkbd-field-row">
+                    @if (def.checkField; as checkField) {
+                      <label class="mkbd-check">
+                        <input
+                          type="checkbox"
+                          [ngModel]="entry[checkField] === true"
+                          (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                        />
+                        Feito
+                      </label>
+                    }
+                    <label class="mkbd-field mkbd-field-grow">
+                      <span class="mkbd-label">{{ def.labelField }}</span>
+                      <input
+                        [ngModel]="str(entry, def.labelField)"
+                        (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeEntry(i, def.field, ei)"
+                      aria-label="Remover item interno"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addEntry(i, def)">
+                  <mkb-icon name="add" />
+                  Item interno
+                </button>
+              }
+            </div>
+          }
+        </div>
       }
-    </mat-accordion>
-    <button matButton class="mkbd-mt" type="button" (click)="addItem()">+ Adicionar item</button>
+    </div>
+
+    <button class="mkbd-add" type="button" (click)="addItem()">
+      <mkb-icon name="add" />
+      Adicionar item
+    </button>
 
-    <h3 class="mkbd-h">Filtros iniciais (JSON)</h3>
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Filtros iniciais</span>
+    </div>
     <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
-    <mat-form-field appearance="outline" class="mkbd-full">
-      <mat-label>filters</mat-label>
-      <textarea matInput rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
-      @if (filtersError(); as err) {
-        <mat-hint class="mkbd-error">{{ err }}</mat-hint>
-      }
-    </mat-form-field>
-  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-h:first-child{margin-top:0}.mkbd-h4{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}.mkbd-mt{margin-top:10px}.mkbd-slim{width:180px}.mkbd-grow{flex:1;min-width:180px}.mkbd-full{width:100%}.mkbd-panel{border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px!important;margin-bottom:6px}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"] }]
+    <label class="mkbd-field mkbd-field-area mkbd-field-full">
+      <span class="mkbd-label">filters (JSON)</span>
+      <textarea rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+    </label>
+    @if (filtersError(); as err) {
+      <p class="mkbd-error-text">{{ err }}</p>
+    }
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-item{display:block;padding:0;border-left-color:var(--mkbd-border-strong)}.mkbd-item-head{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 4px}.mkbd-item-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:none;border-radius:var(--mkbd-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.mkbd-item-toggle:hover{background:var(--mkbd-panel-3)}.mkbd-item-toggle:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-item-toggle>mkb-icon{font-size:18px;color:var(--mkbd-muted)}.mkbd-item-title{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-item-where{margin-left:auto;font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted);background:var(--mkbd-panel-3);padding:2px 8px;border-radius:var(--mkbd-radius-pill);white-space:nowrap}.mkbd-item-body{padding:4px 12px 14px;border-top:1px solid var(--mkbd-border-soft)}.mkbd-item-body .mkbd-field>.mkbd-label{background:var(--mkbd-panel)}.mkbd-subsection{margin:16px 0 10px}.mkbd-field-row{margin-bottom:10px;flex-wrap:nowrap}.mkbd-add-sm{height:34px;margin-top:0;font-size:12px}.mkbd-error-text{margin:6px 0 0;font-size:11.5px;color:var(--mkbd-error)}.mkbd-field-full{width:100%}\n"] }]
         }] });
 
 /**
  * Editor do PIPELINE: eixos (colunas/lanes — estáticos ou derivados),
- * regras de transição/nomeadas e ordenação. Todos os recursos flexíveis
- * do BoardConfig fora do cartão.
+ * regras de transição/nomeadas e ordenação.
+ *
+ * Visual: "linha de lista editável" do DS (§16 dos Componentes) — cada grupo
+ * é um card em grid com acento de cor, alça, campos outline e controles de
+ * ordem, como na tela 13a.
  */
 class MkbPipelineEditor {
     store = inject(DesignerStore);
     config = this.store.config;
+    /** Cor default por posição — a paleta de dados do DS (--viz-*). */
+    static PALETTE = ['#6f6a7c', '#2264c4', '#9a6b00', '#2e7d32', '#c62828', '#00897b'];
+    // Opções fixas: constantes de instância (referência estável entre ciclos).
+    modeOptions = [
+        { value: 'static', label: 'Estático (grupos)' },
+        { value: 'derived', label: 'Derivado (dinâmico)' },
+    ];
+    sortGroupOptions = [
+        { value: '', label: 'Ordem declarada' },
+        { value: 'asc', label: 'Crescente' },
+        { value: 'desc', label: 'Decrescente' },
+    ];
+    directionOptions = [
+        { value: 'asc', label: 'Crescente' },
+        { value: 'desc', label: 'Decrescente' },
+    ];
+    /** Opções derivadas da config — computed, para não realocar a cada ciclo.
+     * Nas regras o rótulo é o ID puro: é ele que a transição referencia. */
+    columnOptions = computed(() => (this.store.columnsAxis().groups ?? []).map((g) => ({ value: g.id, label: g.id })), ...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
+    fromOptions = computed(() => [
+        { value: '*', label: 'Qualquer' },
+        ...this.columnOptions(),
+    ], ...(ngDevMode ? [{ debugName: "fromOptions" }] : /* istanbul ignore next */ []));
     columnIds() {
         return (this.store.columnsAxis().groups ?? []).map((g) => g.id);
     }
@@ -1642,9 +2322,14 @@ class MkbPipelineEditor {
                 group[prop] = value;
         });
     }
-    groupColor(group) {
-        const c = group.meta?.['color'];
-        return typeof c === 'string' ? c : '#efedf3';
+    /** Cor do grupo: `meta.color` do host ou a cor default da POSIÇÃO na lista
+     * (só exibição — nada é gravado na config até o usuário escolher uma cor). */
+    groupColor(group, index = 0) {
+        const color = group.meta?.['color'];
+        if (typeof color === 'string')
+            return color;
+        const palette = MkbPipelineEditor.PALETTE;
+        return palette[index % palette.length];
     }
     setGroupColor(key, index, color) {
         this.store.update((d) => {
@@ -1657,12 +2342,19 @@ class MkbPipelineEditor {
     addGroup(key) {
         this.store.update((d) => {
             const groups = this.draftAxis(d, key).groups;
-            groups?.push({ id: `grupo-${(groups.length + 1)}` });
+            groups?.push({ id: `grupo-${groups.length + 1}` });
         });
     }
     removeGroup(key, index) {
         this.store.update((d) => this.draftAxis(d, key).groups?.splice(index, 1));
     }
+    /** Arraste (CDK) — mesma reordenação das setas ↑↓, por posição absoluta. */
+    dropGroup(key, event) {
+        const { previousIndex, currentIndex } = event;
+        if (previousIndex === currentIndex)
+            return;
+        this.moveGroup(key, previousIndex, currentIndex - previousIndex);
+    }
     moveGroup(key, index, delta) {
         this.store.update((d) => {
             const groups = this.draftAxis(d, key).groups;
@@ -1693,9 +2385,6 @@ class MkbPipelineEditor {
     fromOf(t) {
         return typeof t.from === 'string' ? t.from : Array.isArray(t.from) ? (t.from[0] ?? '*') : '*';
     }
-    toOf(t) {
-        return typeof t.to === 'string' ? [t.to] : (t.to ?? []);
-    }
     addTransition() {
         this.store.update((d) => {
             d.rules ??= {};
@@ -1773,383 +2462,533 @@ class MkbPipelineEditor {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbPipelineEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbPipelineEditor, isStandalone: true, selector: "mkb-pipeline-editor", ngImport: i0, template: `
     <!-- ======================= COLUNAS ======================= -->
-    <h3 class="mkbd-h">Colunas</h3>
     <ng-container
       *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
     />
 
-    <!-- ======================= LANES ========================= -->
-    <h3 class="mkbd-h">
-      Lanes (swimlanes)
-      <mat-slide-toggle
-        [ngModel]="!!store.lanesAxis()"
-        (ngModelChange)="toggleLanes($event)"
-        aria-label="Usar lanes"
-      />
-    </h3>
+    <!-- ======================== LANES ======================== -->
+    <div class="mkbd-feature">
+      <mkb-icon name="rows" />
+      <div>
+        <div class="mkbd-feature-title">Lanes (swimlanes)</div>
+        <div class="mkbd-feature-desc">Agrupa cartões em faixas horizontais por um eixo</div>
+      </div>
+      <label class="mkbd-switch">
+        <input
+          type="checkbox"
+          [ngModel]="!!store.lanesAxis()"
+          (ngModelChange)="toggleLanes($event)"
+          aria-label="Usar lanes"
+        />
+      </label>
+    </div>
     @if (store.lanesAxis(); as lanes) {
       <ng-container *ngTemplateOutlet="axisEditor; context: { axis: lanes, key: 'lanes' }" />
     }
 
     <!-- ================= EDITOR DE EIXO (template) ============ -->
     <ng-template #axisEditor let-axis="axis" let-key="key">
-      <div class="mkbd-row">
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Modo</mat-label>
-          <mat-select
-            [ngModel]="axis.groups ? 'static' : 'derived'"
-            (ngModelChange)="setAxisMode(key, $event)"
-          >
-            <mat-option value="static">Estático (grupos declarados)</mat-option>
-            <mat-option value="derived">Derivado (agrupamento dinâmico)</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Campo do item</mat-label>
+      <div class="mkbd-options">
+        <mkb-combo
+          label="Modo"
+          [options]="modeOptions"
+          [value]="axis.groups ? 'static' : 'derived'"
+          (valueChange)="setAxisMode(key, $any($event))"
+        />
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo do item</span>
           <input
-            matInput
             [ngModel]="axis.field ?? ''"
             (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
             [placeholder]="key === 'columns' ? 'column' : 'lane'"
           />
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Ordenar grupos</mat-label>
-          <mat-select
-            [ngModel]="axis.sortGroups ?? ''"
-            (ngModelChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
-          >
-            <mat-option value="">Ordem declarada / de aparição</mat-option>
-            <mat-option value="asc">Crescente</mat-option>
-            <mat-option value="desc">Decrescente</mat-option>
-          </mat-select>
-        </mat-form-field>
+        </label>
+        <mkb-combo
+          label="Ordenar grupos"
+          [options]="sortGroupOptions"
+          [value]="axis.sortGroups ?? ''"
+          (valueChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+        />
         @if (axis.groups) {
-          <mat-slide-toggle
-            [ngModel]="axis.reorderable ?? false"
-            (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
-          >
-            Reordenável (arrastar)
-          </mat-slide-toggle>
+          <label class="mkbd-switch mkbd-switch-boxed">
+            <input
+              type="checkbox"
+              [ngModel]="axis.reorderable ?? false"
+              (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+            />
+            Reordenável
+          </label>
         }
       </div>
 
       @if (axis.groups; as groups) {
-        <div class="mkbd-groups">
+        <div class="mkbd-section">
+          <span class="mkbd-overline">{{ key === 'columns' ? 'Colunas' : 'Lanes' }}</span>
+          <span class="mkbd-count">{{ groups.length }}</span>
+        </div>
+
+        <div class="mkbd-rows" cdkDropList (cdkDropListDropped)="dropGroup(key, $event)">
           @for (group of groups; track $index; let i = $index) {
-            <div class="mkbd-group">
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Id</mat-label>
-                <input matInput [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Título</mat-label>
-                <input matInput [ngModel]="group.title ?? ''" (ngModelChange)="setGroup(key, i, 'title', $event || undefined)" />
-              </mat-form-field>
-              <label class="mkbd-color">
-                Cor
+            <div
+              class="mkbd-row mkbd-row-group"
+              cdkDrag
+              cdkDragLockAxis="y"
+              [cdkDragPreviewClass]="'mkbd-drag-preview'"
+              [style.--mkbd-accent]="groupColor(group, i)"
+            >
+              <span
+                class="mkbd-handle"
+                cdkDragHandle
+                [attr.aria-label]="'Arrastar ' + (group.title ?? group.id)"
+              >
+                <mkb-icon name="drag" />
+              </span>
+
+              <label class="mkbd-field mkbd-field-mono">
+                <span class="mkbd-label">Id</span>
+                <input [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </label>
+
+              <label class="mkbd-field">
+                <span class="mkbd-label">Título</span>
+                <input
+                  [ngModel]="group.title ?? ''"
+                  (ngModelChange)="setGroup(key, i, 'title', $event || undefined)"
+                />
+              </label>
+
+              <label class="mkbd-swatch" [title]="'Cor de ' + (group.title ?? group.id)">
                 <input
                   type="color"
-                  [ngModel]="groupColor(group)"
+                  [ngModel]="groupColor(group, i)"
                   (ngModelChange)="setGroupColor(key, i, $event)"
+                  [attr.aria-label]="'Cor de ' + (group.title ?? group.id)"
                 />
+                <span [style.background]="groupColor(group, i)"></span>
               </label>
-              <mat-form-field appearance="outline" class="mkbd-tiny">
-                <mat-label>WIP</mat-label>
+
+              <label class="mkbd-field mkbd-field-optional">
+                <span class="mkbd-label">WIP</span>
                 <input
-                  matInput
                   type="number"
                   min="0"
+                  placeholder="∞"
                   [ngModel]="group.limit ?? null"
                   (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
                 />
-              </mat-form-field>
-              <mat-checkbox
-                [ngModel]="group.locked ?? false"
-                (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
-              >
-                Travado
-              </mat-checkbox>
-              <span class="mkbd-spacer"></span>
-              <button matIconButton type="button" (click)="moveGroup(key, i, -1)" [disabled]="i === 0" aria-label="Subir">↑</button>
-              <button matIconButton type="button" (click)="moveGroup(key, i, 1)" [disabled]="i === groups.length - 1" aria-label="Descer">↓</button>
-              <button matIconButton type="button" (click)="removeGroup(key, i)" aria-label="Remover grupo">✕</button>
+              </label>
+
+              <div class="mkbd-row-ctrls">
+                <label class="mkbd-check">
+                  <input
+                    type="checkbox"
+                    [ngModel]="group.locked ?? false"
+                    (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+                  />
+                  Travado
+                </label>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, -1)"
+                  [disabled]="i === 0"
+                  aria-label="Mover para cima"
+                >
+                  <mkb-icon name="up" />
+                </button>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, 1)"
+                  [disabled]="i === groups.length - 1"
+                  aria-label="Mover para baixo"
+                >
+                  <mkb-icon name="down" />
+                </button>
+                <button
+                  class="mkbd-icon-btn mkbd-icon-btn-danger"
+                  type="button"
+                  (click)="removeGroup(key, i)"
+                  aria-label="Remover grupo"
+                >
+                  <mkb-icon name="close" />
+                </button>
+              </div>
             </div>
           }
-          <button matButton type="button" (click)="addGroup(key)">+ Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}</button>
         </div>
+
+        <button class="mkbd-add" type="button" (click)="addGroup(key)">
+          <mkb-icon name="add" />
+          Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}
+        </button>
       }
     </ng-template>
 
     <!-- ======================= REGRAS ========================= -->
-    <h3 class="mkbd-h">Regras de transição (colunas)</h3>
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras de transição</span>
+      @if (transitions().length) {
+        <span class="mkbd-count">{{ transitions().length }}</span>
+      }
+    </div>
     <p class="mkbd-hint">
-      Sem linhas = qualquer transição é permitida. Com linhas, SÓ as listadas passam.
+      Sem regras = qualquer transição é permitida. Com regras, só as listadas passam.
     </p>
-    @for (t of transitions(); track $index; let i = $index) {
-      <div class="mkbd-row">
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>De</mat-label>
-          <mat-select [ngModel]="fromOf(t)" (ngModelChange)="setTransition(i, 'from', $event)">
-            <mat-option value="*">Qualquer</mat-option>
-            @for (id of columnIds(); track id) {
-              <mat-option [value]="id">{{ id }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-grow">
-          <mat-label>Para</mat-label>
-          <mat-select multiple [ngModel]="toOf(t)" (ngModelChange)="setTransition(i, 'to', $event)">
-            @for (id of columnIds(); track id) {
-              <mat-option [value]="id">{{ id }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button matIconButton type="button" (click)="removeTransition(i)" aria-label="Remover transição">✕</button>
+
+    @if (transitions().length) {
+      <div class="mkbd-rows">
+        @for (t of transitions(); track $index; let i = $index) {
+          <div class="mkbd-row mkbd-row-rule">
+            <mkb-combo
+              label="De"
+              [options]="fromOptions()"
+              [value]="fromOf(t)"
+              (valueChange)="setTransition(i, 'from', $event)"
+            />
+            <!-- Destino é multi-seleção: o valor vem da própria config (sem
+                 alocar array a cada ciclo, que foi o que travou a tela). -->
+            <mkb-combo
+              label="Para"
+              [multiple]="true"
+              placeholder="Qualquer"
+              [options]="columnOptions()"
+              [value]="t.to ?? null"
+              (valuesChange)="setTransition(i, 'to', $event)"
+            />
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeTransition(i)"
+              aria-label="Remover transição"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+        }
       </div>
     }
-    <button matButton type="button" (click)="addTransition()">+ Adicionar transição</button>
+    <button class="mkbd-btn mkbd-btn-outline mkbd-btn-block" type="button" (click)="addTransition()">
+      <mkb-icon name="add" />
+      Adicionar transição
+    </button>
 
-    <div class="mkbd-row mkbd-mt">
-      <mat-form-field appearance="outline" class="mkbd-grow">
-        <mat-label>Regras nomeadas de cartão (rule:*)</mat-label>
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras nomeadas</span>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+    <div class="mkbd-stack">
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de cartão (rule:*)</span>
         <input
-          matInput
           [ngModel]="namesOf('rules')"
           (ngModelChange)="setNames('rules', $event)"
           placeholder="rule:berco-livre, rule:sla"
         />
-      </mat-form-field>
-      <mat-form-field appearance="outline" class="mkbd-grow">
-        <mat-label>Regras nomeadas de itens (entryRules)</mat-label>
-        <input matInput [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
-      </mat-form-field>
+      </label>
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de itens (entryRules)</span>
+        <input [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </label>
     </div>
-    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
 
     <!-- ================== ORDENAÇÃO / GERAL ==================== -->
-    <h3 class="mkbd-h">Ordenação e geral</h3>
-    <div class="mkbd-row">
-      <mat-slide-toggle [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)">
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Ordenação e geral</span>
+    </div>
+    <div class="mkbd-stack">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input type="checkbox" [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)" />
         Ordenar itens por campo
-      </mat-slide-toggle>
+      </label>
       @if (config().sort; as sort) {
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Campo</mat-label>
-          <input matInput [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Direção</mat-label>
-          <mat-select [ngModel]="sort.direction ?? 'asc'" (ngModelChange)="setSort('direction', $event)">
-            <mat-option value="asc">Crescente</mat-option>
-            <mat-option value="desc">Decrescente</mat-option>
-          </mat-select>
-        </mat-form-field>
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo</span>
+          <input [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </label>
+        <mkb-combo
+          label="Direção"
+          [options]="directionOptions"
+          [value]="sort.direction ?? 'asc'"
+          (valueChange)="setSort('direction', $event)"
+        />
       }
-      <mat-slide-toggle
-        [ngModel]="config().readOnly ?? false"
-        (ngModelChange)="setReadOnly($event)"
-      >
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().readOnly ?? false"
+          (ngModelChange)="setReadOnly($event)"
+        />
         Somente leitura
-      </mat-slide-toggle>
+      </label>
     </div>
-  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px}.mkbd-h:first-child{margin-top:0}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:10px}.mkbd-groups{display:flex;flex-direction:column;gap:4px}.mkbd-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 8px;border:1px dashed var(--mkb-border, #e3e0ea);border-radius:8px}.mkbd-slim{width:170px}.mkbd-tiny{width:90px}.mkbd-grow{flex:1;min-width:200px}.mkbd-spacer{flex:1}.mkbd-color{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-row-group{grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.3fr) 42px 76px auto}.mkbd-row-rule{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;border-left-color:var(--mkbd-border-strong)}.mkbd-btn-block{margin-top:4px}.mkbd-combo-btn{flex:1;min-width:0;height:100%;padding:0 16px 0 0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-field-combo:has(.mkbd-combo-btn:focus-visible){border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-combo-empty{color:var(--mkbd-muted)}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-row.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-row.cdk-drag-placeholder{opacity:.35}.mkbd-rows.cdk-drop-list-dragging .mkbd-row:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}@media(max-width:720px){.mkbd-row-group{grid-template-columns:22px minmax(0,1fr) 42px 76px}.mkbd-row-group .mkbd-row-ctrls{grid-column:1 / -1;justify-content:flex-end}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbPipelineEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mkb-pipeline-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet,
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatSlideToggleModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatExpansionModule,
-                    ], template: `
+            args: [{ selector: 'mkb-pipeline-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FormsModule, CdkDropList, CdkDrag, CdkDragHandle, MkbCombo, MkbIcon], template: `
     <!-- ======================= COLUNAS ======================= -->
-    <h3 class="mkbd-h">Colunas</h3>
     <ng-container
       *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
     />
 
-    <!-- ======================= LANES ========================= -->
-    <h3 class="mkbd-h">
-      Lanes (swimlanes)
-      <mat-slide-toggle
-        [ngModel]="!!store.lanesAxis()"
-        (ngModelChange)="toggleLanes($event)"
-        aria-label="Usar lanes"
-      />
-    </h3>
+    <!-- ======================== LANES ======================== -->
+    <div class="mkbd-feature">
+      <mkb-icon name="rows" />
+      <div>
+        <div class="mkbd-feature-title">Lanes (swimlanes)</div>
+        <div class="mkbd-feature-desc">Agrupa cartões em faixas horizontais por um eixo</div>
+      </div>
+      <label class="mkbd-switch">
+        <input
+          type="checkbox"
+          [ngModel]="!!store.lanesAxis()"
+          (ngModelChange)="toggleLanes($event)"
+          aria-label="Usar lanes"
+        />
+      </label>
+    </div>
     @if (store.lanesAxis(); as lanes) {
       <ng-container *ngTemplateOutlet="axisEditor; context: { axis: lanes, key: 'lanes' }" />
     }
 
     <!-- ================= EDITOR DE EIXO (template) ============ -->
     <ng-template #axisEditor let-axis="axis" let-key="key">
-      <div class="mkbd-row">
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Modo</mat-label>
-          <mat-select
-            [ngModel]="axis.groups ? 'static' : 'derived'"
-            (ngModelChange)="setAxisMode(key, $event)"
-          >
-            <mat-option value="static">Estático (grupos declarados)</mat-option>
-            <mat-option value="derived">Derivado (agrupamento dinâmico)</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Campo do item</mat-label>
+      <div class="mkbd-options">
+        <mkb-combo
+          label="Modo"
+          [options]="modeOptions"
+          [value]="axis.groups ? 'static' : 'derived'"
+          (valueChange)="setAxisMode(key, $any($event))"
+        />
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo do item</span>
           <input
-            matInput
             [ngModel]="axis.field ?? ''"
             (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
             [placeholder]="key === 'columns' ? 'column' : 'lane'"
           />
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Ordenar grupos</mat-label>
-          <mat-select
-            [ngModel]="axis.sortGroups ?? ''"
-            (ngModelChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
-          >
-            <mat-option value="">Ordem declarada / de aparição</mat-option>
-            <mat-option value="asc">Crescente</mat-option>
-            <mat-option value="desc">Decrescente</mat-option>
-          </mat-select>
-        </mat-form-field>
+        </label>
+        <mkb-combo
+          label="Ordenar grupos"
+          [options]="sortGroupOptions"
+          [value]="axis.sortGroups ?? ''"
+          (valueChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+        />
         @if (axis.groups) {
-          <mat-slide-toggle
-            [ngModel]="axis.reorderable ?? false"
-            (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
-          >
-            Reordenável (arrastar)
-          </mat-slide-toggle>
+          <label class="mkbd-switch mkbd-switch-boxed">
+            <input
+              type="checkbox"
+              [ngModel]="axis.reorderable ?? false"
+              (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+            />
+            Reordenável
+          </label>
         }
       </div>
 
       @if (axis.groups; as groups) {
-        <div class="mkbd-groups">
+        <div class="mkbd-section">
+          <span class="mkbd-overline">{{ key === 'columns' ? 'Colunas' : 'Lanes' }}</span>
+          <span class="mkbd-count">{{ groups.length }}</span>
+        </div>
+
+        <div class="mkbd-rows" cdkDropList (cdkDropListDropped)="dropGroup(key, $event)">
           @for (group of groups; track $index; let i = $index) {
-            <div class="mkbd-group">
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Id</mat-label>
-                <input matInput [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="mkbd-slim">
-                <mat-label>Título</mat-label>
-                <input matInput [ngModel]="group.title ?? ''" (ngModelChange)="setGroup(key, i, 'title', $event || undefined)" />
-              </mat-form-field>
-              <label class="mkbd-color">
-                Cor
+            <div
+              class="mkbd-row mkbd-row-group"
+              cdkDrag
+              cdkDragLockAxis="y"
+              [cdkDragPreviewClass]="'mkbd-drag-preview'"
+              [style.--mkbd-accent]="groupColor(group, i)"
+            >
+              <span
+                class="mkbd-handle"
+                cdkDragHandle
+                [attr.aria-label]="'Arrastar ' + (group.title ?? group.id)"
+              >
+                <mkb-icon name="drag" />
+              </span>
+
+              <label class="mkbd-field mkbd-field-mono">
+                <span class="mkbd-label">Id</span>
+                <input [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </label>
+
+              <label class="mkbd-field">
+                <span class="mkbd-label">Título</span>
+                <input
+                  [ngModel]="group.title ?? ''"
+                  (ngModelChange)="setGroup(key, i, 'title', $event || undefined)"
+                />
+              </label>
+
+              <label class="mkbd-swatch" [title]="'Cor de ' + (group.title ?? group.id)">
                 <input
                   type="color"
-                  [ngModel]="groupColor(group)"
+                  [ngModel]="groupColor(group, i)"
                   (ngModelChange)="setGroupColor(key, i, $event)"
+                  [attr.aria-label]="'Cor de ' + (group.title ?? group.id)"
                 />
+                <span [style.background]="groupColor(group, i)"></span>
               </label>
-              <mat-form-field appearance="outline" class="mkbd-tiny">
-                <mat-label>WIP</mat-label>
+
+              <label class="mkbd-field mkbd-field-optional">
+                <span class="mkbd-label">WIP</span>
                 <input
-                  matInput
                   type="number"
                   min="0"
+                  placeholder="∞"
                   [ngModel]="group.limit ?? null"
                   (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
                 />
-              </mat-form-field>
-              <mat-checkbox
-                [ngModel]="group.locked ?? false"
-                (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
-              >
-                Travado
-              </mat-checkbox>
-              <span class="mkbd-spacer"></span>
-              <button matIconButton type="button" (click)="moveGroup(key, i, -1)" [disabled]="i === 0" aria-label="Subir">↑</button>
-              <button matIconButton type="button" (click)="moveGroup(key, i, 1)" [disabled]="i === groups.length - 1" aria-label="Descer">↓</button>
-              <button matIconButton type="button" (click)="removeGroup(key, i)" aria-label="Remover grupo">✕</button>
+              </label>
+
+              <div class="mkbd-row-ctrls">
+                <label class="mkbd-check">
+                  <input
+                    type="checkbox"
+                    [ngModel]="group.locked ?? false"
+                    (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+                  />
+                  Travado
+                </label>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, -1)"
+                  [disabled]="i === 0"
+                  aria-label="Mover para cima"
+                >
+                  <mkb-icon name="up" />
+                </button>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, 1)"
+                  [disabled]="i === groups.length - 1"
+                  aria-label="Mover para baixo"
+                >
+                  <mkb-icon name="down" />
+                </button>
+                <button
+                  class="mkbd-icon-btn mkbd-icon-btn-danger"
+                  type="button"
+                  (click)="removeGroup(key, i)"
+                  aria-label="Remover grupo"
+                >
+                  <mkb-icon name="close" />
+                </button>
+              </div>
             </div>
           }
-          <button matButton type="button" (click)="addGroup(key)">+ Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}</button>
         </div>
+
+        <button class="mkbd-add" type="button" (click)="addGroup(key)">
+          <mkb-icon name="add" />
+          Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}
+        </button>
       }
     </ng-template>
 
     <!-- ======================= REGRAS ========================= -->
-    <h3 class="mkbd-h">Regras de transição (colunas)</h3>
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras de transição</span>
+      @if (transitions().length) {
+        <span class="mkbd-count">{{ transitions().length }}</span>
+      }
+    </div>
     <p class="mkbd-hint">
-      Sem linhas = qualquer transição é permitida. Com linhas, SÓ as listadas passam.
+      Sem regras = qualquer transição é permitida. Com regras, só as listadas passam.
     </p>
-    @for (t of transitions(); track $index; let i = $index) {
-      <div class="mkbd-row">
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>De</mat-label>
-          <mat-select [ngModel]="fromOf(t)" (ngModelChange)="setTransition(i, 'from', $event)">
-            <mat-option value="*">Qualquer</mat-option>
-            @for (id of columnIds(); track id) {
-              <mat-option [value]="id">{{ id }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-grow">
-          <mat-label>Para</mat-label>
-          <mat-select multiple [ngModel]="toOf(t)" (ngModelChange)="setTransition(i, 'to', $event)">
-            @for (id of columnIds(); track id) {
-              <mat-option [value]="id">{{ id }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button matIconButton type="button" (click)="removeTransition(i)" aria-label="Remover transição">✕</button>
+
+    @if (transitions().length) {
+      <div class="mkbd-rows">
+        @for (t of transitions(); track $index; let i = $index) {
+          <div class="mkbd-row mkbd-row-rule">
+            <mkb-combo
+              label="De"
+              [options]="fromOptions()"
+              [value]="fromOf(t)"
+              (valueChange)="setTransition(i, 'from', $event)"
+            />
+            <!-- Destino é multi-seleção: o valor vem da própria config (sem
+                 alocar array a cada ciclo, que foi o que travou a tela). -->
+            <mkb-combo
+              label="Para"
+              [multiple]="true"
+              placeholder="Qualquer"
+              [options]="columnOptions()"
+              [value]="t.to ?? null"
+              (valuesChange)="setTransition(i, 'to', $event)"
+            />
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeTransition(i)"
+              aria-label="Remover transição"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+        }
       </div>
     }
-    <button matButton type="button" (click)="addTransition()">+ Adicionar transição</button>
+    <button class="mkbd-btn mkbd-btn-outline mkbd-btn-block" type="button" (click)="addTransition()">
+      <mkb-icon name="add" />
+      Adicionar transição
+    </button>
 
-    <div class="mkbd-row mkbd-mt">
-      <mat-form-field appearance="outline" class="mkbd-grow">
-        <mat-label>Regras nomeadas de cartão (rule:*)</mat-label>
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras nomeadas</span>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+    <div class="mkbd-stack">
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de cartão (rule:*)</span>
         <input
-          matInput
           [ngModel]="namesOf('rules')"
           (ngModelChange)="setNames('rules', $event)"
           placeholder="rule:berco-livre, rule:sla"
         />
-      </mat-form-field>
-      <mat-form-field appearance="outline" class="mkbd-grow">
-        <mat-label>Regras nomeadas de itens (entryRules)</mat-label>
-        <input matInput [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
-      </mat-form-field>
+      </label>
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de itens (entryRules)</span>
+        <input [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </label>
     </div>
-    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
 
     <!-- ================== ORDENAÇÃO / GERAL ==================== -->
-    <h3 class="mkbd-h">Ordenação e geral</h3>
-    <div class="mkbd-row">
-      <mat-slide-toggle [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)">
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Ordenação e geral</span>
+    </div>
+    <div class="mkbd-stack">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input type="checkbox" [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)" />
         Ordenar itens por campo
-      </mat-slide-toggle>
+      </label>
       @if (config().sort; as sort) {
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Campo</mat-label>
-          <input matInput [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="mkbd-slim">
-          <mat-label>Direção</mat-label>
-          <mat-select [ngModel]="sort.direction ?? 'asc'" (ngModelChange)="setSort('direction', $event)">
-            <mat-option value="asc">Crescente</mat-option>
-            <mat-option value="desc">Decrescente</mat-option>
-          </mat-select>
-        </mat-form-field>
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo</span>
+          <input [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </label>
+        <mkb-combo
+          label="Direção"
+          [options]="directionOptions"
+          [value]="sort.direction ?? 'asc'"
+          (valueChange)="setSort('direction', $event)"
+        />
       }
-      <mat-slide-toggle
-        [ngModel]="config().readOnly ?? false"
-        (ngModelChange)="setReadOnly($event)"
-      >
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().readOnly ?? false"
+          (ngModelChange)="setReadOnly($event)"
+        />
         Somente leitura
-      </mat-slide-toggle>
+      </label>
     </div>
-  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px}.mkbd-h:first-child{margin-top:0}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:10px}.mkbd-groups{display:flex;flex-direction:column;gap:4px}.mkbd-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 8px;border:1px dashed var(--mkb-border, #e3e0ea);border-radius:8px}.mkbd-slim{width:170px}.mkbd-tiny{width:90px}.mkbd-grow{flex:1;min-width:200px}.mkbd-spacer{flex:1}.mkbd-color{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}\n"] }]
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-row-group{grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.3fr) 42px 76px auto}.mkbd-row-rule{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;border-left-color:var(--mkbd-border-strong)}.mkbd-btn-block{margin-top:4px}.mkbd-combo-btn{flex:1;min-width:0;height:100%;padding:0 16px 0 0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-field-combo:has(.mkbd-combo-btn:focus-visible){border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-combo-empty{color:var(--mkbd-muted)}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-row.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-row.cdk-drag-placeholder{opacity:.35}.mkbd-rows.cdk-drop-list-dragging .mkbd-row:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}@media(max-width:720px){.mkbd-row-group{grid-template-columns:22px minmax(0,1fr) 42px 76px}.mkbd-row-group .mkbd-row-ctrls{grid-column:1 / -1;justify-content:flex-end}}\n"] }]
         }] });
 
 /**
@@ -2166,6 +3005,11 @@ class MkbThemeEditor {
     isChanged(def) {
         return def.token in this.store.theme();
     }
+    /** Quantos tokens do grupo estão alterados (0 = não mostra contador). */
+    changedIn(label) {
+        const group = this.groups.find((g) => g.label === label);
+        return group?.tokens.filter((t) => this.isChanged(t)).length ?? 0;
+    }
     changedCount() {
         return Object.keys(this.store.theme()).length;
     }
@@ -2175,110 +3019,144 @@ class MkbThemeEditor {
       Só o que você ALTERAR entra na exportação; o resto herda o default do
       pacote e os tokens do Design System do host.
     </p>
+
     @for (group of groups; track group.label) {
-      <h3 class="mkbd-h">{{ group.label }}</h3>
-      <div class="mkbd-grid">
+      <div class="mkbd-section">
+        <span class="mkbd-overline">{{ group.label }}</span>
+        @if (changedIn(group.label); as n) {
+          <span class="mkbd-count">{{ n }}</span>
+        }
+      </div>
+
+      <div class="mkbd-tokens">
         @for (def of group.tokens; track def.token) {
           <div class="mkbd-token" [class.mkbd-token-changed]="isChanged(def)">
             @if (def.kind === 'color') {
-              <label class="mkbd-color">
+              <label class="mkbd-swatch">
                 <input
                   type="color"
                   [ngModel]="valueOf(def)"
                   (ngModelChange)="store.setToken(def.token, $event)"
                   [attr.aria-label]="def.label"
                 />
-                <span>
-                  <strong>{{ def.label }}</strong>
-                  <code>{{ def.token }}</code>
-                </span>
+                <span [style.background]="valueOf(def)"></span>
               </label>
+              <span class="mkbd-token-text">
+                <span class="mkbd-token-label">{{ def.label }}</span>
+                <code>{{ def.token }}</code>
+              </span>
             } @else {
-              <mat-form-field appearance="outline" class="mkbd-field">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   [ngModel]="valueOf(def)"
                   (ngModelChange)="store.setToken(def.token, $event)"
                   [placeholder]="def.default"
                 />
-                <mat-hint><code>{{ def.token }}</code></mat-hint>
-              </mat-form-field>
-            }
-            @if (isChanged(def)) {
-              <button matIconButton type="button" (click)="store.setToken(def.token, '')" [attr.aria-label]="'Restaurar ' + def.label">↺</button>
+              </label>
+              <code class="mkbd-token-code">{{ def.token }}</code>
             }
+
+            <button
+              class="mkbd-icon-btn"
+              type="button"
+              (click)="store.setToken(def.token, '')"
+              [disabled]="!isChanged(def)"
+              [attr.aria-label]="'Restaurar ' + def.label"
+            >
+              <mkb-icon name="reset" />
+            </button>
           </div>
         }
       </div>
     }
-    <div class="mkbd-actions">
-      <button matButton type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+
+    <div class="mkbd-theme-actions">
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        <mkb-icon name="reset" />
         Restaurar todos os defaults
       </button>
-      <span class="mkbd-hint">{{ changedCount() }} token(s) alterado(s)</span>
+      <span class="mkbd-hint mkbd-theme-count">{{ changedCount() }} token(s) alterado(s)</span>
     </div>
-  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);margin:0}.mkbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px}.mkbd-token{display:flex;align-items:center;gap:6px;border-radius:8px;padding:2px 6px}.mkbd-token-changed{background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 8%,transparent)}.mkbd-field{width:100%}.mkbd-color{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}.mkbd-color span{display:flex;flex-direction:column;font-size:12px}.mkbd-color code,.mkbd-field code{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-actions{display:flex;align-items:center;gap:12px;margin-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 16px}.mkbd-token{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;border-radius:var(--mkbd-radius-md);min-width:0}.mkbd-token-changed{border-color:var(--mkbd-primary-outline);background:var(--mkbd-primary-soft)}.mkbd-token-text{display:flex;flex-direction:column;min-width:0;gap:2px}.mkbd-token-label{font-size:12.5px}.mkbd-token code,.mkbd-token-code{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mkbd-token-code{width:92px;flex:none}.mkbd-token>.mkbd-icon-btn{margin-left:auto}.mkbd-theme-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.mkbd-theme-count{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbThemeEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mkb-theme-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: `
+            args: [{ selector: 'mkb-theme-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MkbIcon], template: `
     <p class="mkbd-hint">
       Só o que você ALTERAR entra na exportação; o resto herda o default do
       pacote e os tokens do Design System do host.
     </p>
+
     @for (group of groups; track group.label) {
-      <h3 class="mkbd-h">{{ group.label }}</h3>
-      <div class="mkbd-grid">
+      <div class="mkbd-section">
+        <span class="mkbd-overline">{{ group.label }}</span>
+        @if (changedIn(group.label); as n) {
+          <span class="mkbd-count">{{ n }}</span>
+        }
+      </div>
+
+      <div class="mkbd-tokens">
         @for (def of group.tokens; track def.token) {
           <div class="mkbd-token" [class.mkbd-token-changed]="isChanged(def)">
             @if (def.kind === 'color') {
-              <label class="mkbd-color">
+              <label class="mkbd-swatch">
                 <input
                   type="color"
                   [ngModel]="valueOf(def)"
                   (ngModelChange)="store.setToken(def.token, $event)"
                   [attr.aria-label]="def.label"
                 />
-                <span>
-                  <strong>{{ def.label }}</strong>
-                  <code>{{ def.token }}</code>
-                </span>
+                <span [style.background]="valueOf(def)"></span>
               </label>
+              <span class="mkbd-token-text">
+                <span class="mkbd-token-label">{{ def.label }}</span>
+                <code>{{ def.token }}</code>
+              </span>
             } @else {
-              <mat-form-field appearance="outline" class="mkbd-field">
-                <mat-label>{{ def.label }}</mat-label>
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
                 <input
-                  matInput
                   [ngModel]="valueOf(def)"
                   (ngModelChange)="store.setToken(def.token, $event)"
                   [placeholder]="def.default"
                 />
-                <mat-hint><code>{{ def.token }}</code></mat-hint>
-              </mat-form-field>
-            }
-            @if (isChanged(def)) {
-              <button matIconButton type="button" (click)="store.setToken(def.token, '')" [attr.aria-label]="'Restaurar ' + def.label">↺</button>
+              </label>
+              <code class="mkbd-token-code">{{ def.token }}</code>
             }
+
+            <button
+              class="mkbd-icon-btn"
+              type="button"
+              (click)="store.setToken(def.token, '')"
+              [disabled]="!isChanged(def)"
+              [attr.aria-label]="'Restaurar ' + def.label"
+            >
+              <mkb-icon name="reset" />
+            </button>
           </div>
         }
       </div>
     }
-    <div class="mkbd-actions">
-      <button matButton type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+
+    <div class="mkbd-theme-actions">
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        <mkb-icon name="reset" />
         Restaurar todos os defaults
       </button>
-      <span class="mkbd-hint">{{ changedCount() }} token(s) alterado(s)</span>
+      <span class="mkbd-hint mkbd-theme-count">{{ changedCount() }} token(s) alterado(s)</span>
     </div>
-  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);margin:0}.mkbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px}.mkbd-token{display:flex;align-items:center;gap:6px;border-radius:8px;padding:2px 6px}.mkbd-token-changed{background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 8%,transparent)}.mkbd-field{width:100%}.mkbd-color{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}.mkbd-color span{display:flex;flex-direction:column;font-size:12px}.mkbd-color code,.mkbd-field code{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-actions{display:flex;align-items:center;gap:12px;margin-top:16px}\n"] }]
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 16px}.mkbd-token{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;border-radius:var(--mkbd-radius-md);min-width:0}.mkbd-token-changed{border-color:var(--mkbd-primary-outline);background:var(--mkbd-primary-soft)}.mkbd-token-text{display:flex;flex-direction:column;min-width:0;gap:2px}.mkbd-token-label{font-size:12.5px}.mkbd-token code,.mkbd-token-code{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mkbd-token-code{width:92px;flex:none}.mkbd-token>.mkbd-icon-btn{margin-left:auto}.mkbd-theme-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.mkbd-theme-count{margin:0}\n"] }]
         }] });
 
 /**
  * Designer do Board — tela OPT-IN (entry point isolado
  * `@mosaicoo/kanban/designer`): edita visualmente o BoardConfig (pipeline,
  * cartão, dados, tema) com preview ao vivo e importa/exporta no formato que
- * o kanban consome em runtime. Exige @angular/material + @angular/forms
- * (peers opcionais do pacote — quem não usa o designer não paga por eles).
+ * o kanban consome em runtime.
+ *
+ * Visual: linguagem do Mosaicoo Design System (tela 13a dos Layouts). Os
+ * tokens caem no DS do host quando embarcado — ver designer.css.
  */
 class MosKanbanDesigner {
     store = inject(DesignerStore);
@@ -2384,69 +3262,120 @@ class MosKanbanDesigner {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanDesigner, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MosKanbanDesigner, isStandalone: true, selector: "mos-kanban-designer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", themeChange: "themeChange" }, providers: [DesignerStore], ngImport: i0, template: `
     <div class="mkbd-toolbar">
-      <span class="mkbd-title">Designer do Board</span>
+      <h2 class="mkbd-title">Designer do Board</h2>
       @if (store.errors().length; as count) {
-        <span class="mkbd-chip mkbd-chip-error" role="status">{{ count }} erro(s)</span>
+        <span class="mkbd-chip mkbd-chip-error" role="status">
+          <mkb-icon name="alert-circle" />
+          {{ count }} erro(s)
+        </span>
       } @else {
-        <span class="mkbd-chip mkbd-chip-ok" role="status">Config válida</span>
-      }
-      <span class="mkbd-spacer"></span>
-      <button matButton type="button" (click)="fileInput.click()">Importar</button>
-      <input
-        #fileInput
-        type="file"
-        accept=".json,application/json"
-        hidden
-        (change)="onImportFile($event)"
-      />
-      <button matButton type="button" (click)="exportConfig()">Exportar config</button>
-      <button matButton type="button" (click)="exportDesign()">Exportar design</button>
-      <button matButton type="button" (click)="exportCss()" [disabled]="!hasTheme()">Exportar CSS</button>
-      @if (storageKey()) {
-        <button matButton type="button" (click)="clearDraft()">Limpar rascunho</button>
+        <span class="mkbd-chip mkbd-chip-ok" role="status">
+          <mkb-icon name="check-circle" />
+          Config válida
+        </span>
       }
+
+      <div class="mkbd-toolbar-actions">
+        <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="fileInput.click()">
+          <mkb-icon name="upload" />
+          Importar
+        </button>
+        <input
+          #fileInput
+          type="file"
+          accept=".json,application/json"
+          hidden
+          (change)="onImportFile($event)"
+        />
+
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" [matMenuTriggerFor]="exportMenu">
+          <mkb-icon name="download" />
+          Exportar
+          <mkb-icon name="expand" />
+        </button>
+        <mat-menu #exportMenu="matMenu">
+          <button mat-menu-item type="button" (click)="exportConfig()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar config</strong>
+              <small>BoardConfig — o que o runtime consome</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" (click)="exportDesign()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar design</strong>
+              <small>Config + tema, para reabrir aqui</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" [disabled]="!hasTheme()" (click)="exportCss()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar CSS</strong>
+              <small>Só os tokens alterados</small>
+            </span>
+          </button>
+        </mat-menu>
+
+        @if (storageKey()) {
+          <span class="mkbd-toolbar-sep"></span>
+          <button class="mkbd-btn mkbd-btn-danger" type="button" (click)="clearDraft()">
+            <mkb-icon name="trash" />
+            Limpar rascunho
+          </button>
+        }
+      </div>
     </div>
 
     @if (importErrors().length) {
-      <div class="mkbd-import-errors" role="alert">
-        <strong>Importação rejeitada:</strong>
-        <ul>
-          @for (issue of importErrors(); track $index) {
-            <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
-          }
-        </ul>
-        <button matButton type="button" (click)="importErrors.set([])">Fechar</button>
+      <div class="mkbd-banner" role="alert">
+        <mkb-icon name="alert-circle" />
+        <div>
+          <strong>Importação rejeitada</strong>
+          <ul>
+            @for (issue of importErrors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        </div>
+        <button class="mkbd-icon-btn" type="button" (click)="importErrors.set([])" aria-label="Fechar aviso">
+          <mkb-icon name="close" />
+        </button>
       </div>
     }
 
     <div class="mkbd-body">
       <div class="mkbd-editors">
-        <mat-tab-group stretchTabs="false" animationDuration="0ms">
-          <mat-tab label="Pipeline"><mkb-pipeline-editor /></mat-tab>
-          <mat-tab label="Cartão"><mkb-card-editor /></mat-tab>
-          <mat-tab label="Dados"><mkb-data-editor /></mat-tab>
-          <mat-tab label="Tema"><mkb-theme-editor /></mat-tab>
+        <mat-tab-group class="mkbd-tabs" stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline">
+            <div class="mkbd-pane"><mkb-pipeline-editor /></div>
+          </mat-tab>
+          <mat-tab label="Cartão">
+            <div class="mkbd-pane"><mkb-card-editor /></div>
+          </mat-tab>
+          <mat-tab label="Dados">
+            <div class="mkbd-pane"><mkb-data-editor /></div>
+          </mat-tab>
+          <mat-tab label="Tema">
+            <div class="mkbd-pane"><mkb-theme-editor /></div>
+          </mat-tab>
           <mat-tab label="JSON">
-            <p class="mkbd-hint">
-              BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
-            </p>
-            <textarea
-              class="mkbd-json"
-              rows="24"
-              spellcheck="false"
-              [value]="store.exportConfigJson()"
-              #jsonArea
-            ></textarea>
-            <button matButton type="button" (click)="applyJson(jsonArea)">Aplicar JSON</button>
+            <div class="mkbd-pane">
+              <p class="mkbd-hint">
+                BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+              </p>
+              <textarea class="mkbd-json" rows="22" spellcheck="false" [value]="store.exportConfigJson()" #jsonArea></textarea>
+              <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="applyJson(jsonArea)">
+                Aplicar JSON
+              </button>
+            </div>
           </mat-tab>
         </mat-tab-group>
       </div>
 
       <div class="mkbd-preview">
         <div class="mkbd-preview-head">
-          <span>Preview ao vivo</span>
+          <mkb-icon name="eye" class="mkbd-preview-eye" />
+          <span class="mkbd-overline">Preview ao vivo</span>
           @if (store.errors().length) {
-            <span class="mkbd-hint">mostrando a última config válida</span>
+            <span class="mkbd-hint mkbd-preview-note">mostrando a última config válida</span>
           }
         </div>
         @if (store.errors().length) {
@@ -2461,13 +3390,14 @@ class MosKanbanDesigner {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--mkb-font, inherit)}.mkbd-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea);flex-wrap:wrap}.mkbd-title{font-size:14px;font-weight:600}.mkbd-chip{font-size:11px;padding:2px 10px;border-radius:999px}.mkbd-chip-ok{background:color-mix(in srgb,var(--mkb-success, #1b6e3c) 12%,transparent);color:var(--mkb-success, #1b6e3c)}.mkbd-chip-error{background:color-mix(in srgb,var(--mkb-danger, #b3261e) 12%,transparent);color:var(--mkb-danger, #b3261e)}.mkbd-spacer{flex:1}.mkbd-import-errors{margin:8px 12px;padding:8px 12px;border:1px solid var(--mkb-danger, #b3261e);border-radius:8px;font-size:12px}.mkbd-import-errors ul{margin:4px 0;padding-left:18px}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1 1 46%;min-width:340px;overflow:auto;padding:8px 12px 24px;border-right:1px solid var(--mkb-border, #e3e0ea)}.mkbd-preview{flex:1 1 54%;min-width:0;display:flex;flex-direction:column}.mkbd-preview-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px 4px;font-size:12px;font-weight:600}.mkbd-preview-board{flex:1;min-height:0;overflow:auto}.mkbd-issues{margin:0 12px 6px;padding:6px 12px 6px 26px;font-size:12px;color:var(--mkb-danger, #b3261e);border:1px dashed var(--mkb-danger, #b3261e);border-radius:8px}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-json{width:100%;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;padding:8px;box-sizing:border-box}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkb-border, #e3e0ea)}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MosKanbanBoard, selector: "mos-kanban-board", inputs: ["board", "loading", "error", "showSearch", "itemActions"], outputs: ["itemClick", "itemMove", "moveRejected", "itemAction", "entryAction", "dragStarted", "dragEnded", "dragCanceled"] }, { kind: "component", type: MkbPipelineEditor, selector: "mkb-pipeline-editor" }, { kind: "component", type: MkbCardEditor, selector: "mkb-card-editor" }, { kind: "component", type: MkbDataEditor, selector: "mkb-data-editor" }, { kind: "component", type: MkbThemeEditor, selector: "mkb-theme-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--mkbd-surface)}.mkbd-toolbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 12px;background:var(--mkbd-panel);border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-title{margin:0;font:500 17px var(--mkbd-font);letter-spacing:-.2px}.mkbd-toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mkbd-toolbar-sep{width:1px;height:26px;background:var(--mkbd-border)}.mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}.mkbd-menu-item strong{font:500 13px var(--mkbd-font)}.mkbd-menu-item small{font-size:11px;color:var(--mkbd-muted)}.mkbd-banner{flex:none;display:flex;align-items:flex-start;gap:10px;margin:12px 20px 0;padding:12px 14px;border:1px solid var(--mkbd-error);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-error-container);color:var(--mkbd-error);font-size:12px}.mkbd-banner>mkb-icon{font-size:20px;margin-top:1px}.mkbd-banner ul{margin:4px 0 0;padding-left:18px}.mkbd-banner strong{font:500 13px var(--mkbd-font)}.mkbd-banner>.mkbd-icon-btn{margin-left:auto;color:inherit}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--mkbd-canvas);border-right:1px solid var(--mkbd-border)}.mkbd-pane{padding:18px 20px 28px}.mkbd-tabs{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-header{background:var(--mkbd-panel);padding:0 12px;flex:none;border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-tabs ::ng-deep .mat-mdc-tab{min-width:0;padding:0 14px}.mkbd-tabs ::ng-deep .mdc-tab__text-label{font:500 13.5px var(--mkbd-font);letter-spacing:0;color:var(--mkbd-muted);transition:color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-tabs ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mdc-tab-indicator__content--underline{border-top-width:3px;border-radius:3px 3px 0 0;border-color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-content{overflow:auto}.mkbd-preview{flex:none;width:clamp(360px,42%,560px);display:flex;flex-direction:column;min-width:0;background:var(--mkbd-surface)}.mkbd-preview-head{flex:none;display:flex;align-items:center;gap:8px;padding:14px 18px 10px}.mkbd-preview-eye{font-size:16px;color:var(--mkbd-success)}.mkbd-preview-note{margin:0;text-transform:none}.mkbd-preview-board{flex:1;min-height:0;overflow:auto;padding:0 18px 16px}.mkbd-preview-board>mos-kanban-board{display:block;height:100%}.mkbd-issues{margin:0 18px 8px;padding:8px 12px 8px 26px;font-size:11.5px;color:var(--mkbd-error);background:var(--mkbd-error-container);border-radius:var(--mkbd-radius-md)}.mkbd-issues code,.mkbd-banner code{font-family:var(--mkbd-font-mono)}.mkbd-json{display:block;width:100%;margin-bottom:12px;padding:12px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel);color:var(--mkbd-fg);font:400 12px/1.5 var(--mkbd-font-mono);box-sizing:border-box;resize:vertical}.mkbd-json:focus-visible{outline:none;border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}::ng-deep .mat-mdc-menu-panel.mkbd-menu{min-width:176px;padding:6px;border:1px solid var(--color-border, #e6e8ee);border-radius:var(--radius-xl, 14px);background:var(--color-panel, #ffffff);box-shadow:var(--elevation-2, 0 1px 2px rgba(20, 22, 30, .1), 0 2px 6px rgba(20, 22, 30, .08))}::ng-deep .mkbd-menu .mat-mdc-menu-content{padding:0;max-height:285px;overflow-y:auto;overscroll-behavior:contain}::ng-deep .mkbd-menu .mkbd-menu-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 4px 8px;background:var(--color-panel, #ffffff)}::ng-deep .mkbd-menu .mkbd-menu-search input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--color-border-strong, #c9cdd6);border-radius:var(--radius-sm, 8px);background:var(--color-panel, #ffffff);color:var(--color-foreground, #1e1f24);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);outline:none}::ng-deep .mkbd-menu .mkbd-menu-search input:focus{border-color:var(--color-primary, #5e35b1);box-shadow:var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4))}::ng-deep .mkbd-menu .mkbd-menu-count{font:500 10px var(--font-mono, ui-monospace, monospace);color:var(--color-muted, #8b909c);padding-right:4px}::ng-deep .mkbd-menu .mkbd-menu-empty{margin:0;padding:10px;font-size:12px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mat-mdc-menu-item{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 10px;border-radius:var(--radius-md, 10px);color:var(--color-secondary, #4a4d57);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);letter-spacing:0}::ng-deep .mkbd-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font:inherit;display:flex;align-items:center;gap:10px}::ng-deep .mkbd-menu .mat-mdc-menu-item:hover:not([disabled]){background:color-mix(in srgb,var(--color-foreground, #1e1f24) 8%,transparent)}::ng-deep .mkbd-menu .mkbd-menu-item-active{background:var(--color-primary-container, #ede7f6);color:var(--color-on-primary-container, #2a1258);font-weight:500}::ng-deep .mkbd-menu .mat-mdc-menu-item[disabled]{color:var(--color-disabled-fg, #b3b7c1)}::ng-deep .mkbd-menu .mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}::ng-deep .mkbd-menu .mkbd-menu-item strong{font:500 13px var(--font-sans, sans-serif)}::ng-deep .mkbd-menu .mkbd-menu-item small{font-size:11px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;border:1.5px solid var(--color-border-strong, #c9cdd6);border-radius:4px}::ng-deep .mkbd-menu .mkbd-menu-check-on{background:var(--color-primary, #5e35b1);border-color:var(--color-primary, #5e35b1)}::ng-deep .mkbd-menu .mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--color-on-primary, #ffffff);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkbd-border)}.mkbd-preview{width:auto;flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }, { kind: "component", type: MosKanbanBoard, selector: "mos-kanban-board", inputs: ["board", "loading", "error", "showSearch", "itemActions"], outputs: ["itemClick", "itemMove", "moveRejected", "itemAction", "entryAction", "dragStarted", "dragEnded", "dragCanceled"] }, { kind: "component", type: MkbPipelineEditor, selector: "mkb-pipeline-editor" }, { kind: "component", type: MkbCardEditor, selector: "mkb-card-editor" }, { kind: "component", type: MkbDataEditor, selector: "mkb-data-editor" }, { kind: "component", type: MkbThemeEditor, selector: "mkb-theme-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanDesigner, decorators: [{
             type: Component,
             args: [{ selector: 'mos-kanban-designer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DesignerStore], imports: [
                         MatTabsModule,
-                        MatButtonModule,
+                        MatMenuModule,
+                        MkbIcon,
                         MosKanbanBoard,
                         MkbPipelineEditor,
                         MkbCardEditor,
@@ -2475,69 +3405,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         MkbThemeEditor,
                     ], template: `
     <div class="mkbd-toolbar">
-      <span class="mkbd-title">Designer do Board</span>
+      <h2 class="mkbd-title">Designer do Board</h2>
       @if (store.errors().length; as count) {
-        <span class="mkbd-chip mkbd-chip-error" role="status">{{ count }} erro(s)</span>
+        <span class="mkbd-chip mkbd-chip-error" role="status">
+          <mkb-icon name="alert-circle" />
+          {{ count }} erro(s)
+        </span>
       } @else {
-        <span class="mkbd-chip mkbd-chip-ok" role="status">Config válida</span>
-      }
-      <span class="mkbd-spacer"></span>
-      <button matButton type="button" (click)="fileInput.click()">Importar</button>
-      <input
-        #fileInput
-        type="file"
-        accept=".json,application/json"
-        hidden
-        (change)="onImportFile($event)"
-      />
-      <button matButton type="button" (click)="exportConfig()">Exportar config</button>
-      <button matButton type="button" (click)="exportDesign()">Exportar design</button>
-      <button matButton type="button" (click)="exportCss()" [disabled]="!hasTheme()">Exportar CSS</button>
-      @if (storageKey()) {
-        <button matButton type="button" (click)="clearDraft()">Limpar rascunho</button>
+        <span class="mkbd-chip mkbd-chip-ok" role="status">
+          <mkb-icon name="check-circle" />
+          Config válida
+        </span>
       }
+
+      <div class="mkbd-toolbar-actions">
+        <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="fileInput.click()">
+          <mkb-icon name="upload" />
+          Importar
+        </button>
+        <input
+          #fileInput
+          type="file"
+          accept=".json,application/json"
+          hidden
+          (change)="onImportFile($event)"
+        />
+
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" [matMenuTriggerFor]="exportMenu">
+          <mkb-icon name="download" />
+          Exportar
+          <mkb-icon name="expand" />
+        </button>
+        <mat-menu #exportMenu="matMenu">
+          <button mat-menu-item type="button" (click)="exportConfig()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar config</strong>
+              <small>BoardConfig — o que o runtime consome</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" (click)="exportDesign()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar design</strong>
+              <small>Config + tema, para reabrir aqui</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" [disabled]="!hasTheme()" (click)="exportCss()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar CSS</strong>
+              <small>Só os tokens alterados</small>
+            </span>
+          </button>
+        </mat-menu>
+
+        @if (storageKey()) {
+          <span class="mkbd-toolbar-sep"></span>
+          <button class="mkbd-btn mkbd-btn-danger" type="button" (click)="clearDraft()">
+            <mkb-icon name="trash" />
+            Limpar rascunho
+          </button>
+        }
+      </div>
     </div>
 
     @if (importErrors().length) {
-      <div class="mkbd-import-errors" role="alert">
-        <strong>Importação rejeitada:</strong>
-        <ul>
-          @for (issue of importErrors(); track $index) {
-            <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
-          }
-        </ul>
-        <button matButton type="button" (click)="importErrors.set([])">Fechar</button>
+      <div class="mkbd-banner" role="alert">
+        <mkb-icon name="alert-circle" />
+        <div>
+          <strong>Importação rejeitada</strong>
+          <ul>
+            @for (issue of importErrors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        </div>
+        <button class="mkbd-icon-btn" type="button" (click)="importErrors.set([])" aria-label="Fechar aviso">
+          <mkb-icon name="close" />
+        </button>
       </div>
     }
 
     <div class="mkbd-body">
       <div class="mkbd-editors">
-        <mat-tab-group stretchTabs="false" animationDuration="0ms">
-          <mat-tab label="Pipeline"><mkb-pipeline-editor /></mat-tab>
-          <mat-tab label="Cartão"><mkb-card-editor /></mat-tab>
-          <mat-tab label="Dados"><mkb-data-editor /></mat-tab>
-          <mat-tab label="Tema"><mkb-theme-editor /></mat-tab>
+        <mat-tab-group class="mkbd-tabs" stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline">
+            <div class="mkbd-pane"><mkb-pipeline-editor /></div>
+          </mat-tab>
+          <mat-tab label="Cartão">
+            <div class="mkbd-pane"><mkb-card-editor /></div>
+          </mat-tab>
+          <mat-tab label="Dados">
+            <div class="mkbd-pane"><mkb-data-editor /></div>
+          </mat-tab>
+          <mat-tab label="Tema">
+            <div class="mkbd-pane"><mkb-theme-editor /></div>
+          </mat-tab>
           <mat-tab label="JSON">
-            <p class="mkbd-hint">
-              BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
-            </p>
-            <textarea
-              class="mkbd-json"
-              rows="24"
-              spellcheck="false"
-              [value]="store.exportConfigJson()"
-              #jsonArea
-            ></textarea>
-            <button matButton type="button" (click)="applyJson(jsonArea)">Aplicar JSON</button>
+            <div class="mkbd-pane">
+              <p class="mkbd-hint">
+                BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+              </p>
+              <textarea class="mkbd-json" rows="22" spellcheck="false" [value]="store.exportConfigJson()" #jsonArea></textarea>
+              <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="applyJson(jsonArea)">
+                Aplicar JSON
+              </button>
+            </div>
           </mat-tab>
         </mat-tab-group>
       </div>
 
       <div class="mkbd-preview">
         <div class="mkbd-preview-head">
-          <span>Preview ao vivo</span>
+          <mkb-icon name="eye" class="mkbd-preview-eye" />
+          <span class="mkbd-overline">Preview ao vivo</span>
           @if (store.errors().length) {
-            <span class="mkbd-hint">mostrando a última config válida</span>
+            <span class="mkbd-hint mkbd-preview-note">mostrando a última config válida</span>
           }
         </div>
         @if (store.errors().length) {
@@ -2552,7 +3533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         </div>
       </div>
     </div>
-  `, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--mkb-font, inherit)}.mkbd-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea);flex-wrap:wrap}.mkbd-title{font-size:14px;font-weight:600}.mkbd-chip{font-size:11px;padding:2px 10px;border-radius:999px}.mkbd-chip-ok{background:color-mix(in srgb,var(--mkb-success, #1b6e3c) 12%,transparent);color:var(--mkb-success, #1b6e3c)}.mkbd-chip-error{background:color-mix(in srgb,var(--mkb-danger, #b3261e) 12%,transparent);color:var(--mkb-danger, #b3261e)}.mkbd-spacer{flex:1}.mkbd-import-errors{margin:8px 12px;padding:8px 12px;border:1px solid var(--mkb-danger, #b3261e);border-radius:8px;font-size:12px}.mkbd-import-errors ul{margin:4px 0;padding-left:18px}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1 1 46%;min-width:340px;overflow:auto;padding:8px 12px 24px;border-right:1px solid var(--mkb-border, #e3e0ea)}.mkbd-preview{flex:1 1 54%;min-width:0;display:flex;flex-direction:column}.mkbd-preview-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px 4px;font-size:12px;font-weight:600}.mkbd-preview-board{flex:1;min-height:0;overflow:auto}.mkbd-issues{margin:0 12px 6px;padding:6px 12px 6px 26px;font-size:12px;color:var(--mkb-danger, #b3261e);border:1px dashed var(--mkb-danger, #b3261e);border-radius:8px}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-json{width:100%;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;padding:8px;box-sizing:border-box}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkb-border, #e3e0ea)}}\n"] }]
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--mkbd-surface)}.mkbd-toolbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 12px;background:var(--mkbd-panel);border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-title{margin:0;font:500 17px var(--mkbd-font);letter-spacing:-.2px}.mkbd-toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mkbd-toolbar-sep{width:1px;height:26px;background:var(--mkbd-border)}.mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}.mkbd-menu-item strong{font:500 13px var(--mkbd-font)}.mkbd-menu-item small{font-size:11px;color:var(--mkbd-muted)}.mkbd-banner{flex:none;display:flex;align-items:flex-start;gap:10px;margin:12px 20px 0;padding:12px 14px;border:1px solid var(--mkbd-error);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-error-container);color:var(--mkbd-error);font-size:12px}.mkbd-banner>mkb-icon{font-size:20px;margin-top:1px}.mkbd-banner ul{margin:4px 0 0;padding-left:18px}.mkbd-banner strong{font:500 13px var(--mkbd-font)}.mkbd-banner>.mkbd-icon-btn{margin-left:auto;color:inherit}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--mkbd-canvas);border-right:1px solid var(--mkbd-border)}.mkbd-pane{padding:18px 20px 28px}.mkbd-tabs{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-header{background:var(--mkbd-panel);padding:0 12px;flex:none;border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-tabs ::ng-deep .mat-mdc-tab{min-width:0;padding:0 14px}.mkbd-tabs ::ng-deep .mdc-tab__text-label{font:500 13.5px var(--mkbd-font);letter-spacing:0;color:var(--mkbd-muted);transition:color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-tabs ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mdc-tab-indicator__content--underline{border-top-width:3px;border-radius:3px 3px 0 0;border-color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-content{overflow:auto}.mkbd-preview{flex:none;width:clamp(360px,42%,560px);display:flex;flex-direction:column;min-width:0;background:var(--mkbd-surface)}.mkbd-preview-head{flex:none;display:flex;align-items:center;gap:8px;padding:14px 18px 10px}.mkbd-preview-eye{font-size:16px;color:var(--mkbd-success)}.mkbd-preview-note{margin:0;text-transform:none}.mkbd-preview-board{flex:1;min-height:0;overflow:auto;padding:0 18px 16px}.mkbd-preview-board>mos-kanban-board{display:block;height:100%}.mkbd-issues{margin:0 18px 8px;padding:8px 12px 8px 26px;font-size:11.5px;color:var(--mkbd-error);background:var(--mkbd-error-container);border-radius:var(--mkbd-radius-md)}.mkbd-issues code,.mkbd-banner code{font-family:var(--mkbd-font-mono)}.mkbd-json{display:block;width:100%;margin-bottom:12px;padding:12px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel);color:var(--mkbd-fg);font:400 12px/1.5 var(--mkbd-font-mono);box-sizing:border-box;resize:vertical}.mkbd-json:focus-visible{outline:none;border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}::ng-deep .mat-mdc-menu-panel.mkbd-menu{min-width:176px;padding:6px;border:1px solid var(--color-border, #e6e8ee);border-radius:var(--radius-xl, 14px);background:var(--color-panel, #ffffff);box-shadow:var(--elevation-2, 0 1px 2px rgba(20, 22, 30, .1), 0 2px 6px rgba(20, 22, 30, .08))}::ng-deep .mkbd-menu .mat-mdc-menu-content{padding:0;max-height:285px;overflow-y:auto;overscroll-behavior:contain}::ng-deep .mkbd-menu .mkbd-menu-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 4px 8px;background:var(--color-panel, #ffffff)}::ng-deep .mkbd-menu .mkbd-menu-search input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--color-border-strong, #c9cdd6);border-radius:var(--radius-sm, 8px);background:var(--color-panel, #ffffff);color:var(--color-foreground, #1e1f24);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);outline:none}::ng-deep .mkbd-menu .mkbd-menu-search input:focus{border-color:var(--color-primary, #5e35b1);box-shadow:var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4))}::ng-deep .mkbd-menu .mkbd-menu-count{font:500 10px var(--font-mono, ui-monospace, monospace);color:var(--color-muted, #8b909c);padding-right:4px}::ng-deep .mkbd-menu .mkbd-menu-empty{margin:0;padding:10px;font-size:12px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mat-mdc-menu-item{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 10px;border-radius:var(--radius-md, 10px);color:var(--color-secondary, #4a4d57);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);letter-spacing:0}::ng-deep .mkbd-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font:inherit;display:flex;align-items:center;gap:10px}::ng-deep .mkbd-menu .mat-mdc-menu-item:hover:not([disabled]){background:color-mix(in srgb,var(--color-foreground, #1e1f24) 8%,transparent)}::ng-deep .mkbd-menu .mkbd-menu-item-active{background:var(--color-primary-container, #ede7f6);color:var(--color-on-primary-container, #2a1258);font-weight:500}::ng-deep .mkbd-menu .mat-mdc-menu-item[disabled]{color:var(--color-disabled-fg, #b3b7c1)}::ng-deep .mkbd-menu .mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}::ng-deep .mkbd-menu .mkbd-menu-item strong{font:500 13px var(--font-sans, sans-serif)}::ng-deep .mkbd-menu .mkbd-menu-item small{font-size:11px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;border:1.5px solid var(--color-border-strong, #c9cdd6);border-radius:4px}::ng-deep .mkbd-menu .mkbd-menu-check-on{background:var(--color-primary, #5e35b1);border-color:var(--color-primary, #5e35b1)}::ng-deep .mkbd-menu .mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--color-on-primary, #ffffff);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkbd-border)}.mkbd-preview{width:auto;flex:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }] } });
 
 /**