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

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

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

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

@@ -0,0 +1,96 @@
+import { css } from "lit";
+export const styles = css `
+	:host {
+		--_font-size: var(--w-c-modal-header-font-size, var(--w-font-size-l));
+		--_line-height: var(--w-c-modal-header-line-height, var(--w-line-height-l));
+		--_title-margin: 0 0 6px 0;
+		--_title-padding: 22px 0 0 16px;
+		--_close-button-top: 14px;
+		--_close-button-right: 0px;
+		--_header-margin-bottom: var(--w-c-modal-header-margin-bottom, 8px);
+	}
+
+	@media (min-width: 480px) {
+		:host {
+			--_title-padding: 22px 0 0 32px;
+			--_close-button-right: 14px;
+		}
+	}
+
+	[part="header"] {
+		display: grid;
+		grid-template:
+			"top top top"
+			"title title title";
+		margin-bottom: var(--_header-margin-bottom);
+	}
+
+	[part="header"][show-back]:not([show-close]) {
+		grid-template:
+			"top top top"
+			"back title title";
+	}
+
+	[part="header"][show-close]:not([show-back]) {
+		grid-template:
+			"top top top"
+			"title title close";
+	}
+
+	[part="header"][show-back][show-close] {
+		grid-template:
+			"top top top"
+			"back title close" / 44px 1fr 44px;
+	}
+
+	[part="top"]::slotted(*) {
+		grid-area: top;
+	}
+
+	[part="title"] {
+		grid-area: title;
+
+		margin: var(--_title-margin);
+		padding: var(--_title-padding);
+
+		/* t3 */
+		font-weight: 700;
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+	}
+
+	[part="header"][show-back] [part="title"] {
+		text-align: center;
+	}
+
+	[part="back"] {
+		grid-area: back;
+
+		margin-block-end: -2px; /* align the touch target with the close button which is _slightly_ lower than the title */
+		padding-block-start: 14px; /* same vertical position as the close button */
+		padding-inline-start: 18px; /* 32px (left padding of title) - 14px (left padding of button) so icon aligns with text */
+	}
+
+	[part="header"][show-back] [part="title"] {
+		padding-inline-start: 0;
+	}
+
+	[part="close"] {
+		grid-area: close;
+
+		position: absolute; /* so we can place it on top of the [part="top"] image */
+		top: var(--_close-button-top);
+		right: var(--_close-button-right);
+	}
+
+	[part="header"][show-top] [part="close"] {
+		/* Invert the button colors on images */
+		--w-c-button-color: var(--w-s-color-icon-inverted-static);
+		--w-c-button-color-hover: var(--w-s-color-icon-inverted-static);
+		--w-c-button-color-active: var(--w-s-color-icon-inverted-static);
+
+		--w-c-button-bg: rgba(var(--w-rgb-black), 0.7);
+		--w-c-button-bg-hover: rgba(var(--w-rgb-black), 0.85);
+		--w-c-button-bg-active: rgba(var(--w-rgb-black), 1);
+	}
+`;

package/dist/packages/textarea/react.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { WarpTextarea } from "./textarea.js";
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "setCustomValidity" | "maxRows" | "minRows" | "_textareaStyles"> & {
     onBlur?: ((e: Event) => void) | undefined;
     onblur?: ((e: Event) => void) | undefined;
     onChange?: ((e: Event) => void) | undefined;

package/dist/packages/textarea/textarea.d.ts

@@ -87,10 +87,8 @@ declare class WarpTextarea extends WarpTextarea_base {
      * Show an icon behind the label indicating the field is optional
      */
     optional: boolean;
-    /** @internal */
-    minHeight: number;
-    /** @internal */
-    maxHeight: number;
+    private minHeight;
+    private maxHeight;
     private _textarea;
     constructor();
     updated(changedProperties: PropertyValues<this>): void;