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

package/dist/packages/snackbar/snackbar.js

@@ -7,278 +7,278 @@ ICU features such as interpolation and plurals will not work properly for that m
 
 Please compile your catalog first. 
 `)),v(c)&&re.test(c)?oe(c):v(c)?c:Ae(c,this._locale,this._locales)(r,t?.formats)}date(e,r){return q(this._locales||this._locale,e,r)}number(e,r){return Y(this._locales||this._locale,e,r)}};function je(o={}){return new H(o)}var u=je();import{html as Qe,LitElement as We}from"lit";import{html as le,LitElement as Xe}from"lit";import{property as de,query as Ze,state as Re}from"lit/decorators.js";var X=typeof window<"u",Z=!0;if(X){let o=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:r})=>Z=!r;o.addEventListener&&o.addEventListener("change",e),e(o)}var ae=o=>{o.style.transition=null,o.style.backfaceVisibility=null,o.style.overflow=null},ie=o=>{let e="var(--w-expansion-duration, var(--f-expansion-duration, 0.3s))";o.style.transition=`height ${e}`,o.style.backfaceVisibility="hidden",o.style.overflow="hidden"},Ye=(o,e)=>()=>{o.style.height="auto",o.style.overflow=null,e&&e()},Ne=o=>()=>{o&&o()},ne=(o,e)=>{let r=(()=>{if(!e)return new Promise(i=>{e=i})})();if(!Z)return o.style.height="auto",e&&e(),r;let t=Ye(o,e);ae(o),o.style.height="auto";let a=o.scrollHeight;if(X&&requestAnimationFrame(()=>{o.addEventListener("transitionend",t,{once:!0}),o.style.height="0px",o.style.transitionTimingFunction="ease-out",ie(o),requestAnimationFrame(()=>o.style.height=a+"px")}),r)return r},se=(o,e)=>{let r=(()=>{if(!e)return new Promise(i=>{e=i})})();if(!Z)return o.style.height="0px",e&&e(),r;let t=Ne(e);ae(o);let a=o.scrollHeight;if(X&&requestAnimationFrame(()=>{o.addEventListener("transitionend",t,{once:!0}),o.style.height=a+"px",o.style.transitionTimingFunction="ease-in",ie(o),requestAnimationFrame(()=>o.style.height="0px")}),r)return r};import{css as He}from"lit";import{unsafeCSS as $e}from"lit";var P=He`
-  *,
-  :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;
-  }
+	*,
+	: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;
+	}
 `,sr=$e(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2446,201 +2446,220 @@ Please compile your catalog first.
                 }
             }
         `);import{css as qe}from"lit";var ce=qe`
-    :host {
-        display: block;
-
-        --_snackbar-item-bg: var(--w-c-snackbar-item-bg, var(--w-color-tooltip-background-static));
-        --_snackbar-item-action-bg-hover: var(--w-c-snackbar-item-action-bg-hover, var(--w-color-tooltip-background-static));
-        --_snackbar-item-action-bg-active: var(--w-c-snackbar-item-action-bg-active, var(--w-color-tooltip-background-static));
-        --_snackbar-item-border-radius: var(--w-c-snackbar-item-radius, 8px);
-        --_snackbar-item-box-shadow: var(--w-c-snackbar-item-box-shadow, var(--w-shadow-l));
-        --_snackbar-item-color: var(--w-c-snackbar-item-color, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-action-color-hover: var(--w-c-snackbar-item-action-color-hover, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-action-color-active: var(--w-c-snackbar-item-action-color-active, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-max-width: var(--w-c-snackbar-item-max-width, 480px);
-        --_snackbar-item-min-width: var(--w-c-snackbar-item-min-width, 328px);
-        --_snackbar-item-padding: var(--w-c-snackbar-item-padding, 8px);
-    }
-
-    /* Using a padding-less div as target so we get animation to and from zero height */
-    .animation-wrapper {
-        border-radius: var(--_snackbar-item-border-radius); /* Avoid sharp bottom corners during the transitino */
-    }
-
-    [part='item'] {
-        background-color: var(--_snackbar-item-bg);
-        border-radius: var(--_snackbar-item-border-radius);
-        box-shadow: var(--_snackbar-item-box-shadow);
-        color: var(--_snackbar-item-color);
-        max-width: var(--_snackbar-item-max-width);
-        min-width: var(--_snackbar-item-min-width);
-        padding: var(--_snackbar-item-padding);
-        
-        display: grid;
-        column-gap: 8px;
-        grid-template:
-            "icon message inline-action"
-            "block-action block-action block-action";
-        grid-template-columns: auto 1fr auto;
-        align-items: center;
-    }
-
-    [part='item'] w-button,
-    [part='item'] ::slotted(w-button) {
-        --w-c-button-bg: var(--_snackbar-item-bg);
-        --w-c-button-bg-active: var(--_snackbar-item-action-bg-active);
-        --w-c-button-bg-hover: var(--_snackbar-item-action-bg-hover);
-        --w-c-button-color: var(--_snackbar-item-color);
-        --w-c-button-color-active: var(--_snackbar-item-action-color-active);
-        --w-c-button-color-hover: var(--_snackbar-item-action-color-hover);
-    }
-
-    [part='icon'] {
-        grid-area: icon;
-
-        color: var(--_snackbar-item-color);
-        padding-block: 4px;
-    }
-
-    [part='icon'] ::slotted(w-icon) {
-        display: block; /* override default inline-block to avoid line-height */
-        margin-inline-start: 4px;
-    }
-
-    [part='icon'] ::slotted(w-icon[name="SuccessFilled"]) {
-        color: var(--w-s-color-icon-positive);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="WarningFilled"]) {
-        color: var(--w-s-color-icon-warning);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="ErrorFilled"]) {
-        color: var(--w-s-color-icon-negative);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="InfoFilled"]) {
-        color: var(--w-s-color-icon-info);
-    }
-    
-    [part='message'] {
-        grid-area: message;
-
-        align-self: center;
-        font-size: var(--w-font-size-s);
-        line-height: var(--w-line-height-s);
-        padding-block: 7px;
-    }
-
-    [part='action'] {
-        grid-area: inline-action;
-
-        display: flex;
-        column-gap: 2px; /* to allow space for focus outline */
-        justify-content: flex-end;
-        padding-inline-start: 8px;
-    }
-    
-    :host([action-placement='block']) [part='action'] {
-        grid-area: block-action;
-
-    }
-
-    w-attention [slot='message'] {
-        font-size: var(--w-font-size-s);
-        line-height: var(--w-line-height-s);
-    }
-
-    kbd {
-        font-family: var(--w-font-family);
-    }
-`;var z,E,m,L,f,l,R,K,V,G,be,w=class extends Xe{constructor(){super(...arguments);x(this,l);this.actionPlacement="inline";this.duration=4e3;this.hasAction=!1;x(this,z,!1);x(this,E,4e3);x(this,m,null);x(this,L,null);x(this,f,!1)}connectedCallback(){super.connectedCallback(),this.duration!==12e7&&(p(this,E,this.duration-1e3),p(this,L,setInterval(()=>{d(this,f)||(p(this,E,d(this,E)-1e3),d(this,E)<=0&&this.close())},1e3)))}disconnectedCallback(){d(this,L)&&clearInterval(d(this,L))}async updated(){this.root&&(d(this,z)||(await this.updateComplete,ne(this.root,()=>{p(this,z,!0)})))}close(){d(this,m)&&d(this,m).focus(),d(this,z)&&this.root?se(this.root,()=>{this.remove()}):this.remove()}firstUpdated(){this.hasAction=g(this,l,be).call(this)}render(){if(this.hasAction&&document.documentElement.dataset.keyboardinteraction==="true"){let r=window.navigator.userAgent.includes("Macintosh")?"\u2325":"Alt";return le`
-                <w-attention
-                    tooltip
-                    placement="top"
-                    distance="12"
-                    show
-                >
-                    <div class="animation-wrapper" slot="target">
-                        <div part="item"
-                            @mouseenter=${g(this,l,V)}
-                            @mouseleave=${g(this,l,G)}
-                            @focusin=${g(this,l,R)}
-                            @focusout=${g(this,l,K)}
-                        >
-                            <div part="icon">
-                                <slot name="icon"></slot>
-                            </div>
-                            <div part="message">
-                                <slot></slot>
-                            </div>
-                            <div part="action">
-                                <slot name="action"></slot>
-                                <slot name="close"></slot>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- The keyboard shortcut is announced as part of the action button label -->
-                    <span slot="message" aria-hidden="true">
-                        <kbd>${r}</kbd> + <kbd>Enter</kbd>
-                    </span>
-                </w-attention>
-            `}return le`
-            <div class="animation-wrapper">
-                <div part="item"
-                    @mouseenter=${g(this,l,V)}
-                    @mouseleave=${g(this,l,G)}
-                    @focusin=${g(this,l,R)}
-                    @focusout=${g(this,l,K)}
-                >
-                    <div part="icon">
-                        <slot name="icon"></slot>
-                    </div>
-                    <div part="message">
-                        <slot></slot>
-                    </div>
-                    <div part="action">
-                        <slot name="action"></slot>
-                        <slot name="close"></slot>
-                    </div>
-                </div>
-            </div>
-        `}};z=new WeakMap,E=new WeakMap,m=new WeakMap,L=new WeakMap,f=new WeakMap,l=new WeakSet,R=function(r){d(this,m)||(p(this,f,!0),r.relatedTarget&&r.relatedTarget.focus&&p(this,m,r.relatedTarget))},K=function(r){(!r.relatedTarget||!this.shadowRoot?.host.contains(r.relatedTarget))&&(p(this,f,!1),p(this,m,null))},V=function(){p(this,f,!0)},G=function(){d(this,m)||p(this,f,!1)},be=function(){let r=this.shadowRoot?.querySelector('slot[name="action"]');return r?r.assignedElements().length>0:!1},w.styles=[P,ce],M([de({attribute:"action-placement",reflect:!0,useDefault:!0})],w.prototype,"actionPlacement",2),M([de({type:Number,reflect:!0,useDefault:!0})],w.prototype,"duration",2),M([Ze(".animation-wrapper")],w.prototype,"root",2),M([Re()],w.prototype,"hasAction",2);customElements.get("w-snackbar-item")||customElements.define("w-snackbar-item",w);var Ke=["en","nb","fi","da","sv"],J="en",T=o=>Ke.find(e=>o===e||o.toLowerCase().includes(e))||J;function ge(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return T(o)}try{let o=ue(document);if(o)return T(o);let e=Ue();if(e)return T(e);let r=ue(ve());return r?T(r):J}catch(o){return console.warn("could not detect locale, falling back to source locale",o),J}}var me=(o,e,r,t,a)=>{u.load("en",o),u.load("nb",e),u.load("fi",r),u.load("da",t),u.load("sv",a);let i=ge();u.activate(i),he(),Ge()},Ve="warp-i18n-change";function he(){typeof window>"u"||window.dispatchEvent(new Event(Ve))}var pe=!1;function Ge(){if(pe||typeof window>"u"||!document?.documentElement)return;pe=!0;let o=()=>{let a=ge();u.locale!==a&&(u.activate(a),he())},e=new MutationObserver(a=>{for(let i of a)if(i.type==="attributes"&&i.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ve();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 ve(){try{return window.parent?.document??null}catch{return null}}function ue(o){try{return o?.documentElement?.lang??""}catch{return""}}function Je(){try{return window.frameElement??null}catch{return null}}function Ue(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}var we=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var fe=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var ke=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var xe=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var ye=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');import{css as Be}from"lit";var _e=Be`
-    :host {
-        position: fixed;
-        pointer-events: none;
-        
-        --_snackbar-gap: var(--w-c-snackbar-container-gap, 8px);
-        --_snackbar-position-top: var(--w-c-snackbar-position-top, initial);
-        --_snackbar-position-right: var(--w-c-snackbar-position-right, 0);
-        --_snackbar-position-bottom: var(--w-c-snackbar-position-bottom, 16px);
-        --_snackbar-position-left: var(--w-c-snackbar-position-left, 0);
-        --_snackbar-z-index: var(--w-c-snackbar-z-index, 50);
-
-        bottom: var(--_snackbar-position-bottom);
-        left: var(--_snackbar-position-left);
-        right: var(--_snackbar-position-right);
-        top: var(--_snackbar-position-top);
-        
-        z-index: var(--_snackbar-z-index);
-    }
-
-    [part='container'] {
-        display: grid;
-        gap: var(--_snackbar-gap);
-        grid-template-rows: auto;
-        justify-content: center;
-        justify-items: center;
-        margin-inline: auto;
-        pointer-events: none;
-    }
-
-    ::slotted(*) {
-        pointer-events: initial;
-    }
+	:host {
+		display: block;
+
+		--_snackbar-item-bg: var(
+			--w-c-snackbar-item-bg,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-action-bg-hover: var(
+			--w-c-snackbar-item-action-bg-hover,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-action-bg-active: var(
+			--w-c-snackbar-item-action-bg-active,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-border-radius: var(--w-c-snackbar-item-radius, 8px);
+		--_snackbar-item-box-shadow: var(
+			--w-c-snackbar-item-box-shadow,
+			var(--w-shadow-l)
+		);
+		--_snackbar-item-color: var(
+			--w-c-snackbar-item-color,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-action-color-hover: var(
+			--w-c-snackbar-item-action-color-hover,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-action-color-active: var(
+			--w-c-snackbar-item-action-color-active,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-max-width: var(--w-c-snackbar-item-max-width, 480px);
+		--_snackbar-item-min-width: var(--w-c-snackbar-item-min-width, 328px);
+		--_snackbar-item-padding: var(--w-c-snackbar-item-padding, 8px);
+	}
+
+	/* Using a padding-less div as target so we get animation to and from zero height */
+	.animation-wrapper {
+		border-radius: var(
+			--_snackbar-item-border-radius
+		); /* Avoid sharp bottom corners during the transitino */
+	}
+
+	[part="item"] {
+		background-color: var(--_snackbar-item-bg);
+		border-radius: var(--_snackbar-item-border-radius);
+		box-shadow: var(--_snackbar-item-box-shadow);
+		color: var(--_snackbar-item-color);
+		max-width: var(--_snackbar-item-max-width);
+		min-width: var(--_snackbar-item-min-width);
+		padding: var(--_snackbar-item-padding);
+
+		display: grid;
+		column-gap: 8px;
+		grid-template:
+			"icon message inline-action"
+			"block-action block-action block-action";
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+	}
+
+	[part="item"] w-button,
+	[part="item"] ::slotted(w-button) {
+		--w-c-button-bg: var(--_snackbar-item-bg);
+		--w-c-button-bg-active: var(--_snackbar-item-action-bg-active);
+		--w-c-button-bg-hover: var(--_snackbar-item-action-bg-hover);
+		--w-c-button-color: var(--_snackbar-item-color);
+		--w-c-button-color-active: var(--_snackbar-item-action-color-active);
+		--w-c-button-color-hover: var(--_snackbar-item-action-color-hover);
+	}
+
+	[part="icon"] {
+		grid-area: icon;
+
+		color: var(--_snackbar-item-color);
+		padding-block: 4px;
+	}
+
+	[part="icon"] ::slotted(w-icon) {
+		display: block; /* override default inline-block to avoid line-height */
+		margin-inline-start: 4px;
+	}
+
+	[part="icon"] ::slotted(w-icon[name="SuccessFilled"]) {
+		color: var(--w-s-color-icon-positive);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="WarningFilled"]) {
+		color: var(--w-s-color-icon-warning);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="ErrorFilled"]) {
+		color: var(--w-s-color-icon-negative);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="InfoFilled"]) {
+		color: var(--w-s-color-icon-info);
+	}
+
+	[part="message"] {
+		grid-area: message;
+
+		align-self: center;
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+		padding-block: 7px;
+	}
+
+	[part="action"] {
+		grid-area: inline-action;
+
+		display: flex;
+		column-gap: 2px; /* to allow space for focus outline */
+		justify-content: flex-end;
+		padding-inline-start: 8px;
+	}
+
+	:host([action-placement="block"]) [part="action"] {
+		grid-area: block-action;
+	}
+
+	w-attention [slot="message"] {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+
+	kbd {
+		font-family: var(--w-font-family);
+	}
+`;var z,E,m,L,f,l,R,K,V,G,be,w=class extends Xe{constructor(){super(...arguments);x(this,l);this.actionPlacement="inline";this.duration=4e3;this.hasAction=!1;x(this,z,!1);x(this,E,4e3);x(this,m,null);x(this,L,null);x(this,f,!1)}connectedCallback(){super.connectedCallback(),this.duration!==12e7&&(p(this,E,this.duration-1e3),p(this,L,setInterval(()=>{d(this,f)||(p(this,E,d(this,E)-1e3),d(this,E)<=0&&this.close())},1e3)))}disconnectedCallback(){d(this,L)&&clearInterval(d(this,L))}async updated(){this.root&&(d(this,z)||(await this.updateComplete,ne(this.root,()=>{p(this,z,!0)})))}close(){d(this,m)&&d(this,m).focus(),d(this,z)&&this.root?se(this.root,()=>{this.remove()}):this.remove()}firstUpdated(){this.hasAction=g(this,l,be).call(this)}render(){if(this.hasAction&&document.documentElement.dataset.wKeyboardinteraction==="true"){let r=window.navigator.userAgent.includes("Macintosh")?"\u2325":"Alt";return le`
+				<w-attention tooltip placement="top" distance="12" show>
+					<div class="animation-wrapper" slot="target">
+						<div
+							part="item"
+							@mouseenter=${g(this,l,V)}
+							@mouseleave=${g(this,l,G)}
+							@focusin=${g(this,l,R)}
+							@focusout=${g(this,l,K)}
+						>
+							<div part="icon">
+								<slot name="icon"></slot>
+							</div>
+							<div part="message">
+								<slot></slot>
+							</div>
+							<div part="action">
+								<slot name="action"></slot>
+								<slot name="close"></slot>
+							</div>
+						</div>
+					</div>
+					<!-- The keyboard shortcut is announced as part of the action button label -->
+					<span slot="message" aria-hidden="true">
+						<kbd>${r}</kbd> + <kbd>Enter</kbd>
+					</span>
+				</w-attention>
+			`}return le`
+			<div class="animation-wrapper">
+				<div
+					part="item"
+					@mouseenter=${g(this,l,V)}
+					@mouseleave=${g(this,l,G)}
+					@focusin=${g(this,l,R)}
+					@focusout=${g(this,l,K)}
+				>
+					<div part="icon">
+						<slot name="icon"></slot>
+					</div>
+					<div part="message">
+						<slot></slot>
+					</div>
+					<div part="action">
+						<slot name="action"></slot>
+						<slot name="close"></slot>
+					</div>
+				</div>
+			</div>
+		`}};z=new WeakMap,E=new WeakMap,m=new WeakMap,L=new WeakMap,f=new WeakMap,l=new WeakSet,R=function(r){d(this,m)||(p(this,f,!0),r.relatedTarget&&r.relatedTarget.focus&&p(this,m,r.relatedTarget))},K=function(r){(!r.relatedTarget||!this.shadowRoot?.host.contains(r.relatedTarget))&&(p(this,f,!1),p(this,m,null))},V=function(){p(this,f,!0)},G=function(){d(this,m)||p(this,f,!1)},be=function(){let r=this.shadowRoot?.querySelector('slot[name="action"]');return r?r.assignedElements().length>0:!1},w.styles=[P,ce],M([de({attribute:"action-placement",reflect:!0,useDefault:!0})],w.prototype,"actionPlacement",2),M([de({type:Number,reflect:!0,useDefault:!0})],w.prototype,"duration",2),M([Ze(".animation-wrapper")],w.prototype,"root",2),M([Re()],w.prototype,"hasAction",2);customElements.get("w-snackbar-item")||customElements.define("w-snackbar-item",w);var Ke=["en","nb","fi","da","sv"],J="en",T=o=>Ke.find(e=>o===e||o.toLowerCase().includes(e))||J;function ge(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return T(o)}try{let o=ue(document);if(o)return T(o);let e=Ue();if(e)return T(e);let r=ue(ve());return r?T(r):J}catch(o){return console.warn("could not detect locale, falling back to source locale",o),J}}var me=(o,e,r,t,a)=>{u.load("en",o),u.load("nb",e),u.load("fi",r),u.load("da",t),u.load("sv",a);let i=ge();u.activate(i),he(),Ge()},Ve="warp-i18n-change";function he(){typeof window>"u"||window.dispatchEvent(new Event(Ve))}var pe=!1;function Ge(){if(pe||typeof window>"u"||!document?.documentElement)return;pe=!0;let o=()=>{let a=ge();u.locale!==a&&(u.activate(a),he())},e=new MutationObserver(a=>{for(let i of a)if(i.type==="attributes"&&i.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ve();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 ve(){try{return window.parent?.document??null}catch{return null}}function ue(o){try{return o?.documentElement?.lang??""}catch{return""}}function Je(){try{return window.frameElement??null}catch{return null}}function Ue(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}var we=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var fe=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var ke=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var xe=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');var ye=JSON.parse('{"snackbar.aria.close":["Dismiss message"]}');import{css as Be}from"lit";var _e=Be`
+	:host {
+		position: fixed;
+		pointer-events: none;
+
+		--_snackbar-gap: var(--w-c-snackbar-container-gap, 8px);
+		--_snackbar-position-top: var(--w-c-snackbar-position-top, initial);
+		--_snackbar-position-right: var(--w-c-snackbar-position-right, 0);
+		--_snackbar-position-bottom: var(--w-c-snackbar-position-bottom, 16px);
+		--_snackbar-position-left: var(--w-c-snackbar-position-left, 0);
+		--_snackbar-z-index: var(--w-c-snackbar-z-index, 50);
+
+		bottom: var(--_snackbar-position-bottom);
+		left: var(--_snackbar-position-left);
+		right: var(--_snackbar-position-right);
+		top: var(--_snackbar-position-top);
+
+		z-index: var(--_snackbar-z-index);
+	}
+
+	[part="container"] {
+		display: grid;
+		gap: var(--_snackbar-gap);
+		grid-template-rows: auto;
+		justify-content: center;
+		justify-items: center;
+		margin-inline: auto;
+		pointer-events: none;
+	}
+
+	::slotted(*) {
+		pointer-events: initial;
+	}
 `;var er={canClose:!0,duration:4e3,variant:"neutral"};me(fe,xe,ke,we,ye);var rr=/\s/,D=class extends We{constructor(){super(),this.internals=this.attachInternals(),this.internals.ariaLive="polite",this.internals.role="log",this._onKeydown=this._onKeydown.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._onKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this._onKeydown)}_onKeydown(e){if(e.key==="Escape"){let r=this.shadowRoot?.host.querySelector("w-snackbar-item:last-of-type");r&&r.close()}else if(e.altKey&&e.key==="Enter"){e.preventDefault();let r=this.shadowRoot?.host.querySelector("w-snackbar-item:last-of-type");if(console.log("Found item!"),r){let t=r.querySelector('w-button[slot="action"]');console.log("Found action!"),t&&(t.click(),console.log("Clicked!"))}}}create(e,r={}){let t={...er,...r},a=document.createElement("w-snackbar-item");if(t.duration&&(a.duration=t.duration),a.innerText=e,t.variant!=="neutral"){let i=document.createElement("w-icon");switch(i.slot="icon",t.variant){case"positive":i.name="SuccessFilled";break;case"warning":i.name="WarningFilled";break;case"negative":i.name="ErrorFilled";break;case"info":i.name="InfoFilled";break}a.prepend(i)}if(t.action){a.duration<1e4&&(a.duration=1e4);let i=document.createElement("w-button");i.slot="action",i.variant="utilityQuiet",i.small=!0;let{label:n,onclick:s,placement:c}=t.action;i.innerText=n;let b=document.createElement("span");b.classList.add("sr-only");let _=window.navigator.userAgent.includes("Macintosh")?"Option":"Alt";b.innerHTML=`<kbd>${_}</kbd> + <kbd>Enter</kbd>`,i.append(b),i.onclick=h=>{let C=s.call(i,h);return h.defaultPrevented||a.close(),C},c?a.actionPlacement=c:rr.test(n)&&(a.actionPlacement="block"),a.append(i)}if(a.duration>1e4&&(t.canClose=!0),t.canClose){let i=document.createElement("w-button");i.slot="close",i.variant="utilityQuiet",i.small=!0,i.iconOnly=!0,typeof t.canClose=="function"?i.onclick=s=>{let c=t.canClose.call(i,s);return s.defaultPrevented||a.close(),c}:i.onclick=a.close.bind(a);let n=document.createElement("w-icon");n.name="Close",n.size="small",n.ariaLabel=u.t({id:"snackbar.aria.close",message:"Dismiss message",comment:"Accessibility label for the button that closes the snackbar/toast popup"}),i.append(n),a.append(i)}return this.shadowRoot?.host.prepend(a),a}render(){return Qe`
-            <aside part="container">
-                <slot></slot>
-            </aside>
-        `}};D.styles=[P,_e];customElements.get("w-snackbar")||customElements.define("w-snackbar",D);export{D as WarpSnackbar};
+			<aside part="container">
+				<slot></slot>
+			</aside>
+		`}};D.styles=[P,_e];customElements.get("w-snackbar")||customElements.define("w-snackbar",D);export{D as WarpSnackbar};
 //# sourceMappingURL=snackbar.js.map