@warp-ds/elements 2.11.0-next.1 → 2.12.0-next.1

package/dist/packages/modal/react.js

@@ -34,13 +34,13 @@ const BaseModal = createComponent({
  *       Open modal
  *     </Button>
  *     <Modal show={open} id="example-modal-one" onHidden={() => setOpen(false)} onShown={() => setOpen(true)}>
- *       <ModalHeader slot="header" title="An example modal" />
- *       <div slot="content">
+ *       <ModalHeader title="An example modal" />
+ *       <ModalContent>
  *         <p>
  *           <!-- modal content -->
  *         </p>
- *       </div>
- *       <ModalFooter slot="footer">
+ *       </ModalContent>
+ *       <ModalFooter>
  *         <Button variant="primary" id="modal-close-button-one" onClick={() => setOpen(false)}>
  *           OK
  *         </Button>
@@ -57,3 +57,9 @@ export const Modal = React.forwardRef(({ contentId, ignoreBackdropClicks, ...pro
     ref,
 }));
 Modal.displayName = "Modal";
+/**
+ * Convenience component to get a root element in the content slot of the modal.
+ */
+export const ModalContent = ({ ...props }) => {
+    return React.createElement("div", { slot: "content", ...props });
+};

package/dist/packages/modal/styles.js

@@ -22,6 +22,10 @@ export const styles = css `
 			var(--w-modal-min-heigh)
 				/* --w-modal-min-height kept for backwards compat */
 		);
+		--_padding-bottom: var(
+			--w-c-modal-padding-bottom,
+			calc(32px + env(safe-area-inset-bottom, 0px))
+		);
 		--_translate-distance: var(
 			--w-c-modal-translate-distance,
 			var(--w-modal-translate-distance, 100%)
@@ -67,7 +71,7 @@ export const styles = css `
 		min-height: var(--_min-height);
 		width: var(--_width);
 		backface-visibility: hidden;
-		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+		padding-bottom: var(--_padding-bottom);
 		transition-property: all;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 		transition-duration: 150ms;

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

@@ -1,7 +1,8 @@
+import React from "react";
 import type { WarpModalFooter } from "./modal-footer.js";
 /**
  * The footer section of a modal, typically where you place actions.
  *
  * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
  */
-export declare const ModalFooter: import("@lit/react").ReactWebComponent<WarpModalFooter, {}>;
+export declare const ModalFooter: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<WarpModalFooter>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "close" | "handleSlotChange"> & {} & Partial<Omit<WarpModalFooter, keyof HTMLElement>> & React.RefAttributes<WarpModalFooter>, "ref"> & React.RefAttributes<WarpModalFooter>>;

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

@@ -4,13 +4,19 @@ import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
+const BaseModalFooter = createComponent({
+    tagName: "w-modal-footer",
+    elementClass: Component,
+    react: React,
+});
 /**
  * The footer section of a modal, typically where you place actions.
  *
  * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
  */
-export const ModalFooter = createComponent({
-    tagName: "w-modal-footer",
-    elementClass: Component,
-    react: React,
-});
+export const ModalFooter = React.forwardRef(({ ...props }, ref) => React.createElement(BaseModalFooter, {
+    slot: "footer",
+    ...props,
+    ref,
+}));
+ModalFooter.displayName = "ModalFooter";

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

@@ -19,6 +19,7 @@ const BaseModalHeader = createComponent({
  * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
  */
 export const ModalHeader = React.forwardRef(({ noClose, ...props }, ref) => React.createElement(BaseModalHeader, {
+    slot: "header",
     ...props,
     ...(noClose ? { "no-close": true } : {}),
     ref,

package/dist/packages/select/select.js

@@ -2445,7 +2445,7 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `);var De=JSON.parse('{"select.label.optional":["Valgfri"]}');var Ae=JSON.parse('{"select.label.optional":["Optional"]}');var Ne=JSON.parse('{"select.label.optional":["Valinnainen"]}');var je=JSON.parse('{"select.label.optional":["Valgfri"]}');var Ye=JSON.parse('{"select.label.optional":["Valfritt"]}');import{unsafeCSS as mr}from"lit";var Re=mr("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.flex{display:flex}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none,.before\\:pointer-events-none:before{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}");import{css as Ie}from"lit";var He=Ie`
+        `);var De=JSON.parse('{"select.label.optional":["Valgfri"]}');var Ae=JSON.parse('{"select.label.optional":["Optional"]}');var Ne=JSON.parse('{"select.label.optional":["Valinnainen"]}');var je=JSON.parse('{"select.label.optional":["Valgfri"]}');var Ye=JSON.parse('{"select.label.optional":["Valfritt"]}');import{unsafeCSS as mr}from"lit";var Re=mr("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.inline{display:inline}.flex{display:flex}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.pointer-events-none,.before\\:pointer-events-none:before{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}");import{css as Ie}from"lit";var He=Ie`
 	/* Label component tokens with semantic fallbacks */
 	label {
 		/* Internal tokens - not part of public API */