@loadsmart/miranda-wc 2.0.1 → 3.0.0-beta.1

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

@@ -1,38 +1,38 @@
 import type { PropertyValues } from 'lit';
-import { FormControl } from '../form-control';
+import { FormComponent } from '../component';
+import type { FormComponentProps } from '../component';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger' | 'icon' | 'icon-secondary';
 export type ButtonSize = 'small' | 'default' | 'large';
-export type ButtonType = 'button' | 'reset' | 'submit';
-type ButtonTarget = '_blank' | '_parent' | '_self' | '_top';
-export interface ButtonProps {
-    disabled?: boolean;
-    form?: string;
+export type ButtonType = HTMLButtonElement['type'];
+export type ButtonTarget = HTMLAnchorElement['target'];
+export interface ButtonProps extends FormComponentProps {
     loading?: boolean;
     size?: ButtonSize;
-    type: ButtonType;
-    variant: ButtonVariant;
+    type?: ButtonType;
+    variant?: ButtonVariant;
     href?: string;
     download?: string;
-    tabindex?: string;
     target?: ButtonTarget;
+    form?: string;
+    formaction?: HTMLButtonElement['formAction'];
+    formenctype?: HTMLButtonElement['formEnctype'];
+    formmethod?: HTMLButtonElement['formMethod'];
+    formnovalidate?: HTMLButtonElement['formNoValidate'];
+    formtarget?: HTMLButtonElement['formTarget'];
 }
-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 FormComponent implements ButtonProps {
     #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     static styles: import("lit").CSSResult[][];
     static get properties(): {
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         loading: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         variant: {
             type: StringConstructor;
             reflect: boolean;
@@ -41,34 +41,43 @@ export declare class Button extends Button_base {
             type: StringConstructor;
             reflect: boolean;
         };
-        tabindex: {
+        type: {
             type: StringConstructor;
+            reflect: boolean;
         };
-        type: {
+        form: {
             type: StringConstructor;
         };
-        href: {
+        formaction: {
             type: StringConstructor;
         };
-        target: {
+        formenctype: {
             type: StringConstructor;
         };
-        download: {
+        formmethod: {
             type: StringConstructor;
         };
-        form: {
+        formnovalidate: {
+            type: BooleanConstructor;
+        };
+        formtarget: {
+            type: StringConstructor;
+        };
+        href: {
             type: StringConstructor;
             reflect: boolean;
         };
+        target: {
+            type: StringConstructor;
+        };
+        download: {
+            type: StringConstructor;
+        };
     };
     /**
      * The button is waiting for some operation to be finished.
      */
     loading: ButtonProps['loading'];
-    /**
-     * Should the button be disabled.
-     */
-    disabled: ButtonProps['disabled'];
     /**
      * Button variant.
      */
@@ -77,12 +86,6 @@ export declare class Button extends Button_base {
      * 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'];
     /**
      * Specifies the type of button.
      */
@@ -99,18 +102,42 @@ export declare class Button extends Button_base {
      * Causes the browser to treat the linked URL as a download. Only used when `href` is set.
      */
     download: ButtonProps['download'];
+    /**
+     * The <form> element to associate the button 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}
+     */
+    form: ButtonProps['form'];
+    formaction: ButtonProps['formaction'];
+    formenctype: ButtonProps['formenctype'];
+    formmethod: ButtonProps['formmethod'];
+    formnovalidate: ButtonProps['formnovalidate'];
+    formtarget: ButtonProps['formtarget'];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected update(changedProperties: PropertyValues<this>): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<2 | 1>;
-    focus(options?: FocusOptions | undefined): 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 {
     interface HTMLElementTagNameMap {
         'm-button': Button;
     }
 }
-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,11 +1,20 @@
-import type { PropertyValues } from 'lit';
-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: {
@@ -15,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.
@@ -23,9 +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();
-    updated(changedProperties: PropertyValues<Card>): void;
+    /**
+     * 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 {
@@ -33,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.d.ts

@@ -1,76 +1,63 @@
-import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import { FormComponent } from '../component';
+import type { FormComponentProps } from '../component';
 import '../icon';
-export type CheckboxChangeEventDetail = {
-    checked: boolean;
-    indeterminate: boolean;
-};
-export interface CheckboxProps {
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    indeterminate?: boolean;
+export interface CheckboxProps extends FormComponentProps {
     checked?: boolean;
+    initialChecked?: boolean;
+    indeterminate?: boolean;
+    value?: string;
+    onchange?: ((this: GlobalEventHandlers, event: Event) => unknown) | null;
 }
-export declare class Checkbox extends LitElement {
+export declare class Checkbox extends FormComponent implements CheckboxProps {
     #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     static styles: import("lit").CSSResult[];
     static get properties(): {
-        name: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        disabled: {
+        checked: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        checked: {
+        initialChecked: {
             type: BooleanConstructor;
-            reflect: boolean;
+            attribute: string;
         };
         indeterminate: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        value: {
+            type: StringConstructor;
+        };
     };
-    constructor();
-    /**
-     * Id of the checkbox input.
-     */
-    id: string;
-    /**
-     * Name of the checkbox input.
-     */
-    name: CheckboxProps['name'];
-    /**
-     * Option to disable the checkbox.
-     */
-    disabled: boolean;
-    /**
-     * Option to disable the checkbox.
-     */
-    checked: boolean;
-    /**
-     * Option to set the checkbox as indeterminate.
-     */
-    indeterminate: boolean;
     /**
-     * Input element within component.
+     * Value the checkbox should report to the form it is in.
      */
-    private input;
+    value: CheckboxProps['value'];
     /**
-     * Label element within component.
+     * Should the checkbox be checked initialluy or when the form it is in is reset.
      */
-    private label;
-    connectedCallback(): void;
+    initialChecked: CheckboxProps['initialChecked'];
+    createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    firstUpdated(): void;
-    updated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
-    focus(options?: FocusOptions | undefined): void;
+    get input(): HTMLInputElement | null;
+    set checked(checked: boolean);
+    get checked(): boolean;
+    set indeterminate(indeterminate: boolean);
+    get indeterminate(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    formDisabledCallback(disabled: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         '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
+export type { CheckboxProps } from './checkbox';

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,8 @@
 import { LitElement } from 'lit';
 export declare class Component extends LitElement {
-    protected emit: <T>(eventName: string, options?: CustomEventInit<T> | undefined) => void;
+    protected internals: ElementInternals | null;
+    protected emit: <T>(eventName: string, options?: CustomEventInit<T>) => void;
+    constructor();
     /**
      * Re-dispatches an event.
      * This function is useful for forwarding non-composed events, such as `change`
@@ -16,6 +18,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/form-component.d.ts

@@ -0,0 +1,5 @@
+import { Component } from './component';
+declare const FormComponent_base: import("../../utils/types").Constructor<import("./form-component.mixin").WithFormComponentMixinInterface> & typeof Component;
+export declare abstract class FormComponent extends FormComponent_base {
+}
+export {};

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

@@ -0,0 +1,17 @@
+import type { Component } from './component';
+import type { Constructor } from '../../utils/types';
+import type { FieldStatus } from '../field';
+export interface FormComponentProps {
+    name?: string;
+    disabled?: boolean;
+    status?: FieldStatus;
+}
+export declare class WithFormComponentMixinInterface implements FormComponentProps {
+    name?: string;
+    disabled?: boolean;
+    status?: FieldStatus;
+    protected getAssociatedForm(): HTMLFormElement | null;
+    protected setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    protected formDisabledCallback(disabled: boolean): void;
+}
+export declare const WithFormComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<WithFormComponentMixinInterface> & T;

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

@@ -1,2 +1,4 @@
 export { Component } from './component';
-//# sourceMappingURL=index.d.ts.map
+export { FormComponent } from './form-component';
+export { WithFormComponentMixin } from './form-component.mixin';
+export type { FormComponentProps } from './form-component.mixin';

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