@loadsmart/miranda-wc 2.1.0 → 3.0.0-alpha.1

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

@@ -1,2 +1,2 @@
-declare function styles(): import("lit").CSSResult;
+declare function styles(selector?: string): import("lit").CSSResult;
 export default styles;

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

@@ -1,12 +1,11 @@
 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;
@@ -14,27 +13,26 @@ export interface ButtonProps {
     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 FormControl implements ButtonProps {
+export declare class Button extends FormComponent implements ButtonProps {
     #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     static styles: import("lit").CSSResult[][];
-    /**
-     * Which HTML tag should be used to render this element.
-     */
-    private get tag();
     static get properties(): {
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         loading: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         variant: {
             type: StringConstructor;
             reflect: boolean;
@@ -45,6 +43,25 @@ export declare class Button extends FormControl implements ButtonProps {
         };
         type: {
             type: StringConstructor;
+            reflect: boolean;
+        };
+        form: {
+            type: StringConstructor;
+        };
+        formaction: {
+            type: StringConstructor;
+        };
+        formenctype: {
+            type: StringConstructor;
+        };
+        formmethod: {
+            type: StringConstructor;
+        };
+        formnovalidate: {
+            type: BooleanConstructor;
+        };
+        formtarget: {
+            type: StringConstructor;
         };
         href: {
             type: StringConstructor;
@@ -56,54 +73,71 @@ export declare class Button extends FormControl implements ButtonProps {
         download: {
             type: StringConstructor;
         };
-        form: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
     };
     /**
      * The button is waiting for some operation to be finished.
      */
-    loading?: ButtonProps['loading'];
-    /**
-     * Should the button be disabled.
-     */
-    disabled?: ButtonProps['disabled'];
+    loading: ButtonProps['loading'];
     /**
      * Button variant.
      */
-    variant?: ButtonProps['variant'];
+    variant: ButtonProps['variant'];
     /**
      * Button size.
      */
-    size?: ButtonProps['size'];
+    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'];
+    /**
+     * 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 willUpdate(changedProperties: PropertyValues<this>): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult;
-    focus(options?: FocusOptions | undefined): void;
+    protected update(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 {
     interface HTMLElementTagNameMap {
         'm-button': Button;
     }
 }
-export {};

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

@@ -1,72 +1,60 @@
-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 implements CheckboxProps {
+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 {

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

@@ -1,2 +1,2 @@
 export { Checkbox } from './checkbox';
-export type { CheckboxProps, CheckboxChangeEventDetail } from './checkbox';
+export type { CheckboxProps } from './checkbox';

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

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
 export declare class Component extends LitElement {
+    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`

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 +1,4 @@
 export { Component } from './component';
+export { FormComponent } from './form-component';
+export { WithFormComponentMixin } from './form-component.mixin';
+export type { FormComponentProps } from './form-component.mixin';

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

@@ -1,8 +1,8 @@
 import type { FieldSize, FieldStatus } from './field.types';
 export interface FieldContext {
-    required?: boolean;
+    required: boolean;
     status?: FieldStatus;
-    size?: FieldSize;
+    size: FieldSize;
 }
 declare const fieldContext: {
     __context__: FieldContext;

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

@@ -16,6 +16,7 @@ export interface FieldProps {
     align?: StackProps['align'];
 }
 export declare class Field extends Component implements FieldProps {
+    static styles: import("lit").CSSResult[][];
     static get properties(): {
         label: {
             type: StringConstructor;

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

@@ -0,0 +1,2 @@
+export declare function fieldStyles(): import("lit").CSSResult[];
+export declare function hintStyles(): import("lit").CSSResult[];

package/dist/components/labeled-value/labeled-value-label.d.ts

@@ -6,6 +6,10 @@ export declare class LabeledValueLabel extends Text {
             type: StringConstructor;
             reflect: boolean;
         };
+        as: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         color: {
             type: StringConstructor;
             reflect: boolean;

package/dist/components/popover/popover.d.ts

@@ -2,7 +2,7 @@ import type { PropertyValues } from 'lit';
 import type { PopoverProps } from './popover.types';
 import { Component } from '../component';
 export declare const POPOVER_PLACEMENT_VALUES: string[];
-export declare abstract class Popover extends Component {
+export declare class Popover extends Component {
     #private;
     static get properties(): {
         position: {
@@ -42,9 +42,9 @@ export declare abstract class Popover extends Component {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     updated(changedProperties: PropertyValues<this>): void;
-    abstract getReferenceElement(): HTMLElement | null;
-    abstract getFloatingElement(): HTMLElement | null;
-    abstract getArrowElement(): HTMLElement | null;
+    getReferenceElement(): HTMLElement | null;
+    getFloatingElement(): HTMLElement | null;
+    getArrowElement(): HTMLElement | null;
     getFloatingOffset: () => number;
     get reference(): HTMLElement | null;
     get floating(): HTMLElement | null;

package/dist/components/progress-bar-countdown/progress-bar-countdown.d.ts

@@ -2,7 +2,7 @@ import type { ProgressBarProps } from '../progress-bar';
 import { ProgressBar } from '../progress-bar';
 export type ProgressBarCountdownProps = Omit<ProgressBarProps, 'variant'>;
 export declare class ProgressBarCountdown extends ProgressBar implements ProgressBarCountdownProps {
-    get currentVariant(): "warning" | "danger" | "success";
+    get currentVariant(): "danger" | "warning" | "success";
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/radio-group/index.d.ts

@@ -1,4 +1,4 @@
 export { Radio } from './radio';
 export type { RadioProps } from './radio';
 export { RadioGroup } from './radio-group';
-export type { RadioGroupProps, RadioGroupOrientation, RadioGroupChangeEventDetail, } from './radio-group';
+export type { RadioGroupProps, RadioGroupOrientation } from './radio-group';

package/dist/components/radio-group/radio-group.d.ts

@@ -1,65 +1,81 @@
 import type { PropertyValues } from 'lit';
-import { LitElement } from 'lit';
-import type { AcceptedType, SelectionState, SelectionType } from '../../controllers/selection';
+import { Component } from '../component';
+import { fromAttribute } from '../../controllers/selection';
+import type { AcceptedType, SelectionType } from '../../controllers/selection';
 export type RadioGroupOrientation = 'vertical' | 'horizontal';
-export type RadioGroupChangeEventDetail = {
-    type: SelectionType;
-    value: string;
-};
 export interface RadioGroupProps {
-    value?: AcceptedType;
+    initialValue?: AcceptedType;
     disabled?: boolean;
+    name?: string;
     orientation?: RadioGroupOrientation;
-    'm-change'?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
+    value?: AcceptedType;
+    onchange?: GlobalEventHandlers['onchange'];
 }
-export declare class RadioGroup extends LitElement implements RadioGroupProps {
+declare const RadioGroup_base: import("../../utils/types").Constructor<import("../../controllers/selection/selection-control.mixin").WithSelectionControlMixinInterface> & typeof Component;
+export declare class RadioGroup extends RadioGroup_base implements RadioGroupProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         disabled: {
             type: BooleanConstructor;
+        };
+        initialValue: {
+            type: StringConstructor;
+            attribute: string;
+            fromAttribute: typeof fromAttribute;
             reflect: boolean;
         };
-        selection: {
-            state: boolean;
+        /**
+         * We use a different property name internally so the react wrapper can still
+         * keep track of the property while we can use custom getter/setter to
+         * set and reflect the `value` attribute.
+         */
+        providedValue: {
+            type: StringConstructor;
+            attribute: string;
+            fromAttribute: typeof fromAttribute;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
         };
         orientation: {
             type: StringConstructor;
         };
     };
     /**
-     * Value of the selected radio-button.
+     *  Name that will represent this radio group in the form.
      */
-    value: RadioGroupProps['value'];
+    name: RadioGroupProps['name'];
     /**
-     * Type of the selected radio-button.
-     *  It is necessary due to eligibility as a SelectionHost for the SelectionController
+     * Should the button be disabled.
      */
-    type: SelectionType;
+    disabled: RadioGroupProps['disabled'];
     /**
-     * Should the button be disabled.
+     * Buttons display orientation (vertical or horizontal)
      */
-    disabled: boolean;
+    orientation: RadioGroupProps['orientation'];
     /**
-     * Inner toggle selection state.
+     * Value that will be selected by default on initialization and form reset.
      */
-    selection: SelectionState;
+    initialValue: RadioGroupProps['initialValue'];
     /**
-     * Buttons display orientation (vertical or horizontal)
+     * Current selected value.
      */
-    orientation: RadioGroupOrientation;
+    providedValue: RadioGroupProps['value'];
     constructor();
-    connectedCallback(): void;
+    getSelectionType(): SelectionType;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     protected update(changedProperties: PropertyValues<this>): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
+    get value(): string;
+    set value(value: string);
+    protected handleFormReset: () => void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'm-radio-group': RadioGroup;
     }
 }
+export {};

package/dist/components/radio-group/radio-group.styles.d.ts

@@ -1,2 +1,2 @@
-declare function styles(): import("lit").CSSResult;
-export default styles;
+export declare function radioGroupStyles(): import("lit").CSSResult;
+export declare function radioStyles(): import("lit").CSSResult;

package/dist/components/radio-group/radio.d.ts

@@ -1,46 +1,44 @@
 import type { PropertyValues } from 'lit';
-import { LitElement } from 'lit';
-export interface RadioProps {
-    value: string;
-    disabled?: boolean;
+import { Component } from '../component';
+import type { FormComponentProps } from '../component';
+export interface RadioProps extends FormComponentProps {
     checked?: boolean;
+    value: string;
 }
-export declare class Radio extends LitElement implements RadioProps {
+declare const Radio_base: import("../../utils/types").Constructor<import("../component/form-component.mixin").WithFormComponentMixinInterface> & typeof Component;
+export declare class Radio extends Radio_base implements RadioProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
-        value: {
-            type: StringConstructor;
-        };
-        disabled: {
+        checked: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        checked: {
-            type: BooleanConstructor;
+        value: {
+            type: StringConstructor;
             reflect: boolean;
         };
     };
     /**
      * Value of the button, raised with the event.
      */
-    value: string;
-    /**
-     * Should the button be disabled.
-     */
-    disabled: boolean;
+    value: RadioProps['value'];
     /**
      * The button initial state
      */
-    checked: boolean;
+    checked: RadioProps['checked'];
     constructor();
     connectedCallback(): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
-    focus(options?: FocusOptions | undefined): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    formDisabledCallback(disabled: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'm-radio': Radio;
     }
 }
+export {};

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

@@ -1,2 +1,2 @@
 export { Switch } from './switch';
-export type { SwitchProps, SwitchChangeEventDetail, SwitchSize, } from './switch';
+export type { SwitchProps, SwitchSize } from './switch';