@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.20

package/dist/packages/toast/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"toast.aria.error\":[\"Fejl\"],\"toast.aria.successful\":[\"Fuldført\"],\"toast.aria.warning\":[\"Advarsel\"]}");

package/dist/packages/toast/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"toast.aria.error\":[\"Error\"],\"toast.aria.successful\":[\"Successful\"],\"toast.aria.warning\":[\"Warning\"]}");

package/dist/packages/toast/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"toast.aria.error\":[\"Virhe\"],\"toast.aria.successful\":[\"Onnistui\"],\"toast.aria.warning\":[\"Varoitus\"]}");

package/dist/packages/toast/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"toast.aria.error\":[\"Feil\"],\"toast.aria.successful\":[\"Vellykket\"],\"toast.aria.warning\":[\"Advarsel\"]}");

package/dist/packages/toast/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"toast.aria.error\":[\"Fel\"],\"toast.aria.successful\":[\"Genomfört\"],\"toast.aria.warning\":[\"Varning\"]}");

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

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

package/dist/packages/toast/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,: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}.bg-transparent{background-color:#0000}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.grid{display:grid}.shrink-0{flex-shrink:0}.auto-rows-auto{grid-auto-rows:auto}.overflow-hidden{overflow:hidden}.self-center{align-self:center}.bottom-16{bottom:1.6rem}.left-0{left:0}.right-0{right:0}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.fixed{position:fixed}.relative{position:relative}.static{position:static}.z-50{z-index:50}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.w-full{width:100%}.h-\\[16px\\]{height:16px}.w-\\[16px\\]{width:16px}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-auto{margin-left:auto}.mr-8{margin-right:.8rem}.mt-16{margin-top:1.6rem}.m-\\[8px\\]{margin:8px}.p-8{padding:.8rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.p-\\[8px\\]{padding:8px}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.translate-z-0{--w-translate-z:0rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:mx-16{margin-left:1.6rem;margin-right:1.6rem}}`;

package/dist/packages/toast/toast-container.d.ts

@@ -1,67 +1,16 @@
-/**
- * Toast helper function options
- * @typedef    {Object}                               ToastOptions
- * @property   {(number|string)}                      [id]        Custom identifier
- * @property   {('success'|'error'|'warning')}        [type]      Type of alert
- * @property   {String}                               [text]      The toast message. Only needed when updating text on existing toast
- * @property   {(number|string)}                      [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
- * @property   {Boolean}                              [canClose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.
- */
-export class WarpToastContainer {
-    static styles: any[];
-    static properties: {
-        _toasts: {
-            state: boolean;
-        };
-    };
-    static init(): Element;
-    _toasts: Map<any, any>;
+import { LitElement } from 'lit';
+import type { ToastOptions, ToastInternal } from './types';
+export declare class WarpToastContainer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _toasts;
+    private _interval;
     connectedCallback(): void;
-    _interval: NodeJS.Timeout;
     disconnectedCallback(): void;
-    get _toastsArray(): any[];
-    /**
-     *
-     * @param {String|Number} id
-     * @returns {ToastOptions}
-     */
-    get(id: string | number): ToastOptions;
-    /**
-     *
-     * @param {Object} toast
-     * @returns {WarpToastContainer}
-     */
-    set(toast: any): WarpToastContainer;
-    /**
-     *
-     * @param {String|Number} id
-     * @returns {ToastOptions | false}
-     */
-    del(id: string | number): ToastOptions | false;
+    static init(): Element;
+    /** @internal */
+    get _toastsArray(): ToastInternal[];
+    get(id: string | number): ToastInternal | undefined;
+    set(toast: ToastOptions): Map<string | number, ToastInternal>;
+    del(id: string | number): Promise<boolean>;
     render(): import("lit").TemplateResult<1>;
 }
-/**
- * Toast helper function options
- */
-export type ToastOptions = {
-    /**
-     * Custom identifier
-     */
-    id?: (number | string);
-    /**
-     * Type of alert
-     */
-    type?: ("success" | "error" | "warning");
-    /**
-     * The toast message. Only needed when updating text on existing toast
-     */
-    text?: string;
-    /**
-     * Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
-     */
-    duration?: (number | string);
-    /**
-     * Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.
-     */
-    canClose?: boolean;
-};

package/dist/packages/toast/toast-container.js

@@ -0,0 +1,153 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// @warp-css;
+import { css, html, LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { reset } from '../styles';
+import { styles } from './styles';
+/**
+ * You should probably not include this component in HTML markup.
+ *
+ * As long as the element definition is imported in your application you can use the toast JS API to create toasts.
+ *
+ * ```js
+ * import from '@warp-ds/elements/components/toast';
+ * import { toast, removeToast, updateToast } from '@warp-ds/elements/toast';
+ * ```
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-toast--docs)
+ *
+ * @internal
+ */
+// all class objects have to be in this file when generating
+const ccToastContainer = {
+    wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
+    base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
+    content: 'w-full',
+};
+export class WarpToastContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._toasts = new Map();
+    }
+    static { this.styles = [
+        reset,
+        styles,
+        css `
+      :host {
+        display: block;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // regularly check if any toasts have expired
+        this._interval = setInterval(() => {
+            // sort toasts into keep and remove
+            const keep = [];
+            const remove = [];
+            for (const toast of this._toasts) {
+                if (Date.now() <= toast[1].duration)
+                    keep.push(toast);
+                else
+                    remove.push(toast);
+            }
+            // collapse toasts that will be removed
+            const collapseTasks = [];
+            for (const [id] of remove) {
+                const el = this.renderRoot.querySelector(`#${id}`);
+                collapseTasks.push(el.collapse());
+            }
+            // once all toasts that should be removed have been collapsed, remove them from the map
+            Promise.all(collapseTasks).then(() => {
+                if (keep.length !== this._toasts.size) {
+                    this._toasts = new Map(keep);
+                }
+            });
+        }, 500);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._interval) {
+            clearTimeout(this._interval);
+        }
+    }
+    static init() {
+        let el = document.querySelector('w-toast-container');
+        if (!el) {
+            el = document.createElement('w-toast-container');
+            document.body.appendChild(el);
+        }
+        return el;
+    }
+    /** @internal */
+    get _toastsArray() {
+        return Array.from(this._toasts).map(([, toast]) => toast);
+    }
+    get(id) {
+        if (!id) {
+            throw new Error('undefined "id" given when attempting to retrieve toast');
+        }
+        if (typeof id !== 'string' && !Number.isInteger(id)) {
+            throw new Error('"id" must be number or string when attempting to retrieve toast');
+        }
+        return this._toasts.get(id);
+    }
+    set(toast) {
+        if (!toast.id) {
+            throw new Error('invalid or undefined "id" on toast object');
+        }
+        const result = this._toasts.set(toast.id, {
+            id: toast.id,
+            type: toast.type ?? 'success',
+            text: toast.text ?? '',
+            canclose: toast.canclose ?? false,
+            duration: Date.now() + (toast.duration || 5000),
+        });
+        this._toasts = new Map(Array.from(this._toasts));
+        return result;
+    }
+    async del(id) {
+        if (!id) {
+            throw new Error('undefined "id" given when attempting to retrieve toast');
+        }
+        if (typeof id !== 'string' && !Number.isInteger(id)) {
+            throw new Error('"id" must be number or string when attempting to retrieve toast');
+        }
+        const el = this.renderRoot.querySelector(`#${id}`);
+        if (!this._toasts.has(id)) {
+            return false;
+        }
+        await el.collapse();
+        const result = this._toasts.delete(id);
+        this._toasts = new Map(Array.from(this._toasts));
+        return result;
+    }
+    render() {
+        return html `
+      <aside class="${ccToastContainer.wrapper}">
+        <div class="${ccToastContainer.base}" id="w-toast-container-list">
+          ${repeat(this._toastsArray, (toast) => toast.id, (toast) => html ` <w-toast
+                class="${ccToastContainer.content}"
+                id="${toast.id}"
+                type="${toast.type}"
+                text="${toast.text}"
+                ?canclose=${toast.canclose}
+                @close=${() => this.del(toast.id)}>
+              </w-toast>`)}
+        </div>
+      </aside>
+    `;
+    }
+}
+__decorate([
+    state()
+], WarpToastContainer.prototype, "_toasts", void 0);
+if (!customElements.get('w-toast-container')) {
+    customElements.define('w-toast-container', WarpToastContainer);
+}

package/dist/packages/toast/toast.d.ts

@@ -1,43 +1,48 @@
-export class WarpToast {
-    static styles: any[];
-    static properties: {
-        id: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        type: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        text: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        canclose: {
-            type: BooleanConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-    };
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/warning-16';
+import '@warp-ds/icons/elements/error-16';
+import '@warp-ds/icons/elements/success-16';
+import '@warp-ds/icons/elements/close-16';
+import type { ToastType } from './types';
+/**
+ * You should probably not include this component in HTML markup.
+ *
+ * As long as the element definition is imported in your application you can use the toast JS API to create toasts.
+ *
+ * ```js
+ * import from '@warp-ds/elements/components/toast';
+ * import { toast, removeToast, updateToast } from '@warp-ds/elements/toast';
+ * ```
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-toast--docs)
+ *
+ * @internal
+ */
+export declare class WarpToast extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
     id: string;
-    type: string;
+    type: ToastType;
     text: string;
     canclose: boolean;
+    private _expanded;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): void;
-    _expanded: boolean;
-    get _wrapper(): any;
+    /** @internal */
+    get _wrapper(): HTMLElement;
+    /** @internal */
     get _warning(): boolean;
+    /** @internal */
     get _error(): boolean;
+    /** @internal */
     get _role(): "alert" | "status";
+    /** @internal */
     get _typeLabel(): string;
+    /** @internal */
     get _iconMarkup(): import("lit").TemplateResult<1>;
-    collapse(): Promise<any>;
+    collapse(): Promise<void>;
     close(): void;
     render(): import("lit").TemplateResult<1>;
-    #private;
 }

package/dist/packages/toast/toast.js

@@ -0,0 +1,200 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { classNames } from '@chbphone55/classnames';
+import { i18n } from '@lingui/core';
+import { expand, collapse } from 'element-collapse';
+import { property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import '@warp-ds/icons/elements/warning-16';
+import '@warp-ds/icons/elements/error-16';
+import '@warp-ds/icons/elements/success-16';
+import '@warp-ds/icons/elements/close-16';
+import { activateI18n } from '../i18n';
+import { reset } from '../styles';
+import { messages as daMessages } from './locales/da/messages.mjs';
+import { messages as enMessages } from './locales/en/messages.mjs';
+import { messages as fiMessages } from './locales/fi/messages.mjs';
+import { messages as nbMessages } from './locales/nb/messages.mjs';
+import { messages as svMessages } from './locales/sv/messages.mjs';
+import { styles } from './styles';
+const ccToast = {
+    wrapper: 'relative overflow-hidden w-full',
+    base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',
+    positive: 's-bg-positive-subtle s-border-positive-subtle s-text',
+    warning: 's-bg-warning-subtle s-border-warning-subtle s-text',
+    negative: 's-bg-negative-subtle s-border-negative-subtle s-text',
+    iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
+    iconPositive: 's-icon-positive',
+    iconWarning: 's-icon-warning',
+    iconNegative: 's-icon-negative',
+    iconLoading: 'animate-bounce',
+    content: 'self-center mr-8 py-4 last-child:mb-0',
+    close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',
+};
+/**
+ * You should probably not include this component in HTML markup.
+ *
+ * As long as the element definition is imported in your application you can use the toast JS API to create toasts.
+ *
+ * ```js
+ * import from '@warp-ds/elements/components/toast';
+ * import { toast, removeToast, updateToast } from '@warp-ds/elements/toast';
+ * ```
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-toast--docs)
+ *
+ * @internal
+ */
+export class WarpToast extends LitElement {
+    static { this.styles = [
+        reset,
+        styles,
+        css `
+      :host {
+        display: block;
+      }
+    `,
+    ]; }
+    constructor() {
+        super();
+        this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
+        this.type = 'success';
+        this.text = '';
+        this.canclose = false;
+        this._expanded = false;
+        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    updated() {
+        if (!this._expanded && this._wrapper)
+            expand(this._wrapper, () => (this._expanded = true));
+    }
+    get #primaryClasses() {
+        return classNames([
+            ccToast.base,
+            this.type === 'success' && ccToast.positive,
+            this.type === 'warning' && ccToast.warning,
+            this.type === 'error' && ccToast.negative,
+        ]);
+    }
+    get #iconClasses() {
+        return classNames([
+            ccToast.iconBase,
+            this.type === 'success' && ccToast.iconPositive,
+            this.type === 'warning' && ccToast.iconWarning,
+            this.type === 'error' && ccToast.iconNegative,
+        ]);
+    }
+    /** @internal */
+    get _wrapper() {
+        return this.renderRoot?.querySelector(`section`) ?? null;
+    }
+    /** @internal */
+    get _warning() {
+        return this.type === 'warning';
+    }
+    /** @internal */
+    get _error() {
+        return this.type === 'error';
+    }
+    /** @internal */
+    get _role() {
+        return this._error || this._warning ? 'alert' : 'status';
+    }
+    /** @internal */
+    get _typeLabel() {
+        if (this._warning) {
+            return i18n._({
+                id: 'toast.aria.warning',
+                message: 'Warning',
+                comment: 'Default screenreader message for warning in toast component',
+            });
+        }
+        if (this._error) {
+            return i18n._({
+                id: 'toast.aria.error',
+                message: 'Error',
+                comment: 'Default screenreader message for error in toast component',
+            });
+        }
+        else {
+            return i18n._({
+                id: 'toast.aria.successful',
+                message: 'Successful',
+                comment: 'Default screenreader message for successful in toast component',
+            });
+        }
+    }
+    /** @internal */
+    get _iconMarkup() {
+        if (this._warning)
+            return html `<w-icon-warning-16></w-icon-warning-16>`;
+        if (this._error)
+            return html `<w-icon-error-16></w-icon-error-16>`;
+        else
+            return html `<w-icon-success-16></w-icon-success-16>`;
+    }
+    async collapse() {
+        return new Promise((resolve) => {
+            if (this._expanded && this._wrapper) {
+                collapse(this._wrapper, resolve);
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    close() {
+        const event = new CustomEvent('close', {
+            detail: { id: this.id },
+            bubbles: true,
+            composed: true,
+        });
+        this.updateComplete.then(() => this.dispatchEvent(event));
+    }
+    render() {
+        if (!this.text)
+            return html ``;
+        return html ` <section class="${ccToast.wrapper}" aria-label="${this._typeLabel}">
+      <div class="${this.#primaryClasses}">
+        <div class="${this.#iconClasses}">${this._iconMarkup}</div>
+        <div role="${this._role}" class="${ccToast.content}">
+          <p>${this.text}</p>
+        </div>
+        ${when(this.canclose === true, () => html `
+            <button class="${ccToast.close}" @click="${this.close}">
+              <w-icon-close-16></w-icon-close-16>
+            </button>
+          `)}
+      </div>
+    </section>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], WarpToast.prototype, "id", void 0);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], WarpToast.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], WarpToast.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true, reflect: true })
+], WarpToast.prototype, "canclose", void 0);
+__decorate([
+    state()
+], WarpToast.prototype, "_expanded", void 0);
+if (!customElements.get('w-toast')) {
+    customElements.define('w-toast', WarpToast);
+}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpToastContainer } from './index.js';
+import '../button/index.js';
+import './index.js';
+declare const containerArgs: Partial<WarpToastContainer> & {
+    [key: string]: any;
+};
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const ToastContainer: StoryObj<typeof containerArgs>;
+export declare const Toast: StoryObj;

package/dist/packages/toast/toast.stories.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { prespread } from '../../.storybook/utilities.js';
+import '../button/index.js';
+import './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-pill');
+const { events: containerEvents, args: containerArgs, argTypes: containerArgTypes, } = getStorybookHelpers('w-toast-container');
+const meta = {
+    title: 'Overlays/Toast',
+};
+export default meta;
+export const Default = {
+    args: {},
+    render() {
+        return html `
+      <w-button small onclick="window.toast('message goes here', { type: 'error', canclose: true })"> See Error Example </w-button>
+      <w-button small onclick="window.toast('message goes here', { type: 'warning', canclose: true })"> See Warning Example </w-button>
+      <w-button small onclick="window.toast('message goes here', { type: 'success', canclose: true })"> See Success Example </w-button>
+    `;
+    },
+};
+export const ToastContainer = {
+    args: containerArgs,
+    render(args) {
+        return html ` <p>This is here to document attributes. See the Default example for a complete usage example.</p>
+      <w-toast-container ${spread(prespread(args))}></w-toast-container>`;
+    },
+    argTypes: containerArgTypes,
+    parameters: {
+        actions: {
+            handles: containerEvents,
+        },
+    },
+};
+export const Toast = {
+    args,
+    render(args) {
+        return html `
+      <p>This is here to document attributes. See the Default example for a complete usage example.</p>
+      <w-toast ${spread(prespread(args))}></w-toast>
+    `;
+    },
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};

package/dist/packages/toast/types.d.ts

@@ -0,0 +1,15 @@
+export type ToastType = 'success' | 'error' | 'warning';
+export interface ToastOptions {
+    id?: string | number;
+    type?: ToastType;
+    text?: string;
+    duration?: number;
+    canclose?: boolean;
+}
+export interface ToastInternal {
+    id: string | number;
+    type: ToastType;
+    text: string;
+    duration: number;
+    canclose: boolean;
+}

package/dist/packages/toast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/utils/expand-transition.d.ts

@@ -1,4 +1,4 @@
-export class ExpandTransition {
+export class ExpandTransition extends LitElement {
     static properties: {
         show: {
             type: BooleanConstructor;
@@ -9,7 +9,7 @@ export class ExpandTransition {
             state: boolean;
         };
     };
-    static styles: any[];
+    static styles: import("lit").CSSResult[];
     show: boolean;
     _mounted: boolean;
     _removeElement: boolean;
@@ -18,3 +18,4 @@ export class ExpandTransition {
     get _wrapper(): this;
     render(): import("lit").TemplateResult<1>;
 }
+import { LitElement } from 'lit';