@loadsmart/miranda-wc 3.0.0-beta.7 → 3.0.0-beta.71

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

@@ -1,6 +1,7 @@
 import type { PropertyValues } from 'lit';
-import { FormComponent } from '../component';
+import { Component } from '../component';
 import type { FormComponentProps } from '../component';
+import '../dots-loader';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger' | 'icon' | 'icon-secondary';
 export type ButtonSize = 'small' | 'default' | 'large';
 export type ButtonType = HTMLButtonElement['type'];
@@ -13,19 +14,20 @@ export interface ButtonProps extends FormComponentProps {
     href?: string;
     download?: string;
     target?: ButtonTarget;
-    form?: string;
     formaction?: HTMLButtonElement['formAction'];
     formenctype?: HTMLButtonElement['formEnctype'];
     formmethod?: HTMLButtonElement['formMethod'];
     formnovalidate?: HTMLButtonElement['formNoValidate'];
     formtarget?: HTMLButtonElement['formTarget'];
 }
-export declare class Button extends FormComponent implements ButtonProps {
+declare const Button_base: import("../../utils/types").Constructor<import("../component/form-component.mixin").WithFormComponentMixinInterface> & typeof Component;
+export declare class Button extends Button_base implements ButtonProps {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[][];
     static get properties(): {
@@ -45,9 +47,6 @@ export declare class Button extends FormComponent implements ButtonProps {
             type: StringConstructor;
             reflect: boolean;
         };
-        form: {
-            type: StringConstructor;
-        };
         formaction: {
             type: StringConstructor;
         };
@@ -103,10 +102,11 @@ export declare class Button extends FormComponent implements ButtonProps {
      */
     download: ButtonProps['download'];
     /**
-     * The <form> element to associate the button with (its form owner). The value of
+     * The <form> element to associate the component with (its form owner). The value of
      * this attribute must be the id of a <form> in the same document. (If this attribute
-     * is not set, the <button> is associated with its ancestor <form> element, if any.)
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN docs}
+     * is not set, the component is associated with its ancestor <form> element, if any).
+     * This is useful only when the component has a specific behavior related to form submission.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN docs, button}
      */
     form: ButtonProps['form'];
     formaction: ButtonProps['formaction'];
@@ -114,26 +114,17 @@ export declare class Button extends FormComponent implements ButtonProps {
     formmethod: ButtonProps['formmethod'];
     formnovalidate: ButtonProps['formnovalidate'];
     formtarget: ButtonProps['formtarget'];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected update(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
     renderContent(): import("lit-html").TemplateResult<1>;
     renderAsButton(): import("lit-html").TemplateResult<1>;
     renderAsLink(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     get button(): HTMLButtonElement | null;
     get anchor(): HTMLAnchorElement | null;
-    /**
-     * A button can be associated with a form either via the `form` attribute (`associatedForm` property)
-     * or by being a descendant of a form element (in which case the form instance will be available via the
-     * `ElementInternals` API). Here, we return the form that the button is actually associated with so
-     * other parts of the component can use it.
-     *
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN button element, form attribute}
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form|MDN ElementInternals, form property}
-     */
-    getActualForm: () => HTMLFormElement | null;
     formDisabledCallback(disabled: boolean): void;
 }
 declare global {
@@ -141,3 +132,4 @@ declare global {
         'm-button': Button;
     }
 }
+export {};

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class CardActionPrimary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class CardActionSecondary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class CardActionTertiary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class CardBody extends LitElement {
+import { Component } from '../component';
+export declare class CardBody extends Component {
     static styles: import("lit").CSSResult[];
     static get properties(): {
         slot: {
@@ -8,6 +8,7 @@ export declare class CardBody extends LitElement {
         };
     };
     slot: string;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -9,6 +9,7 @@ export declare class CardDivider extends Divider {
         };
     };
     slot: string;
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,12 +1,14 @@
-import { LitElement } from 'lit';
 import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
 import type { JustifyContentValue, AlignItemsValue } from '../layout';
+import { Component } from '../component';
+import '../layout/group';
+import './card-divider';
 export interface CardFooterProps {
     gap?: SpacingTokenWithNone;
     align?: AlignItemsValue;
     justify?: JustifyContentValue;
 }
-export declare class CardFooter extends LitElement implements CardFooterProps {
+export declare class CardFooter extends Component implements CardFooterProps {
     static get properties(): {
         slot: {
             type: StringConstructor;
@@ -25,6 +27,7 @@ export declare class CardFooter extends LitElement implements CardFooterProps {
     gap: CardFooterProps['gap'];
     align: CardFooterProps['align'];
     justify: CardFooterProps['justify'];
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class CardSubtitle extends LitElement {
+import { Component } from '../component';
+export declare class CardSubtitle extends Component {
     static styles: import("lit").CSSResult[];
     static get properties(): {
         slot: {
@@ -8,6 +8,7 @@ export declare class CardSubtitle extends LitElement {
         };
     };
     slot: string;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class CardTitle extends LitElement {
+import { Component } from '../component';
+export declare class CardTitle extends Component {
     static styles: import("lit").CSSResult[];
     static get properties(): {
         slot: {
@@ -8,6 +8,7 @@ export declare class CardTitle extends LitElement {
         };
     };
     slot: string;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -56,6 +56,7 @@ export declare class Card extends Component implements CardProps {
      * Initial collapsed state. used when collapsed is uncontrollable.
      */
     initialCollapsed: boolean;
+    static define(): void;
     constructor();
     /**
      * Keeping the method name to avoid breaking changes.

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

@@ -14,7 +14,8 @@ export declare class Checkbox extends FormComponent implements CheckboxProps {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -42,7 +43,8 @@ export declare class Checkbox extends FormComponent implements CheckboxProps {
      * Should the checkbox be checked initialluy or when the form it is in is reset.
      */
     initialChecked: CheckboxProps['initialChecked'];
-    createRenderRoot(): Element | ShadowRoot;
+    static define(): void;
+    createRenderRoot(): DocumentFragment | HTMLElement;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;

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

@@ -14,7 +14,8 @@ export declare class CloseButton extends Component implements CloseButtonProps {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -50,18 +51,20 @@ export declare class CloseButton extends Component implements CloseButtonProps {
      */
     inverted: CloseButtonProps['inverted'];
     /**
-     * Button label. Defaults to 'Close'.
+     * Button label.
      */
     label: CloseButtonProps['label'];
     /**
      * Text field size. Defaults to 'default'.
      */
     size: CloseButtonProps['size'];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    update(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
+    get button(): HTMLButtonElement | null;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,13 @@
 import { LitElement } from 'lit';
+type ComponentDefinitionConfig = {
+    name: string;
+    constructor: CustomElementConstructor;
+};
 export declare class Component extends LitElement {
     protected internals: ElementInternals | null;
-    protected emit: <T>(eventName: string, options?: CustomEventInit<T>) => void;
+    static define(config: ComponentDefinitionConfig): void;
     constructor();
+    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`
@@ -20,3 +25,4 @@ export declare class Component extends LitElement {
      */
     protected reemit: <E extends Event>(event: E) => void;
 }
+export {};

package/dist/components/component/form-component.mixin.d.ts

@@ -1,10 +1,11 @@
-import type { Component } from './component';
 import type { Constructor } from '../../utils/types';
 import type { FieldStatus } from '../field';
+import type { Component } from './component';
 export interface FormComponentProps {
     name?: string;
     disabled?: boolean;
     status?: FieldStatus;
+    form?: string;
 }
 export declare class WithFormComponentMixinInterface implements FormComponentProps {
     name?: string;
@@ -13,5 +14,15 @@ export declare class WithFormComponentMixinInterface implements FormComponentPro
     protected getAssociatedForm(): HTMLFormElement | null;
     protected setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
     protected formDisabledCallback(disabled: boolean): void;
+    /**
+     * A component can be associated with a form either via the `form` attribute (`associatedForm` property)
+     * or by being a descendant of a form element (in which case the form instance will be available via the
+     * `ElementInternals` API). Here, we return the form that the component is actually associated with so
+     * other parts of the component can use it.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN button element, form attribute}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form|MDN ElementInternals, form property}
+     */
+    getActualForm(): HTMLFormElement | null;
 }
 export declare const WithFormComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<WithFormComponentMixinInterface> & T;

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

@@ -2,6 +2,7 @@ import { Button } from '../button';
 export declare class DialogActionPrimary extends Button {
     #private;
     private context;
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,6 +1,7 @@
 import { Button } from '../button';
 export declare class DialogActionSecondary extends Button {
     constructor();
+    static define(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class DialogActionTertiary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,6 @@
 import { Group } from '../layout/group';
 export declare class DialogActions extends Group {
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
-export declare class DialogBody extends LitElement {
+import { Component } from '../component';
+export declare class DialogBody extends Component {
     static styles: import("lit").CSSResult[];
+    static define(): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,5 +1,6 @@
 import { CloseButton } from '../close-button';
 export declare class DialogClose extends CloseButton {
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

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

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
-export declare class DialogFooter extends LitElement {
+import { Component } from '../component';
+export declare class DialogFooter extends Component {
+    static define(): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -4,6 +4,7 @@ import '../layout';
 export declare class DialogHeader extends Component {
     #private;
     static styles: import("lit").CSSResult[];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -30,6 +30,7 @@ export declare class Dialog extends Component implements DialogProps {
      * Determines the style of the dialog
      */
     variant: DialogProps['variant'];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1,4 +1,4 @@
-export declare const DIALOG_SIZES: readonly ["small", "medium", "large", "extra-large"];
+export declare const DIALOG_SIZES: readonly ["small", "medium", "large", "extra-large", "full-page"];
 export type DialogSize = (typeof DIALOG_SIZES)[number];
 export declare const DIALOG_VARIANTS: readonly ["neutral", "success", "warning", "danger"];
 export type DialogVariant = (typeof DIALOG_VARIANTS)[number];

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
-export declare class Divider extends LitElement {
+import { Component } from '../component';
+export declare class Divider extends Component {
     static styles: import("lit").CSSResult[];
+    static define(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/dots-loader/dots-loader.d.ts

@@ -0,0 +1,27 @@
+import type { PropertyValues } from 'lit';
+import { Component } from '../component';
+export interface DotsLoaderProps {
+    size?: string;
+}
+export declare class DotsLoader extends Component {
+    #private;
+    /**
+     * Determine the size of the dots in pixels.
+     */
+    size: DotsLoaderProps['size'];
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static define(): void;
+    protected update(changedProperties: PropertyValues<DotsLoaderProps>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-dots-loader': DotsLoader;
+    }
+}

package/dist/components/{back-button/back-button.styles.d.ts → dots-loader/dots-loader.styles.d.ts}

@@ -1,2 +1,3 @@
+export declare const DEFAULT_SIZE = 10;
 declare function styles(): import("lit").CSSResult;
 export default styles;

package/dist/components/dots-loader/index.d.ts

@@ -0,0 +1,2 @@
+export { DotsLoader } from './dots-loader';
+export type { DotsLoaderProps } from './dots-loader';

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class DrawerActionPrimary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class DrawerActionSecondary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 export declare class DrawerActionTertiary extends Button {
+    static define(): void;
     constructor();
 }
 declare global {

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

@@ -1,6 +1,7 @@
 import { Group } from '../layout/group';
 export declare class DrawerActions extends Group {
     static styles: import("lit").CSSResult[];
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
-export declare class DrawerBody extends LitElement {
+import { Component } from '../component';
+export declare class DrawerBody extends Component {
     static styles: import("lit").CSSResult[];
+    static define(): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,5 +1,6 @@
 import { CloseButton } from '../close-button';
 export declare class DrawerClose extends CloseButton {
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

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

@@ -10,6 +10,7 @@ export declare class DrawerHeader extends Component {
         };
     };
     slot: string;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -30,6 +30,7 @@ export declare class Drawer extends Component {
      * Determines if the header and actions should have a divider and the body should have the secondary background.
      */
     divided: DrawerProps['divided'];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/dropdown/dropdown-item.d.ts

@@ -25,6 +25,7 @@ export declare class DropdownItem extends DropdownItem_base implements DropdownI
      * Should the menu item represent a destructive action?
      */
     destructive: DropdownItemProps['destructive'];
+    static define(): void;
     constructor();
     connectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;

package/dist/components/dropdown/dropdown-menu.d.ts

@@ -1,6 +1,7 @@
 import { Component } from '../component';
 declare const DropdownMenu_base: typeof Component;
 export declare class DropdownMenu extends DropdownMenu_base {
+    static define(): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/dropdown/dropdown-trigger.d.ts

@@ -16,6 +16,7 @@ export declare class DropdownTrigger extends DropdownTrigger_base implements Dro
      * Should the button be disabled.
      */
     disabled?: boolean;
+    static define(): void;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/dropdown/dropdown.d.ts

@@ -46,6 +46,7 @@ export declare class Dropdown extends Popover implements DropdownProps {
      * Dropdown size.
      */
     size?: DropdownProps['size'];
+    static define(): void;
     constructor();
     firstUpdated(): void;
     updated(changedProperties: PropertyValues<this>): void;

package/dist/components/empty-state/empty-state-action.d.ts

@@ -2,6 +2,7 @@ import { Button } from '../button';
 export declare class EmptyStateAction extends Button {
     #private;
     private context;
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

package/dist/components/empty-state/empty-state-header.d.ts

@@ -2,6 +2,7 @@ import { Text } from '../text';
 export declare class EmptyStateHeader extends Text {
     #private;
     private context;
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

package/dist/components/empty-state/empty-state-illustration.d.ts

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
-export declare class EmptyStateIllustration extends LitElement {
+import { Component } from '../component';
+export declare class EmptyStateIllustration extends Component {
+    static define(): void;
     protected createRenderRoot(): this;
     connectedCallback(): void;
 }

package/dist/components/empty-state/empty-state-message.d.ts

@@ -2,6 +2,7 @@ import { Text } from '../text';
 export declare class EmptyStateMessage extends Text {
     #private;
     private context;
+    static define(): void;
     constructor();
     connectedCallback(): void;
 }

package/dist/components/empty-state/empty-state.d.ts

@@ -35,6 +35,7 @@ export declare class EmptyState extends Component {
     header?: string;
     message?: string;
     action?: string;
+    static define(): void;
     constructor();
     updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult;

package/dist/components/field/field-hint.d.ts

@@ -1,7 +1,6 @@
 import { Component } from '../component';
 import type { FieldStatus } from './field.types';
 import '../icon';
-import '../layout/group';
 export interface FieldHintProps extends HTMLElement {
     status?: FieldStatus;
 }
@@ -23,6 +22,7 @@ export declare class FieldHint extends Component implements FieldHintProps {
     status: FieldHintProps['status'];
     slot: string;
     private field;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/field/field-label.d.ts

@@ -3,6 +3,7 @@ import type { LabelProps } from '../label';
 export { type LabelProps as FieldLabelProps } from '../label';
 export declare class FieldLabel extends Label implements LabelProps {
     private field;
+    static define(): void;
     connectedCallback(): void;
     isRequired(): boolean;
     getSize(): import("./field.types").FieldSize | undefined;