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

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';

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

@@ -1,59 +1,54 @@
 import type { PropertyValues } from 'lit';
-import { Component } from '../component';
+import { FormComponent } from '../component';
+import type { FormComponentProps } from '../component';
 export type SwitchSize = 'default' | 'large';
-export type SwitchChangeEventDetail = {
-    name?: string;
-    checked: boolean;
-};
-export interface SwitchProps {
-    name?: string;
-    disabled?: boolean;
+export interface SwitchProps extends FormComponentProps {
     checked?: boolean;
+    initialChecked?: boolean;
     size?: SwitchSize;
-    'm-change'?: (event: CustomEvent<SwitchChangeEventDetail>) => void;
+    onchange?: ((this: GlobalEventHandlers, event: Event) => unknown) | null;
 }
-export declare class Switch extends Component implements SwitchProps {
+export declare class Switch extends FormComponent implements SwitchProps {
     #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;
         };
         size: {
             type: StringConstructor;
             reflect: boolean;
         };
     };
-    /**
-     * Switch name.
-     */
-    name: SwitchProps['name'];
-    /**
-     * Option to disable the switch.
-     */
-    disabled: SwitchProps['disabled'];
-    /**
-     * Option to check the switch.
-     */
-    checked: SwitchProps['checked'];
     /**
      * Switch size.
      */
     size: SwitchProps['size'];
-    constructor();
-    connectedCallback(): void;
+    /**
+     * Should the switch be checked initially or when the form it is in is reset.
+     */
+    initialChecked: SwitchProps['initialChecked'];
+    createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
+    get input(): HTMLInputElement | null;
+    set checked(checked: boolean);
+    get checked(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    formDisabledCallback(disabled: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/text/text.d.ts

@@ -1,21 +1,21 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { ColorToken } from '@loadsmart/miranda-tokens';
-import type { TypographyVariant } from '../../styles/typography';
-import type { HTMLTag } from '../../mixins/polymorphic-tag';
+import type { TypographyVariant } from '../../styles';
+type HTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 export interface TextProps {
     as?: HTMLTag;
     color?: ColorToken;
     ellipsized?: boolean;
     variant?: TypographyVariant;
 }
-declare const Text_base: import("../../utils/types").Constructor<{
-    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-    readonly tag: import("lit-html/static").StaticValue;
-}> & typeof LitElement;
-export declare class Text extends Text_base implements TextProps {
+export declare class Text extends LitElement implements TextProps {
     static styles: import("lit").CSSResult[];
     static get properties(): {
+        as: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         color: {
             type: StringConstructor;
             reflect: boolean;
@@ -44,6 +44,12 @@ export declare class Text extends Text_base implements TextProps {
      * @type {TypographyVariant}
      */
     variant: TypographyVariant;
+    /**
+     * Which HTML tag should be used to render this element.
+     * @type {HTMLTag}
+     * @deprecated wrap the text in the desired tag
+     */
+    as?: HTMLTag;
     constructor();
     protected update(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult;

package/dist/components/text-area/text-area.d.ts

@@ -1,50 +1,49 @@
 import type { PropertyValues } from 'lit';
-import { Component } from '../component';
-import type { FieldStatus } from '../field';
-export interface TextAreaProps {
+import { FormComponent } from '../component';
+import type { FormComponentProps } from '../component';
+export interface TextAreaProps extends FormComponentProps {
     autosize?: boolean;
     autocomplete?: 'off' | 'on';
     cols?: number;
+    initialValue?: string;
     dirname?: string;
-    disabled?: boolean;
-    'max-length'?: number;
-    'min-length'?: number;
-    name?: string;
+    maxLength?: number;
+    minLength?: number;
     placeholder?: string;
     resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
-    'read-only'?: boolean;
+    readOnly?: boolean;
     rows?: number;
-    'spell-check'?: boolean | 'default';
-    status?: FieldStatus;
+    spellCheck?: boolean | 'default';
     value?: string;
     wrap?: 'hard' | 'soft';
     textarea: HTMLTextAreaElement | null;
     onchange?: GlobalEventHandlers['onchange'];
     oninput?: GlobalEventHandlers['oninput'];
 }
-export declare class TextArea extends Component {
+export declare class TextArea extends FormComponent implements TextAreaProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
-        autosize: {
-            type: BooleanConstructor;
-        };
         autocomplete: {
             type: BooleanConstructor;
         };
         autofocus: {
             type: BooleanConstructor;
         };
+        autosize: {
+            type: BooleanConstructor;
+        };
         cols: {
             type: NumberConstructor;
         };
-        dirname: {
+        initialValue: {
             type: StringConstructor;
-        };
-        disabled: {
-            type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
+        dirname: {
+            type: StringConstructor;
+        };
         maxLength: {
             type: NumberConstructor;
             reflect: boolean;
@@ -55,9 +54,6 @@ export declare class TextArea extends Component {
             reflect: boolean;
             attribute: string;
         };
-        name: {
-            type: StringConstructor;
-        };
         placeholder: {
             type: StringConstructor;
         };
@@ -80,14 +76,11 @@ export declare class TextArea extends Component {
         };
         value: {
             type: StringConstructor;
+            reflect: boolean;
         };
         wrap: {
             type: StringConstructor;
         };
-        status: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
     };
     /**
      * This attribute indicates whether the textarea height should automatically adjust to its content.
@@ -124,26 +117,15 @@ export declare class TextArea extends Component {
      * [`dirname` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/dirname).
      */
     dirname: TextAreaProps['dirname'];
-    /**
-     * This Boolean attribute indicates that the user cannot interact with the control. If this
-     * attribute is not specified, the control inherits its setting from the containing element,
-     * for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset);
-     * if there is no containing element when the `disabled` attribute is set, the control is enabled.
-     */
-    disabled: TextAreaProps['disabled'];
     /**
      * The maximum string length (measured in UTF-16 code units) that the user can enter. If this value
      * isn't specified, the user can enter an unlimited number of characters.
      */
-    maxLength: TextAreaProps['max-length'];
+    maxLength: TextAreaProps['maxLength'];
     /**
      * The minimum string length (measured in UTF-16 code units) required that the user should enter.
      */
-    minLength: TextAreaProps['min-length'];
-    /**
-     * The name of the control.
-     */
-    name: TextAreaProps['name'];
+    minLength: TextAreaProps['minLength'];
     /**
      * A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the
      * placeholder text must be treated as line breaks when rendering the hint.
@@ -154,7 +136,7 @@ export declare class TextArea extends Component {
      * `disabled` attribute, the `readonly` attribute does not prevent the user from clicking or selecting
      * in the control. The value of a read-only control is still submitted with the form.
      */
-    readOnly: TextAreaProps['read-only'];
+    readOnly: TextAreaProps['readOnly'];
     /**
      * Determines whether an element is resizable, and if so, in which directions.
      *
@@ -167,13 +149,9 @@ export declare class TextArea extends Component {
      */
     rows: TextAreaProps['rows'];
     /**
-     * Text area status type.
-     */
-    status: TextAreaProps['status'];
-    /**
-     * Text area value.
+     * Text area default value.
      */
-    value?: TextAreaProps['value'];
+    initialValue?: TextAreaProps['initialValue'];
     /**
      * Indicates how the control should wrap the value for form submission. Possible values are:
      * - `hard`: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than
@@ -185,18 +163,23 @@ export declare class TextArea extends Component {
      * If this attribute is not specified, soft is its default value.
      */
     wrap: TextAreaProps['wrap'];
-    private textAreaElement;
-    /**
-     * If there's a m-field ancestor, we want to consume its context.
-     */
-    private field;
     constructor();
-    connectedCallback(): void;
-    protected update(changedProperties: PropertyValues<this>): void;
+    createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    update(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     get textarea(): HTMLTextAreaElement | null;
+    /**
+     * Textarea value.
+     */
+    set value(value: string);
+    get value(): string;
     focus(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(disabled: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {