@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

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

@@ -7,303 +7,308 @@ ICU features such as interpolation and plurals will not work properly for that m
 
 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`
-:host {
-  display: inline-block;
-}
-.w-icon {
-  --_w-icon-size: var(--w-icon-size, 24px);
-  height: var(--_w-icon-size);
-  width: var(--_w-icon-size);
-  display: flex;
-}
-.w-icon svg {
-  pointer-events: none;
-  height: var(--_w-icon-size);
-  width: var(--_w-icon-size);
-}
-.w-icon--s {
-  --w-icon-size: 16px;
-}
-.w-icon--m {
-  --w-icon-size: 24px;
-}
-.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)}" 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`
-  *,
-  :before,
-  :after {
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-    border-color: var(--w-s-color-border);
-  }
-  html {
-    font-size: 62.5%;
-  }
-  body {
-    background-color: var(--w-s-color-background);
-    min-height: 100%;
-    margin: 0;
-    overflow-y: scroll;
-  }
-  body,
-  :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    font-family: var(--w-font-family);
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    color: var(--w-s-color-text);
-  }
-  hr {
-    color: inherit;
-    border-top-width: 1px;
-    height: 0;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 700;
-  }
-  a {
-    cursor: pointer;
-    color: var(--w-s-color-text-link);
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-  a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: 1px;
-  }
-  b,
-  strong {
-    font-weight: 700;
-  }
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      Liberation Mono,
-      Courier New,
-      monospace;
-    font-size: 1em;
-  }
-  sub,
-  sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  summary {
-    display: list-item;
-  }
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-  legend {
-    padding: 0;
-  }
-  ol,
-  ul,
-  menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  textarea {
-    resize: vertical;
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: var(--w-s-color-text-placeholder);
-  }
-  button,
-  [role='button'] {
-    cursor: pointer;
-  }
-  :disabled {
-    cursor: default;
-  }
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    vertical-align: middle;
-    display: block;
-  }
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  h1 {
-    font-size: var(--w-font-size-xxl);
-    line-height: var(--w-line-height-xxl);
-  }
-  h2 {
-    font-size: var(--w-font-size-xl);
-    line-height: var(--w-line-height-xl);
-  }
-  h3 {
-    font-size: var(--w-font-size-l);
-    line-height: var(--w-line-height-l);
-  }
-  h4 {
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  h5 {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-  dt,
-  dd {
-    margin: 0 16px;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  ul,
-  ol,
-  dl,
-  p,
-  blockquote {
-    margin: 0 0 8px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  [tabindex='-1']:focus:not(:focus-visible) {
-    outline: none;
-  }
-  legend {
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: table;
-  }
-  legend + * {
-    clear: both;
-  }
-  fieldset {
-    border: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0.01em 0 0;
-  }
-  body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
-  }
-  svg {
-    pointer-events: none;
-  }
+	:host {
+		display: inline-block;
+	}
+	.w-icon {
+		--_w-icon-size: var(--w-icon-size, 24px);
+		height: var(--_w-icon-size);
+		width: var(--_w-icon-size);
+		display: flex;
+	}
+	.w-icon svg {
+		pointer-events: none;
+		height: var(--_w-icon-size);
+		width: var(--_w-icon-size);
+	}
+	.w-icon--s {
+		--w-icon-size: 16px;
+	}
+	.w-icon--m {
+		--w-icon-size: 24px;
+	}
+	.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)}"
+			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`
+	*,
+	:before,
+	:after {
+		box-sizing: border-box;
+		border-style: solid;
+		border-width: 0;
+		border-color: var(--w-s-color-border);
+	}
+	html {
+		font-size: 62.5%;
+	}
+	body {
+		background-color: var(--w-s-color-background);
+		min-height: 100%;
+		margin: 0;
+		overflow-y: scroll;
+	}
+	body,
+	:host {
+		-webkit-text-size-adjust: 100%;
+		tab-size: 4;
+		-webkit-tap-highlight-color: transparent;
+		font-family: var(--w-font-family);
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+		color: var(--w-s-color-text);
+	}
+	hr {
+		color: inherit;
+		border-top-width: 1px;
+		height: 0;
+	}
+	abbr:where([title]) {
+		-webkit-text-decoration: underline dotted;
+		text-decoration: underline dotted;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: inherit;
+		font-weight: 700;
+	}
+	a {
+		cursor: pointer;
+		color: var(--w-s-color-text-link);
+		text-decoration: none;
+	}
+	a:hover,
+	a:focus,
+	a:active {
+		text-decoration: underline;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: 1px;
+	}
+	b,
+	strong {
+		font-weight: 700;
+	}
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family:
+			ui-monospace,
+			SFMono-Regular,
+			Menlo,
+			Monaco,
+			Consolas,
+			Liberation Mono,
+			Courier New,
+			monospace;
+		font-size: 1em;
+	}
+	sub,
+	sup {
+		vertical-align: baseline;
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+	}
+	sub {
+		bottom: -0.25em;
+	}
+	sup {
+		top: -0.5em;
+	}
+	table {
+		text-indent: 0;
+		border-color: inherit;
+		border-collapse: collapse;
+	}
+	button,
+	input,
+	optgroup,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: 100%;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+	button,
+	select {
+		text-transform: none;
+	}
+	button,
+	[type="button"],
+	[type="reset"],
+	[type="submit"] {
+		-webkit-appearance: button;
+	}
+	:-moz-focusring {
+		outline: auto;
+	}
+	:-moz-ui-invalid {
+		box-shadow: none;
+	}
+	progress {
+		vertical-align: baseline;
+	}
+	::-webkit-inner-spin-button {
+		height: auto;
+	}
+	::-webkit-outer-spin-button {
+		height: auto;
+	}
+	[type="search"] {
+		-webkit-appearance: textfield;
+		outline-offset: -2px;
+	}
+	::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+	::-webkit-file-upload-button {
+		-webkit-appearance: button;
+		font: inherit;
+	}
+	summary {
+		display: list-item;
+	}
+	blockquote,
+	dl,
+	dd,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	hr,
+	figure,
+	p,
+	pre {
+		margin: 0;
+	}
+	fieldset {
+		margin: 0;
+		padding: 0;
+	}
+	legend {
+		padding: 0;
+	}
+	ol,
+	ul,
+	menu {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	textarea {
+		resize: vertical;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		opacity: 1;
+		color: var(--w-s-color-text-placeholder);
+	}
+	button,
+	[role="button"] {
+		cursor: pointer;
+	}
+	:disabled {
+		cursor: default;
+	}
+	img,
+	svg,
+	video,
+	canvas,
+	audio,
+	iframe,
+	embed,
+	object {
+		vertical-align: middle;
+		display: block;
+	}
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+	h1 {
+		font-size: var(--w-font-size-xxl);
+		line-height: var(--w-line-height-xxl);
+	}
+	h2 {
+		font-size: var(--w-font-size-xl);
+		line-height: var(--w-line-height-xl);
+	}
+	h3 {
+		font-size: var(--w-font-size-l);
+		line-height: var(--w-line-height-l);
+	}
+	h4 {
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+	}
+	h5 {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+	dt,
+	dd {
+		margin: 0 16px;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	ul,
+	ol,
+	dl,
+	p,
+	blockquote {
+		margin: 0 0 8px;
+	}
+	[hidden] {
+		display: none !important;
+	}
+	[tabindex="-1"]:focus:not(:focus-visible) {
+		outline: none;
+	}
+	legend {
+		float: left;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		display: table;
+	}
+	legend + * {
+		clear: both;
+	}
+	fieldset {
+		border: 0;
+		min-width: 0;
+		margin: 0;
+		padding: 0.01em 0 0;
+	}
+	body:not(:-moz-handler-blocked) fieldset {
+		display: table-cell;
+	}
+	svg {
+		pointer-events: none;
+	}
 `,mr=Fe(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2471,123 +2476,139 @@ Please compile your catalog first.
                 }
             }
         `);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}">
-                <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};
+			<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}"
+			>
+				<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};
 //# sourceMappingURL=modal-header.js.map