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

package/dist/packages/snackbar-item/snackbar-item.js

@@ -1,277 +1,277 @@
-var Z=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var E=e=>{throw TypeError(e)};var u=(e,r,o,t)=>{for(var n=t>1?void 0:t?P(r,o):r,p=e.length-1,w;p>=0;p--)(w=e[p])&&(n=(t?w(r,o,n):w(n))||n);return t&&n&&Z(r,o,n),n};var f=(e,r,o)=>r.has(e)||E("Cannot "+o);var i=(e,r,o)=>(f(e,r,"read from private field"),o?o.call(e):r.get(e)),g=(e,r,o)=>r.has(e)?E("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(e):r.set(e,o),s=(e,r,o,t)=>(f(e,r,"write to private field"),t?t.call(e,o):r.set(e,o),o),c=(e,r,o)=>(f(e,r,"access private method"),o);import{html as C,LitElement as I}from"lit";import{property as X,query as N,state as U}from"lit/decorators.js";var x=typeof window<"u",k=!0;if(x){let e=window.matchMedia("(prefers-reduced-motion: reduce)"),r=({matches:o})=>k=!o;e.addEventListener&&e.addEventListener("change",r),r(e)}var F=e=>{e.style.transition=null,e.style.backfaceVisibility=null,e.style.overflow=null},M=e=>{let r="var(--w-expansion-duration, var(--f-expansion-duration, 0.3s))";e.style.transition=`height ${r}`,e.style.backfaceVisibility="hidden",e.style.overflow="hidden"},$=(e,r)=>()=>{e.style.height="auto",e.style.overflow=null,r&&r()},H=e=>()=>{e&&e()},T=(e,r)=>{let o=(()=>{if(!r)return new Promise(p=>{r=p})})();if(!k)return e.style.height="auto",r&&r(),o;let t=$(e,r);F(e),e.style.height="auto";let n=e.scrollHeight;if(x&&requestAnimationFrame(()=>{e.addEventListener("transitionend",t,{once:!0}),e.style.height="0px",e.style.transitionTimingFunction="ease-out",M(e),requestAnimationFrame(()=>e.style.height=n+"px")}),o)return o},L=(e,r)=>{let o=(()=>{if(!r)return new Promise(p=>{r=p})})();if(!k)return e.style.height="0px",r&&r(),o;let t=H(r);F(e);let n=e.scrollHeight;if(x&&requestAnimationFrame(()=>{e.addEventListener("transitionend",t,{once:!0}),e.style.height=n+"px",e.style.transitionTimingFunction="ease-in",M(e),requestAnimationFrame(()=>e.style.height="0px")}),o)return o};import{css as S}from"lit";import{unsafeCSS as R}from"lit";var j=S`
-  *,
-  :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;
-  }
-`,K=R(`*, :before, :after {
+var Z=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var E=e=>{throw TypeError(e)};var u=(e,r,o,t)=>{for(var n=t>1?void 0:t?$(r,o):r,p=e.length-1,w;p>=0;p--)(w=e[p])&&(n=(t?w(r,o,n):w(n))||n);return t&&n&&Z(r,o,n),n};var f=(e,r,o)=>r.has(e)||E("Cannot "+o);var i=(e,r,o)=>(f(e,r,"read from private field"),o?o.call(e):r.get(e)),g=(e,r,o)=>r.has(e)?E("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(e):r.set(e,o),s=(e,r,o,t)=>(f(e,r,"write to private field"),t?t.call(e,o):r.set(e,o),o),c=(e,r,o)=>(f(e,r,"access private method"),o);import{html as C,LitElement as N}from"lit";import{property as X,query as V,state as U}from"lit/decorators.js";var x=typeof window<"u",k=!0;if(x){let e=window.matchMedia("(prefers-reduced-motion: reduce)"),r=({matches:o})=>k=!o;e.addEventListener&&e.addEventListener("change",r),r(e)}var F=e=>{e.style.transition=null,e.style.backfaceVisibility=null,e.style.overflow=null},M=e=>{let r="var(--w-expansion-duration, var(--f-expansion-duration, 0.3s))";e.style.transition=`height ${r}`,e.style.backfaceVisibility="hidden",e.style.overflow="hidden"},H=(e,r)=>()=>{e.style.height="auto",e.style.overflow=null,r&&r()},P=e=>()=>{e&&e()},T=(e,r)=>{let o=(()=>{if(!r)return new Promise(p=>{r=p})})();if(!k)return e.style.height="auto",r&&r(),o;let t=H(e,r);F(e),e.style.height="auto";let n=e.scrollHeight;if(x&&requestAnimationFrame(()=>{e.addEventListener("transitionend",t,{once:!0}),e.style.height="0px",e.style.transitionTimingFunction="ease-out",M(e),requestAnimationFrame(()=>e.style.height=n+"px")}),o)return o},L=(e,r)=>{let o=(()=>{if(!r)return new Promise(p=>{r=p})})();if(!k)return e.style.height="0px",r&&r(),o;let t=P(r);F(e);let n=e.scrollHeight;if(x&&requestAnimationFrame(()=>{e.addEventListener("transitionend",t,{once:!0}),e.style.height=n+"px",e.style.transitionTimingFunction="ease-in",M(e),requestAnimationFrame(()=>e.style.height="0px")}),o)return o};import{css as S}from"lit";import{unsafeCSS as R}from"lit";var j=S`
+	*,
+	: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;
+	}
+`,J=R(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,165 +2437,184 @@ var Z=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var E=e=>{thro
                     display: none
                 }
             }
-        `);import{css as V}from"lit";var A=V`
-    :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 O=(t=>(t[t.Short=4e3]="Short",t[t.Long=1e4]="Long",t[t.Infinite=12e7]="Infinite",t))(O||{}),v,h,d,m,b,a,y,z,_,Y,q,l=class extends I{constructor(){super(...arguments);g(this,a);this.actionPlacement="inline";this.duration=4e3;this.hasAction=!1;g(this,v,!1);g(this,h,4e3);g(this,d,null);g(this,m,null);g(this,b,!1)}connectedCallback(){super.connectedCallback(),this.duration!==12e7&&(s(this,h,this.duration-1e3),s(this,m,setInterval(()=>{i(this,b)||(s(this,h,i(this,h)-1e3),i(this,h)<=0&&this.close())},1e3)))}disconnectedCallback(){i(this,m)&&clearInterval(i(this,m))}async updated(){this.root&&(i(this,v)||(await this.updateComplete,T(this.root,()=>{s(this,v,!0)})))}close(){i(this,d)&&i(this,d).focus(),i(this,v)&&this.root?L(this.root,()=>{this.remove()}):this.remove()}firstUpdated(){this.hasAction=c(this,a,q).call(this)}render(){if(this.hasAction&&document.documentElement.dataset.keyboardinteraction==="true"){let o=window.navigator.userAgent.includes("Macintosh")?"\u2325":"Alt";return C`
-                <w-attention
-                    tooltip
-                    placement="top"
-                    distance="12"
-                    show
-                >
-                    <div class="animation-wrapper" slot="target">
-                        <div part="item"
-                            @mouseenter=${c(this,a,_)}
-                            @mouseleave=${c(this,a,Y)}
-                            @focusin=${c(this,a,y)}
-                            @focusout=${c(this,a,z)}
-                        >
-                            <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>${o}</kbd> + <kbd>Enter</kbd>
-                    </span>
-                </w-attention>
-            `}return C`
-            <div class="animation-wrapper">
-                <div part="item"
-                    @mouseenter=${c(this,a,_)}
-                    @mouseleave=${c(this,a,Y)}
-                    @focusin=${c(this,a,y)}
-                    @focusout=${c(this,a,z)}
-                >
-                    <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>
-        `}};v=new WeakMap,h=new WeakMap,d=new WeakMap,m=new WeakMap,b=new WeakMap,a=new WeakSet,y=function(o){i(this,d)||(s(this,b,!0),o.relatedTarget&&o.relatedTarget.focus&&s(this,d,o.relatedTarget))},z=function(o){(!o.relatedTarget||!this.shadowRoot?.host.contains(o.relatedTarget))&&(s(this,b,!1),s(this,d,null))},_=function(){s(this,b,!0)},Y=function(){i(this,d)||s(this,b,!1)},q=function(){let o=this.shadowRoot?.querySelector('slot[name="action"]');return o?o.assignedElements().length>0:!1},l.styles=[j,A],u([X({attribute:"action-placement",reflect:!0,useDefault:!0})],l.prototype,"actionPlacement",2),u([X({type:Number,reflect:!0,useDefault:!0})],l.prototype,"duration",2),u([N(".animation-wrapper")],l.prototype,"root",2),u([U()],l.prototype,"hasAction",2);customElements.get("w-snackbar-item")||customElements.define("w-snackbar-item",l);export{O as SnackbarDuration,l as WarpSnackbarItem};
+        `);import{css as I}from"lit";var A=I`
+	: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 K=(t=>(t[t.Short=4e3]="Short",t[t.Long=1e4]="Long",t[t.Infinite=12e7]="Infinite",t))(K||{}),v,h,d,m,b,a,y,z,_,Y,q,l=class extends N{constructor(){super(...arguments);g(this,a);this.actionPlacement="inline";this.duration=4e3;this.hasAction=!1;g(this,v,!1);g(this,h,4e3);g(this,d,null);g(this,m,null);g(this,b,!1)}connectedCallback(){super.connectedCallback(),this.duration!==12e7&&(s(this,h,this.duration-1e3),s(this,m,setInterval(()=>{i(this,b)||(s(this,h,i(this,h)-1e3),i(this,h)<=0&&this.close())},1e3)))}disconnectedCallback(){i(this,m)&&clearInterval(i(this,m))}async updated(){this.root&&(i(this,v)||(await this.updateComplete,T(this.root,()=>{s(this,v,!0)})))}close(){i(this,d)&&i(this,d).focus(),i(this,v)&&this.root?L(this.root,()=>{this.remove()}):this.remove()}firstUpdated(){this.hasAction=c(this,a,q).call(this)}render(){if(this.hasAction&&document.documentElement.dataset.wKeyboardinteraction==="true"){let o=window.navigator.userAgent.includes("Macintosh")?"\u2325":"Alt";return C`
+				<w-attention tooltip placement="top" distance="12" show>
+					<div class="animation-wrapper" slot="target">
+						<div
+							part="item"
+							@mouseenter=${c(this,a,_)}
+							@mouseleave=${c(this,a,Y)}
+							@focusin=${c(this,a,y)}
+							@focusout=${c(this,a,z)}
+						>
+							<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>${o}</kbd> + <kbd>Enter</kbd>
+					</span>
+				</w-attention>
+			`}return C`
+			<div class="animation-wrapper">
+				<div
+					part="item"
+					@mouseenter=${c(this,a,_)}
+					@mouseleave=${c(this,a,Y)}
+					@focusin=${c(this,a,y)}
+					@focusout=${c(this,a,z)}
+				>
+					<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>
+		`}};v=new WeakMap,h=new WeakMap,d=new WeakMap,m=new WeakMap,b=new WeakMap,a=new WeakSet,y=function(o){i(this,d)||(s(this,b,!0),o.relatedTarget&&o.relatedTarget.focus&&s(this,d,o.relatedTarget))},z=function(o){(!o.relatedTarget||!this.shadowRoot?.host.contains(o.relatedTarget))&&(s(this,b,!1),s(this,d,null))},_=function(){s(this,b,!0)},Y=function(){i(this,d)||s(this,b,!1)},q=function(){let o=this.shadowRoot?.querySelector('slot[name="action"]');return o?o.assignedElements().length>0:!1},l.styles=[j,A],u([X({attribute:"action-placement",reflect:!0,useDefault:!0})],l.prototype,"actionPlacement",2),u([X({type:Number,reflect:!0,useDefault:!0})],l.prototype,"duration",2),u([V(".animation-wrapper")],l.prototype,"root",2),u([U()],l.prototype,"hasAction",2);customElements.get("w-snackbar-item")||customElements.define("w-snackbar-item",l);export{K as SnackbarDuration,l as WarpSnackbarItem};
 //# sourceMappingURL=snackbar-item.js.map