codexly-ui 0.4.6 → 0.4.8

package/fesm2022/codexly-ui.mjs

@@ -850,7 +850,13 @@ class ClxButtonComponent {
             ? resolveRadius(this._themeSvc.config().borderRadius)
             : BUTTON_SHAPE_FIXED[s];
         const overflowClass = (this.badge() !== undefined && this.badge() !== null) ? 'overflow-visible' : 'overflow-hidden';
-        const base = BUTTON_BASE_CLASS.replace('overflow-hidden', overflowClass);
+        // If the consumer already positions the button (absolute/fixed/sticky), don't force
+        // `relative` — same-specificity utility classes are resolved by CSS source order, not
+        // template order, so `relative` from the base class can silently win over a consumer's
+        // `absolute`, leaving the button positioned in-flow instead of where it was placed.
+        const isPositioned = /(^|\s)(absolute|fixed|sticky)(\s|$)/.test(this._consumerClass);
+        const base = (isPositioned ? BUTTON_BASE_CLASS.replace(/^relative\s/, '') : BUTTON_BASE_CLASS)
+            .replace('overflow-hidden', overflowClass);
         const consumer = this._consumerClass ? ` ${this._consumerClass}` : '';
         return `${base} ${colorClass} ${sizeClass} ${shapeClass}${this.block() ? ' w-full' : ''}${consumer}`.trimEnd();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
@@ -5285,10 +5291,10 @@ class ClxUploadComponent {
                 variant="solid"
                 color="red"
                 shape="circle"
-                size="xs"
+                size="xxs"
                 icon="close"
                 [iconOnly]="true"
-                class="absolute top-1 right-1 shadow-md"
+                class="absolute top-0.5 right-0.5 shadow-md"
                 [disabled]="_disabled()"
                 (click)="_removeItem(item); $event.stopPropagation()">
               </button>
@@ -5394,10 +5400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 variant="solid"
                 color="red"
                 shape="circle"
-                size="xs"
+                size="xxs"
                 icon="close"
                 [iconOnly]="true"
-                class="absolute top-1 right-1 shadow-md"
+                class="absolute top-0.5 right-0.5 shadow-md"
                 [disabled]="_disabled()"
                 (click)="_removeItem(item); $event.stopPropagation()">
               </button>