@loadsmart/miranda-wc 2.0.0 → 2.1.0

package/dist/components/button/button.d.ts

@@ -9,17 +9,19 @@ export interface ButtonProps {
     form?: string;
     loading?: boolean;
     size?: ButtonSize;
-    type: ButtonType;
-    variant: ButtonVariant;
+    type?: ButtonType;
+    variant?: ButtonVariant;
     href?: string;
     download?: string;
-    tabindex?: string;
     target?: ButtonTarget;
 }
-declare const Button_base: import("../../mixins/polymorphic-tag/polymorphic-tag.types").Constructor<import("../../mixins/polymorphic-tag/polymorphic-tag.types").PolymorphicTagInterface> & typeof FormControl;
-export declare class Button extends Button_base {
+export declare class Button extends FormControl implements ButtonProps {
     #private;
     static styles: import("lit").CSSResult[][];
+    /**
+     * Which HTML tag should be used to render this element.
+     */
+    private get tag();
     static get properties(): {
         role: {
             type: StringConstructor;
@@ -41,14 +43,12 @@ export declare class Button extends Button_base {
             type: StringConstructor;
             reflect: boolean;
         };
-        tabindex: {
-            type: StringConstructor;
-        };
         type: {
             type: StringConstructor;
         };
         href: {
             type: StringConstructor;
+            reflect: boolean;
         };
         target: {
             type: StringConstructor;
@@ -64,47 +64,41 @@ export declare class Button extends Button_base {
     /**
      * The button is waiting for some operation to be finished.
      */
-    loading: ButtonProps['loading'];
+    loading?: ButtonProps['loading'];
     /**
      * Should the button be disabled.
      */
-    disabled: ButtonProps['disabled'];
+    disabled?: ButtonProps['disabled'];
     /**
      * Button variant.
      */
-    variant: ButtonProps['variant'];
+    variant?: ButtonProps['variant'];
     /**
      * Button size.
      */
-    size: ButtonProps['size'];
-    /**
-     * Allow making HTML elements focusable, allow or prevent them from being sequentially
-     * focusable (usually with the Tab key, hence the name) and determine their relative ordering
-     * for sequential focus navigation
-     */
-    tabindex: ButtonProps['tabindex'];
+    size?: ButtonProps['size'];
     /**
      * Specifies the type of button.
      */
-    type: ButtonProps['type'];
+    type?: ButtonProps['type'];
     /**
      * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
      */
-    href: ButtonProps['href'];
+    href?: ButtonProps['href'];
     /**
      * Tell the browser where to open the link. Only used when `href` is set.
      * */
-    target: ButtonProps['target'];
+    target?: ButtonProps['target'];
     /**
      * Causes the browser to treat the linked URL as a download. Only used when `href` is set.
      */
-    download: ButtonProps['download'];
+    download?: ButtonProps['download'];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected update(changedProperties: PropertyValues<this>): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<2 | 1>;
+    render(): import("lit-html").TemplateResult;
     focus(options?: FocusOptions | undefined): void;
 }
 declare global {
@@ -113,4 +107,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.styles.d.ts

@@ -1,3 +1,2 @@
 declare function styles(): import("lit").CSSResult[];
 export default styles;
-//# sourceMappingURL=button.styles.d.ts.map

package/dist/components/button/index.d.ts

@@ -1,3 +1,2 @@
 export { Button } from './button';
 export type { ButtonProps, ButtonSize, ButtonType, ButtonVariant, } from './button';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/card/card-action-primary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class CardActionPrimary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-card-action-primary': CardActionPrimary;
+    }
+}

package/dist/components/card/card-action-secondary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class CardActionSecondary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-card-action-secondary': CardActionSecondary;
+    }
+}

package/dist/components/card/card-action-tertiary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class CardActionTertiary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-card-action-tertiary': CardActionTertiary;
+    }
+}

package/dist/components/card/card-body.d.ts

@@ -4,10 +4,11 @@ export declare class CardBody extends LitElement {
     static get properties(): {
         slot: {
             type: StringConstructor;
+            reflect: boolean;
         };
     };
     slot: string;
-    connectedCallback(): void;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -15,4 +16,3 @@ declare global {
         'm-card-body': CardBody;
     }
 }
-//# sourceMappingURL=card-body.d.ts.map

package/dist/components/card/card-divider.d.ts

@@ -16,4 +16,3 @@ declare global {
         'm-card-divider': CardDivider;
     }
 }
-//# sourceMappingURL=card-divider.d.ts.map

package/dist/components/card/card-footer.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
+import type { JustifyContentValue, AlignItemsValue } from '../layout';
+export interface CardFooterProps {
+    gap?: SpacingTokenWithNone;
+    align?: AlignItemsValue;
+    justify?: JustifyContentValue;
+}
+export declare class CardFooter extends LitElement implements CardFooterProps {
+    static get properties(): {
+        slot: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        gap: {
+            type: StringConstructor;
+        };
+        align: {
+            type: StringConstructor;
+        };
+        justify: {
+            type: StringConstructor;
+        };
+    };
+    gap: CardFooterProps['gap'];
+    align: CardFooterProps['align'];
+    justify: CardFooterProps['justify'];
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-card-footer': CardFooter;
+    }
+}

package/dist/components/card/card-subtitle.d.ts

@@ -4,10 +4,11 @@ export declare class CardSubtitle extends LitElement {
     static get properties(): {
         slot: {
             type: StringConstructor;
+            reflect: boolean;
         };
     };
     slot: string;
-    connectedCallback(): void;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -15,4 +16,3 @@ declare global {
         'm-card-subtitle': CardSubtitle;
     }
 }
-//# sourceMappingURL=card-subtitle.d.ts.map

package/dist/components/card/card-title.d.ts

@@ -4,10 +4,11 @@ export declare class CardTitle extends LitElement {
     static get properties(): {
         slot: {
             type: StringConstructor;
+            reflect: boolean;
         };
     };
     slot: string;
-    connectedCallback(): void;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -15,4 +16,3 @@ declare global {
         'm-card-title': CardTitle;
     }
 }
-//# sourceMappingURL=card-title.d.ts.map

package/dist/components/card/card.d.ts

@@ -1,10 +1,20 @@
-import { LitElement } from 'lit';
 import type { ColorToken } from '@loadsmart/miranda-tokens';
+import { Component } from '../component';
+import '../layout';
+import '../icon';
 export interface CardProps {
     flagged?: boolean;
-    'flag-color'?: ColorToken;
+    flagColor?: ColorToken;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    initialCollapsed?: boolean;
 }
-export declare class Card extends LitElement {
+export interface CardToggleEventDetails {
+    name: 'card';
+    value: boolean;
+}
+export declare class Card extends Component implements CardProps {
+    #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
         flagged: {
@@ -14,6 +24,17 @@ export declare class Card extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        collapsible: {
+            type: BooleanConstructor;
+        };
+        collapsed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        initialCollapsed: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
     };
     /**
      * Should the card be flagged.
@@ -22,8 +43,28 @@ export declare class Card extends LitElement {
     /**
      * Card flag color.
      */
-    flagColor: NonNullable<CardProps['flag-color']>;
+    flagColor: NonNullable<CardProps['flagColor']>;
+    /**
+     * Should card be collapsible.
+     */
+    collapsible: CardProps['collapsible'];
+    /**
+     * Should card be collapsed.
+     */
+    collapsed: CardProps['collapsed'];
+    /**
+     * Initial collapsed state. used when collapsed is uncontrollable.
+     */
+    initialCollapsed: boolean;
     constructor();
+    /**
+     * Keeping the method name to avoid breaking changes.
+     * #toggle was added to keep the pattern used in all
+     * the other components, with the same behavior.
+     */
+    toggleCollapse(): void;
+    isExpanded(): "true" | "false" | undefined;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -31,4 +72,3 @@ declare global {
         'm-card': Card;
     }
 }
-//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.styles.d.ts

@@ -3,4 +3,3 @@ export declare function cardBodyStyles(): import("lit").CSSResult;
 export declare function cardSubtitleStyles(): import("lit").CSSResult;
 export declare function cardTitleStyles(): import("lit").CSSResult;
 export declare function cardDividerStyles(): import("lit").CSSResult;
-//# sourceMappingURL=card.styles.d.ts.map

package/dist/components/card/index.d.ts

@@ -3,5 +3,8 @@ export { CardBody } from './card-body';
 export { CardSubtitle } from './card-subtitle';
 export { CardTitle } from './card-title';
 export { CardDivider } from './card-divider';
-export type { CardProps } from './card';
-//# sourceMappingURL=index.d.ts.map
+export { CardFooter } from './card-footer';
+export { CardActionPrimary } from './card-action-primary';
+export { CardActionSecondary } from './card-action-secondary';
+export { CardActionTertiary } from './card-action-tertiary';
+export type { CardProps, CardToggleEventDetails } from './card';

package/dist/components/checkbox/checkbox.constants.d.ts

@@ -1,3 +1,2 @@
 declare const CHANGE_EVENT = "m-change";
 export { CHANGE_EVENT };
-//# sourceMappingURL=checkbox.constants.d.ts.map

package/dist/components/checkbox/checkbox.d.ts

@@ -11,7 +11,7 @@ export interface CheckboxProps {
     indeterminate?: boolean;
     checked?: boolean;
 }
-export declare class Checkbox extends LitElement {
+export declare class Checkbox extends LitElement implements CheckboxProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -73,4 +73,3 @@ declare global {
         'm-checkbox': Checkbox;
     }
 }
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.styles.d.ts

@@ -1,3 +1,2 @@
 declare function styles(): import("lit").CSSResult;
 export default styles;
-//# sourceMappingURL=checkbox.styles.d.ts.map

package/dist/components/checkbox/index.d.ts

@@ -1,3 +1,2 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps, CheckboxChangeEventDetail } from './checkbox';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/close-button/close-button.d.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { Component } from '../component';
 import '../icon';
 export type CloseButtonSize = 'small' | 'default' | 'large';
@@ -8,7 +9,7 @@ export interface CloseButtonProps {
     label?: string;
     size?: CloseButtonSize;
 }
-export declare class CloseButton extends Component {
+export declare class CloseButton extends Component implements CloseButtonProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -17,15 +18,18 @@ export declare class CloseButton extends Component {
         };
         disabled: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         inverted: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         label: {
             type: StringConstructor;
         };
         size: {
             type: StringConstructor;
+            reflect: boolean;
         };
     };
     /**
@@ -49,6 +53,9 @@ export declare class CloseButton extends Component {
      */
     size: CloseButtonProps['size'];
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    update(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     focus(options?: FocusOptions | undefined): void;
 }
@@ -57,4 +64,3 @@ declare global {
         'm-close-button': CloseButton;
     }
 }
-//# sourceMappingURL=close-button.d.ts.map

package/dist/components/close-button/close-button.styles.d.ts

@@ -1,2 +1 @@
 export declare function styles(): import("lit").CSSResult;
-//# sourceMappingURL=close-button.styles.d.ts.map

package/dist/components/close-button/index.d.ts

@@ -1,3 +1,2 @@
 export { CloseButton } from './close-button';
 export type { CloseButtonProps } from './close-button';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/component/component.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 export declare class Component extends LitElement {
-    protected emit: <T>(eventName: string, options?: CustomEventInit<T> | undefined) => void;
+    protected emit: <T>(eventName: string, options?: CustomEventInit<T>) => void;
     /**
      * Re-dispatches an event.
      * This function is useful for forwarding non-composed events, such as `change`
@@ -16,6 +16,5 @@ export declare class Component extends LitElement {
      *
      * @param event The event to re-dispatch.
      */
-    protected reemit: (event: Event) => void;
+    protected reemit: <E extends Event>(event: E) => void;
 }
-//# sourceMappingURL=component.d.ts.map

package/dist/components/component/index.d.ts

@@ -1,2 +1 @@
 export { Component } from './component';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/dialog-action-primary.d.ts

@@ -9,4 +9,3 @@ declare global {
         'm-dialog-action-primary': DialogActionPrimary;
     }
 }
-//# sourceMappingURL=dialog-action-primary.d.ts.map

package/dist/components/dialog/dialog-action-secondary.d.ts

@@ -7,4 +7,3 @@ declare global {
         'm-dialog-action-secondary': DialogActionSecondary;
     }
 }
-//# sourceMappingURL=dialog-action-secondary.d.ts.map

package/dist/components/dialog/dialog-action-tertiary.d.ts

@@ -7,4 +7,3 @@ declare global {
         'm-dialog-action-tertiary': DialogActionTertiary;
     }
 }
-//# sourceMappingURL=dialog-action-tertiary.d.ts.map

package/dist/components/dialog/dialog-actions.d.ts

@@ -8,4 +8,3 @@ declare global {
         'm-dialog-actions': DialogActions;
     }
 }
-//# sourceMappingURL=dialog-actions.d.ts.map

package/dist/components/dialog/dialog-body.d.ts

@@ -9,4 +9,3 @@ declare global {
         'm-dialog-body': DialogBody;
     }
 }
-//# sourceMappingURL=dialog-body.d.ts.map

package/dist/components/dialog/dialog-body.styles.d.ts

@@ -1,2 +1 @@
 export declare function styles(): import("lit").CSSResult;
-//# sourceMappingURL=dialog-body.styles.d.ts.map

package/dist/components/dialog/dialog-close.d.ts

@@ -8,4 +8,3 @@ declare global {
         'm-dialog-close': DialogClose;
     }
 }
-//# sourceMappingURL=dialog-close.d.ts.map

package/dist/components/dialog/dialog-footer.d.ts

@@ -8,4 +8,3 @@ declare global {
         'm-dialog-footer': DialogFooter;
     }
 }
-//# sourceMappingURL=dialog-footer.d.ts.map

package/dist/components/dialog/dialog-header.d.ts

@@ -13,4 +13,3 @@ declare global {
         'm-dialog-header': DialogHeader;
     }
 }
-//# sourceMappingURL=dialog-header.d.ts.map

package/dist/components/dialog/dialog-header.styles.d.ts

@@ -1,2 +1 @@
 export declare function styles(): import("lit").CSSResult;
-//# sourceMappingURL=dialog-header.styles.d.ts.map

package/dist/components/dialog/dialog.context.d.ts

@@ -5,4 +5,3 @@ export type DialogContext = {
 export declare const dialogContext: {
     __context__: DialogContext;
 };
-//# sourceMappingURL=dialog.context.d.ts.map

package/dist/components/dialog/dialog.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { Component } from '../component';
 import type { DialogProps } from './dialog.types';
-export declare class Dialog extends Component {
+export declare class Dialog extends Component implements DialogProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -47,4 +47,3 @@ declare global {
         'm-dialog': Dialog;
     }
 }
-//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog/dialog.styles.d.ts

@@ -1,2 +1 @@
 export declare function styles(): import("lit").CSSResult;
-//# sourceMappingURL=dialog.styles.d.ts.map

package/dist/components/dialog/dialog.types.d.ts

@@ -16,4 +16,3 @@ export interface DialogProps {
      */
     variant?: DialogVariant;
 }
-//# sourceMappingURL=dialog.types.d.ts.map

package/dist/components/dialog/index.d.ts

@@ -9,4 +9,3 @@ export { DialogBody } from './dialog-body';
 export { DialogClose } from './dialog-close';
 export { DialogFooter } from './dialog-footer';
 export { DialogHeader } from './dialog-header';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/divider/divider.d.ts

@@ -8,4 +8,3 @@ declare global {
         'm-divider': Divider;
     }
 }
-//# sourceMappingURL=divider.d.ts.map

package/dist/components/divider/divider.styles.d.ts

@@ -1,3 +1,2 @@
 declare function styles(): import("lit").CSSResult;
 export default styles;
-//# sourceMappingURL=divider.styles.d.ts.map

package/dist/components/divider/index.d.ts

@@ -1,2 +1 @@
 export { Divider } from './divider';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/drawer-action-primary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class DrawerActionPrimary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-action-primary': DrawerActionPrimary;
+    }
+}

package/dist/components/drawer/drawer-action-secondary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class DrawerActionSecondary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-action-secondary': DrawerActionSecondary;
+    }
+}

package/dist/components/drawer/drawer-action-tertiary.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../button';
+export declare class DrawerActionTertiary extends Button {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-action-tertiary': DrawerActionTertiary;
+    }
+}

package/dist/components/drawer/drawer-actions.d.ts

@@ -0,0 +1,11 @@
+import { Group } from '../layout/group';
+export declare class DrawerActions extends Group {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-actions': DrawerActions;
+    }
+}

package/dist/components/drawer/drawer-actions.styles.d.ts

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

package/dist/components/drawer/drawer-body.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class DrawerBody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-body': DrawerBody;
+    }
+}

package/dist/components/drawer/drawer-body.styles.d.ts

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

package/dist/components/drawer/drawer-close.d.ts

@@ -0,0 +1,10 @@
+import { CloseButton } from '../close-button';
+export declare class DrawerClose extends CloseButton {
+    constructor();
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-close': DrawerClose;
+    }
+}

package/dist/components/drawer/drawer-header.d.ts

@@ -0,0 +1,20 @@
+import { Component } from '../component';
+import '../icon';
+import '../layout';
+export declare class DrawerHeader extends Component {
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        slot: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    slot: string;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-drawer-header': DrawerHeader;
+    }
+}