@warp-ds/elements 2.9.1 → 2.10.0-next.1

package/dist/packages/button/button.react.stories.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WarpButton } from './button.js';
-export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
     fullWidth?: boolean;
     iconOnly?: boolean;
 } & React.RefAttributes<WarpButton>>;

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

@@ -1,8 +1,8 @@
 import './modal.js';
 import '../modal-header/modal-header.js';
 import '../modal-footer/modal-footer.js';
-import { ModalFooter } from '../modal-footer/modal-footer.js';
-import { ModalHeader } from '../modal-header/modal-header.js';
-import { ModalMain } from './modal.js';
+import { WarpModalFooter } from '../modal-footer/modal-footer.js';
+import { WarpModalHeader } from '../modal-header/modal-header.js';
+import { WarpModal } from './modal.js';
 import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from './util.js';
-export { ModalMain as WarpModal, ModalHeader as WarpModalHeader, ModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };
+export { WarpModal as WarpModal, WarpModalHeader as WarpModalHeader, WarpModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };

package/dist/packages/modal/index.js

@@ -3,8 +3,8 @@ import './modal.js';
 import '../modal-header/modal-header.js';
 import '../modal-footer/modal-footer.js';
 // Re-exports for backward compatibility
-import { ModalFooter } from '../modal-footer/modal-footer.js';
-import { ModalHeader } from '../modal-header/modal-header.js';
-import { ModalMain } from './modal.js';
+import { WarpModalFooter } from '../modal-footer/modal-footer.js';
+import { WarpModalHeader } from '../modal-header/modal-header.js';
+import { WarpModal } from './modal.js';
 import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from './util.js';
-export { ModalMain as WarpModal, ModalHeader as WarpModalHeader, ModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };
+export { WarpModal as WarpModal, WarpModalHeader as WarpModalHeader, WarpModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };

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

@@ -1,33 +1,42 @@
 import { LitElement } from 'lit';
-declare const ModalMain_base: import("./util.js").Constructor<{
+declare const WarpModal_base: import("./util.js").Constructor<{
     handleSlotChange: (evt: Event) => void;
 }> & typeof LitElement;
 /**
  * Modals (or dialogs) display important information that users need to acknowledge.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
- *
  * @slot header - Typically where you would use the `w-modal-header` component.
  * @slot content - The main content of the modal.
  * @slot footer - Typically where you would use the `w-modal-footer` component, for things like actions.
  */
-export declare class ModalMain extends ModalMain_base {
+export declare class WarpModal extends WarpModal_base {
+    /**
+     * Controls if the modal should show or hide.
+     *
+     * You can also call the `open()` and `close()` methods.
+     */
     show: boolean;
     contentId: string;
+    /**
+     * Ignores clicks to the backdrop when set
+     */
     ignoreBackdropClicks: boolean;
-    dialogEl: HTMLDialogElement;
-    dialogInnerEl: HTMLElement;
-    contentEl: HTMLElement;
+    private dialogEl;
+    private dialogInnerEl;
+    private contentEl;
     constructor();
+    connectedCallback(): void;
     open(): Promise<void>;
     close(): void;
     render(): import("lit").TemplateResult<1>;
     updated(changedProperties: Map<string, unknown>): void;
-    handleListeners(verb?: string): void;
-    eventPreventer(evt: Event): void;
-    closeOnBackdropClick(evt: MouseEvent): void;
-    interceptEscape(evt: KeyboardEvent): void;
-    modifyBorderRadius(): void;
+    private handleListeners;
+    private eventPreventer;
+    private closeOnBackdropClick;
+    private interceptEscape;
+    private modifyBorderRadius;
     static styles: import("lit").CSSResult[];
 }
+/** @deprecated Exported for backwards compatibility. Use WarpModal. */
+export declare const ModalMain: typeof WarpModal;
 export {};

package/dist/packages/modal/modal.js

@@ -1,4 +1,4 @@
-var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t)=>{for(var a=t>1?void 0:t?k(o,r):o,l=e.length-1,s;l>=0;l--)(s=e[l])&&(a=(t?s(o,r,a):s(a))||a);return t&&a&&x(o,r,a),a};import{css as X,html as Z,LitElement as _}from"lit";import{property as b,query as p}from"lit/decorators.js";var d=[],c={documentElement:{},body:{}},y=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{var o;e.touches.length>1||((o=e.preventDefault)==null||o.call(e))},z=e=>([o,r])=>{c[e][o]=document[e].style[o],document[e].style[o]=r},E=()=>Object.entries(y).forEach(([e,o])=>{Object.entries(o).forEach(z(e))}),C=e=>([o,r])=>{document[e].style[o]=c[e][o]},Y=()=>Object.entries(c).forEach(([e,o])=>{Object.entries(o).forEach(C(e))}),T=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function j(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||T(e)&&a<0?g(t):(t.stopPropagation(),!0)};e.ontouchstart=t=>{t.targetTouches.length===1&&(o=t.targetTouches[0].clientY)},e.ontouchmove=r}function L(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),B=h(!0),S=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(o=>o===e)||(d.length||(E(),B()),j(e),d.push(e))}function u(){d.forEach(L),S(),Y(),d=[]}import{css as m}from"lit";var w=m`
+var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t)=>{for(var a=t>1?void 0:t?k(o,r):o,l=e.length-1,s;l>=0;l--)(s=e[l])&&(a=(t?s(o,r,a):s(a))||a);return t&&a&&x(o,r,a),a};import{css as X,html as Z,LitElement as _}from"lit";import{property as b,query as p}from"lit/decorators.js";var d=[],c={documentElement:{},body:{}},y=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{var o;e.touches.length>1||((o=e.preventDefault)==null||o.call(e))},z=e=>([o,r])=>{c[e][o]=document[e].style[o],document[e].style[o]=r},E=()=>Object.entries(y).forEach(([e,o])=>{Object.entries(o).forEach(z(e))}),C=e=>([o,r])=>{document[e].style[o]=c[e][o]},Y=()=>Object.entries(c).forEach(([e,o])=>{Object.entries(o).forEach(C(e))}),T=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function j(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||T(e)&&a<0?g(t):(t.stopPropagation(),!0)};e.ontouchstart=t=>{t.targetTouches.length===1&&(o=t.targetTouches[0].clientY)},e.ontouchmove=r}function L(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),B=h(!0),S=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(o=>o===e)||(d.length||(E(),B()),j(e),d.push(e))}function m(){d.forEach(L),S(),Y(),d=[]}import{css as u}from"lit";var w=u`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
   svg {
     pointer-events: none;
   }
-`,I=m`*, :before, :after {
+`,R=u`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
                     display: none
                 }
             }
-        `;var f=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 f(_){constructor(){super();this.show=!1;this.ignoreBackdropClicks=!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)}async open(){this.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){var r;(r=this.dialogEl)!=null&&r.open&&(this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),u(),await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0}))},{once:!0}))}render(){return Z`
+        `;var f=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 f(_){constructor(){super();this.show=!1;this.ignoreBackdropClicks=!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.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){var r;(r=this.dialogEl)!=null&&r.open&&(this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),m(),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>
@@ -2569,5 +2569,5 @@ var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
           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);customElements.get("w-modal")||customElements.define("w-modal",i);export{i as ModalMain};
+    `],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 A=i;customElements.get("w-modal")||customElements.define("w-modal",i);export{A as ModalMain,i as WarpModal};
 //# sourceMappingURL=modal.js.map