@warp-ds/elements 2.2.0-next.28 → 2.2.0-next.29

package/dist/packages/modal/modal-header.js

@@ -2461,13 +2461,16 @@ Please compile your catalog first.
           class="header-button header-button-left"
           @click="${this.emitBack}">
           <w-icon-arrow-left-16 style="display: flex;"></w-icon-arrow-left-16>
-        </button>`:ke}get closeButton(){return this.noClose?ke:Y`<button
-      type="button"
-      aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
-      class="header-button ${this._hasTopContent?"header-close-button-on-image":"header-close-button"}"
-      @click="${this.close}">
-      <w-icon-close-16 style="display: flex;"></w-icon-close-16>
-    </button>`}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(o){let t=o.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}};u.styles=[ge,Cr`
+        </button>`:ke}get closeButton(){return this.noClose?ke:Y`<div class="header-close-button-container">
+        <w-button
+            type="button"
+            aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
+            variant="pill"
+            small=""
+            @click="${this.close}">
+                <w-icon-close-16 style="display: flex;"></w-icon-close-16>
+        </w-button>
+    </div>`}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(o){let t=o.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}};u.styles=[ge,Cr`
       .header {
         position: relative;
         padding-bottom: 0.8rem;
@@ -2540,30 +2543,10 @@ Please compile your catalog first.
       .header-button-left:active {
         background-color: var(--w-color-button-pill-background-active);
       }
-      .header-close-button {
-        background-color: transparent;
-        color: var(--w-s-color-icon);
-        margin-right: -0.8rem;
-      }
-      .header-close-button:hover {
-        background-color: var(--w-color-button-pill-background-hover);
-      }
-      .header-close-button:active {
-        background-color: var(--w-color-button-pill-background-active);
-      }
-      .header-close-button-on-image {
-        background-color: transparent;
-        color: var(--w-s-color-text-inverted);
-        right: 0.8rem;
-        top: 0.8rem;
+      .header-close-button-container {
         position: absolute;
-        z-index: 10;
-      }
-      .header-close-button-on-image:hover {
-        background-color: var(--w-color-button-pill-background-hover);
-      }
-      .header-close-button-on-image:active {
-        background-color: var(--w-color-button-pill-background-active);
+        right: 2rem;
+        top: 2.4rem;
       }
       @media (min-width: 480px) {
         .header-title-bar {