ngx-form-designer 0.0.26 → 0.0.27

package/fesm2022/ngx-form-designer.mjs

@@ -11,6 +11,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3$1 from 'lucide-angular';
 import { LucideAngularModule } from 'lucide-angular';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i5 from 'angular-resizable-element';
+import { ResizableModule } from 'angular-resizable-element';
 import { Router, NavigationEnd } from '@angular/router';
 import loader from '@monaco-editor/loader';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -622,6 +624,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
+const WRAPPER_SURFACE_STYLE_KEYS = new Set([
+    'backgroundColor',
+    'borderColor',
+    'borderStyle',
+    'borderWidth',
+    'borderRadius',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderTopStyle',
+    'borderRightStyle',
+    'borderBottomStyle',
+    'borderLeftStyle',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+]);
+const CONTROL_SURFACE_STYLE_KEYS = new Set([
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'lineHeight',
+    'textAlign',
+    'textDecoration'
+]);
 function normalizeStyle(style) {
     if (!style)
         return {};
@@ -663,6 +698,34 @@ function normalizeStyle(style) {
 function mergeAndNormalize(base, override) {
     return normalizeStyle({ ...(base || {}), ...(override || {}) });
 }
+function splitControlSurfaceStyles(style) {
+    if (!style) {
+        return { wrapperStyles: {}, controlStyles: {} };
+    }
+    const wrapperStyles = {};
+    const controlStyles = {};
+    Object.entries(style).forEach(([key, value]) => {
+        if (WRAPPER_SURFACE_STYLE_KEYS.has(key)) {
+            wrapperStyles[key] = value;
+            return;
+        }
+        if (CONTROL_SURFACE_STYLE_KEYS.has(key)) {
+            controlStyles[key] = value;
+            return;
+        }
+        wrapperStyles[key] = value;
+    });
+    return {
+        wrapperStyles: normalizeStyle(wrapperStyles),
+        controlStyles: normalizeStyle(controlStyles)
+    };
+}
+function hasWrapperSurfaceStyles(style) {
+    if (!style) {
+        return false;
+    }
+    return Object.keys(style).some(key => WRAPPER_SURFACE_STYLE_KEYS.has(key));
+}
 
 const WIDGET_EDITOR_CONTEXT = new InjectionToken('WIDGET_EDITOR_CONTEXT');
 
@@ -2226,9 +2289,15 @@ class LayoutNodeComponent {
     renderEngineProxy;
     renderEngineSource;
     renderEngineMode = 'live';
-    resizeStartX = 0;
-    resizeStartSpan = 0;
     destroyRef = inject(DestroyRef);
+    bottomResizeEdges = { bottom: true };
+    rightResizeEdges = { right: true };
+    activeResizeNodeId = null;
+    resizeStartSpan = 0;
+    resizeStartWidth = 0;
+    static MIN_RESIZABLE_HEIGHT = 20;
+    static MIN_COLUMN_SPAN = 1;
+    static MAX_COLUMN_SPAN = 12;
     constructor(_widgetDefs, designerState, cdr, el) {
         this._widgetDefs = _widgetDefs;
         this.designerState = designerState;
@@ -2240,6 +2309,9 @@ class LayoutNodeComponent {
     get isSelected() {
         return this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id));
     }
+    get isResizing() {
+        return this.activeResizeNodeId === this.node.id;
+    }
     isNodeSelected(nodeId) {
         return this.designerState.isNodeSelected(this.getScopedNodeId(nodeId));
     }
@@ -2343,16 +2415,6 @@ class LayoutNodeComponent {
         }
         return this.node.type === 'row' ? 'Row' : 'Column';
     }
-    // Resize Logic
-    resizeStartY = 0;
-    resizeStartHeight = 0;
-    resizingNode = null;
-    resizingCol = null; // New for Col Resize
-    resizeMoveListener;
-    resizeUpListener;
-    get isResizing() {
-        return this.resizingNode === this.node;
-    }
     ngOnInit() {
         this.updateWidgetDefinitions();
         if (this.node.type === 'widget') {
@@ -2367,89 +2429,48 @@ class LayoutNodeComponent {
                 this.cdr.markForCheck();
             });
         }
-        // Global listeners (bind once)
-        this.resizeMoveListener = this.onResizeMove.bind(this);
-        this.resizeUpListener = this.onResizeEnd.bind(this);
     }
     ngOnDestroy() {
-        // Cleanup global listeners if any are active (safety)
-        document.removeEventListener('mousemove', this.resizeMoveListener);
-        document.removeEventListener('mouseup', this.resizeUpListener);
         this.widgetComponentRef?.destroy();
         this.widgetComponentRef = undefined;
     }
-    // Height Resize
-    onResizeStart(e, node) {
+    onHeightResizeStart(node) {
         if (!this.designMode)
             return;
-        e.preventDefault();
-        e.stopPropagation();
-        this.resizingNode = node;
-        this.resizeStartY = e.clientY;
-        const currentHeight = parseInt(node.style?.minHeight || '0', 10);
-        this.resizeStartHeight = isNaN(currentHeight) ? 50 : currentHeight;
-        document.addEventListener('mousemove', this.resizeMoveListener);
-        document.addEventListener('mouseup', this.resizeUpListener);
+        this.activeResizeNodeId = node.id;
         this.designerState.selectNode(this.getScopedNodeId(node.id));
     }
-    // Column Width Resize
-    onColResizeStart(e, node) {
+    onHeightResize(node, event) {
+        if (!this.designMode)
+            return;
+        this.applyVerticalResize(node, event);
+    }
+    onHeightResizeEnd(node, event) {
+        if (!this.designMode)
+            return;
+        this.applyVerticalResize(node, event);
+        this.activeResizeNodeId = null;
+    }
+    onColumnResizeStart(node) {
         if (!this.designMode || node.type !== 'col')
             return;
-        e.preventDefault();
-        e.stopPropagation();
-        this.resizingCol = node;
-        this.resizeStartX = e.clientX;
-        // Get current span 
-        // We assume xs for now or active device logic could be added
-        // Use effective span for current breakpoint for consistency
-        const activeSpan = this.getEffectiveSpan(this.resizingCol.responsive || { xs: 12 });
-        this.resizeStartSpan = activeSpan;
-        document.addEventListener('mousemove', this.resizeMoveListener);
-        document.addEventListener('mouseup', this.resizeUpListener);
+        this.activeResizeNodeId = node.id;
+        this.resizeStartSpan = this.getEffectiveSpan(node.responsive || { xs: LayoutNodeComponent.MAX_COLUMN_SPAN });
+        this.resizeStartWidth = this.getCurrentNodeWidth();
         this.designerState.selectNode(this.getScopedNodeId(node.id));
     }
-    onResizeMove(e) {
-        // Handle Height Resize
-        if (this.resizingNode) {
-            const delta = e.clientY - this.resizeStartY;
-            const newHeight = Math.max(50, this.resizeStartHeight + delta);
-            if (!this.resizingNode.style)
-                this.resizingNode.style = {};
-            this.resizingNode.style.minHeight = `${newHeight}px`;
-            this.cdr.detectChanges();
-            return;
-        }
-        // Handle Column Resize
-        if (this.resizingCol) {
-            const deltaX = e.clientX - this.resizeStartX;
-            // Calculate grid jump
-            const currentPixelWidth = this.el.nativeElement.firstElementChild?.getBoundingClientRect().width || 100; // The switch div
-            const oneSpanInHighlight = currentPixelWidth / this.resizeStartSpan; // pixels per 1/12
-            // Prevent division by zero and weird states
-            if (oneSpanInHighlight <= 0)
-                return;
-            const spanDelta = Math.round(deltaX / oneSpanInHighlight);
-            let newSpan = this.resizeStartSpan + spanDelta;
-            // Clamp 1-12
-            newSpan = Math.max(1, Math.min(12, newSpan));
-            if (!this.resizingCol.responsive) {
-                this.resizingCol.responsive = { xs: 12 };
-            }
-            // Update result for CURRENT breakpoint
-            // If current breakpoint is not explicitly in responsive object, we should initialize it?
-            // Or updating 'xs' as fallback?
-            // Strategy: Update the specific breakpoint Key we are viewing.
-            const bp = this.breakpoint;
-            this.resizingCol.responsive[bp] = newSpan;
-            this.cdr.detectChanges();
-        }
-    }
-    onResizeEnd() {
-        this.resizingNode = null;
-        this.resizingCol = null;
-        document.removeEventListener('mousemove', this.resizeMoveListener);
-        document.removeEventListener('mouseup', this.resizeUpListener);
+    onColumnResize(node, event) {
+        if (!this.designMode || node.type !== 'col')
+            return;
+        this.applyColumnResize(node, event);
+    }
+    onColumnResizeEnd(node, event) {
+        if (!this.designMode || node.type !== 'col')
+            return;
+        this.applyColumnResize(node, event);
+        this.activeResizeNodeId = null;
+        this.resizeStartSpan = 0;
+        this.resizeStartWidth = 0;
     }
     onNodeDrop(event) {
         this.nodeDrop.emit(event);
@@ -2545,6 +2566,7 @@ class LayoutNodeComponent {
         }
         if (!this.widgetComponentRef)
             return;
+        this.applyWidgetHostLayout();
         this.widgetComponentRef.setInput('config', config);
         this.widgetComponentRef.setInput('engine', this.getEngineForRender());
         if (config.type === 'repeatable-group') {
@@ -2556,6 +2578,15 @@ class LayoutNodeComponent {
         }
         this.widgetComponentRef.changeDetectorRef.markForCheck();
     }
+    applyWidgetHostLayout() {
+        const hostElement = this.widgetComponentRef?.location.nativeElement;
+        if (!hostElement)
+            return;
+        hostElement.style.display = 'block';
+        hostElement.style.width = '100%';
+        hostElement.style.height = '100%';
+        hostElement.style.minHeight = '0';
+    }
     updateWidgetDefinitions() {
         const flavor = this.engine?.getSchema()?.flavor ?? this.designerState.activeFlavor();
         this.widgetDefs = this.allWidgetDefs.filter(def => !def.flavor || def.flavor === flavor);
@@ -2619,6 +2650,36 @@ class LayoutNodeComponent {
     }
     asRow(node) { return node; }
     asCol(node) { return node; }
+    applyVerticalResize(node, event) {
+        const nextHeight = this.getResizeHeight(event);
+        if (!nextHeight)
+            return;
+        const clampedHeight = Math.max(LayoutNodeComponent.MIN_RESIZABLE_HEIGHT, nextHeight);
+        if (!node.style)
+            node.style = {};
+        node.style.height = `${clampedHeight}px`;
+        delete node.style.minHeight;
+        this.cdr.detectChanges();
+    }
+    applyColumnResize(node, event) {
+        const nextWidth = event.rectangle.width;
+        if (!nextWidth || nextWidth <= 0)
+            return;
+        const startSpan = this.resizeStartSpan || this.getEffectiveSpan(node.responsive || { xs: LayoutNodeComponent.MAX_COLUMN_SPAN });
+        const startWidth = this.resizeStartWidth || this.getCurrentNodeWidth();
+        if (!startWidth || startWidth <= 0 || startSpan <= 0)
+            return;
+        const oneSpanWidth = startWidth / startSpan;
+        if (oneSpanWidth <= 0)
+            return;
+        const spanDelta = Math.round((nextWidth - startWidth) / oneSpanWidth);
+        const nextSpan = Math.max(LayoutNodeComponent.MIN_COLUMN_SPAN, Math.min(LayoutNodeComponent.MAX_COLUMN_SPAN, startSpan + spanDelta));
+        if (!node.responsive) {
+            node.responsive = { xs: LayoutNodeComponent.MAX_COLUMN_SPAN };
+        }
+        node.responsive[this.breakpoint] = nextSpan;
+        this.cdr.detectChanges();
+    }
     getColClasses(node) {
         if (node.type !== 'col')
             return '';
@@ -2672,6 +2733,20 @@ class LayoutNodeComponent {
         };
         return map[span] || 'w-full';
     }
+    getResizeHeight(event) {
+        if (event.rectangle.height !== undefined) {
+            return Math.round(event.rectangle.height);
+        }
+        const { top, bottom } = event.rectangle;
+        if (top === undefined || bottom === undefined) {
+            return undefined;
+        }
+        return Math.round(bottom - top);
+    }
+    getCurrentNodeWidth() {
+        const hostElement = this.el.nativeElement.firstElementChild;
+        return hostElement?.getBoundingClientRect().width ?? 0;
+    }
     getStyle(node) {
         if (!('style' in node) || !node.style)
             return {};
@@ -2769,6 +2844,10 @@ class LayoutNodeComponent {
         <div *ngIf="isNodeVisible(node)"
              class="flex flex-wrap transition-all relative group"
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onHeightResizeStart(node)"
+             (resizing)="onHeightResize(node, $event)"
+             (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onRowClick($event)"
              (contextmenu)="onRowContextMenu($event)"
              [class.outline-dashed]="designMode"
@@ -2820,7 +2899,9 @@ class LayoutNodeComponent {
         </app-layout-node>
          <div *ngIf="designMode && isSelected" 
               class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-              (mousedown)="onResizeStart($event, node)"
+              mwlResizeHandle
+              [resizeEdges]="bottomResizeEdges"
+              (mousedown)="$event.stopPropagation()"
               (click)="$event.stopPropagation()">
          </div>
         </div>
@@ -2832,6 +2913,10 @@ class LayoutNodeComponent {
              [class]="getColContainerClasses(node)"
              [class.bg-blue-50]="isResizing"
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onColumnResizeStart(node)"
+             (resizing)="onColumnResize(node, $event)"
+             (resizeEnd)="onColumnResizeEnd(node, $event)"
              (click)="onColumnClick($event)"
              (contextmenu)="onColumnContextMenu($event)"
              cdkDropList
@@ -2914,7 +2999,9 @@ class LayoutNodeComponent {
          <!-- Width Resize (Right) - Only if not last column in row -->
          <div *ngIf="designMode && isSelected"
               class="absolute top-0 bottom-2 right-0 w-3 cursor-col-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-              (mousedown)="onColResizeStart($event, node)"
+              mwlResizeHandle
+              [resizeEdges]="rightResizeEdges"
+              (mousedown)="$event.stopPropagation()"
               (click)="$event.stopPropagation()">
          </div>
         </div>
@@ -2925,6 +3012,10 @@ class LayoutNodeComponent {
         <div *ngIf="isNodeVisible(node)"
              class="relative group w-full" 
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onHeightResizeStart(node)"
+             (resizing)="onHeightResize(node, $event)"
+             (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onWidgetClick($event)"
              (contextmenu)="onWidgetContextMenu($event)"
              [class.ring-2]="designMode && isSelected"
@@ -2975,21 +3066,23 @@ class LayoutNodeComponent {
         <div *ngIf="designMode && !isSelected && !hasActiveNestedSelection()" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
         <div *ngIf="designMode && isSelected" 
              class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-             (mousedown)="onResizeStart($event, node)"
+             mwlResizeHandle
+             [resizeEdges]="bottomResizeEdges"
+             (mousedown)="$event.stopPropagation()"
              (click)="$event.stopPropagation()">
         </div>
         </div>
       </ng-container>
 
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: ResizableModule }, { kind: "directive", type: i5.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: i5.ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout-node',
                     standalone: true,
-                    imports: [CommonModule, DragDropModule, UiIconModule],
+                    imports: [CommonModule, DragDropModule, UiIconModule, ResizableModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <ng-container [ngSwitch]="node.type">
@@ -2999,6 +3092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <div *ngIf="isNodeVisible(node)"
              class="flex flex-wrap transition-all relative group"
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onHeightResizeStart(node)"
+             (resizing)="onHeightResize(node, $event)"
+             (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onRowClick($event)"
              (contextmenu)="onRowContextMenu($event)"
              [class.outline-dashed]="designMode"
@@ -3050,7 +3147,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         </app-layout-node>
          <div *ngIf="designMode && isSelected" 
               class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-              (mousedown)="onResizeStart($event, node)"
+              mwlResizeHandle
+              [resizeEdges]="bottomResizeEdges"
+              (mousedown)="$event.stopPropagation()"
               (click)="$event.stopPropagation()">
          </div>
         </div>
@@ -3062,6 +3161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              [class]="getColContainerClasses(node)"
              [class.bg-blue-50]="isResizing"
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onColumnResizeStart(node)"
+             (resizing)="onColumnResize(node, $event)"
+             (resizeEnd)="onColumnResizeEnd(node, $event)"
              (click)="onColumnClick($event)"
              (contextmenu)="onColumnContextMenu($event)"
              cdkDropList
@@ -3144,7 +3247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          <!-- Width Resize (Right) - Only if not last column in row -->
          <div *ngIf="designMode && isSelected"
               class="absolute top-0 bottom-2 right-0 w-3 cursor-col-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-              (mousedown)="onColResizeStart($event, node)"
+              mwlResizeHandle
+              [resizeEdges]="rightResizeEdges"
+              (mousedown)="$event.stopPropagation()"
               (click)="$event.stopPropagation()">
          </div>
         </div>
@@ -3155,6 +3260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <div *ngIf="isNodeVisible(node)"
              class="relative group w-full" 
              [style]="getStyle(node)"
+             mwlResizable
+             (resizeStart)="onHeightResizeStart(node)"
+             (resizing)="onHeightResize(node, $event)"
+             (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onWidgetClick($event)"
              (contextmenu)="onWidgetContextMenu($event)"
              [class.ring-2]="designMode && isSelected"
@@ -3205,7 +3314,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <div *ngIf="designMode && !isSelected && !hasActiveNestedSelection()" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
         <div *ngIf="designMode && isSelected" 
              class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
-             (mousedown)="onResizeStart($event, node)"
+             mwlResizeHandle
+             [resizeEdges]="bottomResizeEdges"
+             (mousedown)="$event.stopPropagation()"
              (click)="$event.stopPropagation()">
         </div>
         </div>
@@ -10648,26 +10759,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
   `, styles: [".inspector-select{height:2rem;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700);appearance:none;cursor:pointer}.inspector-select:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-700)}.inspector-number-input:focus{outline:none}.inspector-unit{font-size:11px;color:var(--color-ink-400);padding-left:.25rem;padding-right:.25rem;background-color:var(--color-input-dark);height:2rem;display:flex;align-items:center;border-left:1px solid var(--color-border-dark)}\n"] }]
         }] });
 
+const BORDER_SIDE_KEYS = {
+    top: {
+        borderStyle: 'borderTopStyle',
+        borderWidth: 'borderTopWidth',
+        borderColor: 'borderTopColor'
+    },
+    right: {
+        borderStyle: 'borderRightStyle',
+        borderWidth: 'borderRightWidth',
+        borderColor: 'borderRightColor'
+    },
+    bottom: {
+        borderStyle: 'borderBottomStyle',
+        borderWidth: 'borderBottomWidth',
+        borderColor: 'borderBottomColor'
+    },
+    left: {
+        borderStyle: 'borderLeftStyle',
+        borderWidth: 'borderLeftWidth',
+        borderColor: 'borderLeftColor'
+    }
+};
+const RADIUS_CORNER_KEYS = {
+    tl: 'borderTopLeftRadius',
+    tr: 'borderTopRightRadius',
+    br: 'borderBottomRightRadius',
+    bl: 'borderBottomLeftRadius'
+};
 /**
- * Light theme Borders section.
+ * Borders inspector with side-aware editing.
  */
 class InspectorBordersSectionComponent {
     style = input({});
     styleChange = output();
     selectedCorner = signal('all');
     selectedSide = signal('all');
+    selectedSideLabel = computed(() => {
+        const option = this.borderSides.find(candidate => candidate.side === this.selectedSide());
+        return option?.label.toLowerCase() ?? 'all';
+    });
     radiusCorners = [
-        { corner: 'all', label: 'All Corners', icon: 'square' },
-        { corner: 'tl', label: 'Top Left', icon: 'corner-up-left' },
-        { corner: 'tr', label: 'Top Right', icon: 'corner-up-right' },
-        { corner: 'bl', label: 'Bottom Left', icon: 'corner-down-left' },
-        { corner: 'br', label: 'Bottom Right', icon: 'corner-down-right' }
+        { corner: 'all', label: 'All' },
+        { corner: 'tl', label: 'TL' },
+        { corner: 'tr', label: 'TR' },
+        { corner: 'bl', label: 'BL' },
+        { corner: 'br', label: 'BR' }
+    ];
+    borderSides = [
+        { side: 'all', label: 'All' },
+        { side: 'top', label: 'Top' },
+        { side: 'right', label: 'Right' },
+        { side: 'bottom', label: 'Bottom' },
+        { side: 'left', label: 'Left' }
     ];
     borderStyles = [
-        { value: 'none', icon: 'x' },
-        { value: 'solid', icon: 'minus' },
-        { value: 'dashed', icon: 'more-horizontal' },
-        { value: 'dotted', icon: 'grip-horizontal' }
+        { value: 'none', label: 'None' },
+        { value: 'solid', label: 'Solid' },
+        { value: 'dashed', label: 'Dashed' },
+        { value: 'dotted', label: 'Dotted' }
     ];
     selectCorner(corner) {
         this.selectedCorner.set(corner);
@@ -10675,315 +10825,352 @@ class InspectorBordersSectionComponent {
     selectSide(side) {
         this.selectedSide.set(side);
     }
+    getSelectorClass(isActive) {
+        return isActive
+            ? 'h-8 rounded-md border border-gray-400 bg-gray-200 px-3 text-[12px] font-medium text-gray-800'
+            : 'h-8 rounded-md border border-border-dark bg-input-dark px-3 text-[12px] text-gray-600 hover:border-gray-400 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-blue';
+    }
+    getSegmentClass(isActive) {
+        return isActive
+            ? 'rounded-sm bg-gray-200 px-2 py-1.5 text-[12px] font-medium text-gray-800'
+            : 'rounded-sm px-2 py-1.5 text-[12px] text-gray-600 hover:bg-gray-100';
+    }
     getRadiusValue() {
         const corner = this.selectedCorner();
-        if (corner === 'all')
-            return String(this.style()['borderRadius'] || '0');
-        const map = {
-            tl: 'borderTopLeftRadius',
-            tr: 'borderTopRightRadius',
-            br: 'borderBottomRightRadius',
-            bl: 'borderBottomLeftRadius'
-        };
-        return String(this.style()[map[corner]] || '0');
+        if (corner === 'all') {
+            return String(this.style()['borderRadius'] ?? '0');
+        }
+        const cornerKey = RADIUS_CORNER_KEYS[corner];
+        return String(this.style()[cornerKey] ?? this.style()['borderRadius'] ?? '0');
     }
     setRadiusValue(value) {
+        const nextStyle = this.createStyleDraft();
         const corner = this.selectedCorner();
         if (corner === 'all') {
-            this.updateStyle('borderRadius', value);
+            this.clearRadiusOverrides(nextStyle);
+            this.assignStyleValue(nextStyle, 'borderRadius', value);
         }
         else {
-            const map = {
-                tl: 'borderTopLeftRadius',
-                tr: 'borderTopRightRadius',
-                br: 'borderBottomRightRadius',
-                bl: 'borderBottomLeftRadius'
-            };
-            this.updateStyle(map[corner], value);
+            this.assignStyleValue(nextStyle, RADIUS_CORNER_KEYS[corner], value);
+        }
+        this.emitStyle(nextStyle);
+    }
+    getBorderValue(property) {
+        const side = this.selectedSide();
+        if (side === 'all') {
+            return String(this.style()[property] ?? this.getDefaultBorderValue(property));
+        }
+        const sideKey = BORDER_SIDE_KEYS[side][property];
+        return String(this.style()[sideKey] ?? this.style()[property] ?? this.getDefaultBorderValue(property));
+    }
+    getColorInputValue() {
+        const value = String(this.getBorderValue('borderColor') || '').trim().toLowerCase();
+        if (/^#[0-9a-f]{6}$/i.test(value)) {
+            return value;
         }
+        if (/^#[0-9a-f]{3}$/i.test(value)) {
+            const [, r, g, b] = value;
+            return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+        }
+        if (value === 'white') {
+            return '#ffffff';
+        }
+        return '#000000';
     }
     parseValue(val) {
         if (val === undefined || val === null)
             return 0;
         const num = parseFloat(String(val));
-        return isNaN(num) ? 0 : num;
-    }
-    getColorName(color) {
-        if (!color)
-            return 'black';
-        if (color === '#000000' || color === 'black')
-            return 'black';
-        if (color === '#ffffff' || color === 'white')
-            return 'white';
-        return color;
+        return Number.isNaN(num) ? 0 : num;
     }
     updateStyle(key, value) {
-        this.styleChange.emit({ ...this.style(), [key]: value });
+        if (this.isBorderProperty(key)) {
+            this.emitStyle(this.buildBorderStyleDraft(key, value));
+            return;
+        }
+        const nextStyle = this.createStyleDraft();
+        this.assignStyleValue(nextStyle, key, value);
+        this.emitStyle(nextStyle);
+    }
+    buildBorderStyleDraft(property, value) {
+        const nextStyle = this.createStyleDraft();
+        const side = this.selectedSide();
+        if (side === 'all') {
+            this.clearBorderOverrides(nextStyle, property);
+            this.assignStyleValue(nextStyle, property, value);
+            return nextStyle;
+        }
+        this.assignStyleValue(nextStyle, BORDER_SIDE_KEYS[side][property], value);
+        return nextStyle;
+    }
+    isBorderProperty(key) {
+        return key === 'borderStyle' || key === 'borderWidth' || key === 'borderColor';
+    }
+    getDefaultBorderValue(property) {
+        switch (property) {
+            case 'borderStyle':
+                return 'none';
+            case 'borderColor':
+                return '#000000';
+            default:
+                return '0';
+        }
+    }
+    createStyleDraft() {
+        return { ...this.style() };
+    }
+    clearBorderOverrides(style, property) {
+        for (const side of Object.keys(BORDER_SIDE_KEYS)) {
+            delete style[BORDER_SIDE_KEYS[side][property]];
+        }
+    }
+    clearRadiusOverrides(style) {
+        for (const corner of Object.keys(RADIUS_CORNER_KEYS)) {
+            delete style[RADIUS_CORNER_KEYS[corner]];
+        }
+    }
+    assignStyleValue(style, key, value) {
+        if (value === undefined || value === null || value === '') {
+            delete style[key];
+            return;
+        }
+        style[key] = value;
+    }
+    emitStyle(style) {
+        this.styleChange.emit(style);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorBordersSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InspectorBordersSectionComponent, isStandalone: true, selector: "inspector-borders-section", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { styleChange: "styleChange" }, ngImport: i0, template: `
-    <div class="flex flex-col gap-3">
-      <!-- Radius Row -->
-      <div class="flex items-center gap-2">
-        <span class="text-[12px] text-gray-500 w-14">Radius</span>
-        <div class="flex-1 flex items-center gap-2">
-          <!-- Corner selector -->
-          <div class="flex gap-1">
-            @for (opt of radiusCorners; track opt.corner) {
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-[56px_1fr] gap-3 items-start">
+        <span class="section-label text-[12px] pt-2">Radius</span>
+        <div class="flex flex-col gap-2">
+          <div class="flex flex-wrap gap-1">
+            @for (option of radiusCorners; track option.corner) {
               <button
                 type="button"
-                (click)="selectCorner(opt.corner)"
-                [class]="selectedCorner() === opt.corner 
-                  ? 'w-6 h-6 flex items-center justify-center bg-gray-200 rounded text-gray-700 border border-gray-400' 
-                  : 'w-6 h-6 flex items-center justify-center bg-input-dark rounded text-gray-500 border border-transparent hover:border-gray-300'"
-                [title]="opt.label">
-                <lucide-icon [name]="opt.icon" class="w-3 h-3"></lucide-icon>
+                (click)="selectCorner(option.corner)"
+                [class]="getSelectorClass(selectedCorner() === option.corner)"
+                [attr.aria-pressed]="selectedCorner() === option.corner">
+                {{ option.label }}
               </button>
             }
           </div>
-          
-          <!-- Slider -->
-          <input
-            type="range"
-            [ngModel]="parseValue(getRadiusValue())"
-            (ngModelChange)="setRadiusValue($event + 'px')"
-            min="0"
-            max="50"
-            class="flex-1 h-0.5 bg-gray-300 rounded appearance-none cursor-pointer accent-primary-blue">
-          
-          <!-- Value -->
-          <div class="inspector-input-with-unit w-14">
+
+          <div class="flex items-center gap-2">
             <input
-              type="text"
-              [ngModel]="getRadiusValue()"
-              (ngModelChange)="setRadiusValue($event)"
-              class="inspector-number-input">
-            <span class="inspector-unit">PX</span>
+              type="range"
+              [ngModel]="parseValue(getRadiusValue())"
+              (ngModelChange)="setRadiusValue($event + 'px')"
+              min="0"
+              max="50"
+              class="flex-1 h-1 cursor-pointer accent-primary-blue">
+
+            <div class="inspector-input-with-unit w-[88px]">
+              <input
+                type="text"
+                [ngModel]="getRadiusValue()"
+                (ngModelChange)="setRadiusValue($event)"
+                class="inspector-number-input"
+                aria-label="Border radius">
+              <span class="inspector-unit">PX</span>
+            </div>
           </div>
         </div>
       </div>
-      
-      <!-- Borders Section -->
-      <div class="text-[12px] text-gray-500 mb-1">Borders</div>
-      
-      <div class="grid grid-cols-[auto_1fr] gap-4">
-        <!-- Side Selector Grid -->
-        <div class="grid grid-cols-3 gap-1 w-fit place-items-center">
-          <!-- Top -->
-          <div class="col-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('top')"
-               [class.bg-gray-200]="selectedSide() === 'top'">
-            <div class="w-3 h-[1px] bg-gray-500"></div>
-          </div>
-          <!-- Left -->
-          <div class="col-start-1 row-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('left')"
-               [class.bg-gray-200]="selectedSide() === 'left'">
-            <div class="w-[1px] h-3 bg-gray-500"></div>
-          </div>
-          <!-- All -->
-          <div class="col-start-2 row-start-2 w-6 h-6 flex items-center justify-center bg-gray-200 border border-gray-400 rounded cursor-pointer"
-               (click)="selectSide('all')"
-               [class.border-gray-600]="selectedSide() === 'all'">
-            <div class="w-3 h-3 border border-gray-600"></div>
-          </div>
-          <!-- Right -->
-          <div class="col-start-3 row-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('right')"
-               [class.bg-gray-200]="selectedSide() === 'right'">
-            <div class="w-[1px] h-3 bg-gray-500"></div>
-          </div>
-          <!-- Bottom -->
-          <div class="col-start-2 row-start-3 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('bottom')"
-               [class.bg-gray-200]="selectedSide() === 'bottom'">
-            <div class="w-3 h-[1px] bg-gray-500"></div>
-          </div>
-        </div>
-        
-        <!-- Border Controls -->
-        <div class="flex flex-col gap-2 w-full">
-          <!-- Style -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Style</span>
-            <div class="flex bg-input-dark rounded border border-border-dark p-[1px]">
-              @for (st of borderStyles; track st.value) {
+
+      <div class="overflow-hidden rounded-lg border border-border-dark bg-white p-3">
+        <div class="grid min-w-0 grid-cols-[56px_1fr] gap-3 items-start">
+          <span class="section-label text-[12px] pt-2">Borders</span>
+          <div class="flex min-w-0 flex-col gap-3">
+            <div class="flex flex-wrap gap-1">
+              @for (option of borderSides; track option.side) {
                 <button
                   type="button"
-                  (click)="updateStyle('borderStyle', st.value)"
-                  [class]="style()['borderStyle'] === st.value 
-                    ? 'p-1 px-2 bg-gray-200 rounded' 
-                    : 'p-1 px-2 hover:bg-gray-100 rounded'">
-                  <lucide-icon [name]="st.icon" 
-                    [class]="style()['borderStyle'] === st.value ? 'w-3 h-3 text-gray-700' : 'w-3 h-3 text-gray-400'">
-                  </lucide-icon>
+                  (click)="selectSide(option.side)"
+                  [class]="getSelectorClass(selectedSide() === option.side)"
+                  [attr.aria-pressed]="selectedSide() === option.side">
+                  {{ option.label }}
                 </button>
               }
             </div>
-          </div>
-          
-          <!-- Width -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Width</span>
-            <div class="inspector-input-with-unit w-24">
-              <input
-                type="text"
-                [ngModel]="style()['borderWidth'] || '0'"
-                (ngModelChange)="updateStyle('borderWidth', $event)"
-                class="inspector-number-input flex-1 text-left">
-              <span class="inspector-unit">PX</span>
+
+            <p class="text-[11px] text-gray-500">
+              Editing {{ selectedSideLabel() }} border
+            </p>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-style">Style</label>
+              <div
+                id="inspector-border-style"
+                class="grid grid-cols-4 rounded-md border border-border-dark bg-input-dark p-1">
+                @for (styleOption of borderStyles; track styleOption.value) {
+                  <button
+                    type="button"
+                    (click)="updateStyle('borderStyle', styleOption.value)"
+                    [class]="getSegmentClass(getBorderValue('borderStyle') === styleOption.value)">
+                    {{ styleOption.label }}
+                  </button>
+                }
+              </div>
             </div>
-          </div>
-          
-          <!-- Color -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Color</span>
-            <div class="flex items-center w-24 bg-input-dark border border-border-dark rounded px-1 py-0.5 cursor-pointer">
-              <input
-                type="color"
-                [ngModel]="style()['borderColor'] || '#000000'"
-                (ngModelChange)="updateStyle('borderColor', $event)"
-                class="w-3 h-3 border border-gray-300 mr-2 cursor-pointer">
-              <span class="text-sm text-gray-700">{{ getColorName(style()['borderColor']) }}</span>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-width">Width</label>
+              <div class="inspector-input-with-unit min-w-0">
+                <input
+                  id="inspector-border-width"
+                  data-testid="border-width-input"
+                  type="text"
+                  [ngModel]="getBorderValue('borderWidth')"
+                  (ngModelChange)="updateStyle('borderWidth', $event)"
+                  class="inspector-number-input"
+                  aria-label="Border width">
+                <span class="inspector-unit">PX</span>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-color">Color</label>
+              <div class="flex min-w-0 items-center gap-2 rounded-md border border-border-dark bg-input-dark px-2 py-1">
+                <input
+                  id="inspector-border-color"
+                  type="color"
+                  [ngModel]="getColorInputValue()"
+                  (ngModelChange)="updateStyle('borderColor', $event)"
+                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white">
+
+                <input
+                  data-testid="border-color-input"
+                  type="text"
+                  [ngModel]="getBorderValue('borderColor')"
+                  (ngModelChange)="updateStyle('borderColor', $event)"
+                  class="h-8 min-w-0 flex-1 bg-transparent text-sm text-gray-700 focus:outline-none"
+                  aria-label="Border color">
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);padding-left:.25rem;padding-right:.25rem;overflow:hidden}.inspector-number-input{height:2rem;padding-left:.25rem;padding-right:.25rem;background-color:transparent;border:none;text-align:right;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-700);width:100%}.inspector-number-input:focus{outline:none;--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.inspector-unit{font-size:11px;color:var(--color-ink-400);margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+  `, isInline: true, styles: [".section-label{font-size:12px;color:var(--color-ink-400)}.inspector-input-with-unit{display:flex;align-items:center;min-width:0;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{width:100%;min-width:0;height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;color:var(--color-ink-700);font-size:.875rem;line-height:1.25rem}.inspector-number-input:focus{outline:none}.inspector-unit{display:flex;align-items:center;height:2rem;padding-left:.5rem;padding-right:.5rem;border-left:1px solid var(--color-border-dark);font-size:11px;color:var(--color-ink-400);background-color:var(--color-input-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorBordersSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-borders-section', standalone: true, imports: [CommonModule, FormsModule, UiIconModule], template: `
-    <div class="flex flex-col gap-3">
-      <!-- Radius Row -->
-      <div class="flex items-center gap-2">
-        <span class="text-[12px] text-gray-500 w-14">Radius</span>
-        <div class="flex-1 flex items-center gap-2">
-          <!-- Corner selector -->
-          <div class="flex gap-1">
-            @for (opt of radiusCorners; track opt.corner) {
+            args: [{ selector: 'inspector-borders-section', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-[56px_1fr] gap-3 items-start">
+        <span class="section-label text-[12px] pt-2">Radius</span>
+        <div class="flex flex-col gap-2">
+          <div class="flex flex-wrap gap-1">
+            @for (option of radiusCorners; track option.corner) {
               <button
                 type="button"
-                (click)="selectCorner(opt.corner)"
-                [class]="selectedCorner() === opt.corner 
-                  ? 'w-6 h-6 flex items-center justify-center bg-gray-200 rounded text-gray-700 border border-gray-400' 
-                  : 'w-6 h-6 flex items-center justify-center bg-input-dark rounded text-gray-500 border border-transparent hover:border-gray-300'"
-                [title]="opt.label">
-                <lucide-icon [name]="opt.icon" class="w-3 h-3"></lucide-icon>
+                (click)="selectCorner(option.corner)"
+                [class]="getSelectorClass(selectedCorner() === option.corner)"
+                [attr.aria-pressed]="selectedCorner() === option.corner">
+                {{ option.label }}
               </button>
             }
           </div>
-          
-          <!-- Slider -->
-          <input
-            type="range"
-            [ngModel]="parseValue(getRadiusValue())"
-            (ngModelChange)="setRadiusValue($event + 'px')"
-            min="0"
-            max="50"
-            class="flex-1 h-0.5 bg-gray-300 rounded appearance-none cursor-pointer accent-primary-blue">
-          
-          <!-- Value -->
-          <div class="inspector-input-with-unit w-14">
+
+          <div class="flex items-center gap-2">
             <input
-              type="text"
-              [ngModel]="getRadiusValue()"
-              (ngModelChange)="setRadiusValue($event)"
-              class="inspector-number-input">
-            <span class="inspector-unit">PX</span>
+              type="range"
+              [ngModel]="parseValue(getRadiusValue())"
+              (ngModelChange)="setRadiusValue($event + 'px')"
+              min="0"
+              max="50"
+              class="flex-1 h-1 cursor-pointer accent-primary-blue">
+
+            <div class="inspector-input-with-unit w-[88px]">
+              <input
+                type="text"
+                [ngModel]="getRadiusValue()"
+                (ngModelChange)="setRadiusValue($event)"
+                class="inspector-number-input"
+                aria-label="Border radius">
+              <span class="inspector-unit">PX</span>
+            </div>
           </div>
         </div>
       </div>
-      
-      <!-- Borders Section -->
-      <div class="text-[12px] text-gray-500 mb-1">Borders</div>
-      
-      <div class="grid grid-cols-[auto_1fr] gap-4">
-        <!-- Side Selector Grid -->
-        <div class="grid grid-cols-3 gap-1 w-fit place-items-center">
-          <!-- Top -->
-          <div class="col-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('top')"
-               [class.bg-gray-200]="selectedSide() === 'top'">
-            <div class="w-3 h-[1px] bg-gray-500"></div>
-          </div>
-          <!-- Left -->
-          <div class="col-start-1 row-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('left')"
-               [class.bg-gray-200]="selectedSide() === 'left'">
-            <div class="w-[1px] h-3 bg-gray-500"></div>
-          </div>
-          <!-- All -->
-          <div class="col-start-2 row-start-2 w-6 h-6 flex items-center justify-center bg-gray-200 border border-gray-400 rounded cursor-pointer"
-               (click)="selectSide('all')"
-               [class.border-gray-600]="selectedSide() === 'all'">
-            <div class="w-3 h-3 border border-gray-600"></div>
-          </div>
-          <!-- Right -->
-          <div class="col-start-3 row-start-2 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('right')"
-               [class.bg-gray-200]="selectedSide() === 'right'">
-            <div class="w-[1px] h-3 bg-gray-500"></div>
-          </div>
-          <!-- Bottom -->
-          <div class="col-start-2 row-start-3 w-5 h-5 flex items-center justify-center border border-border-dark rounded hover:bg-gray-100 cursor-pointer"
-               (click)="selectSide('bottom')"
-               [class.bg-gray-200]="selectedSide() === 'bottom'">
-            <div class="w-3 h-[1px] bg-gray-500"></div>
-          </div>
-        </div>
-        
-        <!-- Border Controls -->
-        <div class="flex flex-col gap-2 w-full">
-          <!-- Style -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Style</span>
-            <div class="flex bg-input-dark rounded border border-border-dark p-[1px]">
-              @for (st of borderStyles; track st.value) {
+
+      <div class="overflow-hidden rounded-lg border border-border-dark bg-white p-3">
+        <div class="grid min-w-0 grid-cols-[56px_1fr] gap-3 items-start">
+          <span class="section-label text-[12px] pt-2">Borders</span>
+          <div class="flex min-w-0 flex-col gap-3">
+            <div class="flex flex-wrap gap-1">
+              @for (option of borderSides; track option.side) {
                 <button
                   type="button"
-                  (click)="updateStyle('borderStyle', st.value)"
-                  [class]="style()['borderStyle'] === st.value 
-                    ? 'p-1 px-2 bg-gray-200 rounded' 
-                    : 'p-1 px-2 hover:bg-gray-100 rounded'">
-                  <lucide-icon [name]="st.icon" 
-                    [class]="style()['borderStyle'] === st.value ? 'w-3 h-3 text-gray-700' : 'w-3 h-3 text-gray-400'">
-                  </lucide-icon>
+                  (click)="selectSide(option.side)"
+                  [class]="getSelectorClass(selectedSide() === option.side)"
+                  [attr.aria-pressed]="selectedSide() === option.side">
+                  {{ option.label }}
                 </button>
               }
             </div>
-          </div>
-          
-          <!-- Width -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Width</span>
-            <div class="inspector-input-with-unit w-24">
-              <input
-                type="text"
-                [ngModel]="style()['borderWidth'] || '0'"
-                (ngModelChange)="updateStyle('borderWidth', $event)"
-                class="inspector-number-input flex-1 text-left">
-              <span class="inspector-unit">PX</span>
+
+            <p class="text-[11px] text-gray-500">
+              Editing {{ selectedSideLabel() }} border
+            </p>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-style">Style</label>
+              <div
+                id="inspector-border-style"
+                class="grid grid-cols-4 rounded-md border border-border-dark bg-input-dark p-1">
+                @for (styleOption of borderStyles; track styleOption.value) {
+                  <button
+                    type="button"
+                    (click)="updateStyle('borderStyle', styleOption.value)"
+                    [class]="getSegmentClass(getBorderValue('borderStyle') === styleOption.value)">
+                    {{ styleOption.label }}
+                  </button>
+                }
+              </div>
             </div>
-          </div>
-          
-          <!-- Color -->
-          <div class="flex items-center justify-between">
-            <span class="text-[12px] text-gray-500 w-10">Color</span>
-            <div class="flex items-center w-24 bg-input-dark border border-border-dark rounded px-1 py-0.5 cursor-pointer">
-              <input
-                type="color"
-                [ngModel]="style()['borderColor'] || '#000000'"
-                (ngModelChange)="updateStyle('borderColor', $event)"
-                class="w-3 h-3 border border-gray-300 mr-2 cursor-pointer">
-              <span class="text-sm text-gray-700">{{ getColorName(style()['borderColor']) }}</span>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-width">Width</label>
+              <div class="inspector-input-with-unit min-w-0">
+                <input
+                  id="inspector-border-width"
+                  data-testid="border-width-input"
+                  type="text"
+                  [ngModel]="getBorderValue('borderWidth')"
+                  (ngModelChange)="updateStyle('borderWidth', $event)"
+                  class="inspector-number-input"
+                  aria-label="Border width">
+                <span class="inspector-unit">PX</span>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
+              <label class="section-label text-[12px]" for="inspector-border-color">Color</label>
+              <div class="flex min-w-0 items-center gap-2 rounded-md border border-border-dark bg-input-dark px-2 py-1">
+                <input
+                  id="inspector-border-color"
+                  type="color"
+                  [ngModel]="getColorInputValue()"
+                  (ngModelChange)="updateStyle('borderColor', $event)"
+                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white">
+
+                <input
+                  data-testid="border-color-input"
+                  type="text"
+                  [ngModel]="getBorderValue('borderColor')"
+                  (ngModelChange)="updateStyle('borderColor', $event)"
+                  class="h-8 min-w-0 flex-1 bg-transparent text-sm text-gray-700 focus:outline-none"
+                  aria-label="Border color">
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  `, styles: [".inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);padding-left:.25rem;padding-right:.25rem;overflow:hidden}.inspector-number-input{height:2rem;padding-left:.25rem;padding-right:.25rem;background-color:transparent;border:none;text-align:right;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-700);width:100%}.inspector-number-input:focus{outline:none;--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.inspector-unit{font-size:11px;color:var(--color-ink-400);margin-left:.25rem}\n"] }]
+  `, styles: [".section-label{font-size:12px;color:var(--color-ink-400)}.inspector-input-with-unit{display:flex;align-items:center;min-width:0;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{width:100%;min-width:0;height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;color:var(--color-ink-700);font-size:.875rem;line-height:1.25rem}.inspector-number-input:focus{outline:none}.inspector-unit{display:flex;align-items:center;height:2rem;padding-left:.5rem;padding-right:.5rem;border-left:1px solid var(--color-border-dark);font-size:11px;color:var(--color-ink-400);background-color:var(--color-input-dark)}\n"] }]
         }] });
 
 const DATA_SOURCE_CLIENT = new InjectionToken('DATA_SOURCE_CLIENT');
@@ -26158,7 +26345,7 @@ function joinClasses(...classNames) {
 const TEXT_CONTROL_BASE_CLASS = 'block w-full rounded-[4px] border bg-transparent px-3 text-sm text-[#1C2431] transition-all placeholder:text-transparent hover:border-[#1C2431]/40 focus:outline-none disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40 disabled:text-[#1C2431]/40';
 const TEXT_CONTROL_VALID_CLASS = 'border-[#E6EAF0] focus:border-[#7FB2FF] focus:border-2 focus:ring-0';
 const TEXT_CONTROL_INVALID_CLASS = 'border-red-500 border-2 text-red-700 placeholder:text-red-300 focus:border-red-500 focus:ring-0';
-const FIELD_CONTAINER_CLASS = 'relative w-full font-sans';
+const FIELD_CONTAINER_CLASS = 'relative flex h-full min-h-0 w-full flex-col font-sans';
 const FIELD_LABEL_CLASS = 'mb-[0.25em] block font-sans text-xs font-normal tracking-[0.00937em] text-[#1C2431]/70';
 const FIELD_REQUIRED_CLASS = 'text-red-500';
 const FIELD_HELP_CLASS = 'mt-1 text-xs leading-5 tracking-[0.03333em] text-[#1C2431]/50';
@@ -26167,7 +26354,7 @@ const FIELD_CHOICE_SURFACE_CLASS = 'flex items-start gap-3 rounded-[4px] border
 const FIELD_CHOICE_LABEL_CLASS = 'text-sm leading-6 tracking-[0.01786em] text-[#1C2431]';
 const FIELD_RESULTS_PANEL_CLASS = 'absolute z-30 mt-1 max-h-64 w-full overflow-auto rounded-[4px] border-0 bg-[#FFFFFF] py-2 shadow-[0_5px_5px_-3px_rgba(0,0,0,.2),0_8px_10px_1px_rgba(0,0,0,.14),0_3px_14px_2px_rgba(0,0,0,.12)]';
 const FIELD_OPTION_CLASS = 'block w-full px-4 py-3 text-left text-sm tracking-[0.01786em] text-[#1C2431] transition hover:bg-[#7FB2FF]/[0.08] active:bg-[#7FB2FF]/[0.14]';
-const FILE_UPLOAD_SHELL_CLASS = 'rounded-[4px] border border-dashed border-[#E6EAF0] bg-transparent';
+const FILE_UPLOAD_SHELL_CLASS = 'flex flex-1 min-h-0 items-stretch rounded-[4px] border border-dashed border-[#E6EAF0] bg-transparent';
 const FILE_UPLOAD_CARD_CLASS = 'flex flex-col gap-0.5 rounded-[4px] border border-[#E6EAF0] bg-[#FFFFFF] px-3 py-2 text-xs text-[#1C2431] shadow-[0_1px_2px_0_rgba(0,0,0,.08)]';
 const CONTENT_TEXT_CLASS = 'mb-4 leading-6 tracking-[0.03125em] text-[#1C2431] text-[0.875rem]';
 const CONTENT_TEXT_MUTED_CLASS = 'text-[0.75rem] tracking-[0.03333em] text-[#1C2431]/50';
@@ -26208,13 +26395,20 @@ const TABLE_ICON_BUTTON_CLASS = 'inline-flex h-10 w-10 items-center justify-cent
 function getTextControlClass(options) {
     const multiline = options?.multiline === true;
     const compact = options?.compact === true;
-    return joinClasses(TEXT_CONTROL_BASE_CLASS, options?.invalid ? TEXT_CONTROL_INVALID_CLASS : TEXT_CONTROL_VALID_CLASS, multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[20px] py-0.5' : 'min-h-[20px] py-0.5', options?.leadingInset && 'pl-10', options?.trailingInset && 'pr-10');
+    const framed = options?.framed === true;
+    return joinClasses(TEXT_CONTROL_BASE_CLASS, framed
+        ? options?.invalid
+            ? 'border-transparent text-red-700 placeholder:text-red-300 focus:border-transparent focus:ring-0'
+            : 'border-transparent focus:border-transparent focus:ring-0'
+        : options?.invalid
+            ? TEXT_CONTROL_INVALID_CLASS
+            : TEXT_CONTROL_VALID_CLASS, 'h-full min-h-0', multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[20px] py-0.5' : 'min-h-[20px] py-0.5', options?.leadingInset && 'pl-10', options?.trailingInset && 'pr-10');
 }
 function getChoiceControlClass(options) {
     return joinClasses('mt-0.5 h-[18px] w-[18px] border-2 bg-[#FFFFFF] text-[#7FB2FF] transition focus:ring-2 focus:ring-[#7FB2FF] focus:ring-offset-0', options?.radio ? 'rounded-full' : 'rounded-[2px]', options?.invalid ? 'border-red-500 focus:ring-red-200' : 'border-[#1C2431]/40 checked:border-[#7FB2FF]');
 }
 function getFileInputClass(options) {
-    return joinClasses('block w-full cursor-pointer rounded-[4px] border bg-transparent px-3 py-3 text-sm tracking-[0.01786em] text-[#1C2431] transition hover:border-[#1C2431]/40 focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40', 'file:mr-3 file:rounded-[2px] file:border file:px-3 file:py-1.5 file:text-xs file:font-medium file:tracking-[0.08929em] file:uppercase', 'file:border-[#7FB2FF] file:bg-transparent file:text-[#1C2431] hover:file:bg-[#7FB2FF]/[0.08]', options?.invalid
+    return joinClasses('block h-full min-h-0 w-full cursor-pointer rounded-[4px] border bg-transparent px-3 py-3 text-sm tracking-[0.01786em] text-[#1C2431] transition hover:border-[#1C2431]/40 focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40', 'file:mr-3 file:rounded-[2px] file:border file:px-3 file:py-1.5 file:text-xs file:font-medium file:tracking-[0.08929em] file:uppercase', 'file:border-[#7FB2FF] file:bg-transparent file:text-[#1C2431] hover:file:bg-[#7FB2FF]/[0.08]', options?.invalid
         ? 'border-red-500 border-2 text-red-700 focus-visible:border-red-500'
         : 'border-[#E6EAF0] focus-visible:border-[#7FB2FF]');
 }
@@ -26285,7 +26479,8 @@ class TextFieldWidgetComponent {
     getControlClass(multiline = false) {
         return getTextControlClass({
             invalid: !!this.error,
-            multiline
+            multiline,
+            framed: this.hasWrapperFrame()
         });
     }
     getAccessibleLabel() {
@@ -26376,11 +26571,17 @@ class TextFieldWidgetComponent {
         // Cleanup handled by takeUntilDestroyed
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
+        const { wrapperStyles } = splitControlSurfaceStyles(this.config.style);
         return mergeAndNormalize({
-            width: '100%'
-        }, this.config.style);
+            width: '100%',
+            height: '100%'
+        }, wrapperStyles);
+    }
+    getControlStyles() {
+        return splitControlSurfaceStyles(this.config.style).controlStyles;
+    }
+    hasWrapperFrame() {
+        return hasWrapperSurfaceStyles(this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -26508,7 +26709,7 @@ class TextFieldWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative">
+      <div class="relative flex-1 min-h-0">
         @if (isTextarea()) {
           <textarea
             [id]="fieldId"
@@ -26525,6 +26726,7 @@ class TextFieldWidgetComponent {
             [attr.minlength]="config.html5?.minLength"
             [attr.maxlength]="config.html5?.maxLength"
             [class]="getControlClass(true)"
+            [ngStyle]="getControlStyles()"
             data-fd="field-control"></textarea>
         } @else {
           <input
@@ -26541,6 +26743,7 @@ class TextFieldWidgetComponent {
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [ngStyle]="getControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
             [attr.max]="config.html5?.max"
@@ -26570,7 +26773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative">
+      <div class="relative flex-1 min-h-0">
         @if (isTextarea()) {
           <textarea
             [id]="fieldId"
@@ -26587,6 +26790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [attr.minlength]="config.html5?.minLength"
             [attr.maxlength]="config.html5?.maxLength"
             [class]="getControlClass(true)"
+            [ngStyle]="getControlStyles()"
             data-fd="field-control"></textarea>
         } @else {
           <input
@@ -26603,6 +26807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [ngStyle]="getControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
             [attr.max]="config.html5?.max"
@@ -26695,9 +26900,7 @@ class FileUploadWidgetComponent {
         return ids.join(' ');
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
-        return mergeAndNormalize({ width: '100%' }, this.config.style);
+        return mergeAndNormalize({ width: '100%', height: '100%' }, this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -26849,7 +27052,7 @@ class FileUploadWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="flex flex-col gap-2">
+      <div class="flex min-h-0 flex-1 flex-col gap-2">
         <div [class]="fileUploadShellClass" data-fd="file-upload">
           <input
             #fileInput
@@ -26927,7 +27130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="flex flex-col gap-2">
+      <div class="flex min-h-0 flex-1 flex-col gap-2">
         <div [class]="fileUploadShellClass" data-fd="file-upload">
           <input
             #fileInput
@@ -27160,9 +27363,7 @@ class SelectWidgetComponent {
         };
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
-        return mergeAndNormalize({ width: '100%' }, this.config.style);
+        return mergeAndNormalize({ width: '100%', height: '100%' }, this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -27421,7 +27622,7 @@ class SelectWidgetComponent {
         [inputAttrs]="getInputAttributes()"
         [typeahead]="searchTerms$"
         [minTermLength]="getMinSearchLength()"
-        class="fd-select"
+        class="fd-select flex-1 min-h-0"
         data-fd="field-control"
         [attr.aria-describedby]="getAriaDescribedBy()"
         [attr.aria-invalid]="!!error"
@@ -27442,7 +27643,7 @@ class SelectWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:100%;min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
@@ -27469,7 +27670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         [inputAttrs]="getInputAttributes()"
         [typeahead]="searchTerms$"
         [minTermLength]="getMinSearchLength()"
-        class="fd-select"
+        class="fd-select flex-1 min-h-0"
         data-fd="field-control"
         [attr.aria-describedby]="getAriaDescribedBy()"
         [attr.aria-invalid]="!!error"
@@ -27490,7 +27691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"] }]
+  `, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:100%;min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], engine: [{
@@ -27536,7 +27737,8 @@ class SearchWidgetComponent {
     }
     getSearchControlClass() {
         return getTextControlClass({
-            invalid: !!this.error
+            invalid: !!this.error,
+            framed: this.hasWrapperFrame()
         });
     }
     getAccessibleLabel() {
@@ -27714,11 +27916,17 @@ class SearchWidgetComponent {
         this.cdr.markForCheck();
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
+        const { wrapperStyles } = splitControlSurfaceStyles(this.config.style);
         return mergeAndNormalize({
-            width: '100%'
-        }, this.config.style);
+            width: '100%',
+            height: '100%'
+        }, wrapperStyles);
+    }
+    getControlStyles() {
+        return splitControlSurfaceStyles(this.config.style).controlStyles;
+    }
+    hasWrapperFrame() {
+        return hasWrapperSurfaceStyles(this.config.style);
     }
     syncEnabledState() {
         const shouldEnable = this.enabled;
@@ -27837,7 +28045,7 @@ class SearchWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative">
+      <div class="relative flex-1 min-h-0">
         <input
           [id]="fieldId"
           type="search"
@@ -27854,6 +28062,7 @@ class SearchWidgetComponent {
           role="combobox"
           autocomplete="off"
           [class]="getSearchControlClass()"
+          [ngStyle]="getControlStyles()"
           data-fd="field-control"
           (focus)="onFocus()"
           (click)="onClick()"
@@ -27902,7 +28111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative">
+      <div class="relative flex-1 min-h-0">
         <input
           [id]="fieldId"
           type="search"
@@ -27919,6 +28128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           role="combobox"
           autocomplete="off"
           [class]="getSearchControlClass()"
+          [ngStyle]="getControlStyles()"
           data-fd="field-control"
           (focus)="onFocus()"
           (click)="onClick()"
@@ -28644,9 +28854,7 @@ class RadioWidgetComponent {
         }
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
-        return mergeAndNormalize({ width: '100%' }, this.config.style);
+        return mergeAndNormalize({ width: '100%', height: '100%' }, this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -28696,8 +28904,8 @@ class RadioWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="space-y-2" role="radiogroup" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
-          <div *ngFor="let opt of options; let i = index" [class]="choiceSurfaceClass" data-fd="field-choice">
+      <div class="flex min-h-0 flex-1 flex-col gap-2" role="radiogroup" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
+          <div *ngFor="let opt of options; let i = index" [class]="choiceSurfaceClass + ' flex-1 min-h-0'" data-fd="field-choice">
               <input 
                   [id]="getFieldId(i)"
                   type="radio"
@@ -28736,8 +28944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="space-y-2" role="radiogroup" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
-          <div *ngFor="let opt of options; let i = index" [class]="choiceSurfaceClass" data-fd="field-choice">
+      <div class="flex min-h-0 flex-1 flex-col gap-2" role="radiogroup" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
+          <div *ngFor="let opt of options; let i = index" [class]="choiceSurfaceClass + ' flex-1 min-h-0'" data-fd="field-choice">
               <input 
                   [id]="getFieldId(i)"
                   type="radio"
@@ -28781,6 +28989,10 @@ class CheckboxGroupWidgetComponent {
     requestId = 0;
     destroyRef = inject(DestroyRef);
     cdr = inject(ChangeDetectorRef);
+    fieldContainerClass = FIELD_CONTAINER_CLASS;
+    fieldHelpClass = FIELD_HELP_CLASS;
+    fieldErrorClass = FIELD_ERROR_CLASS;
+    choiceLabelClass = FIELD_CHOICE_LABEL_CLASS;
     options = [];
     dataProvider = inject(DATA_PROVIDER, { optional: true }) || inject(DefaultDataProvider);
     get fieldId() {
@@ -28795,6 +29007,9 @@ class CheckboxGroupWidgetComponent {
     get helpTextId() {
         return `help-${this.config.id}`;
     }
+    getCheckboxClass() {
+        return getChoiceControlClass({ invalid: !!this.error || !!this.loadError });
+    }
     getAriaDescribedBy() {
         const ids = [];
         if (this.error || this.loadError) {
@@ -28914,9 +29129,7 @@ class CheckboxGroupWidgetComponent {
         this.control.markAsTouched();
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
-        return mergeAndNormalize({ width: '100%' }, this.config.style);
+        return mergeAndNormalize({ width: '100%', height: '100%' }, this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -28955,9 +29168,13 @@ class CheckboxGroupWidgetComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxGroupWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: CheckboxGroupWidgetComponent, isStandalone: true, selector: "app-checkbox-group-widget", inputs: { config: "config", engine: "engine", control: "control" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="w-full font-sans" [class.hidden]="!visible" [ngStyle]="getWrapperStyles()">
-      <div class="space-y-2" role="group" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
-          <div *ngFor="let opt of options; let i = index" class="flex items-center">
+    <div [class]="fieldContainerClass"
+         [class.hidden]="!visible"
+         [ngStyle]="getWrapperStyles()"
+         data-fd="field"
+         [attr.data-fd-field-type]="config.type">
+      <div class="flex min-h-0 flex-1 flex-col gap-2" role="group" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
+          <div *ngFor="let opt of options; let i = index" class="flex min-h-0 flex-1 items-center gap-2" data-fd="field-choice">
               <input 
                   [id]="getFieldId(i)"
                   type="checkbox"
@@ -28969,17 +29186,18 @@ class CheckboxGroupWidgetComponent {
                   [disabled]="!enabled"
                   [attr.aria-required]="required"
                   [attr.aria-invalid]="!!error"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-              <label [for]="getFieldId(i)" class="ml-2 block text-sm text-gray-700 cursor-pointer select-none">
+                  [class]="getCheckboxClass()"
+                  data-fd="field-control">
+              <label [for]="getFieldId(i)" [class]="choiceLabelClass + ' cursor-pointer select-none'">
                   {{ opt.label }}
               </label>
           </div>
           <div *ngIf="options.length === 0" class="text-xs text-gray-400 italic">No options available</div>
       </div>
 
-      <p *ngIf="error" [id]="errorId" class="mt-1 text-sm text-red-600" role="alert" aria-live="assertive">{{ error }}</p>
-      <p *ngIf="loadError && !error" [id]="errorId" class="mt-1 text-xs text-red-500" role="alert" aria-live="assertive">{{ loadError }}</p>
-      <p *ngIf="config.helpText && !error && !loadError" [id]="helpTextId" class="mt-1 text-xs text-gray-500">{{ config.helpText }}</p>
+      <p *ngIf="error" [id]="errorId" [class]="fieldErrorClass" data-fd="field-error" role="alert" aria-live="assertive">{{ error }}</p>
+      <p *ngIf="loadError && !error" [id]="errorId" [class]="fieldErrorClass" data-fd="field-error" role="alert" aria-live="assertive">{{ loadError }}</p>
+      <p *ngIf="config.helpText && !error && !loadError" [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
@@ -28990,9 +29208,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     standalone: true,
                     imports: [CommonModule, ReactiveFormsModule],
                     template: `
-    <div class="w-full font-sans" [class.hidden]="!visible" [ngStyle]="getWrapperStyles()">
-      <div class="space-y-2" role="group" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
-          <div *ngFor="let opt of options; let i = index" class="flex items-center">
+    <div [class]="fieldContainerClass"
+         [class.hidden]="!visible"
+         [ngStyle]="getWrapperStyles()"
+         data-fd="field"
+         [attr.data-fd-field-type]="config.type">
+      <div class="flex min-h-0 flex-1 flex-col gap-2" role="group" [attr.aria-label]="getAccessibleLabel()" [attr.aria-describedby]="getAriaDescribedBy()">
+          <div *ngFor="let opt of options; let i = index" class="flex min-h-0 flex-1 items-center gap-2" data-fd="field-choice">
               <input 
                   [id]="getFieldId(i)"
                   type="checkbox"
@@ -29004,17 +29226,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                   [disabled]="!enabled"
                   [attr.aria-required]="required"
                   [attr.aria-invalid]="!!error"
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-              <label [for]="getFieldId(i)" class="ml-2 block text-sm text-gray-700 cursor-pointer select-none">
+                  [class]="getCheckboxClass()"
+                  data-fd="field-control">
+              <label [for]="getFieldId(i)" [class]="choiceLabelClass + ' cursor-pointer select-none'">
                   {{ opt.label }}
               </label>
           </div>
           <div *ngIf="options.length === 0" class="text-xs text-gray-400 italic">No options available</div>
       </div>
 
-      <p *ngIf="error" [id]="errorId" class="mt-1 text-sm text-red-600" role="alert" aria-live="assertive">{{ error }}</p>
-      <p *ngIf="loadError && !error" [id]="errorId" class="mt-1 text-xs text-red-500" role="alert" aria-live="assertive">{{ loadError }}</p>
-      <p *ngIf="config.helpText && !error && !loadError" [id]="helpTextId" class="mt-1 text-xs text-gray-500">{{ config.helpText }}</p>
+      <p *ngIf="error" [id]="errorId" [class]="fieldErrorClass" data-fd="field-error" role="alert" aria-live="assertive">{{ error }}</p>
+      <p *ngIf="loadError && !error" [id]="errorId" [class]="fieldErrorClass" data-fd="field-error" role="alert" aria-live="assertive">{{ loadError }}</p>
+      <p *ngIf="config.helpText && !error && !loadError" [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
     </div>
   `
                 }]
@@ -29084,9 +29307,7 @@ class CheckboxWidgetComponent {
         // Cleanup handled by takeUntilDestroyed
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
-        return mergeAndNormalize({ width: '100%' }, this.config.style);
+        return mergeAndNormalize({ width: '100%', height: '100%' }, this.config.style);
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -29136,7 +29357,7 @@ class CheckboxWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="flex items-start gap-3" data-fd="field-choice">
+      <div class="flex min-h-0 flex-1 items-center gap-3" data-fd="field-choice">
         <div class="flex items-center">
           <input
             [id]="fieldId"
@@ -29171,7 +29392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="flex items-start gap-3" data-fd="field-choice">
+      <div class="flex min-h-0 flex-1 items-center gap-3" data-fd="field-choice">
         <div class="flex items-center">
           <input
             [id]="fieldId"
@@ -29299,10 +29520,9 @@ class RepeatableGroupWidgetComponent {
         return row.id;
     }
     getWrapperStyles() {
-        if (!this.config?.style)
-            return {};
         return mergeAndNormalize({
-            width: '100%'
+            width: '100%',
+            height: '100%'
         }, this.config.style);
     }
     get visible() {
@@ -33901,5 +34121,5 @@ function provideHttpDataSourceClient(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { APPEARANCE_FIELDS, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FILE_UPLOAD_SHELL_CLASS, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerShellComponent, FormEngine, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getHeadingClass, getTextControlClass, getWidgetsForFlavor, inferSchema, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideHttpDataSourceClient, serializeSchema, slugifyId, stripEmbeddedSourceData };
+export { APPEARANCE_FIELDS, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FILE_UPLOAD_SHELL_CLASS, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerShellComponent, FormEngine, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getHeadingClass, getTextControlClass, getWidgetsForFlavor, hasWrapperSurfaceStyles, inferSchema, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideHttpDataSourceClient, serializeSchema, slugifyId, splitControlSurfaceStyles, stripEmbeddedSourceData };
 //# sourceMappingURL=ngx-form-designer.mjs.map