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

package/dist/packages/modal/modal.stories.js

@@ -2,6 +2,7 @@ import { spread } from "@open-wc/lit-helpers";
 import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
 import { html } from "lit";
 import { prespread } from "../../.storybook/utilities.js";
+import "../button/button.js";
 import "./modal.js";
 import "../modal-header/modal-header.js";
 import "../modal-footer/modal-footer.js";
@@ -13,25 +14,26 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    args: {},
-    render() {
+    args: {
+        show: false,
+        back: false,
+        noClose: false,
+    },
+    render({ show, back, noClose }) {
         return html `
-			<w-button id="modal-open-button-one" aria-haspopup="dialog"
-				>Open a modal</w-button
-			>
-			<w-modal id="example-modal-one">
+			<w-button id="modal-open-button-one" aria-haspopup="dialog">
+				Open a modal
+			</w-button>
+			<w-modal id="example-modal-one" ?show="${show}">
 				<w-modal-header
 					id="modal-header-one"
 					slot="header"
 					title="An example modal"
+					?back="${back}"
+					?no-close="${noClose}"
 				></w-modal-header>
 				<div slot="content">
-					<h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
-					<div style="margin-bottom: 12px">
-						<w-button id="modal-toggle-back-one" variant="utility" small
-							>Toggle back button</w-button
-						>
-					</div>
+					<p class="t4">Triumph by Wu Tang Clan</p>
 					<p>
 						I bomb atomically, Socrates' philosophies and hypotheses Can't
 						define how I be droppin' these mockeries Lyrically perform armed
@@ -87,14 +89,12 @@ export const Default = {
 					</p>
 				</div>
 				<w-modal-footer slot="footer">
-					<div class="flex gap-16">
-						<w-button variant="secondary" id="modal-close-button-cancel"
-							>Cancel</w-button
-						>
-						<w-button variant="primary" id="modal-close-button-one"
-							>Confirm</w-button
-						>
-					</div>
+					<w-button variant="secondary" id="modal-close-button-cancel">
+						Cancel
+					</w-button>
+					<w-button variant="primary" id="modal-close-button-one">
+						Confirm
+					</w-button>
 				</w-modal-footer>
 			</w-modal>
 		`;
@@ -108,10 +108,8 @@ export const Default = {
         ]);
         const openButton = canvasElement.querySelector("#modal-open-button-one");
         const closeButton = canvasElement.querySelector("#modal-close-button-one");
-        const toggleBackButton = canvasElement.querySelector("#modal-toggle-back-one");
         const cancelButton = canvasElement.querySelector("#modal-close-button-cancel");
         const modal = canvasElement.querySelector("#example-modal-one");
-        const modalHeader = canvasElement.querySelector("#modal-header-one");
         if (openButton && modal) {
             openButton.addEventListener("click", () => modal.open());
         }
@@ -121,11 +119,6 @@ export const Default = {
         if (cancelButton && modal) {
             cancelButton.addEventListener("click", () => modal.close());
         }
-        if (toggleBackButton && modalHeader) {
-            toggleBackButton.addEventListener("click", () => {
-                modalHeader.back = !modalHeader.back;
-            });
-        }
     },
     parameters: {
         docs: {
@@ -136,8 +129,12 @@ export const Default = {
     },
 };
 export const InvokerCommands = {
-    args: {},
-    render() {
+    args: {
+        show: false,
+        back: false,
+        noClose: false,
+    },
+    render({ show, back, noClose }) {
         return html `
 			<w-button
 				commandfor="invoker-modal"
@@ -145,14 +142,16 @@ export const InvokerCommands = {
 				aria-haspopup="dialog"
 				>Open a modal</w-button
 			>
-			<w-modal id="invoker-modal">
+			<w-modal id="invoker-modal" ?show="${show}">
 				<w-modal-header
 					id="modal-header-one"
 					slot="header"
 					title="An example modal"
+					?back="${back}"
+					?no-close="${noClose}"
 				></w-modal-header>
 				<div slot="content">
-					<h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
+					<p class="t4">Triumph by Wu Tang Clan</p>
 					<p>
 						I bomb atomically, Socrates' philosophies and hypotheses Can't
 						define how I be droppin' these mockeries Lyrically perform armed
@@ -230,17 +229,21 @@ export const InvokerCommands = {
     },
 };
 export const WithImage = {
-    args: {},
-    render() {
+    args: {
+        show: false,
+        noClose: false,
+    },
+    render({ show, noClose }) {
         return html `
 			<w-button id="modal-open-button-two" aria-haspopup="dialog"
 				>Open a modal</w-button
 			>
-			<w-modal
-				id="example-modal-two"
-				style="--w-s-color-icon: var(--w-s-color-icon-inverted)"
-			>
-				<w-modal-header slot="header" title="Look a doggo!">
+			<w-modal id="example-modal-two" ?show="${show}">
+				<w-modal-header
+					slot="header"
+					title="Look a doggo!"
+					?no-close="${noClose}"
+				>
 					<img
 						slot="top"
 						style="height: 256px; width: 100%; object-fit: cover;"

package/dist/packages/modal/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/modal/styles.js

@@ -0,0 +1,171 @@
+import { css } from "lit";
+export const styles = css `
+	:host {
+		--_backdrop-bg: var(
+			--w-c-modal-backdrop-color,
+			light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75))
+		);
+		--_background-color: var(--w-c-modal-bg, var(--w-s-color-background));
+		--_box-shadow: var(--w-c-modal-box-shadow, var(--w-shadow-l));
+		--_color: var(--w-c-modal-color, var(--w-s-color-text));
+		--_height: var(
+			--w-c-modal-height,
+			var(--w-modal-height) /* --w-modal-height kept for backwards compat */
+		);
+		--_max-height: var(
+			--w-c-modal-max-height,
+			var(--w-modal-max-height, 80%)
+				/* --w-modal-max-height kept for backwards compat */
+		);
+		--_min-height: var(
+			--w-c-modal-min-height,
+			var(--w-modal-min-heigh)
+				/* --w-modal-min-height kept for backwards compat */
+		);
+		--_translate-distance: var(
+			--w-c-modal-translate-distance,
+			var(--w-modal-translate-distance, 100%)
+				/* --w-modal-translate-distance kept for backwards compat */
+		);
+		--_width: var(
+			--w-c-modal-width,
+			var(--w-modal-width, 640px)
+				/* --w-modal-width kept for backwards compat */
+		);
+	}
+
+	[part="dialog"] {
+		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;
+	}
+
+	[part="dialog"]::backdrop {
+		background: var(--_backdrop-bg);
+	}
+
+	[part="wrapper"] {
+		will-change: height;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+		background-color: var(--_background-color);
+		color: var(--_color);
+		box-shadow: var(--_box-shadow);
+		height: var(--_height);
+		max-height: var(--_max-height);
+		min-height: var(--_min-height);
+		width: var(--_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);
+	}
+
+	[part="content"] {
+		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) {
+		[part="dialog"] {
+			--w-c-modal-translate-distance: 50%;
+			place-content: center;
+			place-items: center;
+		}
+		[part="wrapper"] {
+			margin-left: 1.6rem;
+			margin-right: 1.6rem;
+			padding-bottom: 3.2rem;
+		}
+		[part="content"] {
+			padding-left: 3.2rem;
+			padding-right: 3.2rem;
+		}
+	}
+
+	@media (max-width: 479.9px) {
+		[part="wrapper"] {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	[part="dialog"][open] {
+		animation: w-modal-in 0.3s ease-in-out forwards;
+		display: flex;
+		position: fixed;
+	}
+
+	[part="dialog"].close {
+		animation: w-modal-out 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"][open]::backdrop {
+		animation: backdrop-in 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"].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(--_translate-distance));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@keyframes w-modal-out {
+		from {
+			transform: translateY(0);
+			opacity: 1;
+		}
+		to {
+			transform: translateY(var(--_translate-distance));
+			opacity: 0;
+		}
+	}
+
+	@keyframes backdrop-in {
+		from {
+			background: transparent;
+		}
+		to {
+			background: var(--_backdrop-bg);
+		}
+	}
+
+	@keyframes backdrop-out {
+		from {
+			background: var(--_backdrop-bg);
+		}
+		to {
+			background: transparent;
+		}
+	}
+`;

package/dist/packages/modal-footer/modal-footer.d.ts

@@ -8,10 +8,14 @@ declare const WarpModalFooter_base: import("../modal/util.js").Constructor<{
  * The footer section of a modal, typically where you place actions.
  *
  * @parent w-modal
+ *
+ * @csspart footer - the container for slotted items (children).
+ *
+ * @cssprop --w-c-modal-footer-gap -  adjusts the flex gap between actions in the footer.
  */
 export declare class WarpModalFooter extends WarpModalFooter_base {
-    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
 }
 /** @deprecated Exported for backwards compatibility. Use WarpModalFooter. */
 export declare const ModalFooter: typeof WarpModalFooter;

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

@@ -1,4 +1,4 @@
-import{css as b,html as p,LitElement as g}from"lit";var t=e=>class extends e{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}},a=e=>class extends e{handleSlotChange(o){let n=o.target.assignedNodes({flatten:!0});for(let d of n.filter(l=>l.patchClose))d._close=()=>this.close()}};import{css as c}from"lit";import{unsafeCSS as s}from"lit";var i=c`
+import{html as g,LitElement as v}from"lit";var t=e=>class extends e{constructor(){super(...arguments);this.patchClose=!0;this._close=null}close(){this._close()}},a=e=>class extends e{handleSlotChange(o){let d=o.target.assignedNodes({flatten:!0});for(let l of d.filter(c=>c.patchClose))l._close=()=>this.close()}};import{css as s}from"lit";import{unsafeCSS as b}from"lit";var i=s`
 	*,
 	:before,
 	:after {
@@ -271,7 +271,7 @@ import{css as b,html as p,LitElement as g}from"lit";var t=e=>class extends e{con
 	svg {
 		pointer-events: none;
 	}
-`,f=s(`*, :before, :after {
+`,x=b(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,24 +2437,27 @@ import{css as b,html as p,LitElement as g}from"lit";var t=e=>class extends e{con
                     display: none
                 }
             }
-        `);var r=class extends t(a(g)){render(){return p`
-			<div class="footer">
-				<slot @slotchange="${this.handleSlotChange}"></slot>
-			</div>
-		`}};r.styles=[i,b`
-			.footer {
-				display: flex;
-				flex-shrink: 0;
-				justify-content: flex-end;
-				padding-left: 1.6rem;
-				padding-right: 1.6rem;
-				padding-top: 2.4rem;
-			}
-			@media (min-width: 480px) {
-				.footer {
-					padding-left: 3.2rem;
-					padding-right: 3.2rem;
-				}
-			}
-		`];var Y=r;customElements.get("w-modal-footer")||customElements.define("w-modal-footer",r);export{Y as ModalFooter,r as WarpModalFooter};
+        `);import{css as p}from"lit";var n=p`
+	:host {
+		--_gap: var(--w-c-modal-footer-gap, 8px);
+	}
+
+	[part="footer"] {
+		display: flex;
+		justify-content: flex-end;
+		padding-left: 1.6rem;
+		padding-right: 1.6rem;
+		padding-top: 2.4rem;
+		gap: var(--_gap);
+	}
+
+	@media (min-width: 480px) {
+		[part="footer"] {
+			padding-left: 3.2rem;
+			padding-right: 3.2rem;
+		}
+	}
+`;var r=class extends t(a(v)){render(){return g`
+			<slot part="footer" @slotchange="${this.handleSlotChange}"></slot>
+		`}};r.styles=[i,n];var _=r;customElements.get("w-modal-footer")||customElements.define("w-modal-footer",r);export{_ as ModalFooter,r as WarpModalFooter};
 //# sourceMappingURL=modal-footer.js.map