@warp-ds/elements 2.2.0-next.9 → 2.2.1

package/dist/packages/link/styles.js

@@ -0,0 +1,200 @@
+import { css } from 'lit';
+export const styles = css `.w-button,
+.w-button--secondary {
+    /* Local scoped variables, given the default button (the secondary variant) as a default */
+    --_background: var(--background, var(--w-s-color-background));
+    --_background-hover: var(--background-hover, var(--w-s-color-background-hover));
+    --_background-active: var(--background-active, var(--w-s-color-background-active));
+    --_text-color: var(--color, var(--w-s-color-text-link));
+    --_border-width: var(--border-width, 2px);
+    --_border: var(--border, var(--w-s-color-border));
+    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
+    --_border-active: var(--border-active, var(--w-s-color-border-active));
+    --_border-radius: var(--border-radius, 8px);
+    --_font-size: var(--font-size, var(--w-font-size-m));
+    --_line-height: var(--line-height, var(--w-line-height-m));
+    --_font-weight: var(--font-weight, bold);
+    --_padding-x: var(--padding-x, 16px);
+    --_padding-y: var(--padding-y, 13px);
+
+    /* Base setup for all buttons */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    transition:
+            color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hook the local vars up to the button stuff  */
+    background-color: var(--_background);
+    color: var(--_text-color);
+    border: var(--_border-width) solid var(--_border);
+    border-radius: var(--_border-radius);
+    padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    font-weight: var(--_font-weight);
+}
+
+    .w-button:hover {
+        background-color: var(--_background-hover);
+        border-color: var(--_border-hover);
+    }
+
+    .w-button:active {
+        background-color: var(--_background-active);
+        border-color: var(--_border-active);
+    }
+
+    .w-button:focus-visible {
+        outline: 2px solid var(--w-s-color-border-focus);
+        outline-offset: var(--w-outline-offset, 1px);
+    }
+
+    /* Variants config */
+    .w-button--primary {
+        --background: var(--w-color-button-primary-background);
+        --background-hover: var(--w-color-button-primary-background-hover);
+        --background-active: var(--w-color-button-primary-background-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+    }
+    .w-button--negative {
+        --background: var(--w-s-color-background-negative);
+        --background-hover: var(--w-s-color-background-negative-hover);
+        --background-active: var(--w-s-color-background-negative-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+    }
+    .w-button--negative-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-negative-subtle-hover);
+        --background-active: var(--w-s-color-background-negative-subtle-active);
+        --color: var(--w-s-color-text-negative);
+        --border-width: 0px;
+    }
+    .w-button--utility {
+        --background: var(--w-s-color-background);
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 4px;
+        --border-width: 1px;
+    }
+    .w-button--utility-quiet {
+        --background: transparent;
+        --color: var(--w-s-color-text);
+        --border-width: 0px;
+    }
+    .w-button--overlay {
+        --background: var(--w-color-background);
+        --background-hover: var(--w-color-background-hover);
+        --background-active: var(--w-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted {
+        --background: var(--w-s-color-background-inverted);
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+
+    .w-button--link {
+        --background: none;
+        --background-hover: none;
+        --background-active: none;
+        --border-width: 0;
+        --font-weight: normal;
+        display: inline;
+    }
+
+    /* States config,  selects --loading as well since loading is always supposed to be disabled */
+    .w-button:disabled,
+    .w-button--disabled,
+    .w-button--loading {
+        --background: var(--w-s-color-background-disabled);
+        --background-hover: var(--w-s-color-background-disabled);
+        --background-active: var(--w-s-color-background-disabled);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+        pointer-events: none;
+    }
+
+    .w-button--link:hover {
+        text-decoration: underline;
+    }
+
+    /* Sizes config */
+    .w-button--small {
+        --padding-x: 12px;
+        --padding-y: 8px;
+        --font-size: var(--w-font-size-xs);
+        --line-height: var(--w-line-height-xs);
+    }
+
+    /* Width config */
+    .w-button--full-width {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .w-button--has-icon-only {
+        width: auto;
+        max-width: none;
+        --_padding-x: var(--_padding-y);
+        aspect-ratio: 1 / 1;
+    }
+
+    a.w-button {
+        text-decoration: none !important;
+    }
+
+    /* Copy of loading animation from warp  */
+    .w-button--loading {
+        background-image: linear-gradient(
+                135deg,
+                rgba(0, 0, 0, 0.05) 25%,
+                transparent 25%,
+                transparent 50%,
+                rgba(0, 0, 0, 0.05) 50%,
+                rgba(0, 0, 0, 0.05) 75%,
+                transparent 75%,
+                transparent
+        );
+        background-size: 30px 30px;
+        animation: animate-inprogress 3s linear infinite;
+    }
+
+    @keyframes animate-inprogress {
+        0% {
+            background-position: 0 0;
+        }
+        100% {
+            background-position: 60px 0;
+        }
+    }`;

package/dist/packages/modal/index.js

@@ -1,5 +1,5 @@
-var Pe=Object.create;var T=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var je=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ie=Object.prototype.hasOwnProperty;var Ye=(r,e,o)=>e in r?T(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var Q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var $e=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of je(e))!Ie.call(r,a)&&a!==o&&T(r,a,{get:()=>e[a],enumerable:!(t=W(e,a))||t.enumerable});return r};var Ae=(r,e,o)=>(o=r!=null?Pe(De(r)):{},$e(e||!r||!r.__esModule?T(o,"default",{value:r,enumerable:!0}):o,r));var p=(r,e,o,t)=>{for(var a=t>1?void 0:t?W(e,o):e,i=r.length-1,n;i>=0;i--)(n=r[i])&&(a=(t?n(e,o,a):n(a))||a);return t&&a&&T(e,o,a),a};var S=(r,e,o)=>Ye(r,typeof e!="symbol"?e+"":e,o);var ae=Q(w=>{"use strict";Object.defineProperty(w,"__esModule",{value:!0});w.errorMessages=w.ErrorType=void 0;var y;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(y=w.ErrorType||(w.ErrorType={}));w.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var se=Q(h=>{"use strict";Object.defineProperty(h,"__esModule",{value:!0});h.unraw=h.errorMessages=h.ErrorType=void 0;var d=ae();Object.defineProperty(h,"ErrorType",{enumerable:!0,get:function(){return d.ErrorType}});Object.defineProperty(h,"errorMessages",{enumerable:!0,get:function(){return d.errorMessages}});function Je(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function N(r,e,o){let t=Je(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(d.errorMessages.get(e));return t}function Xe(r){let e=N(r,d.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function ie(r,e){let o=N(r,d.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=N(e,d.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function Ze(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function qe(r){if(!Ze(r))throw new SyntaxError(d.errorMessages.get(d.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=N(e,d.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(d.errorMessages.get(d.ErrorType.CodePointLimit)):t}}function Ke(r,e=!1){if(e)throw new SyntaxError(d.errorMessages.get(d.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var Ge=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function Ve(r){return Ge.get(r)||r}var We=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function ne(r,e=!1){return r.replace(We,function(o,t,a,i,n,s,l,u,v){if(t!==void 0)return"\\";if(a!==void 0)return Xe(a);if(i!==void 0)return qe(i);if(n!==void 0)return ie(n,s);if(l!==void 0)return ie(l);if(u==="0")return"\0";if(u!==void 0)return Ke(u,!e);if(v!==void 0)return Ve(v);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}h.unraw=ne;h.default=ne});import{html as Re,css as Fe,LitElement as He}from"lit";import{css as ee}from"lit";var k=ee`
+var Pe=Object.create;var S=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var je=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ie=Object.prototype.hasOwnProperty;var Ye=(r,e,o)=>e in r?S(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var Q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var $e=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of je(e))!Ie.call(r,a)&&a!==o&&S(r,a,{get:()=>e[a],enumerable:!(t=W(e,a))||t.enumerable});return r};var Ae=(r,e,o)=>(o=r!=null?Pe(De(r)):{},$e(e||!r||!r.__esModule?S(o,"default",{value:r,enumerable:!0}):o,r));var p=(r,e,o,t)=>{for(var a=t>1?void 0:t?W(e,o):e,i=r.length-1,n;i>=0;i--)(n=r[i])&&(a=(t?n(e,o,a):n(a))||a);return t&&a&&S(e,o,a),a};var O=(r,e,o)=>Ye(r,typeof e!="symbol"?e+"":e,o);var ae=Q(w=>{"use strict";Object.defineProperty(w,"__esModule",{value:!0});w.errorMessages=w.ErrorType=void 0;var y;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(y=w.ErrorType||(w.ErrorType={}));w.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var se=Q(h=>{"use strict";Object.defineProperty(h,"__esModule",{value:!0});h.unraw=h.errorMessages=h.ErrorType=void 0;var d=ae();Object.defineProperty(h,"ErrorType",{enumerable:!0,get:function(){return d.ErrorType}});Object.defineProperty(h,"errorMessages",{enumerable:!0,get:function(){return d.errorMessages}});function Je(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function N(r,e,o){let t=Je(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(d.errorMessages.get(e));return t}function Xe(r){let e=N(r,d.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function ie(r,e){let o=N(r,d.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=N(e,d.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function Ze(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function qe(r){if(!Ze(r))throw new SyntaxError(d.errorMessages.get(d.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=N(e,d.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(d.errorMessages.get(d.ErrorType.CodePointLimit)):t}}function Ke(r,e=!1){if(e)throw new SyntaxError(d.errorMessages.get(d.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var Ge=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function Ve(r){return Ge.get(r)||r}var We=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function ne(r,e=!1){return r.replace(We,function(o,t,a,i,n,s,l,u,v){if(t!==void 0)return"\\";if(a!==void 0)return Xe(a);if(i!==void 0)return qe(i);if(n!==void 0)return ie(n,s);if(l!==void 0)return ie(l);if(u==="0")return"\0";if(u!==void 0)return Ke(u,!e);if(v!==void 0)return Ve(v);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}h.unraw=ne;h.default=ne});import{css as Re,html as Fe,LitElement as He}from"lit";import{css as ee}from"lit";var k=ee`
   *,
   :before,
   :after {
@@ -2438,11 +2438,11 @@ var Pe=Object.create;var T=Object.defineProperty;var W=Object.getOwnPropertyDesc
                     display: none
                 }
             }
-        `;var E=r=>class extends r{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}},_=r=>class extends r{handleSlotChange(e){let o=e.target.assignedNodes({flatten:!0});for(let t of o.filter(a=>a.patchClose))t._close=()=>this.close()}};var C=class extends E(_(He)){render(){return Re`
+        `;var E=r=>class extends r{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}},_=r=>class extends r{handleSlotChange(e){let o=e.target.assignedNodes({flatten:!0});for(let t of o.filter(a=>a.patchClose))t._close=()=>this.close()}};var C=class extends E(_(He)){render(){return Fe`
       <div class="footer">
         <slot @slotchange="${this.handleSlotChange}"></slot>
       </div>
-    `}};C.styles=[k,Fe`
+    `}};C.styles=[k,Re`
       .footer {
         display: flex;
         flex-shrink: 0;
@@ -2457,7 +2457,7 @@ var Pe=Object.create;var T=Object.defineProperty;var W=Object.getOwnPropertyDesc
           padding-right: 3.2rem;
         }
       }
-    `];customElements.get("w-modal-footer")||customElements.define("w-modal-footer",C);import{css as $r,html as J,LitElement as Ar,nothing as Me}from"lit";var re=(r,e)=>({dx:r.left-e.left,dy:r.top-e.top,dw:r.width/e.width,dh:r.height/e.height,first:r,last:e}),oe=({dx:r,dy:e})=>[{transform:`translate(${r}px, ${e}px)`},{transform:"none"}],te={easing:"ease",duration:300};var I=!1,Ue=typeof window!="undefined";if(Ue){let r=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:o})=>I=o;r.addEventListener&&r.addEventListener("change",e),e(r)}var O=class{constructor(e,{animation:o={},keyframes:t,respectReduceMotion:a=!0}={}){S(this,"first");S(this,"last");S(this,"el");this.el=e,this.first={},this.last={},this.userAnimationOptions=o,this.keyframeGenerator=t||oe,this.shouldReduceMotion=a}async when(e){this.prep();let o=await e();return await this.play(),o}prep(){this.first=this.el.getBoundingClientRect()}async play(){if(this.last=this.el.getBoundingClientRect(),!this.el.animate)return;await this.el.animate(this.keyframes,this.animationOptions).finished}get keyframes(){return this.keyframeGenerator(re(this.first,this.last))}get defaults(){return te}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?I?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var de=Ae(se(),1);var m=r=>typeof r=="string",Qe=r=>typeof r=="function",le=new Map,pe="en";function R(r){return[...Array.isArray(r)?r:[r],pe]}function F(r,e,o){let t=R(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return B(()=>P("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(m(e)?new Date(e):e)}function er(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return F(r,e,t)}function Y(r,e,o){let t=R(r);return B(()=>P("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ce(r,e,o,{offset:t=0,...a}){var s,l;let i=R(r),n=e?B(()=>P("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):B(()=>P("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(s=a[o])!=null?s:a[n.select(o-t)])!=null?l:a.other}function B(r,e){let o=r(),t=le.get(o);return t||(t=e(),le.set(o,t)),t}function P(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var ue=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,be="%__lingui_octothorpe__%",rr=(r,e,o={})=>{let t=e||r,a=n=>typeof n=="object"?n:o[n],i=(n,s)=>{let l=Object.keys(o).length?a("number"):void 0,u=Y(t,n,l);return s.replace(new RegExp(be,"g"),u)};return{plural:(n,s)=>{let{offset:l=0}=s,u=ce(t,!1,n,s);return i(n-l,u)},selectordinal:(n,s)=>{let{offset:l=0}=s,u=ce(t,!0,n,s);return i(n-l,u)},select:or,number:(n,s)=>Y(t,n,a(s)||{style:s}),date:(n,s)=>F(t,n,a(s)||s),time:(n,s)=>er(t,n,a(s)||s)}},or=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function tr(r,e,o){return(t={},a)=>{let i=rr(e,o,a),n=(l,u=!1)=>Array.isArray(l)?l.reduce((v,L)=>{if(L==="#"&&u)return v+be;if(m(L))return v+L;let[G,f,V]=L,j={};f==="plural"||f==="selectordinal"||f==="select"?Object.entries(V).forEach(([D,Be])=>{j[D]=n(Be,f==="plural"||f==="selectordinal")}):j=V;let M;if(f){let D=i[f];M=D(t[G],j)}else M=t[G];return M==null?v:v+M},""):l,s=n(r);return m(s)&&ue.test(s)?(0,de.unraw)(s):m(s)?s:s?String(s):""}}var ar=Object.defineProperty,ir=(r,e,o)=>e in r?ar(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,nr=(r,e,o)=>(ir(r,typeof e!="symbol"?e+"":e,o),o),$=class{constructor(){nr(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},sr=Object.defineProperty,lr=(r,e,o)=>e in r?sr(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,x=(r,e,o)=>(lr(r,typeof e!="symbol"?e+"":e,o),o),A=class extends ${constructor(e){var o;super(),x(this,"_locale",""),x(this,"_locales"),x(this,"_localeData",{}),x(this,"_messages",{}),x(this,"_missing"),x(this,"_messageCompiler"),x(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:pe,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),m(e)||(o=e.values||o,a=e.message,e=e.id);let i=this.messages[e],n=i===void 0,s=this._missing;if(s&&n)return Qe(s)?s(this._locale,e):s;n&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return m(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
+    `];customElements.get("w-modal-footer")||customElements.define("w-modal-footer",C);var re=(r,e)=>({dx:r.left-e.left,dy:r.top-e.top,dw:r.width/e.width,dh:r.height/e.height,first:r,last:e}),oe=({dx:r,dy:e})=>[{transform:`translate(${r}px, ${e}px)`},{transform:"none"}],te={easing:"ease",duration:300};var I=!1,Ue=typeof window!="undefined";if(Ue){let r=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:o})=>I=o;r.addEventListener&&r.addEventListener("change",e),e(r)}var T=class{constructor(e,{animation:o={},keyframes:t,respectReduceMotion:a=!0}={}){O(this,"first");O(this,"last");O(this,"el");this.el=e,this.first={},this.last={},this.userAnimationOptions=o,this.keyframeGenerator=t||oe,this.shouldReduceMotion=a}async when(e){this.prep();let o=await e();return await this.play(),o}prep(){this.first=this.el.getBoundingClientRect()}async play(){if(this.last=this.el.getBoundingClientRect(),!this.el.animate)return;await this.el.animate(this.keyframes,this.animationOptions).finished}get keyframes(){return this.keyframeGenerator(re(this.first,this.last))}get defaults(){return te}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?I?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var de=Ae(se(),1);var m=r=>typeof r=="string",Qe=r=>typeof r=="function",le=new Map,pe="en";function R(r){return[...Array.isArray(r)?r:[r],pe]}function F(r,e,o){let t=R(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return B(()=>P("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(m(e)?new Date(e):e)}function er(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return F(r,e,t)}function Y(r,e,o){let t=R(r);return B(()=>P("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ce(r,e,o,{offset:t=0,...a}){var s,l;let i=R(r),n=e?B(()=>P("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):B(()=>P("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(s=a[o])!=null?s:a[n.select(o-t)])!=null?l:a.other}function B(r,e){let o=r(),t=le.get(o);return t||(t=e(),le.set(o,t)),t}function P(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var ue=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,ge="%__lingui_octothorpe__%",rr=(r,e,o={})=>{let t=e||r,a=n=>typeof n=="object"?n:o[n],i=(n,s)=>{let l=Object.keys(o).length?a("number"):void 0,u=Y(t,n,l);return s.replace(new RegExp(ge,"g"),u)};return{plural:(n,s)=>{let{offset:l=0}=s,u=ce(t,!1,n,s);return i(n-l,u)},selectordinal:(n,s)=>{let{offset:l=0}=s,u=ce(t,!0,n,s);return i(n-l,u)},select:or,number:(n,s)=>Y(t,n,a(s)||{style:s}),date:(n,s)=>F(t,n,a(s)||s),time:(n,s)=>er(t,n,a(s)||s)}},or=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function tr(r,e,o){return(t={},a)=>{let i=rr(e,o,a),n=(l,u=!1)=>Array.isArray(l)?l.reduce((v,L)=>{if(L==="#"&&u)return v+ge;if(m(L))return v+L;let[G,f,V]=L,j={};f==="plural"||f==="selectordinal"||f==="select"?Object.entries(V).forEach(([D,Be])=>{j[D]=n(Be,f==="plural"||f==="selectordinal")}):j=V;let M;if(f){let D=i[f];M=D(t[G],j)}else M=t[G];return M==null?v:v+M},""):l,s=n(r);return m(s)&&ue.test(s)?(0,de.unraw)(s):m(s)?s:s?String(s):""}}var ar=Object.defineProperty,ir=(r,e,o)=>e in r?ar(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,nr=(r,e,o)=>(ir(r,typeof e!="symbol"?e+"":e,o),o),$=class{constructor(){nr(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},sr=Object.defineProperty,lr=(r,e,o)=>e in r?sr(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,x=(r,e,o)=>(lr(r,typeof e!="symbol"?e+"":e,o),o),A=class extends ${constructor(e){var o;super(),x(this,"_locale",""),x(this,"_locales"),x(this,"_localeData",{}),x(this,"_messages",{}),x(this,"_missing"),x(this,"_messageCompiler"),x(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:pe,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),m(e)||(o=e.values||o,a=e.message,e=e.id);let i=this.messages[e],n=i===void 0,s=this._missing;if(s&&n)return Qe(s)?s(this._locale,e):s;n&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return m(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
 
 > ${l}
 
@@ -2465,7 +2465,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),m(l)&&ue.test(l)?JSON.parse(`"${l}"`):m(l)?l:tr(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return F(this._locales||this._locale,e,o)}number(e,o){return Y(this._locales||this._locale,e,o)}};function cr(r={}){return new A(r)}var c=cr();import{property as X,query as Rr,state as Fr}from"lit/decorators.js";import{LitElement as dr}from"lit";import{unsafeStatic as pr,html as ur}from"lit/static-html.js";var br=JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}'),gr=JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}'),hr=JSON.parse('{"icon.title.arrow-left":["Vasemmalle osoittava nuoli"]}'),mr=JSON.parse('{"icon.title.arrow-left":["Pil til venstre"]}'),vr=JSON.parse('{"icon.title.arrow-left":["Pil som pekar v\xE4nster"]}'),ge=["en","nb","fi","da","sv"],he="en",fr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},me=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":he},H=r=>ge.find(e=>r===e||r.toLowerCase().includes(e))||me();function wr(){var r;if(typeof window=="undefined"){let e=fr();return H(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=me();return ge.includes(e)?H(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),H(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),he}}var xr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,kr=(r,e,o,t,a)=>{let i=wr(),n=xr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};kr(gr,br,hr,mr,vr);var yr=class extends dr{render(){let r=c.t({message:"Leftward-pointing arrow",id:"icon.title.arrow-left",comment:"Title for table arrow left icon"});return ur`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${pr(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`}};customElements.get("w-icon-arrow-left-16")||customElements.define("w-icon-arrow-left-16",yr);import{LitElement as Er}from"lit";import{unsafeStatic as _r,html as Cr}from"lit/static-html.js";var zr=JSON.parse('{"icon.title.close":["Kryss"]}'),Lr=JSON.parse('{"icon.title.close":["Cross"]}'),Mr=JSON.parse('{"icon.title.close":["Rasti"]}'),Tr=JSON.parse('{"icon.title.close":["Kryds"]}'),Sr=JSON.parse('{"icon.title.close":["Kryss"]}'),ve=["en","nb","fi","da","sv"],fe="en",Or=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},we=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":fe},U=r=>ve.find(e=>r===e||r.toLowerCase().includes(e))||we();function Nr(){var r;if(typeof window=="undefined"){let e=Or();return U(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=we();return ve.includes(e)?U(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),U(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),fe}}var Br=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,Pr=(r,e,o,t,a)=>{let i=Nr(),n=Br(i,r,e,o,t,a);c.load(i,n),c.activate(i)};Pr(Lr,zr,Mr,Tr,Sr);var jr=class extends Er{render(){let r=c.t({message:"Cross",id:"icon.title.close",comment:"Title for close icon"});return Cr`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${_r(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`}};customElements.get("w-icon-close-16")||customElements.define("w-icon-close-16",jr);var Dr=["en","nb","fi","da","sv"],ke="en",xe=r=>Dr.find(e=>r===e||r.toLowerCase().includes(e))||ke;function Ir(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return xe(r)}try{let r=document.documentElement.lang;return xe(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ke}}var Yr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,ye=(r,e,o,t,a)=>{let i=Ir(),n=Yr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};var Ee=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var _e=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var Ce=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ze=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var Le=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var g=class extends E(Ar){constructor(){super();this._hasTopContent=!1;ye(_e,ze,Ce,Ee,Le)}render(){return J`
+`)),m(l)&&ue.test(l)?JSON.parse(`"${l}"`):m(l)?l:tr(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return F(this._locales||this._locale,e,o)}number(e,o){return Y(this._locales||this._locale,e,o)}};function cr(r={}){return new A(r)}var c=cr();import{css as $r,html as J,LitElement as Ar,nothing as Me}from"lit";import{property as X,query as Rr,state as Fr}from"lit/decorators.js";import{LitElement as dr}from"lit";import{unsafeStatic as pr,html as ur}from"lit/static-html.js";var gr=JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}'),br=JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}'),hr=JSON.parse('{"icon.title.arrow-left":["Vasemmalle osoittava nuoli"]}'),mr=JSON.parse('{"icon.title.arrow-left":["Pil til venstre"]}'),vr=JSON.parse('{"icon.title.arrow-left":["Pil som pekar v\xE4nster"]}'),be=["en","nb","fi","da","sv"],he="en",fr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},me=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":he},H=r=>be.find(e=>r===e||r.toLowerCase().includes(e))||me();function wr(){var r;if(typeof window=="undefined"){let e=fr();return H(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=me();return be.includes(e)?H(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),H(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),he}}var xr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,kr=(r,e,o,t,a)=>{let i=wr(),n=xr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};kr(br,gr,hr,mr,vr);var yr=class extends dr{render(){let r=c.t({message:"Leftward-pointing arrow",id:"icon.title.arrow-left",comment:"Title for table arrow left icon"});return ur`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${pr(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`}};customElements.get("w-icon-arrow-left-16")||customElements.define("w-icon-arrow-left-16",yr);import{LitElement as Er}from"lit";import{unsafeStatic as _r,html as Cr}from"lit/static-html.js";var zr=JSON.parse('{"icon.title.close":["Kryss"]}'),Lr=JSON.parse('{"icon.title.close":["Cross"]}'),Mr=JSON.parse('{"icon.title.close":["Rasti"]}'),Sr=JSON.parse('{"icon.title.close":["Kryds"]}'),Or=JSON.parse('{"icon.title.close":["Kryss"]}'),ve=["en","nb","fi","da","sv"],fe="en",Tr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},we=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":fe},U=r=>ve.find(e=>r===e||r.toLowerCase().includes(e))||we();function Nr(){var r;if(typeof window=="undefined"){let e=Tr();return U(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=we();return ve.includes(e)?U(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),U(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),fe}}var Br=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,Pr=(r,e,o,t,a)=>{let i=Nr(),n=Br(i,r,e,o,t,a);c.load(i,n),c.activate(i)};Pr(Lr,zr,Mr,Sr,Or);var jr=class extends Er{render(){let r=c.t({message:"Cross",id:"icon.title.close",comment:"Title for close icon"});return Cr`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${_r(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`}};customElements.get("w-icon-close-16")||customElements.define("w-icon-close-16",jr);var Dr=["en","nb","fi","da","sv"],ke="en",xe=r=>Dr.find(e=>r===e||r.toLowerCase().includes(e))||ke;function Ir(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return xe(r)}try{let r=document.documentElement.lang;return xe(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ke}}var Yr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,ye=(r,e,o,t,a)=>{let i=Ir(),n=Yr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};var Ee=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var _e=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var Ce=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ze=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var Le=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var b=class extends E(Ar){constructor(){super();this._hasTopContent=!1;ye(_e,ze,Ce,Ee,Le)}render(){return J`
       <div class="header">
         <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
         <div class="${this._hasTopContent?"":"header-title-bar"}">
@@ -2474,19 +2474,22 @@ Please compile your catalog first.
           ${this.closeButton}
         </div>
       </div>
-    `}async willUpdate(o){o.has("back")&&new O(this.titleEl).when(async()=>{await this.updateComplete})}get titleClasses(){return["header-title",this.back?"header-title-with-back-button":"header-title-without-back-button",this._hasTopContent?"header-title-with-top-area":""].join(" ")}get backButton(){return this.back&&!this._hasTopContent?J`<button
+    `}async willUpdate(o){if(o.has("back")){if(!this.titleEl)return;new T(this.titleEl).when(async()=>{await this.updateComplete})}}get titleClasses(){return["header-title",this.back?"header-title-with-back-button":"header-title-without-back-button",this._hasTopContent?"header-title-with-top-area":""].join(" ")}get backButton(){return this.back&&!this._hasTopContent?J`<button
           type="button"
           aria-label="${c._({id:"modal.aria.back",message:"Back",comment:"Aria label for the back button in modal"})}"
           class="header-button header-button-left"
           @click="${this.emitBack}">
-          <w-icon-arrow-left-16></w-icon-arrow-left-16>
-        </button>`:Me}get closeButton(){return this.noClose?Me:J`<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></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}};g.styles=[k,$r`
+          <w-icon-arrow-left-16 style="display: flex;"></w-icon-arrow-left-16>
+        </button>`:Me}get closeButton(){return this.noClose?Me:J`<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}};b.styles=[k,$r`
       .header {
         position: relative;
         padding-bottom: 0.8rem;
@@ -2559,30 +2562,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: rgba(var(--w-rgb-black), 0.7);
-        right: 0.8rem;
-        top: 0.8rem;
+      .header-close-button-container {
         position: absolute;
-        z-index: 10;
-        color: var(--w-s-color-text-inverted);
-      }
-      .header-close-button-on-image:hover {
-        background-color: rgba(var(--w-rgb-black), 0.85);
-      }
-      .header-close-button-on-image:active {
-        background-color: var(--w-black);
+        right: 2rem;
+        top: 2.4rem;
       }
       @media (min-width: 480px) {
         .header-title-bar {
@@ -2599,7 +2582,7 @@ Please compile your catalog first.
           min-width: 32px;
         }
       }
-    `],p([X({type:String})],g.prototype,"title",2),p([X({type:Boolean})],g.prototype,"back",2),p([X({type:Boolean,attribute:"no-close"})],g.prototype,"noClose",2),p([Fr()],g.prototype,"_hasTopContent",2),p([Rr(".title-el")],g.prototype,"titleEl",2);customElements.get("w-modal-header")||customElements.define("w-modal-header",g);import{css as Qr,html as eo,LitElement as ro}from"lit";import{property as q,query as K}from"lit/decorators.js";var z=[],Z={documentElement:{},body:{}},Hr=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),Te=r=>{var e;r.touches.length>1||((e=r.preventDefault)==null||e.call(r))},Ur=r=>([e,o])=>{Z[r][e]=document[r].style[e],document[r].style[e]=o},Jr=()=>Object.entries(Hr).forEach(([r,e])=>{Object.entries(e).forEach(Ur(r))}),Xr=r=>([e,o])=>{document[r].style[e]=Z[r][e]},Zr=()=>Object.entries(Z).forEach(([r,e])=>{Object.entries(e).forEach(Xr(r))}),qr=r=>r.scrollHeight-Math.abs(r.scrollTop)===r.clientHeight;function Kr(r){let e=-1,o=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-e;return r.scrollTop===0&&a>0||qr(r)&&a<0?Te(t):(t.stopPropagation(),!0)};r.ontouchstart=t=>{t.targetTouches.length===1&&(e=t.targetTouches[0].clientY)},r.ontouchmove=o}function Gr(r){r.ontouchstart=null,r.ontouchmove=null}var Se=r=>()=>document[r?"addEventListener":"removeEventListener"]("touchmove",Te,{passive:!1}),Vr=Se(!0),Wr=Se();function Oe(r){if(!r)throw Error("Could not run setup, an element must be provided");z.some(e=>e===r)||(z.length||(Jr(),Vr()),Kr(r),z.push(r))}function Ne(){z.forEach(Gr),Wr(),Zr(),z=[]}var b=class extends _(ro){constructor(){super(),this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}async open(){this.dialogEl.showModal(),this.handleListeners(),Oe(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),Ne(),await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0}))},{once:!0})}render(){return eo`
+    `],p([X({type:String})],b.prototype,"title",2),p([X({type:Boolean})],b.prototype,"back",2),p([X({type:Boolean,attribute:"no-close"})],b.prototype,"noClose",2),p([Fr()],b.prototype,"_hasTopContent",2),p([Rr(".title-el")],b.prototype,"titleEl",2);customElements.get("w-modal-header")||customElements.define("w-modal-header",b);import{css as Qr,html as eo,LitElement as ro}from"lit";import{property as q,query as K}from"lit/decorators.js";var z=[],Z={documentElement:{},body:{}},Hr=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),Se=r=>{var e;r.touches.length>1||((e=r.preventDefault)==null||e.call(r))},Ur=r=>([e,o])=>{Z[r][e]=document[r].style[e],document[r].style[e]=o},Jr=()=>Object.entries(Hr).forEach(([r,e])=>{Object.entries(e).forEach(Ur(r))}),Xr=r=>([e,o])=>{document[r].style[e]=Z[r][e]},Zr=()=>Object.entries(Z).forEach(([r,e])=>{Object.entries(e).forEach(Xr(r))}),qr=r=>r.scrollHeight-Math.abs(r.scrollTop)===r.clientHeight;function Kr(r){let e=-1,o=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-e;return r.scrollTop===0&&a>0||qr(r)&&a<0?Se(t):(t.stopPropagation(),!0)};r.ontouchstart=t=>{t.targetTouches.length===1&&(e=t.targetTouches[0].clientY)},r.ontouchmove=o}function Gr(r){r.ontouchstart=null,r.ontouchmove=null}var Oe=r=>()=>document[r?"addEventListener":"removeEventListener"]("touchmove",Se,{passive:!1}),Vr=Oe(!0),Wr=Oe();function Te(r){if(!r)throw Error("Could not run setup, an element must be provided");z.some(e=>e===r)||(z.length||(Jr(),Vr()),Kr(r),z.push(r))}function Ne(){z.forEach(Gr),Wr(),Zr(),z=[]}var g=class extends _(ro){constructor(){super(),this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}async open(){this.dialogEl.showModal(),this.handleListeners(),Te(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),Ne(),await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0}))},{once:!0})}render(){return eo`
       <dialog class="dialog-el">
         <div class="dialog-inner-el">
           <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
@@ -2609,7 +2592,7 @@ Please compile your catalog first.
           <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
         </div>
       </dialog>
-    `}updated(e){e.has("show")&&this[this.show?"open":"close"]()}handleListeners(e="addEventListener"){document[e]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[e]("mousedown",this.closeOnBackdropClick),this.dialogEl[e]("close",this.eventPreventer),this.dialogEl[e]("cancel",this.eventPreventer),this.dialogInnerEl[e]("transitionend",this.modifyBorderRadius)}eventPreventer(e){e.preventDefault()}closeOnBackdropClick(e){this.dialogEl===e.target&&this.close()}interceptEscape(e){e.key==="Escape"&&(e.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};b.styles=[k,Qr`
+    `}updated(e){e.has("show")&&this[this.show?"open":"close"]()}handleListeners(e="addEventListener"){document[e]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[e]("mousedown",this.closeOnBackdropClick),this.dialogEl[e]("close",this.eventPreventer),this.dialogEl[e]("cancel",this.eventPreventer),this.dialogInnerEl[e]("transitionend",this.modifyBorderRadius)}eventPreventer(e){e.preventDefault()}closeOnBackdropClick(e){this.dialogEl===e.target&&this.close()}interceptEscape(e){e.key==="Escape"&&(e.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};g.styles=[k,Qr`
       .dialog-el {
         --w-modal-translate-distance: 100%;
         --w-modal-max-height: 80%;
@@ -2730,5 +2713,5 @@ Please compile your catalog first.
           background: transparent;
         }
       }
-    `],p([q({type:Boolean})],b.prototype,"show",2),p([q({type:String,attribute:"content-id"})],b.prototype,"contentId",2),p([q({type:Boolean,attribute:"ignore-backdrop-clicks"})],b.prototype,"ignoreBackdropClicks",2),p([K(".dialog-el")],b.prototype,"dialogEl",2),p([K(".dialog-inner-el")],b.prototype,"dialogInnerEl",2),p([K(".content-el")],b.prototype,"contentEl",2);customElements.get("w-modal")||customElements.define("w-modal",b);export{E as ModalCanCloseMixin,_ as ModalProvidesCanCloseToSlotsMixin,b as WarpModal,C as WarpModalFooter,g as WarpModalHeader};
+    `],p([q({type:Boolean})],g.prototype,"show",2),p([q({type:String,attribute:"content-id"})],g.prototype,"contentId",2),p([q({type:Boolean,attribute:"ignore-backdrop-clicks"})],g.prototype,"ignoreBackdropClicks",2),p([K(".dialog-el")],g.prototype,"dialogEl",2),p([K(".dialog-inner-el")],g.prototype,"dialogInnerEl",2),p([K(".content-el")],g.prototype,"contentEl",2);customElements.get("w-modal")||customElements.define("w-modal",g);export{E as ModalCanCloseMixin,_ as ModalProvidesCanCloseToSlotsMixin,g as WarpModal,C as WarpModalFooter,b as WarpModalHeader};
 //# sourceMappingURL=index.js.map