@phuong-tran-redoc/document-engine-angular 0.1.4 → 0.1.5

package/fesm2022/phuong-tran-redoc-document-engine-angular.mjs

@@ -28,7 +28,7 @@ import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NonNullableFormBuilder } from '@angular/forms';
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
-import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { throttle } from 'lodash-es';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
@@ -883,9 +883,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  *
  * Usage:
  * <button #trigger>Open</button>
- * <div [popover]="trigger" [isOpen]="isOpen">
+ * <div [documentEnginePopover]="trigger" [isOpen]="isOpen">
  *   Content
  * </div>
+ *
+ * The host is pinned `position: fixed`, so floating-ui is asked for viewport-
+ * relative coordinates (`strategy: 'fixed'`). Omitting the strategy yields
+ * offset-parent-relative numbers, which are off by the page's scroll offset
+ * once written onto a fixed element.
  */
 class PopoverDirective {
     elRef = inject(ElementRef);
@@ -893,7 +898,18 @@ class PopoverDirective {
     /**
      * The trigger element reference (ElementRef or HTMLElement)
      */
+    documentEnginePopover;
+    /**
+     * The trigger element reference (ElementRef or HTMLElement)
+     *
+     * @deprecated Use `documentEnginePopover`. `[popover]` collides with the
+     * native HTML popover attribute and will be removed in the next major.
+     */
     popover;
+    /** The trigger, whichever input supplied it. */
+    get trigger() {
+        return this.documentEnginePopover ?? this.popover;
+    }
     /**
      * Whether the popover is open
      */
@@ -920,7 +936,8 @@ class PopoverDirective {
         this.updateVisibility();
     }
     ngOnChanges(changes) {
-        if (this.viewInitialized && (changes['isOpen'] || changes['popover'])) {
+        if (this.viewInitialized &&
+            (changes['isOpen'] || changes['popover'] || changes['documentEnginePopover'])) {
             this.updateVisibility();
         }
     }
@@ -930,7 +947,7 @@ class PopoverDirective {
     updateVisibility() {
         if (!this.viewInitialized)
             return;
-        if (this.isOpen && this.popover) {
+        if (this.isOpen && this.trigger) {
             // Wait for next tick to ensure element is rendered
             setTimeout(() => {
                 this.setupFloating();
@@ -948,15 +965,16 @@ class PopoverDirective {
     }
     _setupFloatingInternal() {
         let triggerEl;
-        if (!this.popover) {
+        const trigger = this.trigger;
+        if (!trigger) {
             if (this.retryCount < this.maxRetries) {
                 this.retryCount++;
                 setTimeout(() => this._setupFloatingInternal(), 10);
             }
             return;
         }
-        if (this.popover instanceof ElementRef) {
-            triggerEl = this.popover.nativeElement;
+        if (trigger instanceof ElementRef) {
+            triggerEl = trigger.nativeElement;
             // If ElementRef exists but nativeElement is not yet available, retry
             if (!triggerEl) {
                 if (this.retryCount < this.maxRetries) {
@@ -967,7 +985,7 @@ class PopoverDirective {
             }
         }
         else {
-            triggerEl = this.popover;
+            triggerEl = trigger;
         }
         const dropdownEl = this.elRef.nativeElement;
         if (!triggerEl || !dropdownEl) {
@@ -979,13 +997,8 @@ class PopoverDirective {
             return;
         }
         // Compute initial position before showing dropdown to prevent flash
-        computePosition(triggerEl, dropdownEl, {
-            placement: this.placement,
-            middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
-        })
-            .then(({ x, y }) => {
-            // Set position first, then make visible
-            Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
+        this.reposition(triggerEl, dropdownEl)
+            .then(() => {
             this.isPositioned = true;
             // Trigger change detection to update visibility binding
             this.cdr.markForCheck();
@@ -993,14 +1006,27 @@ class PopoverDirective {
             .catch((error) => {
             console.error('[PopoverDirective] Error computing position', error);
         });
-        // Use autoUpdate to automatically reposition on scroll/resize
+        // Use autoUpdate to automatically reposition on scroll/resize. It must use
+        // the SAME strategy as the initial call, or the first scroll undoes the fix.
         this.cleanupAutoUpdate = autoUpdate(triggerEl, dropdownEl, () => {
-            computePosition(triggerEl, dropdownEl, {
-                placement: this.placement,
-                middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
-            }).then(({ x, y }) => {
-                Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
-            });
+            void this.reposition(triggerEl, dropdownEl);
+        });
+    }
+    /**
+     * Position `dropdownEl` against `triggerEl`.
+     *
+     * `strategy: 'fixed'` is required: the host binding pins this element to
+     * `position: fixed`, so the coordinates must be viewport-relative. Without it
+     * floating-ui returns offset-parent-relative numbers and the panel lands the
+     * page's scroll offset away from its trigger.
+     */
+    reposition(triggerEl, dropdownEl) {
+        return computePosition(triggerEl, dropdownEl, {
+            strategy: 'fixed',
+            placement: this.placement,
+            middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
+        }).then(({ x, y }) => {
+            Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
         });
     }
     cleanup() {
@@ -1010,19 +1036,24 @@ class PopoverDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: PopoverDirective, isStandalone: true, selector: "[popover]", inputs: { popover: "popover", isOpen: "isOpen", placement: "placement", offset: "offset", padding: "padding" }, host: { properties: { "style.position": "\"fixed\"", "style.visibility": "isPositioned ? \"visible\" : \"hidden\"" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: PopoverDirective, isStandalone: true, selector: "[documentEnginePopover], [popover]", inputs: { documentEnginePopover: "documentEnginePopover", popover: "popover", isOpen: "isOpen", placement: "placement", offset: "offset", padding: "padding" }, host: { properties: { "style.position": "\"fixed\"", "style.visibility": "isPositioned ? \"visible\" : \"hidden\"" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[popover]',
+                    // `documentEnginePopover` is the supported selector. `[popover]` is kept as a
+                    // deprecated alias for consumers on <= 0.1.4; it collides with the platform's
+                    // native popover attribute and will be removed in the next major.
+                    selector: '[documentEnginePopover], [popover]',
                     standalone: true,
                     host: {
                         '[style.position]': '"fixed"',
                         '[style.visibility]': 'isPositioned ? "visible" : "hidden"',
                     },
                 }]
-        }], propDecorators: { popover: [{
+        }], propDecorators: { documentEnginePopover: [{
+                type: Input
+            }], popover: [{
                 type: Input
             }], isOpen: [{
                 type: Input
@@ -1464,6 +1495,7 @@ class ColorPickerComponent {
             type="button"
             class="swatch"
             [style.background-color]="color.value"
+            [attr.data-color]="color.value"
             (click)="colorSelected.emit(color)"
             [attr.title]="color.name"
           >
@@ -1543,6 +1575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             type="button"
             class="swatch"
             [style.background-color]="color.value"
+            [attr.data-color]="color.value"
             (click)="colorSelected.emit(color)"
             [attr.title]="color.name"
           >
@@ -1728,7 +1761,7 @@ class ColorPickerViewComponent {
         <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
       </div>
     </div>
-  `, isInline: true, styles: [".color-picker-view{display:flex;flex-direction:column}.color-picker-view__title{padding:.5rem 1rem;border-bottom:1px solid var(--border, #e5e7eb);font-weight:500}.color-picker-view__actions{display:flex;gap:.5rem;justify-content:space-between;padding:.75rem;border-top:1px solid var(--border, #e5e7eb)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".color-picker-view{display:flex;flex-direction:column}.color-picker-view__title{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500}.color-picker-view__actions{display:flex;gap:.5rem;justify-content:space-between;padding:.75rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerViewComponent, decorators: [{
             type: Component,
@@ -1752,7 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".color-picker-view{display:flex;flex-direction:column}.color-picker-view__title{padding:.5rem 1rem;border-bottom:1px solid var(--border, #e5e7eb);font-weight:500}.color-picker-view__actions{display:flex;gap:.5rem;justify-content:space-between;padding:.75rem;border-top:1px solid var(--border, #e5e7eb)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".color-picker-view{display:flex;flex-direction:column}.color-picker-view__title{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500}.color-picker-view__actions{display:flex;gap:.5rem;justify-content:space-between;padding:.75rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}\n"] }]
         }] });
 
 const ColorBubbleConfig = {
@@ -2515,7 +2548,7 @@ class LinkEditViewComponent {
         </div>
       </form>
     </div>
-  `, isInline: true, styles: [".link-edit-view{display:flex;flex-direction:column;min-width:320px}.link-edit-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-edit-view__content{display:flex;flex-direction:column;gap:1.5rem;padding:1rem .5rem}.link-edit-view__shortcuts{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid #e5e7eb;padding:1rem .5rem}.link-edit-view__shortcuts-label{color:#6b7280;font-size:.875rem}.link-edit-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid #e5e7eb}.link-edit-view__field{display:flex;flex-direction:column;gap:.5rem;width:100%}.chip-set{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.chip{display:inline-flex;align-items:center;padding:.25rem .75rem;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;font-size:.875rem;color:#374151;cursor:pointer;transition:background-color .2s,border-color .2s}.chip:hover{background-color:#e5e7eb;border-color:#d1d5db}.chip:active{background-color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "directive", type: LabelDirective, selector: "label[documentEngineLabel]", inputs: ["class"] }, { kind: "component", type: ErrorMessageComponent, selector: "document-engine-error-message", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".link-edit-view{display:flex;flex-direction:column;min-width:320px}.link-edit-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-edit-view__content{display:flex;flex-direction:column;gap:1.5rem;padding:1rem .5rem}.link-edit-view__shortcuts{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));padding:1rem .5rem}.link-edit-view__shortcuts-label{color:var(--muted-foreground, hsl(215.4, 16.3%, 46.9%));font-size:.875rem}.link-edit-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}.link-edit-view__field{display:flex;flex-direction:column;gap:.5rem;width:100%}.chip-set{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.chip{display:inline-flex;align-items:center;padding:.25rem .75rem;background-color:var(--muted, hsl(210, 40%, 96.1%));border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));border-radius:9999px;font-size:.875rem;color:var(--foreground, hsl(222.2, 84%, 4.9%));cursor:pointer;transition:background-color .2s,border-color .2s}.chip:hover{background-color:var(--accent, hsl(210, 40%, 96.1%));color:var(--accent-foreground, hsl(222.2, 47.4%, 11.2%));border-color:var(--ring, hsl(222.2, 84%, 4.9%))}.chip:active{background-color:var(--secondary, hsl(210, 40%, 96.1%));color:var(--secondary-foreground, hsl(222.2, 47.4%, 11.2%))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "directive", type: LabelDirective, selector: "label[documentEngineLabel]", inputs: ["class"] }, { kind: "component", type: ErrorMessageComponent, selector: "document-engine-error-message", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkEditViewComponent, decorators: [{
             type: Component,
@@ -2585,7 +2618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         </div>
       </form>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".link-edit-view{display:flex;flex-direction:column;min-width:320px}.link-edit-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-edit-view__content{display:flex;flex-direction:column;gap:1.5rem;padding:1rem .5rem}.link-edit-view__shortcuts{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid #e5e7eb;padding:1rem .5rem}.link-edit-view__shortcuts-label{color:#6b7280;font-size:.875rem}.link-edit-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid #e5e7eb}.link-edit-view__field{display:flex;flex-direction:column;gap:.5rem;width:100%}.chip-set{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.chip{display:inline-flex;align-items:center;padding:.25rem .75rem;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;font-size:.875rem;color:#374151;cursor:pointer;transition:background-color .2s,border-color .2s}.chip:hover{background-color:#e5e7eb;border-color:#d1d5db}.chip:active{background-color:#d1d5db}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".link-edit-view{display:flex;flex-direction:column;min-width:320px}.link-edit-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-edit-view__content{display:flex;flex-direction:column;gap:1.5rem;padding:1rem .5rem}.link-edit-view__shortcuts{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));padding:1rem .5rem}.link-edit-view__shortcuts-label{color:var(--muted-foreground, hsl(215.4, 16.3%, 46.9%));font-size:.875rem}.link-edit-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}.link-edit-view__field{display:flex;flex-direction:column;gap:.5rem;width:100%}.chip-set{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.chip{display:inline-flex;align-items:center;padding:.25rem .75rem;background-color:var(--muted, hsl(210, 40%, 96.1%));border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));border-radius:9999px;font-size:.875rem;color:var(--foreground, hsl(222.2, 84%, 4.9%));cursor:pointer;transition:background-color .2s,border-color .2s}.chip:hover{background-color:var(--accent, hsl(210, 40%, 96.1%));color:var(--accent-foreground, hsl(222.2, 47.4%, 11.2%));border-color:var(--ring, hsl(222.2, 84%, 4.9%))}.chip:active{background-color:var(--secondary, hsl(210, 40%, 96.1%));color:var(--secondary-foreground, hsl(222.2, 47.4%, 11.2%))}\n"] }]
         }] });
 
 /**
@@ -2656,7 +2689,7 @@ class LinkMainViewComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [".link-main-view{display:flex;flex-direction:column}.link-main-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-main-view__content{display:flex;gap:.5rem;padding:.75rem;align-items:center}.link-main-view__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:.875rem;color:#3b82f6;text-decoration:none;transition:color .2s}.link-main-view__url:hover{color:#2563eb;text-decoration:underline}.link-main-view__button{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;min-width:fit-content;width:auto}.link-main-view__button document-engine-icon{width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center}.link-main-view__button span{font-size:.875rem}.link-main-view__button-icon{display:inline-flex;align-items:center;justify-content:center}.link-main-view__button-icon document-engine-icon{width:1rem;height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".link-main-view{display:flex;flex-direction:column}.link-main-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-main-view__content{display:flex;gap:.5rem;padding:.75rem;align-items:center}.link-main-view__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:.875rem;color:var(--primary, hsl(222.2, 47.4%, 11.2%));text-decoration:none;transition:color .2s}.link-main-view__url:hover{text-decoration:underline}.link-main-view__button{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;min-width:fit-content;width:auto}.link-main-view__button document-engine-icon{width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center}.link-main-view__button span{font-size:.875rem}.link-main-view__button-icon{display:inline-flex;align-items:center;justify-content:center}.link-main-view__button-icon document-engine-icon{width:1rem;height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkMainViewComponent, decorators: [{
             type: Component,
@@ -2699,9 +2732,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         </button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".link-main-view{display:flex;flex-direction:column}.link-main-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-main-view__content{display:flex;gap:.5rem;padding:.75rem;align-items:center}.link-main-view__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:.875rem;color:#3b82f6;text-decoration:none;transition:color .2s}.link-main-view__url:hover{color:#2563eb;text-decoration:underline}.link-main-view__button{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;min-width:fit-content;width:auto}.link-main-view__button document-engine-icon{width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center}.link-main-view__button span{font-size:.875rem}.link-main-view__button-icon{display:inline-flex;align-items:center;justify-content:center}.link-main-view__button-icon document-engine-icon{width:1rem;height:1rem}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".link-main-view{display:flex;flex-direction:column}.link-main-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-main-view__content{display:flex;gap:.5rem;padding:.75rem;align-items:center}.link-main-view__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:.875rem;color:var(--primary, hsl(222.2, 47.4%, 11.2%));text-decoration:none;transition:color .2s}.link-main-view__url:hover{text-decoration:underline}.link-main-view__button{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;min-width:fit-content;width:auto}.link-main-view__button document-engine-icon{width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center}.link-main-view__button span{font-size:.875rem}.link-main-view__button-icon{display:inline-flex;align-items:center;justify-content:center}.link-main-view__button-icon document-engine-icon{width:1rem;height:1rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
+/**
+ * Checkbox component
+ * Works with ngModel and reactive forms
+ *
+ * Usage:
+ * <document-engine-checkbox [(ngModel)]="checked">Label text</document-engine-checkbox>
+ */
+class CheckboxComponent {
+    disabled = false;
+    checked = false;
+    checkedChange = new EventEmitter();
+    hostClass = true;
+    cdr = inject(ChangeDetectorRef);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    onCheckboxChange(event) {
+        if (this.disabled)
+            return;
+        const target = event.target;
+        this.checked = target.checked;
+        this.checkedChange.emit(this.checked);
+        this.onChange(this.checked);
+        this.onTouched();
+    }
+    // ControlValueAccessor implementation.
+    //
+    // The forms package calls these from outside any template binding, so on an
+    // OnPush component they must mark the view dirty explicitly. Without it a
+    // programmatic `setValue()` — including a bubble-menu view being re-activated
+    // with different attributes on a reused instance — updates the model while the
+    // rendered tick keeps showing the previous state.
+    writeValue(value) {
+        this.checked = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CheckboxComponent, isStandalone: true, selector: "document-engine-checkbox", inputs: { disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.document-engine-checkbox-container": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <label class="document-engine-checkbox">
+      <input
+        type="checkbox"
+        class="document-engine-checkbox__input"
+        [checked]="checked"
+        [disabled]="disabled"
+        (change)="onCheckboxChange($event)"
+      />
+      <span class="document-engine-checkbox__box">
+        <document-engine-icon
+          *ngIf="checked"
+          name="check"
+          class="document-engine-checkbox__icon"
+        ></document-engine-icon>
+      </span>
+      <span class="document-engine-checkbox__label">
+        <ng-content></ng-content>
+      </span>
+    </label>
+  `, isInline: true, styles: [".document-engine-checkbox{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.document-engine-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.document-engine-checkbox__box{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--input);border-radius:.25rem;background-color:transparent;transition:background-color .2s,border-color .2s}.document-engine-checkbox__input:checked~.document-engine-checkbox__box{background-color:var(--primary);border-color:var(--primary)}.document-engine-checkbox__input:focus-visible~.document-engine-checkbox__box{outline:2px solid var(--ring);outline-offset:2px}.document-engine-checkbox__input:disabled~.document-engine-checkbox__box{cursor:not-allowed;opacity:.5}.document-engine-checkbox__icon{width:.75rem;height:.75rem;color:var(--primary-foreground)}.document-engine-checkbox__label{font-size:.875rem;line-height:1;font-weight:500}.document-engine-checkbox__input:disabled~.document-engine-checkbox__label{cursor:not-allowed;opacity:.5}.document-engine-checkbox-container{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-checkbox', standalone: true, imports: [CommonModule, IconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <label class="document-engine-checkbox">
+      <input
+        type="checkbox"
+        class="document-engine-checkbox__input"
+        [checked]="checked"
+        [disabled]="disabled"
+        (change)="onCheckboxChange($event)"
+      />
+      <span class="document-engine-checkbox__box">
+        <document-engine-icon
+          *ngIf="checked"
+          name="check"
+          class="document-engine-checkbox__icon"
+        ></document-engine-icon>
+      </span>
+      <span class="document-engine-checkbox__label">
+        <ng-content></ng-content>
+      </span>
+    </label>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".document-engine-checkbox{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.document-engine-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.document-engine-checkbox__box{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--input);border-radius:.25rem;background-color:transparent;transition:background-color .2s,border-color .2s}.document-engine-checkbox__input:checked~.document-engine-checkbox__box{background-color:var(--primary);border-color:var(--primary)}.document-engine-checkbox__input:focus-visible~.document-engine-checkbox__box{outline:2px solid var(--ring);outline-offset:2px}.document-engine-checkbox__input:disabled~.document-engine-checkbox__box{cursor:not-allowed;opacity:.5}.document-engine-checkbox__icon{width:.75rem;height:.75rem;color:var(--primary-foreground)}.document-engine-checkbox__label{font-size:.875rem;line-height:1;font-weight:500}.document-engine-checkbox__input:disabled~.document-engine-checkbox__label{cursor:not-allowed;opacity:.5}.document-engine-checkbox-container{display:inline-block}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.document-engine-checkbox-container']
+            }] } });
+
 /**
  * Properties view for link bubble menu
  * Shows link properties like target and rel attributes
@@ -2765,27 +2914,30 @@ class LinkPropertiesViewComponent {
       <!-- Content -->
       <div class="link-properties-view__content">
         <!-- Open in new tab -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="newTabControl" />
-          <span class="checkbox-text">Open in new tab</span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="newTabControl">Open in new tab</document-engine-checkbox>
+        </div>
 
         <!-- No follow -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noFollowControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="nofollow"</code> </span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noFollowControl">
+            Add <code class="inline-code">rel="nofollow"</code>
+          </document-engine-checkbox>
+        </div>
 
         <!-- No opener -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noOpenerControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="noopener"</code> </span>
-        </label>
-
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noReferrerControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="noreferrer"</code> </span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noOpenerControl">
+            Add <code class="inline-code">rel="noopener"</code>
+          </document-engine-checkbox>
+        </div>
+
+        <!-- No referrer -->
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noReferrerControl">
+            Add <code class="inline-code">rel="noreferrer"</code>
+          </document-engine-checkbox>
+        </div>
       </div>
 
       <!-- Actions -->
@@ -2795,11 +2947,11 @@ class LinkPropertiesViewComponent {
         <button type="submit" documentEngineButton variant="default" (click)="saveProperties()">Save</button>
       </div>
     </div>
-  `, isInline: true, styles: [".link-properties-view{display:flex;flex-direction:column;min-width:280px}.link-properties-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-properties-view__content{display:flex;flex-direction:column;gap:.5rem;padding:1rem .5rem}.link-properties-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid #e5e7eb}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.25rem}.checkbox-input{width:1rem;height:1rem;cursor:pointer;accent-color:#3b82f6}.checkbox-text{font-size:.875rem;color:#374151}.inline-code{padding:.125rem .25rem;border-radius:.25rem;background-color:#0000000d;font-family:Courier New,monospace;font-size:.813rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";.link-properties-view{display:flex;flex-direction:column;min-width:280px}.link-properties-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-properties-view__content{display:flex;flex-direction:column;gap:.5rem;padding:1rem .5rem}.link-properties-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}.link-properties-view__option{display:flex;align-items:center;padding:.25rem}.inline-code{padding:.125rem .25rem;border-radius:.25rem;background-color:var(--muted, hsl(210, 40%, 96.1%));color:var(--muted-foreground, hsl(215.4, 16.3%, 46.9%));font-family:Courier New,monospace;font-size:.813rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: CheckboxComponent, selector: "document-engine-checkbox", inputs: ["disabled", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkPropertiesViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-engine-link-properties-view', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonDirective], template: `
+            args: [{ selector: 'document-engine-link-properties-view', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonDirective, CheckboxComponent], template: `
     <div class="link-properties-view">
       <!-- Title -->
       <!-- No referrer -->
@@ -2808,27 +2960,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       <!-- Content -->
       <div class="link-properties-view__content">
         <!-- Open in new tab -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="newTabControl" />
-          <span class="checkbox-text">Open in new tab</span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="newTabControl">Open in new tab</document-engine-checkbox>
+        </div>
 
         <!-- No follow -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noFollowControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="nofollow"</code> </span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noFollowControl">
+            Add <code class="inline-code">rel="nofollow"</code>
+          </document-engine-checkbox>
+        </div>
 
         <!-- No opener -->
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noOpenerControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="noopener"</code> </span>
-        </label>
-
-        <label class="checkbox-label">
-          <input type="checkbox" class="checkbox-input" [formControl]="noReferrerControl" />
-          <span class="checkbox-text"> Add <code class="inline-code">rel="noreferrer"</code> </span>
-        </label>
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noOpenerControl">
+            Add <code class="inline-code">rel="noopener"</code>
+          </document-engine-checkbox>
+        </div>
+
+        <!-- No referrer -->
+        <div class="link-properties-view__option">
+          <document-engine-checkbox [formControl]="noReferrerControl">
+            Add <code class="inline-code">rel="noreferrer"</code>
+          </document-engine-checkbox>
+        </div>
       </div>
 
       <!-- Actions -->
@@ -2838,7 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         <button type="submit" documentEngineButton variant="default" (click)="saveProperties()">Save</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".link-properties-view{display:flex;flex-direction:column;min-width:280px}.link-properties-view__header{padding:.5rem 1rem;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:.875rem}.link-properties-view__content{display:flex;flex-direction:column;gap:.5rem;padding:1rem .5rem}.link-properties-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid #e5e7eb}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.25rem}.checkbox-input{width:1rem;height:1rem;cursor:pointer;accent-color:#3b82f6}.checkbox-text{font-size:.875rem;color:#374151}.inline-code{padding:.125rem .25rem;border-radius:.25rem;background-color:#0000000d;font-family:Courier New,monospace;font-size:.813rem}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.link-properties-view{display:flex;flex-direction:column;min-width:280px}.link-properties-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));font-weight:500;font-size:.875rem}.link-properties-view__content{display:flex;flex-direction:column;gap:.5rem;padding:1rem .5rem}.link-properties-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border, hsl(214.3, 31.8%, 91.4%))}.link-properties-view__option{display:flex;align-items:center;padding:.25rem}.inline-code{padding:.125rem .25rem;border-radius:.25rem;background-color:var(--muted, hsl(210, 40%, 96.1%));color:var(--muted-foreground, hsl(215.4, 16.3%, 46.9%));font-family:Courier New,monospace;font-size:.813rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 const LinkBubbleConfig = {
@@ -3707,6 +3862,7 @@ class TableCellStyleViewComponent {
               <div class="table-cell-style-view__field-label">Width</div>
               <input
                 documentEngineInput
+                data-testid="border-width"
                 [(ngModel)]="borderWidth"
                 (ngModelChange)="onBorderWidthChange()"
                 placeholder="1px"
@@ -3716,7 +3872,7 @@ class TableCellStyleViewComponent {
             <div class="table-cell-style-view__field">
               <div class="table-cell-style-view__field-label">Style</div>
 
-              <document-engine-select [(value)]="borderStyle" variant="outline">
+              <document-engine-select data-testid="border-style" [(value)]="borderStyle" variant="outline">
                 <button documentEngineSelectOption value="solid">Solid</button>
                 <button documentEngineSelectOption value="dashed">Dashed</button>
                 <button documentEngineSelectOption value="dotted">Dotted</button>
@@ -3737,6 +3893,7 @@ class TableCellStyleViewComponent {
                   size="icon"
                   variant="ghost"
                   class="table-cell-style-view__color-clear"
+                  data-testid="clear-border-color"
                   (click)="borderColor = null"
                 >
                   <document-engine-icon name="close"></document-engine-icon>
@@ -3757,13 +3914,14 @@ class TableCellStyleViewComponent {
               <!-- Color picker for border -->
               <div
                 *ngIf="showColorPicker === 'border'"
-                [popover]="borderColorTrigger"
+                [documentEnginePopover]="borderColorTrigger"
                 [isOpen]="showColorPicker === 'border'"
                 class="table-cell-style-view__color-picker-dropdown"
                 (click)="$event.stopPropagation()"
               >
                 <document-engine-color-picker
                   [colorPalette]="colorPalette"
+                  data-testid="border-color"
                   [activeColor]="borderColorObj"
                   (colorSelected)="onBorderColorSelected($event)"
                   (colorRemoved)="onBorderColorRemoved()"
@@ -3788,6 +3946,7 @@ class TableCellStyleViewComponent {
                 size="icon"
                 variant="ghost"
                 class="table-cell-style-view__color-clear"
+                data-testid="clear-background-color"
                 (click)="backgroundColor = null"
               >
                 <document-engine-icon name="close"></document-engine-icon>
@@ -3808,13 +3967,14 @@ class TableCellStyleViewComponent {
             <!-- Color picker for background -->
             <div
               *ngIf="showColorPicker === 'bg'"
-              [popover]="bgColorTrigger"
+              [documentEnginePopover]="bgColorTrigger"
               [isOpen]="showColorPicker === 'bg'"
               class="table-cell-style-view__color-picker-dropdown"
               (click)="$event.stopPropagation()"
             >
               <document-engine-color-picker
                 [colorPalette]="colorPalette"
+                data-testid="background-color"
                 [activeColor]="backgroundColorObj"
                 (colorSelected)="onBackgroundColorSelected($event)"
                 (colorRemoved)="onBackgroundColorRemoved()"
@@ -3861,11 +4021,11 @@ class TableCellStyleViewComponent {
 
       <!-- Actions -->
       <div class="table-cell-style-view__actions">
-        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
-        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
+        <button documentEngineButton data-testid="cancel" variant="ghost" (click)="cancel()">Cancel</button>
+        <button documentEngineButton data-testid="save" variant="default" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, isInline: true, styles: [".table-cell-style-view{display:flex;flex-direction:column;width:32.5rem}.table-cell-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-cell-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-cell-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-cell-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-cell-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-cell-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-cell-style-view__field--color{grid-column:span 4;position:relative}.table-cell-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-cell-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-cell-style-view__color-input input{flex:1;padding-right:3rem}.table-cell-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-cell-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-cell-style-view__color-swatch:hover{transform:scale(1.1)}.table-cell-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-cell-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-cell-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { 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.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: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }, { kind: "component", type: ToggleGroupComponent, selector: "document-engine-toggle-group", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ToggleOptionDirective, selector: "button[documentEngineToggleOption]", inputs: ["value", "disabled"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["popover", "isOpen", "placement", "offset", "padding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";.table-cell-style-view{display:flex;flex-direction:column;width:32.5rem;max-inline-size:calc(100vw - 2rem)}.table-cell-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-cell-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-cell-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-cell-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-cell-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-cell-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-cell-style-view__field--color{grid-column:span 4;position:relative}.table-cell-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-cell-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-cell-style-view__color-input input{flex:1;padding-right:3rem}.table-cell-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-cell-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-cell-style-view__color-swatch:hover{transform:scale(1.1)}.table-cell-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-cell-style-view__color-picker-dropdown{box-sizing:border-box;z-index:50;border-radius:.5rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));padding:.5rem}.table-cell-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { 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.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: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }, { kind: "component", type: ToggleGroupComponent, selector: "document-engine-toggle-group", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ToggleOptionDirective, selector: "button[documentEngineToggleOption]", inputs: ["value", "disabled"] }, { kind: "directive", type: PopoverDirective, selector: "[documentEnginePopover], [popover]", inputs: ["documentEnginePopover", "popover", "isOpen", "placement", "offset", "padding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableCellStyleViewComponent, decorators: [{
             type: Component,
@@ -3895,6 +4055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <div class="table-cell-style-view__field-label">Width</div>
               <input
                 documentEngineInput
+                data-testid="border-width"
                 [(ngModel)]="borderWidth"
                 (ngModelChange)="onBorderWidthChange()"
                 placeholder="1px"
@@ -3904,7 +4065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             <div class="table-cell-style-view__field">
               <div class="table-cell-style-view__field-label">Style</div>
 
-              <document-engine-select [(value)]="borderStyle" variant="outline">
+              <document-engine-select data-testid="border-style" [(value)]="borderStyle" variant="outline">
                 <button documentEngineSelectOption value="solid">Solid</button>
                 <button documentEngineSelectOption value="dashed">Dashed</button>
                 <button documentEngineSelectOption value="dotted">Dotted</button>
@@ -3925,6 +4086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                   size="icon"
                   variant="ghost"
                   class="table-cell-style-view__color-clear"
+                  data-testid="clear-border-color"
                   (click)="borderColor = null"
                 >
                   <document-engine-icon name="close"></document-engine-icon>
@@ -3945,13 +4107,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <!-- Color picker for border -->
               <div
                 *ngIf="showColorPicker === 'border'"
-                [popover]="borderColorTrigger"
+                [documentEnginePopover]="borderColorTrigger"
                 [isOpen]="showColorPicker === 'border'"
                 class="table-cell-style-view__color-picker-dropdown"
                 (click)="$event.stopPropagation()"
               >
                 <document-engine-color-picker
                   [colorPalette]="colorPalette"
+                  data-testid="border-color"
                   [activeColor]="borderColorObj"
                   (colorSelected)="onBorderColorSelected($event)"
                   (colorRemoved)="onBorderColorRemoved()"
@@ -3976,6 +4139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 size="icon"
                 variant="ghost"
                 class="table-cell-style-view__color-clear"
+                data-testid="clear-background-color"
                 (click)="backgroundColor = null"
               >
                 <document-engine-icon name="close"></document-engine-icon>
@@ -3996,13 +4160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             <!-- Color picker for background -->
             <div
               *ngIf="showColorPicker === 'bg'"
-              [popover]="bgColorTrigger"
+              [documentEnginePopover]="bgColorTrigger"
               [isOpen]="showColorPicker === 'bg'"
               class="table-cell-style-view__color-picker-dropdown"
               (click)="$event.stopPropagation()"
             >
               <document-engine-color-picker
                 [colorPalette]="colorPalette"
+                data-testid="background-color"
                 [activeColor]="backgroundColorObj"
                 (colorSelected)="onBackgroundColorSelected($event)"
                 (colorRemoved)="onBackgroundColorRemoved()"
@@ -4049,11 +4214,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
       <!-- Actions -->
       <div class="table-cell-style-view__actions">
-        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
-        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
+        <button documentEngineButton data-testid="cancel" variant="ghost" (click)="cancel()">Cancel</button>
+        <button documentEngineButton data-testid="save" variant="default" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".table-cell-style-view{display:flex;flex-direction:column;width:32.5rem}.table-cell-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-cell-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-cell-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-cell-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-cell-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-cell-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-cell-style-view__field--color{grid-column:span 4;position:relative}.table-cell-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-cell-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-cell-style-view__color-input input{flex:1;padding-right:3rem}.table-cell-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-cell-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-cell-style-view__color-swatch:hover{transform:scale(1.1)}.table-cell-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-cell-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-cell-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.table-cell-style-view{display:flex;flex-direction:column;width:32.5rem;max-inline-size:calc(100vw - 2rem)}.table-cell-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-cell-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-cell-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-cell-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-cell-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-cell-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-cell-style-view__field--color{grid-column:span 4;position:relative}.table-cell-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-cell-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-cell-style-view__color-input input{flex:1;padding-right:3rem}.table-cell-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-cell-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-cell-style-view__color-swatch:hover{transform:scale(1.1)}.table-cell-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-cell-style-view__color-picker-dropdown{box-sizing:border-box;z-index:50;border-radius:.5rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));padding:.5rem}.table-cell-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
         }], propDecorators: { borderColorTrigger: [{
                 type: ViewChild,
                 args: ['borderColorTrigger', { static: false, read: ElementRef }]
@@ -4062,113 +4227,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 args: ['bgColorTrigger', { static: false, read: ElementRef }]
             }] } });
 
-/**
- * Checkbox component
- * Works with ngModel and reactive forms
- *
- * Usage:
- * <document-engine-checkbox [(ngModel)]="checked">Label text</document-engine-checkbox>
- */
-class CheckboxComponent {
-    disabled = false;
-    checked = false;
-    checkedChange = new EventEmitter();
-    hostClass = true;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => { };
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onTouched = () => { };
-    onCheckboxChange(event) {
-        if (this.disabled)
-            return;
-        const target = event.target;
-        this.checked = target.checked;
-        this.checkedChange.emit(this.checked);
-        this.onChange(this.checked);
-        this.onTouched();
-    }
-    // ControlValueAccessor implementation
-    writeValue(value) {
-        this.checked = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CheckboxComponent, isStandalone: true, selector: "document-engine-checkbox", inputs: { disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.document-engine-checkbox-container": "this.hostClass" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
-    <label class="document-engine-checkbox">
-      <input
-        type="checkbox"
-        class="document-engine-checkbox__input"
-        [checked]="checked"
-        [disabled]="disabled"
-        (change)="onCheckboxChange($event)"
-      />
-      <span class="document-engine-checkbox__box">
-        <document-engine-icon
-          *ngIf="checked"
-          name="check"
-          class="document-engine-checkbox__icon"
-        ></document-engine-icon>
-      </span>
-      <span class="document-engine-checkbox__label">
-        <ng-content></ng-content>
-      </span>
-    </label>
-  `, isInline: true, styles: [".document-engine-checkbox{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.document-engine-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.document-engine-checkbox__box{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--input);border-radius:.25rem;background-color:transparent;transition:background-color .2s,border-color .2s}.document-engine-checkbox__input:checked~.document-engine-checkbox__box{background-color:var(--primary);border-color:var(--primary)}.document-engine-checkbox__input:focus-visible~.document-engine-checkbox__box{outline:2px solid var(--ring);outline-offset:2px}.document-engine-checkbox__input:disabled~.document-engine-checkbox__box{cursor:not-allowed;opacity:.5}.document-engine-checkbox__icon{width:.75rem;height:.75rem;color:var(--primary-foreground)}.document-engine-checkbox__label{font-size:.875rem;line-height:1;font-weight:500}.document-engine-checkbox__input:disabled~.document-engine-checkbox__label{cursor:not-allowed;opacity:.5}.document-engine-checkbox-container{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-checkbox', standalone: true, imports: [CommonModule, IconComponent], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxComponent),
-                            multi: true,
-                        },
-                    ], template: `
-    <label class="document-engine-checkbox">
-      <input
-        type="checkbox"
-        class="document-engine-checkbox__input"
-        [checked]="checked"
-        [disabled]="disabled"
-        (change)="onCheckboxChange($event)"
-      />
-      <span class="document-engine-checkbox__box">
-        <document-engine-icon
-          *ngIf="checked"
-          name="check"
-          class="document-engine-checkbox__icon"
-        ></document-engine-icon>
-      </span>
-      <span class="document-engine-checkbox__label">
-        <ng-content></ng-content>
-      </span>
-    </label>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".document-engine-checkbox{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.document-engine-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.document-engine-checkbox__box{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--input);border-radius:.25rem;background-color:transparent;transition:background-color .2s,border-color .2s}.document-engine-checkbox__input:checked~.document-engine-checkbox__box{background-color:var(--primary);border-color:var(--primary)}.document-engine-checkbox__input:focus-visible~.document-engine-checkbox__box{outline:2px solid var(--ring);outline-offset:2px}.document-engine-checkbox__input:disabled~.document-engine-checkbox__box{cursor:not-allowed;opacity:.5}.document-engine-checkbox__icon{width:.75rem;height:.75rem;color:var(--primary-foreground)}.document-engine-checkbox__label{font-size:.875rem;line-height:1;font-weight:500}.document-engine-checkbox__input:disabled~.document-engine-checkbox__label{cursor:not-allowed;opacity:.5}.document-engine-checkbox-container{display:inline-block}\n"] }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], checkedChange: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.document-engine-checkbox-container']
-            }] } });
-
 /**
  * Table creation view for bubble menu
  * Allows users to configure table dimensions and header row
@@ -4553,7 +4611,7 @@ class TableMainViewComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TableMainViewComponent, isStandalone: true, selector: "document-engine-table-main-view", ngImport: i0, template: `
     <div class="table-main-view">
       <!-- Column actions -->
-      <document-engine-select [(value)]="colAction" (valueChange)="handleColAction($event)" labelMode="static">
+      <document-engine-select data-testid="column-actions" [(value)]="colAction" (valueChange)="handleColAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_column"></document-engine-icon>
 
         <button documentEngineSelectOption value="add-before">Insert column left</button>
@@ -4563,7 +4621,7 @@ class TableMainViewComponent {
       </document-engine-select>
 
       <!-- Row actions -->
-      <document-engine-select [(value)]="rowAction" (valueChange)="handleRowAction($event)" labelMode="static">
+      <document-engine-select data-testid="row-actions" [(value)]="rowAction" (valueChange)="handleRowAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_row"></document-engine-icon>
 
         <button documentEngineSelectOption value="add-before">Insert row above</button>
@@ -4576,8 +4634,12 @@ class TableMainViewComponent {
       <document-engine-select [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_merge_cell"></document-engine-icon>
 
-        <button documentEngineSelectOption value="merge" [disabled]="!canMerge">Merge cells</button>
-        <button documentEngineSelectOption value="split" [disabled]="!canSplit">Split cell</button>
+        <button documentEngineSelectOption data-testid="merge-cells" value="merge" [disabled]="!canMerge">
+          Merge cells
+        </button>
+        <button documentEngineSelectOption data-testid="split-cell" value="split" [disabled]="!canSplit">
+          Split cell
+        </button>
       </document-engine-select>
 
       <!-- Table style -->
@@ -4586,6 +4648,7 @@ class TableMainViewComponent {
         size="icon"
         variant="ghost"
         title="Table Properties"
+        data-testid="table-properties"
         (click)="navigateTo?.('table-style')"
       >
         <document-engine-icon name="table_property"></document-engine-icon>
@@ -4597,6 +4660,7 @@ class TableMainViewComponent {
         size="icon"
         variant="ghost"
         title="Cell Properties"
+        data-testid="cell-properties"
         (click)="navigateTo?.('cell-style')"
       >
         <document-engine-icon name="table_cell_property"></document-engine-icon>
@@ -4609,7 +4673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             args: [{ selector: 'document-engine-table-main-view', standalone: true, imports: [CommonModule, ButtonDirective, IconComponent, SelectComponent, SelectOptionDirective, SelectLabelDirective], template: `
     <div class="table-main-view">
       <!-- Column actions -->
-      <document-engine-select [(value)]="colAction" (valueChange)="handleColAction($event)" labelMode="static">
+      <document-engine-select data-testid="column-actions" [(value)]="colAction" (valueChange)="handleColAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_column"></document-engine-icon>
 
         <button documentEngineSelectOption value="add-before">Insert column left</button>
@@ -4619,7 +4683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       </document-engine-select>
 
       <!-- Row actions -->
-      <document-engine-select [(value)]="rowAction" (valueChange)="handleRowAction($event)" labelMode="static">
+      <document-engine-select data-testid="row-actions" [(value)]="rowAction" (valueChange)="handleRowAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_row"></document-engine-icon>
 
         <button documentEngineSelectOption value="add-before">Insert row above</button>
@@ -4632,8 +4696,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       <document-engine-select [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_merge_cell"></document-engine-icon>
 
-        <button documentEngineSelectOption value="merge" [disabled]="!canMerge">Merge cells</button>
-        <button documentEngineSelectOption value="split" [disabled]="!canSplit">Split cell</button>
+        <button documentEngineSelectOption data-testid="merge-cells" value="merge" [disabled]="!canMerge">
+          Merge cells
+        </button>
+        <button documentEngineSelectOption data-testid="split-cell" value="split" [disabled]="!canSplit">
+          Split cell
+        </button>
       </document-engine-select>
 
       <!-- Table style -->
@@ -4642,6 +4710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         size="icon"
         variant="ghost"
         title="Table Properties"
+        data-testid="table-properties"
         (click)="navigateTo?.('table-style')"
       >
         <document-engine-icon name="table_property"></document-engine-icon>
@@ -4653,6 +4722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         size="icon"
         variant="ghost"
         title="Cell Properties"
+        data-testid="cell-properties"
         (click)="navigateTo?.('cell-style')"
       >
         <document-engine-icon name="table_cell_property"></document-engine-icon>
@@ -4786,6 +4856,7 @@ class TableStyleViewComponent {
 
               <input
                 documentEngineInput
+                data-testid="border-width"
                 [(ngModel)]="borderWidth"
                 (ngModelChange)="onBorderWidthChange()"
                 placeholder="1px"
@@ -4795,7 +4866,7 @@ class TableStyleViewComponent {
             <div class="table-style-view__field">
               <div class="table-style-view__field-label">Style</div>
 
-              <document-engine-select [(value)]="borderStyle" variant="outline">
+              <document-engine-select data-testid="border-style" [(value)]="borderStyle" variant="outline">
                 <button documentEngineSelectOption value="solid">Solid</button>
                 <button documentEngineSelectOption value="double">Double</button>
                 <button documentEngineSelectOption value="dashed">Dashed</button>
@@ -4816,6 +4887,7 @@ class TableStyleViewComponent {
                   size="icon"
                   variant="ghost"
                   class="table-style-view__color-clear"
+                  data-testid="clear-border-color"
                   (click)="borderColor = null"
                 >
                   <document-engine-icon name="close"></document-engine-icon>
@@ -4836,13 +4908,14 @@ class TableStyleViewComponent {
               <!-- Color picker for border -->
               <div
                 *ngIf="showColorPicker === 'border'"
-                [popover]="borderColorTrigger"
+                [documentEnginePopover]="borderColorTrigger"
                 [isOpen]="showColorPicker === 'border'"
                 class="table-style-view__color-picker-dropdown"
                 (click)="$event.stopPropagation()"
               >
                 <document-engine-color-picker
                   [colorPalette]="colorPalette"
+                  data-testid="border-color"
                   [activeColor]="borderColorObj"
                   (colorSelected)="onBorderColorSelected($event)"
                   (colorRemoved)="onBorderColorRemoved()"
@@ -4867,6 +4940,7 @@ class TableStyleViewComponent {
                 size="icon"
                 variant="ghost"
                 class="table-style-view__color-clear"
+                data-testid="clear-background-color"
                 (click)="tableBg = null"
               >
                 <document-engine-icon name="close"></document-engine-icon>
@@ -4887,13 +4961,14 @@ class TableStyleViewComponent {
             <!-- Color picker for background -->
             <div
               *ngIf="showColorPicker === 'bg'"
-              [popover]="bgColorTrigger"
+              [documentEnginePopover]="bgColorTrigger"
               [isOpen]="showColorPicker === 'bg'"
               class="table-style-view__color-picker-dropdown"
               (click)="$event.stopPropagation()"
             >
               <document-engine-color-picker
                 [colorPalette]="colorPalette"
+                data-testid="background-color"
                 [activeColor]="tableBgObj"
                 (colorSelected)="onTableBgSelected($event)"
                 (colorRemoved)="onTableBgRemoved()"
@@ -4905,11 +4980,11 @@ class TableStyleViewComponent {
 
       <!-- Actions -->
       <div class="table-style-view__actions">
-        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
-        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
+        <button documentEngineButton data-testid="cancel" variant="ghost" (click)="cancel()">Cancel</button>
+        <button documentEngineButton data-testid="save" variant="default" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, isInline: true, styles: [".table-style-view{display:flex;flex-direction:column;width:32.5rem}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { 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.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: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["popover", "isOpen", "placement", "offset", "padding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";.table-style-view{display:flex;flex-direction:column;width:32.5rem;max-inline-size:calc(100vw - 2rem)}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{box-sizing:border-box;z-index:50;border-radius:.5rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { 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.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: "component", type: ColorPickerComponent, selector: "document-engine-color-picker", inputs: ["colorPalette", "usedColors", "activeColor"], outputs: ["colorSelected", "colorRemoved"] }, { kind: "directive", type: PopoverDirective, selector: "[documentEnginePopover], [popover]", inputs: ["documentEnginePopover", "popover", "isOpen", "placement", "offset", "padding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableStyleViewComponent, decorators: [{
             type: Component,
@@ -4938,6 +5013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
               <input
                 documentEngineInput
+                data-testid="border-width"
                 [(ngModel)]="borderWidth"
                 (ngModelChange)="onBorderWidthChange()"
                 placeholder="1px"
@@ -4947,7 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             <div class="table-style-view__field">
               <div class="table-style-view__field-label">Style</div>
 
-              <document-engine-select [(value)]="borderStyle" variant="outline">
+              <document-engine-select data-testid="border-style" [(value)]="borderStyle" variant="outline">
                 <button documentEngineSelectOption value="solid">Solid</button>
                 <button documentEngineSelectOption value="double">Double</button>
                 <button documentEngineSelectOption value="dashed">Dashed</button>
@@ -4968,6 +5044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                   size="icon"
                   variant="ghost"
                   class="table-style-view__color-clear"
+                  data-testid="clear-border-color"
                   (click)="borderColor = null"
                 >
                   <document-engine-icon name="close"></document-engine-icon>
@@ -4988,13 +5065,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <!-- Color picker for border -->
               <div
                 *ngIf="showColorPicker === 'border'"
-                [popover]="borderColorTrigger"
+                [documentEnginePopover]="borderColorTrigger"
                 [isOpen]="showColorPicker === 'border'"
                 class="table-style-view__color-picker-dropdown"
                 (click)="$event.stopPropagation()"
               >
                 <document-engine-color-picker
                   [colorPalette]="colorPalette"
+                  data-testid="border-color"
                   [activeColor]="borderColorObj"
                   (colorSelected)="onBorderColorSelected($event)"
                   (colorRemoved)="onBorderColorRemoved()"
@@ -5019,6 +5097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 size="icon"
                 variant="ghost"
                 class="table-style-view__color-clear"
+                data-testid="clear-background-color"
                 (click)="tableBg = null"
               >
                 <document-engine-icon name="close"></document-engine-icon>
@@ -5039,13 +5118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             <!-- Color picker for background -->
             <div
               *ngIf="showColorPicker === 'bg'"
-              [popover]="bgColorTrigger"
+              [documentEnginePopover]="bgColorTrigger"
               [isOpen]="showColorPicker === 'bg'"
               class="table-style-view__color-picker-dropdown"
               (click)="$event.stopPropagation()"
             >
               <document-engine-color-picker
                 [colorPalette]="colorPalette"
+                data-testid="background-color"
                 [activeColor]="tableBgObj"
                 (colorSelected)="onTableBgSelected($event)"
                 (colorRemoved)="onTableBgRemoved()"
@@ -5057,11 +5137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
       <!-- Actions -->
       <div class="table-style-view__actions">
-        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
-        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
+        <button documentEngineButton data-testid="cancel" variant="ghost" (click)="cancel()">Cancel</button>
+        <button documentEngineButton data-testid="save" variant="default" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".table-style-view{display:flex;flex-direction:column;width:32.5rem}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.table-style-view{display:flex;flex-direction:column;width:32.5rem;max-inline-size:calc(100vw - 2rem)}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{box-sizing:border-box;z-index:50;border-radius:.5rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
         }], propDecorators: { borderColorTrigger: [{
                 type: ViewChild,
                 args: ['borderColorTrigger', { static: false, read: ElementRef }]
@@ -5680,7 +5760,7 @@ class EditorBubbleMenuComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditorBubbleMenuComponent, isStandalone: true, selector: "document-engine-editor-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }], ngImport: i0, template: `
     <div
       #bubbleElement
-      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
+      class="bubble-menu-wrapper"
       tiptapBubbleMenu
       [editor]="editor"
       [props]="config.props!"
@@ -5690,18 +5770,14 @@ class EditorBubbleMenuComponent {
       <!-- View component will be dynamically inserted here -->
       <ng-container #viewContainer></ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TiptapBubbleMenuDirective, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: ["props", "editor", "mountTo", "shouldShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";.bubble-menu-wrapper{box-sizing:border-box;z-index:30;border-radius:.25rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TiptapBubbleMenuDirective, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: ["props", "editor", "mountTo", "shouldShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditorBubbleMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'document-engine-editor-bubble-menu',
-                    standalone: true,
-                    imports: [CommonModule, TiptapBubbleMenuDirective],
-                    template: `
+            args: [{ selector: 'document-engine-editor-bubble-menu', standalone: true, imports: [CommonModule, TiptapBubbleMenuDirective], template: `
     <div
       #bubbleElement
-      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
+      class="bubble-menu-wrapper"
       tiptapBubbleMenu
       [editor]="editor"
       [props]="config.props!"
@@ -5711,9 +5787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       <!-- View component will be dynamically inserted here -->
       <ng-container #viewContainer></ng-container>
     </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.bubble-menu-wrapper{box-sizing:border-box;z-index:30;border-radius:.25rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1))}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input
             }], config: [{
@@ -5742,6 +5816,8 @@ class ToolbarBubbleMenuComponent {
     currentViewRef = null;
     currentViewId = null;
     currentAttributes = {};
+    cleanupAutoUpdate;
+    positionTimeout;
     isVisible = false;
     ngAfterViewInit() {
         const bubbleElement = this.bubbleElement?.nativeElement;
@@ -5782,7 +5858,8 @@ class ToolbarBubbleMenuComponent {
         this.showView(initialView);
         // Position the bubble relative to the target element
         // TODO: It make the bubble jump when the bubble is opened
-        setTimeout(() => this.positionBubble(targetElement), 0);
+        clearTimeout(this.positionTimeout);
+        this.positionTimeout = setTimeout(() => this.positionBubble(targetElement), 0);
         // Attach outside click/escape listeners using the bubble element, not the toolbar button
         const bubbleEl = this.bubbleElement?.nativeElement;
         if (bubbleEl) {
@@ -5795,6 +5872,15 @@ class ToolbarBubbleMenuComponent {
      */
     hideBubble() {
         this.isVisible = false;
+        // Cancel a positioning pass that has not run yet. `showBubble` defers it by a
+        // tick, so a show-then-immediately-hide (or a teardown) would otherwise let it
+        // fire afterwards and register a fresh `autoUpdate` — scroll/resize listeners
+        // plus a Resize and an Intersection observer — on a hidden or detached
+        // element, with the handle for disposing it already thrown away.
+        clearTimeout(this.positionTimeout);
+        this.positionTimeout = undefined;
+        this.cleanupAutoUpdate?.();
+        this.cleanupAutoUpdate = undefined;
         this.eventManager.detach(this.config.pluginKey);
         this.destroyCurrentView();
         this.cdr.markForCheck();
@@ -5899,59 +5985,67 @@ class ToolbarBubbleMenuComponent {
     findViewConfig(viewId) {
         return this.config.views.find((v) => v.id === viewId) || null;
     }
+    /**
+     * Anchor the bubble to its trigger with floating-ui, matching
+     * `PopoverDirective`.
+     *
+     * The hand-rolled version this replaces measured the trigger exactly once, so
+     * scrolling left the panel welded to the viewport while its target slid away.
+     * It also had no third case: a panel that fit neither below nor above got a
+     * negative `top`, putting its own header off the top edge of the screen.
+     * `flip` handles the second placement and `shift` clamps the panel into the
+     * viewport instead, so there is no unhandled case left.
+     *
+     * `strategy: 'fixed'` matches the `position: fixed` written below — asking for
+     * the default `'absolute'` coordinates would offset the panel by the page's
+     * scroll amount.
+     */
     positionBubble(targetElement) {
         const bubble = this.bubbleElement?.nativeElement;
         if (!bubble)
             return;
-        const targetRect = targetElement.getBoundingClientRect();
-        const bubbleRect = bubble.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Default position: below the target element, centered
-        let top = targetRect.bottom + 8;
-        let left = targetRect.left + targetRect.width / 2 - bubbleRect.width / 2;
-        // Adjust horizontal position to stay within viewport
-        if (left < 8) {
-            left = 8;
-        }
-        else if (left + bubbleRect.width > viewportWidth - 8) {
-            left = viewportWidth - bubbleRect.width - 8;
-        }
-        // If bubble would go below viewport, position it above the target
-        if (top + bubbleRect.height > viewportHeight - 8) {
-            top = targetRect.top - bubbleRect.height - 8;
-        }
-        // Apply position
         bubble.style.position = 'fixed';
-        bubble.style.top = `${top}px`;
-        bubble.style.left = `${left}px`;
+        this.cleanupAutoUpdate?.();
+        this.cleanupAutoUpdate = autoUpdate(targetElement, bubble, () => {
+            computePosition(targetElement, bubble, {
+                strategy: 'fixed',
+                placement: 'bottom',
+                middleware: [offset(8), flip({ padding: 8 }), shift({ padding: 8 })],
+            })
+                .then(({ x, y }) => {
+                Object.assign(bubble.style, { left: `${x}px`, top: `${y}px` });
+            })
+                .catch((error) => {
+                console.error('[ToolbarBubbleMenu] Error computing position', error);
+            });
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarBubbleMenuComponent, isStandalone: true, selector: "document-engine-toolbar-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }, { propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <div
       #bubbleElement
-      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-50"
-      [class.hidden]="!isVisible"
+      class="toolbar-bubble-menu"
+      [class.toolbar-bubble-menu--hidden]="!isVisible"
       [style.width]="config.width || 'auto'"
       [style.maxWidth]="config.maxWidth || '320px'"
     >
       <ng-container #viewContainer></ng-container>
     </div>
-  `, isInline: true, styles: [".toolbar-bubble-menu{opacity:0;transform:translateY(-10px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.toolbar-bubble-menu:not(.hidden){opacity:1;transform:translateY(0);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";.toolbar-bubble-menu{box-sizing:border-box;z-index:50;border-radius:.25rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));opacity:1;pointer-events:auto;transition:opacity .2s ease-out}.toolbar-bubble-menu--hidden{display:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarBubbleMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'document-engine-toolbar-bubble-menu', standalone: true, imports: [CommonModule], template: `
     <div
       #bubbleElement
-      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-50"
-      [class.hidden]="!isVisible"
+      class="toolbar-bubble-menu"
+      [class.toolbar-bubble-menu--hidden]="!isVisible"
       [style.width]="config.width || 'auto'"
       [style.maxWidth]="config.maxWidth || '320px'"
     >
       <ng-container #viewContainer></ng-container>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".toolbar-bubble-menu{opacity:0;transform:translateY(-10px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.toolbar-bubble-menu:not(.hidden){opacity:1;transform:translateY(0);pointer-events:auto}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.toolbar-bubble-menu{box-sizing:border-box;z-index:50;border-radius:.25rem;border:1px solid var(--border, hsl(214.3, 31.8%, 91.4%));background-color:var(--popover, var(--card, hsl(0, 0%, 100%)));color:var(--popover-foreground, var(--card-foreground, hsl(222.2, 84%, 4.9%)));box-shadow:var(--shadow-elevation-2, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1));opacity:1;pointer-events:auto;transition:opacity .2s ease-out}.toolbar-bubble-menu--hidden{display:none;opacity:0;pointer-events:none}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input
             }], config: [{
@@ -6454,13 +6548,13 @@ class DocumentEditorComponent {
         return merged;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: true, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: true, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'document-engine-editor', imports: [CommonModule, ToolbarComponent, FooterComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'no-twp',
-                    }, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"] }]
+                    }, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], editorReady: [{