@warp-ds/elements 2.10.0-next.22 → 2.10.0-next.24

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

@@ -1,4 +1,4 @@
-var de=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var d=(o,e,r,t)=>{for(var a=t>1?void 0:t?be(e,r):e,s=o.length-1,i;s>=0;s--)(i=o[s])&&(a=(t?i(e,r,a):i(a))||a);return t&&a&&de(e,r,a),a};var R=(o,e)=>({dx:o.left-e.left,dy:o.top-e.top,dw:o.width/e.width,dh:o.height/e.height,first:o,last:e}),B=({dx:o,dy:e})=>[{transform:`translate(${o}px, ${e}px)`},{transform:"none"}],I={easing:"ease",duration:300};var L=!1,pe=typeof window<"u";if(pe){let o=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:r})=>L=r;o.addEventListener&&o.addEventListener("change",e),e(o)}var k=class{first;last;el;constructor(e,{animation:r={},keyframes:t,respectReduceMotion:a=!0}={}){this.el=e,this.first={},this.last={},this.userAnimationOptions=r,this.keyframeGenerator=t||B,this.shouldReduceMotion=a}async when(e){this.prep();let r=await e();return await this.play(),r}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(R(this.first,this.last))}get defaults(){return I}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?L?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var p=o=>typeof o=="string",ge=o=>typeof o=="function",X=new Map,V="en";function O(o){return[...Array.isArray(o)?o:[o],V]}function P(o,e,r){let t=O(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return y(()=>_("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(p(e)?new Date(e):e)}function ue(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return P(o,e,t)}function M(o,e,r){let t=O(o);return y(()=>_("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function Z(o,e,r,{offset:t=0,...a}){let s=O(o),i=e?y(()=>_("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):y(()=>_("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-t)]??a.other}function y(o,e){let r=o(),t=X.get(r);return t||(t=e(),X.set(r,t)),t}function _(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var G=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,q=o=>o.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,t)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(t,16);return String.fromCharCode(a)}}),J="%__lingui_octothorpe__%",he=(o,e,r={})=>{let t=e||o,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let l=Object.keys(r).length?a("number"):void 0,u=M(t,i,l);return n.replace(new RegExp(J,"g"),u)};return{plural:(i,n)=>{let{offset:l=0}=n,u=Z(t,!1,i,n);return s(i-l,u)},selectordinal:(i,n)=>{let{offset:l=0}=n,u=Z(t,!0,i,n);return s(i-l,u)},select:me,number:(i,n)=>M(t,i,a(n)||{style:n}),date:(i,n)=>P(t,i,a(n)||n),time:(i,n)=>ue(t,i,a(n)||n)}},me=(o,e)=>e[o]??e.other;function ve(o,e,r){return(t={},a)=>{let s=he(e,r,a),i=(l,u=!1)=>Array.isArray(l)?l.reduce((w,f)=>{if(f==="#"&&u)return w+J;if(p(f))return w+f;let[N,h,A]=f,E={};h==="plural"||h==="selectordinal"||h==="select"?Object.entries(A).forEach(([C,ce])=>{E[C]=i(ce,h==="plural"||h==="selectordinal")}):E=A;let x;if(h){let C=s[h];x=C(t[N],E)}else x=t[N];return x==null?w:w+x},""):l,n=i(o);return p(n)&&G.test(n)?q(n):p(n)?n:n?String(n):""}}var we=Object.defineProperty,fe=(o,e,r)=>e in o?we(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,xe=(o,e,r)=>(fe(o,typeof e!="symbol"?e+"":e,r),r),T=class{constructor(){xe(this,"_events",{})}on(e,r){var t;return(t=this._events)[e]??(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},ke=Object.defineProperty,ye=(o,e,r)=>e in o?ke(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,m=(o,e,r)=>(ye(o,typeof e!="symbol"?e+"":e,r),r),S=class extends T{constructor(e){super(),m(this,"_locale",""),m(this,"_locales"),m(this,"_localeData",{}),m(this,"_messages",{}),m(this,"_missing"),m(this,"_messageCompiler"),m(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(e.locale??V,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,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?.message;e||(e=""),p(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return ge(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return p(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
+var pe=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var d=(o,e,r,t)=>{for(var a=t>1?void 0:t?be(e,r):e,s=o.length-1,i;s>=0;s--)(i=o[s])&&(a=(t?i(e,r,a):i(a))||a);return t&&a&&pe(e,r,a),a};var R=(o,e)=>({dx:o.left-e.left,dy:o.top-e.top,dw:o.width/e.width,dh:o.height/e.height,first:o,last:e}),B=({dx:o,dy:e})=>[{transform:`translate(${o}px, ${e}px)`},{transform:"none"}],I={easing:"ease",duration:300};var L=!1,ge=typeof window<"u";if(ge){let o=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:r})=>L=r;o.addEventListener&&o.addEventListener("change",e),e(o)}var k=class{first;last;el;constructor(e,{animation:r={},keyframes:t,respectReduceMotion:a=!0}={}){this.el=e,this.first={},this.last={},this.userAnimationOptions=r,this.keyframeGenerator=t||B,this.shouldReduceMotion=a}async when(e){this.prep();let r=await e();return await this.play(),r}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(R(this.first,this.last))}get defaults(){return I}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?L?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var b=o=>typeof o=="string",he=o=>typeof o=="function",X=new Map,V="en";function O(o){return[...Array.isArray(o)?o:[o],V]}function P(o,e,r){let t=O(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return y(()=>_("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(b(e)?new Date(e):e)}function ue(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return P(o,e,t)}function M(o,e,r){let t=O(o);return y(()=>_("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function Z(o,e,r,{offset:t=0,...a}){let s=O(o),i=e?y(()=>_("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):y(()=>_("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-t)]??a.other}function y(o,e){let r=o(),t=X.get(r);return t||(t=e(),X.set(r,t)),t}function _(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var G=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,q=o=>o.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,t)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(t,16);return String.fromCharCode(a)}}),J="%__lingui_octothorpe__%",me=(o,e,r={})=>{let t=e||o,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let l=Object.keys(r).length?a("number"):void 0,h=M(t,i,l);return n.replace(new RegExp(J,"g"),h)};return{plural:(i,n)=>{let{offset:l=0}=n,h=Z(t,!1,i,n);return s(i-l,h)},selectordinal:(i,n)=>{let{offset:l=0}=n,h=Z(t,!0,i,n);return s(i-l,h)},select:ve,number:(i,n)=>M(t,i,a(n)||{style:n}),date:(i,n)=>P(t,i,a(n)||n),time:(i,n)=>ue(t,i,a(n)||n)}},ve=(o,e)=>e[o]??e.other;function we(o,e,r){return(t={},a)=>{let s=me(e,r,a),i=(l,h=!1)=>Array.isArray(l)?l.reduce((w,f)=>{if(f==="#"&&h)return w+J;if(b(f))return w+f;let[N,u,A]=f,E={};u==="plural"||u==="selectordinal"||u==="select"?Object.entries(A).forEach(([C,de])=>{E[C]=i(de,u==="plural"||u==="selectordinal")}):E=A;let x;if(u){let C=s[u];x=C(t[N],E)}else x=t[N];return x==null?w:w+x},""):l,n=i(o);return b(n)&&G.test(n)?q(n):b(n)?n:n?String(n):""}}var fe=Object.defineProperty,xe=(o,e,r)=>e in o?fe(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,ke=(o,e,r)=>(xe(o,typeof e!="symbol"?e+"":e,r),r),T=class{constructor(){ke(this,"_events",{})}on(e,r){var t;return(t=this._events)[e]??(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},ye=Object.defineProperty,_e=(o,e,r)=>e in o?ye(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,m=(o,e,r)=>(_e(o,typeof e!="symbol"?e+"":e,r),r),S=class extends T{constructor(e){super(),m(this,"_locale",""),m(this,"_locales"),m(this,"_localeData",{}),m(this,"_messages",{}),m(this,"_missing"),m(this,"_messageCompiler"),m(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(e.locale??V,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,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?.message;e||(e=""),b(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return he(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return b(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
 
 > ${l}
 
@@ -6,7 +6,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. 
-`)),p(l)&&G.test(l)?q(l):p(l)?l:ve(l,this._locale,this._locales)(r,t?.formats)}date(e,r){return P(this._locales||this._locale,e,r)}number(e,r){return M(this._locales||this._locale,e,r)}};function _e(o={}){return new S(o)}var c=_e();import{css as Ne,html as Y,LitElement as Ae,nothing as le}from"lit";import{property as F,query as Re,state as Be}from"lit/decorators.js";import{html as Ee,LitElement as Ce}from"lit";import{property as $,state as Le}from"lit/decorators.js";import{classMap as Me}from"lit/directives/class-map.js";import{css as ze}from"lit";var U=ze`
+`)),b(l)&&G.test(l)?q(l):b(l)?l:we(l,this._locale,this._locales)(r,t?.formats)}date(e,r){return P(this._locales||this._locale,e,r)}number(e,r){return M(this._locales||this._locale,e,r)}};function ze(o={}){return new S(o)}var c=ze();import{html as F,LitElement as Re,nothing as ce}from"lit";import{property as j,query as Be,state as Ie}from"lit/decorators.js";import{html as Ce,LitElement as Le}from"lit";import{property as $,state as Me}from"lit/decorators.js";import{classMap as Te}from"lit/directives/class-map.js";import{css as Ee}from"lit";var U=Ee`
 	:host {
 		display: inline-block;
 	}
@@ -30,13 +30,13 @@ Please compile your catalog first.
 	.w-icon--l {
 		--w-icon-size: 32px;
 	}
-`;var j=new Map,Te='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function Se(o,e={}){let r=e.responseParser??(t=>t.text());return j.has(o)||j.set(o,fetch(o).then(r)),j.get(o)}var g=class extends Ce{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(r){let t=`https://assets.finn.no/pkg/eikons/~1/${this.locale}/${r}.svg`;try{let a=await Se(t);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(Te,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},s=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return Ee`<div
-			class="${Me(a)}"
+`;var D=new Map,Se='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function Oe(o,e={}){let r=e.responseParser??(t=>t.text());return D.has(o)||D.set(o,fetch(o).then(r)),D.get(o)}var g=class extends Le{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(r){let t=`https://assets.finn.no/pkg/eikons/~1/${this.locale}/${r}.svg`;try{let a=await Oe(t);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(Se,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},s=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return Ce`<div
+			class="${Te(a)}"
 			style="${s}"
 			part="w-${t.toLowerCase()}"
 		>
 			${this.svg}
-		</div>`}};g.styles=[U],d([$({type:String,reflect:!0})],g.prototype,"name",2),d([$({type:String,reflect:!0})],g.prototype,"size",2),d([$({type:String,reflect:!0,useDefault:!0})],g.prototype,"locale",2),d([Le()],g.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",g);var Oe=["en","nb","fi","da","sv"],D="en",z=o=>Oe.find(e=>o===e||o.toLowerCase().includes(e))||D;function v(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return z(o)}try{let o=K(document);if(o)return z(o);let e=De();if(e)return z(e);let r=K(ee());return r?z(r):D}catch(o){return console.warn("could not detect locale, falling back to source locale",o),D}}var Q=(o,e,r,t,a)=>{c.load("en",o),c.load("nb",e),c.load("fi",r),c.load("da",t),c.load("sv",a);let s=v();c.activate(s),W(),$e()},Pe="warp-i18n-change";function W(){typeof window>"u"||window.dispatchEvent(new Event(Pe))}var H=!1;function $e(){if(H||typeof window>"u"||!document?.documentElement)return;H=!0;let o=()=>{let a=v();c.locale!==a&&(c.activate(a),W())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ee();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=je();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function ee(){try{return window.parent?.document??null}catch{return null}}function K(o){try{return o?.documentElement?.lang??""}catch{return""}}function je(){try{return window.frameElement??null}catch{return null}}function De(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}var re=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var oe=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var te=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ae=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var ie=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var ne=o=>class extends o{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}};import{css as Ye}from"lit";import{unsafeCSS as Fe}from"lit";var se=Ye`
+		</div>`}};g.styles=[U],d([$({type:String,reflect:!0})],g.prototype,"name",2),d([$({type:String,reflect:!0})],g.prototype,"size",2),d([$({type:String,reflect:!0,useDefault:!0})],g.prototype,"locale",2),d([Me()],g.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",g);var Pe=["en","nb","fi","da","sv"],Y="en",z=o=>Pe.find(e=>o===e||o.toLowerCase().includes(e))||Y;function v(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return z(o)}try{let o=K(document);if(o)return z(o);let e=Fe();if(e)return z(e);let r=K(ee());return r?z(r):Y}catch(o){return console.warn("could not detect locale, falling back to source locale",o),Y}}var Q=(o,e,r,t,a)=>{c.load("en",o),c.load("nb",e),c.load("fi",r),c.load("da",t),c.load("sv",a);let s=v();c.activate(s),W(),De()},$e="warp-i18n-change";function W(){typeof window>"u"||window.dispatchEvent(new Event($e))}var H=!1;function De(){if(H||typeof window>"u"||!document?.documentElement)return;H=!0;let o=()=>{let a=v();c.locale!==a&&(c.activate(a),W())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ee();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=Ye();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function ee(){try{return window.parent?.document??null}catch{return null}}function K(o){try{return o?.documentElement?.lang??""}catch{return""}}function Ye(){try{return window.frameElement??null}catch{return null}}function Fe(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}var re=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var oe=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var te=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ae=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var ie=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var ne=o=>class extends o{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}};import{css as je}from"lit";import{unsafeCSS as Ne}from"lit";var se=je`
 	*,
 	:before,
 	:after {
@@ -309,7 +309,7 @@ Please compile your catalog first.
 	svg {
 		pointer-events: none;
 	}
-`,mr=Fe(`*, :before, :after {
+`,vr=Ne(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2475,140 +2475,148 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `);var b=class extends ne(Ae){constructor(){super();this.back=!1;this.noClose=!1;this._hasTopContent=!1;Q(oe,ae,te,re,ie)}render(){return Y`
-			<div class="header">
-				<slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
-				<div class="${this._hasTopContent?"":"header-title-bar"}">
-					${this.backButton}
-					<h1 class="title-el ${this.titleClasses}">${this.title}</h1>
-					${this.closeButton}
-				</div>
-			</div>
-		`}async willUpdate(r){if(r.has("back")){if(!this.titleEl)return;new k(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?Y`<button
-					type="button"
-					title=""
-					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
-						name="ArrowLeft"
-						size="small"
-						locale="${v()}"
-						style="display: flex;"
-						class="flex"
-					></w-icon>
-				</button>`:le}get closeButton(){return this.noClose?le:Y`<div class="header-close-button-container">
-			<w-button
-				type="button"
-				title=""
-				aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
-				variant="pill"
-				small
-				@click="${this.close}"
+        `);import{css as Ae}from"lit";var le=Ae`
+	:host {
+		--_font-size: var(--w-c-modal-header-font-size, var(--w-font-size-l));
+		--_line-height: var(--w-c-modal-header-line-height, var(--w-line-height-l));
+		--_title-margin: 0 0 6px 0;
+		--_title-padding: 22px 0 0 16px;
+		--_close-button-top: 14px;
+		--_close-button-right: 0px;
+		--_header-margin-bottom: var(--w-c-modal-header-margin-bottom, 8px);
+	}
+
+	@media (min-width: 480px) {
+		:host {
+			--_title-padding: 22px 0 0 32px;
+			--_close-button-right: 14px;
+		}
+	}
+
+	[part="header"] {
+		display: grid;
+		grid-template:
+			"top top top"
+			"title title title";
+		margin-bottom: var(--_header-margin-bottom);
+	}
+
+	[part="header"][show-back]:not([show-close]) {
+		grid-template:
+			"top top top"
+			"back title title";
+	}
+
+	[part="header"][show-close]:not([show-back]) {
+		grid-template:
+			"top top top"
+			"title title close";
+	}
+
+	[part="header"][show-back][show-close] {
+		grid-template:
+			"top top top"
+			"back title close" / 44px 1fr 44px;
+	}
+
+	[part="top"]::slotted(*) {
+		grid-area: top;
+	}
+
+	[part="title"] {
+		grid-area: title;
+
+		margin: var(--_title-margin);
+		padding: var(--_title-padding);
+
+		/* t3 */
+		font-weight: 700;
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+	}
+
+	[part="header"][show-back] [part="title"] {
+		text-align: center;
+	}
+
+	[part="back"] {
+		grid-area: back;
+
+		margin-block-end: -2px; /* align the touch target with the close button which is _slightly_ lower than the title */
+		padding-block-start: 14px; /* same vertical position as the close button */
+		padding-inline-start: 18px; /* 32px (left padding of title) - 14px (left padding of button) so icon aligns with text */
+	}
+
+	[part="header"][show-back] [part="title"] {
+		padding-inline-start: 0;
+	}
+
+	[part="close"] {
+		grid-area: close;
+
+		position: absolute; /* so we can place it on top of the [part="top"] image */
+		top: var(--_close-button-top);
+		right: var(--_close-button-right);
+	}
+
+	[part="header"][show-top] [part="close"] {
+		/* Invert the button colors on images */
+		--w-c-button-color: var(--w-s-color-icon-inverted-static);
+		--w-c-button-color-hover: var(--w-s-color-icon-inverted-static);
+		--w-c-button-color-active: var(--w-s-color-icon-inverted-static);
+
+		--w-c-button-bg: rgba(var(--w-rgb-black), 0.7);
+		--w-c-button-bg-hover: rgba(var(--w-rgb-black), 0.85);
+		--w-c-button-bg-active: rgba(var(--w-rgb-black), 1);
+	}
+`;var p=class extends ne(Re){constructor(){super();this.back=!1;this.noClose=!1;this._hasTopContent=!1;Q(oe,ae,te,re,ie)}async willUpdate(r){if(r.has("back")){if(!this.titleEl)return;new k(this.titleEl).when(async()=>{await this.updateComplete})}}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(r){let t=r.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}render(){let r=this.back&&!this._hasTopContent,t=!this.noClose;return F`
+			<div
+				part="header"
+				?show-top=${this._hasTopContent}
+				?show-back=${r}
+				?show-close=${t}
 			>
-				<w-icon
-					name="Close"
-					size="small"
-					locale="${v()}"
-					style="display: flex;"
-					class="flex"
-				></w-icon>
-			</w-button>
-		</div>`}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(r){let t=r.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}};b.styles=[se,Ne`
-			.header {
-				position: relative;
-				padding-bottom: 0.8rem;
-			}
-			.header-title-bar {
-				display: grid;
-				flex-shrink: 0 !important;
-				gap: 1.2rem;
-				grid-template-columns: auto 1fr auto;
-				align-items: flex-start;
-				padding-left: 1.6rem;
-				padding-right: 1.6rem;
-				padding-top: 1.6rem;
-			}
-			.header-title {
-				font-weight: 700;
-				font-size: var(--w-font-size-l);
-				line-height: var(--w-line-height-l);
-				align-self: center;
-				margin: 0;
-			}
-			.header-title-with-back-button {
-				justify-self: center;
-			}
-			.header-title-without-back-button {
-				grid-column: span 2 / span 2;
-			}
-			.header-title-with-top-area {
-				padding-left: 1.6rem;
-				padding-right: 1.6rem;
-				padding-top: 1.6rem;
-			}
-			.header-button:hover {
-				-webkit-background-clip: padding-box;
-				background-clip: padding-box;
-			}
-			.header-button:focus,
-			.header-button:focus-visible {
-				outline: 2px solid var(--w-s-color-border-focus);
-				outline-offset: var(--w-outline-offset, 1px);
-			}
-			.header-button:not(:focus-visible) {
-				outline: none;
-			}
-			.header-button {
-				border-width: 0;
-				border-radius: 9999px;
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				min-height: 40px;
-				min-width: 40px;
-				padding: 0.4rem;
-				font-weight: 700;
-				transition-property:
-					color, background-color, border-color, text-decoration-color, fill,
-					stroke;
-				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-				transition-duration: 150ms;
-				font-size: var(--w-font-size-m);
-				line-height: var(--w-line-height-m);
-				line-height: 2.4rem;
-			}
-			.header-button-left {
-				background-color: transparent;
-				color: var(--w-s-color-icon);
-				margin-left: -0.8rem;
-			}
-			.header-button-left:hover {
-				background-color: var(--w-color-button-pill-background-hover);
-			}
-			.header-button-left:active {
-				background-color: var(--w-color-button-pill-background-active);
-			}
-			.header-close-button-container {
-				position: absolute;
-				right: 2rem;
-				top: 2.4rem;
-			}
-			@media (min-width: 480px) {
-				.header-title-bar {
-					padding-left: 3.2rem;
-					padding-right: 3.2rem;
-					padding-top: 2.4rem;
-				}
-				.header-title-with-top-area {
-					padding-left: 3.2rem;
-					padding-right: 3.2rem;
-				}
-				.header-button {
-					min-height: 32px;
-					min-width: 32px;
-				}
-			}
-		`],d([F({type:String})],b.prototype,"title",2),d([F({type:Boolean})],b.prototype,"back",2),d([F({type:Boolean,attribute:"no-close"})],b.prototype,"noClose",2),d([Be()],b.prototype,"_hasTopContent",2),d([Re(".title-el")],b.prototype,"titleEl",2);var Pr=b;customElements.get("w-modal-header")||customElements.define("w-modal-header",b);export{Pr as ModalHeader,b as WarpModalHeader};
+				<slot
+					part="top"
+					name="top"
+					@slotchange=${this.handleTopSlotChange}
+				></slot>
+
+				${r?F`<w-button
+							type="button"
+							part="back"
+							title=""
+							aria-label="${c._({id:"modal.aria.back",message:"Back",comment:"Aria label for the back button in modal"})}"
+							variant="pill"
+							icon-only
+							@click="${this.emitBack}"
+						>
+							<w-icon
+								name="ArrowLeft"
+								size="small"
+								locale="${v()}"
+							></w-icon>
+						</w-button>`:ce}
+
+				<p part="title">${this.title}</p>
+
+				${t?F`<w-button
+							type="button"
+							part="close"
+							title=""
+							aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
+							variant="pill"
+							icon-only
+							@click="${this.close}"
+						>
+							<w-icon
+								name="Close"
+								size="small"
+								locale="${v()}"
+								style="height: 16px;"
+								class="flex"
+							></w-icon>
+						</w-button>`:ce}
+			</div>
+		`}};p.styles=[se,le],d([j({type:String})],p.prototype,"title",2),d([j({type:Boolean})],p.prototype,"back",2),d([j({type:Boolean,attribute:"no-close"})],p.prototype,"noClose",2),d([Ie()],p.prototype,"_hasTopContent",2),d([Be('[part="title"]')],p.prototype,"titleEl",2);var Fr=p;customElements.get("w-modal-header")||customElements.define("w-modal-header",p);export{Fr as ModalHeader,p as WarpModalHeader};
 //# sourceMappingURL=modal-header.js.map