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

package/dist/packages/modal/modal.js

@@ -1,276 +1,276 @@
 var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(e,o,r,t)=>{for(var a=t>1?void 0:t?x(o,r):o,s=e.length-1,l;s>=0;s--)(l=e[s])&&(a=(t?l(o,r,a):l(a))||a);return t&&a&&f(o,r,a),a};import{css as X,html as Z,LitElement as M}from"lit";import{property as b,query as p}from"lit/decorators.js";var d=[],c={documentElement:{},body:{}},k=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{e.touches.length>1||e.preventDefault?.()},y=e=>([o,r])=>{c[e][o]=document[e].style[o],document[e].style[o]=r},z=()=>Object.entries(k).forEach(([e,o])=>{Object.entries(o).forEach(y(e))}),E=e=>([o,r])=>{document[e].style[o]=c[e][o]},C=()=>Object.entries(c).forEach(([e,o])=>{Object.entries(o).forEach(E(e))}),Y=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function T(e){let o=-1,r=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-o;return e.scrollTop===0&&a>0||Y(e)&&a<0?g(t):(t.stopPropagation(),!0)};e.ontouchstart=t=>{t.targetTouches.length===1&&(o=t.targetTouches[0].clientY)},e.ontouchmove=r}function j(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),L=h(!0),B=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(o=>o===e)||(d.length||(z(),L()),T(e),d.push(e))}function m(){d.forEach(j),B(),C(),d=[]}import{css as S}from"lit";import{unsafeCSS as _}from"lit";var u=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;
-  }
+	*,
+	: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;
+	}
 `,P=_(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2438,136 +2438,136 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
                 }
             }
         `);var w=e=>class extends e{handleSlotChange(o){let r=o.target.assignedNodes({flatten:!0});for(let t of r.filter(a=>a.patchClose))t._close=()=>this.close()}};var i=class extends w(M){constructor(){super();this.show=!1;this.ignoreBackdropClicks=!1;this._isClosing=!1;this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("command",r=>{let t=r.command;t==="--show-modal"?this.open():(t==="--close"||t==="--confirm")&&this.close()})}async open(){this._isClosing=!1,this.dialogEl.classList.remove("close"),this.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.dialogEl?.open&&(this._isClosing=!0,this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async r=>{r.animationName==="w-modal-out"&&this._isClosing&&(this.dialogEl.classList.remove("close"),this.dialogEl.close(),this._isClosing=!1,m(),this.show=!1,await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0})))},{once:!0}))}render(){return Z`
-      <dialog class="dialog-el">
-        <div class="dialog-inner-el">
-          <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
-          <div class="content-el" id=${this.contentId}>
-            <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
-          </div>
-          <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
-        </div>
-      </dialog>
-    `}updated(r){!r.has("show")||r.get("show")===void 0&&this.show===!1||this[this.show?"open":"close"]()}handleListeners(r="addEventListener"){document[r]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[r]("mousedown",this.closeOnBackdropClick),this.dialogEl[r]("close",this.eventPreventer),this.dialogEl[r]("cancel",this.eventPreventer),this.dialogInnerEl[r]("transitionend",this.modifyBorderRadius)}eventPreventer(r){r.preventDefault()}closeOnBackdropClick(r){this.dialogEl===r.target&&this.close()}interceptEscape(r){r.key==="Escape"&&(r.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};i.styles=[u,X`
-      .dialog-el {
-        --w-modal-translate-distance: 100%;
-        --w-modal-max-height: 80%;
-        --w-modal-width: 640px;
-        background-color: transparent;
-        border-width: 0;
-        align-items: flex-end;
-        inset: 0rem;
-        height: unset;
-        max-height: unset;
-        max-width: unset;
-        width: unset;
-        margin: auto;
-        padding: 0rem;
-        backface-visibility: hidden;
-      }
-      .dialog-inner-el {
-        will-change: height;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        position: relative;
-        background-color: var(--w-s-color-background);
-        color: var(--w-s-color-text);
-        box-shadow: var(--w-shadow-m);
-        height: var(--w-modal-height);
-        max-height: var(--w-modal-max-height);
-        min-height: var(--w-modal-min-height);
-        width: var(--w-modal-width);
-        backface-visibility: hidden;
-        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      }
-      .content-el {
-        display: block;
-        flex-shrink: 1;
-        flex-grow: 1;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        margin-bottom: 0rem;
-        padding-left: 1.6rem;
-        padding-right: 1.6rem;
-      }
-      @media (min-width: 480px) {
-        .dialog-el {
-          --w-modal-translate-distance: 50%;
-          place-content: center;
-          place-items: center;
-        }
-        .dialog-inner-el {
-          margin-left: 1.6rem;
-          margin-right: 1.6rem;
-          padding-bottom: 3.2rem;
-        }
-        .content-el {
-          padding-left: 3.2rem;
-          padding-right: 3.2rem;
-        }
-      }
-      @media (max-width: 479.9px) {
-        .dialog-inner-el {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-      .dialog-el[open] {
-        animation: w-modal-in 0.3s ease-in-out forwards;
-        display: flex;
-        position: fixed;
-      }
-      .dialog-el.close {
-        animation: w-modal-out 0.3s ease-in-out forwards;
-      }
-      .dialog-el[open]::backdrop {
-        animation: backdrop-in 0.3s ease-in-out forwards;
-      }
-      .dialog-el.close::backdrop {
-        animation: backdrop-out 0.3s ease-in-out forwards;
-      }
-      /* shouldn't need two (in/out) animations declared here, but reversing is being weird */
-      @keyframes w-modal-in {
-        from {
-          transform: translateY(var(--w-modal-translate-distance));
-          opacity: 0;
-        }
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      }
-      @keyframes w-modal-out {
-        from {
-          transform: translateY(0);
-          opacity: 1;
-        }
-        to {
-          transform: translateY(var(--w-modal-translate-distance));
-          opacity: 0;
-        }
-      }
-      @keyframes backdrop-in {
-        from {
-          background: transparent;
-        }
-        to {
-          background: rgba(0, 0, 0, 0.25);
-        }
-      }
-      @keyframes backdrop-out {
-        from {
-          background: rgba(0, 0, 0, 0.25);
-        }
-        to {
-          background: transparent;
-        }
-      }
-    `],n([b({type:Boolean})],i.prototype,"show",2),n([b({type:String,attribute:"content-id"})],i.prototype,"contentId",2),n([b({type:Boolean,attribute:"ignore-backdrop-clicks"})],i.prototype,"ignoreBackdropClicks",2),n([p(".dialog-el")],i.prototype,"dialogEl",2),n([p(".dialog-inner-el")],i.prototype,"dialogInnerEl",2),n([p(".content-el")],i.prototype,"contentEl",2);var J=i;customElements.get("w-modal")||customElements.define("w-modal",i);export{J as ModalMain,i as WarpModal};
+			<dialog class="dialog-el">
+				<div class="dialog-inner-el">
+					<slot name="header" @slotchange="${this.handleSlotChange}"></slot>
+					<div class="content-el" id=${this.contentId}>
+						<slot name="content" @slotchange="${this.handleSlotChange}"></slot>
+					</div>
+					<slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
+				</div>
+			</dialog>
+		`}updated(r){!r.has("show")||r.get("show")===void 0&&this.show===!1||this[this.show?"open":"close"]()}handleListeners(r="addEventListener"){document[r]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[r]("mousedown",this.closeOnBackdropClick),this.dialogEl[r]("close",this.eventPreventer),this.dialogEl[r]("cancel",this.eventPreventer),this.dialogInnerEl[r]("transitionend",this.modifyBorderRadius)}eventPreventer(r){r.preventDefault()}closeOnBackdropClick(r){this.dialogEl===r.target&&this.close()}interceptEscape(r){r.key==="Escape"&&(r.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};i.styles=[u,X`
+			.dialog-el {
+				--w-modal-translate-distance: 100%;
+				--w-modal-max-height: 80%;
+				--w-modal-width: 640px;
+				background-color: transparent;
+				border-width: 0;
+				align-items: flex-end;
+				inset: 0rem;
+				height: unset;
+				max-height: unset;
+				max-width: unset;
+				width: unset;
+				margin: auto;
+				padding: 0rem;
+				backface-visibility: hidden;
+			}
+			.dialog-inner-el {
+				will-change: height;
+				border-radius: 8px;
+				display: flex;
+				flex-direction: column;
+				overflow: hidden;
+				position: relative;
+				background-color: var(--w-s-color-background);
+				color: var(--w-s-color-text);
+				box-shadow: var(--w-shadow-m);
+				height: var(--w-modal-height);
+				max-height: var(--w-modal-max-height);
+				min-height: var(--w-modal-min-height);
+				width: var(--w-modal-width);
+				backface-visibility: hidden;
+				padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+				transition-property: all;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+				transition-duration: 150ms;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.content-el {
+				display: block;
+				flex-shrink: 1;
+				flex-grow: 1;
+				overflow-x: hidden;
+				overflow-y: auto;
+				position: relative;
+				margin-bottom: 0rem;
+				padding-left: 1.6rem;
+				padding-right: 1.6rem;
+			}
+			@media (min-width: 480px) {
+				.dialog-el {
+					--w-modal-translate-distance: 50%;
+					place-content: center;
+					place-items: center;
+				}
+				.dialog-inner-el {
+					margin-left: 1.6rem;
+					margin-right: 1.6rem;
+					padding-bottom: 3.2rem;
+				}
+				.content-el {
+					padding-left: 3.2rem;
+					padding-right: 3.2rem;
+				}
+			}
+			@media (max-width: 479.9px) {
+				.dialog-inner-el {
+					border-bottom-left-radius: 0;
+					border-bottom-right-radius: 0;
+				}
+			}
+			.dialog-el[open] {
+				animation: w-modal-in 0.3s ease-in-out forwards;
+				display: flex;
+				position: fixed;
+			}
+			.dialog-el.close {
+				animation: w-modal-out 0.3s ease-in-out forwards;
+			}
+			.dialog-el[open]::backdrop {
+				animation: backdrop-in 0.3s ease-in-out forwards;
+			}
+			.dialog-el.close::backdrop {
+				animation: backdrop-out 0.3s ease-in-out forwards;
+			}
+			/* shouldn't need two (in/out) animations declared here, but reversing is being weird */
+			@keyframes w-modal-in {
+				from {
+					transform: translateY(var(--w-modal-translate-distance));
+					opacity: 0;
+				}
+				to {
+					transform: translateY(0);
+					opacity: 1;
+				}
+			}
+			@keyframes w-modal-out {
+				from {
+					transform: translateY(0);
+					opacity: 1;
+				}
+				to {
+					transform: translateY(var(--w-modal-translate-distance));
+					opacity: 0;
+				}
+			}
+			@keyframes backdrop-in {
+				from {
+					background: transparent;
+				}
+				to {
+					background: rgba(0, 0, 0, 0.25);
+				}
+			}
+			@keyframes backdrop-out {
+				from {
+					background: rgba(0, 0, 0, 0.25);
+				}
+				to {
+					background: transparent;
+				}
+			}
+		`],n([b({type:Boolean})],i.prototype,"show",2),n([b({type:String,attribute:"content-id"})],i.prototype,"contentId",2),n([b({type:Boolean,attribute:"ignore-backdrop-clicks"})],i.prototype,"ignoreBackdropClicks",2),n([p(".dialog-el")],i.prototype,"dialogEl",2),n([p(".dialog-inner-el")],i.prototype,"dialogInnerEl",2),n([p(".content-el")],i.prototype,"contentEl",2);var J=i;customElements.get("w-modal")||customElements.define("w-modal",i);export{J as ModalMain,i as WarpModal};
 //# sourceMappingURL=modal.js.map