@warp-ds/elements 2.2.0-next.4 → 2.2.0-next.6

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

@@ -1,14 +1,21 @@
-declare const ModalFooter_base: {
-    new (): {
-        [x: string]: any;
-        patchClose: boolean;
-        _close: any;
-        close(): void;
-    };
-    [x: string]: any;
-};
+import { LitElement } from 'lit';
+declare const ModalFooter_base: import("./util").Constructor<{
+    close: () => void;
+}> & import("./util").Constructor<{
+    handleSlotChange: (evt: Event) => void;
+}> & typeof LitElement;
+/**
+ * The footer section of a modal, typically where you place actions.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
+ */
 export declare class ModalFooter extends ModalFooter_base {
     render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-modal-footer': ModalFooter;
+    }
 }
 export {};

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

@@ -1,29 +1,36 @@
-import { nothing, PropertyValues } from 'lit';
+import { LitElement, nothing, PropertyValues } from 'lit';
 import '@warp-ds/icons/elements/arrow-left-16';
 import '@warp-ds/icons/elements/close-16';
-declare const ModalHeader_base: {
-    new (): {
-        [x: string]: any;
-        patchClose: boolean;
-        _close: any;
-        close(): void;
-    };
-    [x: string]: any;
-};
+declare const ModalHeader_base: import("./util.js").Constructor<{
+    close: () => void;
+}> & typeof LitElement;
+/**
+ * The header section of a modal, typically where you place the title and a close button.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
+ *
+ * @slot top - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
+ */
 export declare class ModalHeader extends ModalHeader_base {
     title: string;
     back: boolean;
     noClose: boolean;
+    /** @internal */
     private _hasTopContent;
     titleEl: HTMLElement;
     constructor();
     render(): import("lit").TemplateResult<1>;
     willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
     get titleClasses(): string;
-    get backButton(): typeof nothing | import("lit").TemplateResult<1>;
-    get closeButton(): typeof nothing | import("lit").TemplateResult<1>;
+    get backButton(): import("lit").TemplateResult<1> | typeof nothing;
+    get closeButton(): import("lit").TemplateResult<1> | typeof nothing;
     emitBack(): void;
     handleTopSlotChange(slotEvent: any): void;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-modal-header': ModalHeader;
+    }
 }
 export {};

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

@@ -1,10 +1,16 @@
-declare const ModalMain_base: {
-    new (): {
-        [x: string]: any;
-        handleSlotChange(evt: Event): void;
-    };
-    [x: string]: any;
-};
+import { LitElement } from 'lit';
+declare const ModalMain_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 {
     show: boolean;
     contentId: string;
@@ -24,4 +30,9 @@ export declare class ModalMain extends ModalMain_base {
     modifyBorderRadius(): void;
     static styles: import("lit").CSSResult[];
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-modal': ModalMain;
+    }
+}
 export {};

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpModal, WarpModalHeader, WarpModalFooter } from './index.ts';
+import './index.ts';
+declare const modalArgs: Partial<WarpModal> & {
+    [key: string]: any;
+};
+declare const modalHeaderArgs: Partial<WarpModalHeader> & {
+    [key: string]: any;
+};
+declare const modalFooterArgs: Partial<WarpModalFooter> & {
+    [key: string]: any;
+};
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const WithImage: StoryObj;
+export declare const Modal: StoryObj<typeof modalArgs>;
+export declare const ModalHeader: StoryObj<typeof modalHeaderArgs>;
+export declare const ModalFooter: StoryObj<typeof modalFooterArgs>;

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

@@ -0,0 +1,4 @@
+import { WarpModal, WarpModalFooter, WarpModalHeader } from './index.js';
+export declare const Modal: import("@lit/react").ReactWebComponent<WarpModal, {}>;
+export declare const ModalHeader: import("@lit/react").ReactWebComponent<WarpModalHeader, {}>;
+export declare const ModalFooter: import("@lit/react").ReactWebComponent<WarpModalFooter, {}>;