@loadsmart/miranda-wc 2.0.0 → 2.1.0

package/dist/components/tag/actionable-tag.styles.d.ts

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

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

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

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

@@ -1,3 +1,4 @@
 export { Tag } from './tag';
 export type { TagProps, TagVariant, TagSize } from './tag';
-//# sourceMappingURL=index.d.ts.map
+export { ActionableTag } from './actionable-tag';
+export type { ActionableTagProps, ActionableTagVariant, ActionableTagChangeEventDetail, } from './actionable-tag';

package/dist/components/tag/tag.d.ts

@@ -1,13 +1,13 @@
 import { LitElement } from 'lit';
-export type TagVariant = 'success' | 'neutral' | 'warning' | 'danger';
+export type TagVariant = 'success' | 'neutral' | 'warning' | 'danger' | 'info';
 export type TagSize = 'small' | 'default' | 'large';
 export interface TagProps {
     variant?: TagVariant;
     size?: TagSize;
     isSkeleton?: boolean;
 }
-export declare class Tag extends LitElement {
-    static styles: import("lit").CSSResult[][];
+export declare class Tag extends LitElement implements TagProps {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[][];
     static get properties(): {
         variant: {
             type: StringConstructor;
@@ -40,4 +40,3 @@ declare global {
         'm-tag': Tag;
     }
 }
-//# sourceMappingURL=tag.d.ts.map

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

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

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

@@ -1,3 +1,2 @@
 export { Text } from './text';
 export type { TextProps } from './text';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,5 @@
 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';
@@ -8,12 +9,16 @@ export interface TextProps {
     ellipsized?: boolean;
     variant?: TypographyVariant;
 }
-declare const Text_base: import("../../mixins/polymorphic-tag/polymorphic-tag.types").Constructor<import("../../mixins/polymorphic-tag/polymorphic-tag.types").PolymorphicTagInterface> & typeof LitElement;
-export declare class Text extends Text_base {
+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 {
     static styles: import("lit").CSSResult[];
     static get properties(): {
         color: {
             type: StringConstructor;
+            reflect: boolean;
         };
         ellipsized: {
             type: BooleanConstructor;
@@ -40,7 +45,8 @@ export declare class Text extends Text_base {
      */
     variant: TypographyVariant;
     constructor();
-    render(): import("lit-html").TemplateResult<2 | 1>;
+    protected update(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -48,4 +54,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=text.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export { TextArea } from './text-area';
+export type { TextAreaProps } from './text-area';

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

@@ -0,0 +1,205 @@
+import type { PropertyValues } from 'lit';
+import { Component } from '../component';
+import type { FieldStatus } from '../field';
+export interface TextAreaProps {
+    autosize?: boolean;
+    autocomplete?: 'off' | 'on';
+    cols?: number;
+    dirname?: string;
+    disabled?: boolean;
+    'max-length'?: number;
+    'min-length'?: number;
+    name?: string;
+    placeholder?: string;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
+    'read-only'?: boolean;
+    rows?: number;
+    'spell-check'?: boolean | 'default';
+    status?: FieldStatus;
+    value?: string;
+    wrap?: 'hard' | 'soft';
+    textarea: HTMLTextAreaElement | null;
+    onchange?: GlobalEventHandlers['onchange'];
+    oninput?: GlobalEventHandlers['oninput'];
+}
+export declare class TextArea extends Component {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        autosize: {
+            type: BooleanConstructor;
+        };
+        autocomplete: {
+            type: BooleanConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        cols: {
+            type: NumberConstructor;
+        };
+        dirname: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        maxLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        minLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        resize: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        spellcheck: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        wrap: {
+            type: StringConstructor;
+        };
+        status: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * This attribute indicates whether the textarea height should automatically adjust to its content.
+     */
+    autosize: TextAreaProps['autosize'];
+    /**
+     * This attribute indicates whether the value of the control can be automatically
+     * completed by the browser. Possible values are:
+     * - `off`: The user must explicitly enter a value into this field for every use,
+     * or the document provides its own auto-completion method; the browser does
+     * not automatically complete the entry.
+     * - `on`: The browser can automatically complete the value based on values that
+     * the user has entered during previous uses.
+     *
+     * If the `autocomplete` attribute is not specified on a `<textarea>` element, then the
+     *  browser uses the `autocomplete` attribute value of the `<textarea>` element's
+     * form owner. The form owner is either the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+     * element that this `<textarea>` element is a descendant of or the form element
+     * whose `id` is specified by the `form` attribute of the input element. For more
+     * information, see the [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete)
+     * attribute in [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
+     */
+    autocomplete: TextAreaProps['autocomplete'];
+    /**
+     * The visible width of the text control, in average character widths. If it is
+     * specified, it must be a positive integer. If it is not specified, the default
+     * value is `40`.
+     */
+    cols: TextAreaProps['cols'];
+    /**
+     * This attribute is used to indicate the text directionality of the element contents
+     * similar to the [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname)
+     * attribute of the `<input>` element. For more information, see the
+     * [`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'];
+    /**
+     * 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'];
+    /**
+     * 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.
+     */
+    placeholder: TextAreaProps['placeholder'];
+    /**
+     * This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the
+     * `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'];
+    /**
+     * Determines whether an element is resizable, and if so, in which directions.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/resize
+     */
+    resize: TextAreaProps['resize'];
+    /**
+     * The number of visible text lines for the control. If it is specified, it must be a positive
+     * integer. If it is not specified, the default value is 6
+     */
+    rows: TextAreaProps['rows'];
+    /**
+     * Text area status type.
+     */
+    status: TextAreaProps['status'];
+    /**
+     * Text area value.
+     */
+    value?: TextAreaProps['value'];
+    /**
+     * 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
+     * the width of the control; the [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols)
+     * attribute must be specified for this to take effect
+     * - `soft`: The browser ensures that all line breaks in the entered value are a `CR+LF` pair, but no additional
+     * line breaks are added to the value.
+     *
+     * 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;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    get textarea(): HTMLTextAreaElement | null;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-text-area': TextArea;
+    }
+}

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

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

package/dist/components/text-field/index.d.ts

@@ -1,3 +1,2 @@
 export { TextField } from './text-field';
 export type { TextFieldProps } from './text-field';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,29 +1,33 @@
+import type { PropertyValues } from 'lit';
 import { Component } from '../component';
 import '../layout/group';
 import '../close-button';
 import type { FieldStatus } from '../field';
-import type { ChangeEventHandler } from '../../utils/types';
 export type TextFieldSize = 'small' | 'default' | 'large';
 export interface TextFieldProps {
+    autocomplete?: HTMLInputElement['autocomplete'];
     clearable?: boolean;
     disabled?: boolean;
+    'input-mode'?: 'none' | 'text' | 'numeric' | 'tel' | 'url';
     max?: string;
     'max-length'?: number;
     min?: string;
     'min-length'?: number;
+    name?: string;
     pattern?: string;
     placeholder?: string;
     'read-only'?: boolean;
     size?: TextFieldSize;
     status?: FieldStatus;
     step?: string;
-    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'time';
     value?: string;
     'm-clear'?: (event: CustomEvent) => void;
-    change?: ChangeEventHandler<HTMLInputElement>;
-    input?: (event: Event) => void;
+    input: HTMLInputElement | null;
+    onchange?: GlobalEventHandlers['onchange'];
+    oninput?: GlobalEventHandlers['oninput'];
 }
-export declare class TextField extends Component {
+export declare class TextField extends Component implements TextFieldProps {
     #private;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -34,6 +38,10 @@ export declare class TextField extends Component {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        inputMode: {
+            type: StringConstructor;
+            attribute: string;
+        };
         max: {
             type: StringConstructor;
         };
@@ -50,6 +58,9 @@ export declare class TextField extends Component {
             reflect: boolean;
             attribute: string;
         };
+        name: {
+            type: StringConstructor;
+        };
         pattern: {
             type: StringConstructor;
         };
@@ -63,9 +74,11 @@ export declare class TextField extends Component {
         };
         size: {
             type: StringConstructor;
+            reflect: boolean;
         };
         status: {
             type: StringConstructor;
+            reflect: boolean;
         };
         step: {
             type: StringConstructor;
@@ -77,6 +90,14 @@ export declare class TextField extends Component {
             type: StringConstructor;
         };
     };
+    /**
+     * Lets web developers specify what if any permission the user agent has to provide
+     * automated assistance in filling out form field values, as well as guidance to the
+     * browser as to the type of information expected in the field.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete: TextFieldProps['autocomplete'];
     /**
      * Should the text field be clearable.
      */
@@ -152,13 +173,22 @@ export declare class TextField extends Component {
      * Text field status type.
      */
     status: TextFieldProps['status'];
+    /**
+     * Text field name.
+     */
+    name: TextFieldProps['name'];
     private inputElement;
     /**
      * If there's a m-field ancestor, we want to consume its context.
      */
     private field;
     constructor();
+    'max-length'?: number | undefined;
+    'min-length'?: number | undefined;
+    'read-only'?: boolean | undefined;
+    'm-clear'?: ((event: CustomEvent) => void) | undefined;
     connectedCallback(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     get input(): HTMLInputElement | null;
     clear(): void;
@@ -169,4 +199,3 @@ declare global {
         'm-text-field': TextField;
     }
 }
-//# sourceMappingURL=text-field.d.ts.map

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

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

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

@@ -0,0 +1,10 @@
+export { Timeline } from './timeline';
+export { TimelineExpandableItem } from './timeline-expandable-item';
+export { TimelineItem } from './timeline-item';
+export type { TimelineItemProps, TimelineItemVariant } from './timeline-item';
+export { TimelineItemBody } from './timeline-item-body';
+export { TimelineItemFooter } from './timeline-item-footer';
+export { TimelineItemHeader } from './timeline-item-header';
+export { TimelineItemHeaderSubtitle } from './timeline-item-header-subtitle';
+export { TimelineItemHeaderTitle } from './timeline-item-header-title';
+export { TimelineItemIcon } from './timeline-item-icon';

package/dist/components/timeline/timeline-expandable-item.d.ts

@@ -0,0 +1,76 @@
+import type { PropertyValues } from 'lit';
+import '../icon';
+import type { TimelineItemProps } from './timeline-item';
+import { Component } from '../component';
+export interface TimelineExpandableItemProps extends TimelineItemProps {
+    expanded?: boolean;
+}
+export interface TimelineItemToggleEventDetails {
+    name: 'timeline-item-expanded';
+    value: boolean;
+}
+export declare class TimelineExpandableItem extends Component implements TimelineExpandableItemProps {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        completed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        expanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        divider: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * Is this entry completed?
+     */
+    completed: TimelineExpandableItemProps['completed'];
+    /**
+     * Is this entry the active one?
+     */
+    active: TimelineExpandableItemProps['active'];
+    /**
+     * Should this entry render a bottom divider?
+     */
+    divider: TimelineItemProps['divider'];
+    /**
+     * Timeline event style variant.
+     */
+    variant: TimelineExpandableItemProps['variant'];
+    /**
+     * Item expand status
+     */
+    expanded: TimelineExpandableItemProps['expanded'];
+    /**
+     * Scrollable height for item body
+     */
+    private bodyHeight;
+    /**
+     * Resize observer for item body height changes
+     */
+    private resizeObserver;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-timeline-expandable-item': TimelineExpandableItem;
+    }
+}

package/dist/components/timeline/timeline-item-body.d.ts

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

package/dist/components/timeline/timeline-item-footer.d.ts

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

package/dist/components/timeline/timeline-item-header-subtitle.d.ts

@@ -0,0 +1,9 @@
+import { Text } from '../text';
+export declare class TimelineItemHeaderSubtitle extends Text {
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-timeline-item-header-subtitle': TimelineItemHeaderSubtitle;
+    }
+}

package/dist/components/timeline/timeline-item-header-title.d.ts

@@ -0,0 +1,11 @@
+import { Text } from '../text';
+export declare class TimelineItemHeaderTitle extends Text {
+    #private;
+    constructor();
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-timeline-item-header-title': TimelineItemHeaderTitle;
+    }
+}

package/dist/components/timeline/timeline-item-header.d.ts

@@ -0,0 +1,28 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import type { AlignItemsValue } from '../layout';
+interface TimelineItemHeaderProps {
+    align?: AlignItemsValue;
+}
+export declare class TimelineItemHeader extends LitElement implements TimelineItemHeaderProps {
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        align: {
+            type: StringConstructor;
+        };
+    };
+    /**
+     * Value for align-items.
+     * @default 'baseline'
+     */
+    align: TimelineItemHeaderProps['align'];
+    connectedCallback(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-timeline-item-header': TimelineItemHeader;
+    }
+}
+export {};

package/dist/components/timeline/timeline-item-icon.d.ts

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

package/dist/components/timeline/timeline-item.context.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineItemVariant } from './timeline-item';
+export type TimelineEventContext = {
+    completed: boolean;
+    active: boolean;
+    variant: TimelineItemVariant;
+};
+export declare const timelineItemContext: {
+    __context__: TimelineEventContext;
+};