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

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

@@ -0,0 +1,126 @@
+import { LitElement } from 'lit';
+import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
+import type { AlignItemsValue } from '../layout';
+import type { JustifyContentValue } from '../layout/layout.types';
+import type { TextProps } from '../text';
+import '../layout/stack';
+import '../layout/group';
+import '../text';
+import './labeled-value-label';
+import './labeled-value-value';
+export declare const defaultLabeledValueProps: {
+    readonly gap: "spacing-2";
+    readonly justify: "flex-start";
+};
+export interface LabeledValueProps {
+    /**
+     * If true, the label and value will be displayed in a row.
+     */
+    inline?: boolean;
+    /**
+     * Label of the component. If not provided, it will look for a slot with the name 'label'.
+     */
+    label?: string;
+    /**
+     * Value of the component. If not provided, it will look for a slot with the name 'value'.
+     */
+    value?: string;
+    /**
+     * Gap between the label and the value. It can be Spacing token name. Default is 'spacing-2'.
+     */
+    gap?: SpacingTokenWithNone;
+    /**
+     * Alignment of the component. Default is 'flex-start', but it changes to 'center' if `inline` is true.
+     */
+    align?: AlignItemsValue;
+    /**
+     * Justify content of the component. Default is 'flex-start'.
+     */
+    justify?: JustifyContentValue;
+    /**
+     * Fallback value for the value if the value is `null` or `undefined`. Default to '-'.
+     */
+    fallbackValue?: string;
+    /**
+     * Size of the label. Default is 'body-sm' when `inline` is `false`; Default is 'body-md' when `inline` is `true`.
+     */
+    labelVariant?: TextProps['variant'];
+    /**
+     * Color of the label. Default is 'text-tertiary'.
+     */
+    labelColor?: TextProps['color'];
+    /**
+     * Size of the value. Default is 'body-md'.
+     */
+    valueVariant?: TextProps['variant'];
+    /**
+     * Color of the value. Default is 'text-primary'.
+     */
+    valueColor?: TextProps['color'];
+}
+export declare class LabeledValue extends LitElement implements LabeledValueProps {
+    constructor();
+    static get properties(): {
+        inline: {
+            type: BooleanConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        gap: {
+            type: StringConstructor;
+        };
+        align: {
+            type: StringConstructor;
+        };
+        justify: {
+            type: StringConstructor;
+        };
+        fallbackValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        labelVariant: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        labelColor: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        valueVariant: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        valueColor: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    inline?: LabeledValueProps['inline'];
+    label?: LabeledValueProps['label'];
+    value?: LabeledValueProps['value'];
+    gap: LabeledValueProps['gap'];
+    align: LabeledValueProps['align'];
+    justify: LabeledValueProps['justify'];
+    fallbackValue: LabeledValueProps['fallbackValue'];
+    labelVariant: LabeledValueProps['labelVariant'];
+    labelColor: LabeledValueProps['labelColor'];
+    valueVariant: LabeledValueProps['valueVariant'];
+    valueColor: LabeledValueProps['valueColor'];
+    private getFallback;
+    private getLabel;
+    private getValue;
+    private getLabelVariant;
+    private get wrapperAlign();
+    private bodyTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-labeled-value': LabeledValue;
+    }
+}

package/dist/components/layout/base-layout/base-layout.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { BaseLayoutProps } from './base-layout.types';
-export declare class BaseLayout extends LitElement {
+export declare class BaseLayout extends LitElement implements BaseLayoutProps {
     #private;
     static get properties(): {
         padding: {
@@ -43,4 +43,3 @@ export declare class BaseLayout extends LitElement {
     protected update(changedProperties: PropertyValues<BaseLayoutProps>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-//# sourceMappingURL=base-layout.d.ts.map

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

@@ -1,2 +1 @@
 export declare function getBaseLayoutStyles(cssPropertiesPrefix: string): import("lit").CSSResult;
-//# sourceMappingURL=base-layout.styles.d.ts.map

package/dist/components/layout/base-layout/base-layout.types.d.ts

@@ -29,4 +29,3 @@ export type BaseLayoutProps = {
      */
     paddingR?: SpacingTokenWithNone;
 };
-//# sourceMappingURL=base-layout.types.d.ts.map

package/dist/components/layout/base-layout/index.d.ts

@@ -1,4 +1,3 @@
 export { BaseLayout } from './base-layout';
 export { getBaseLayoutStyles } from './base-layout.styles';
 export type { BaseLayoutProps } from './base-layout.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/box/box.constants.d.ts

@@ -3,4 +3,3 @@ import type { BoxProps } from './box.types';
 export declare const defaultBoxProps: Required<Pick<BoxProps, 'padding' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'textAlign'>> & {
     padding: SpacingToken;
 };
-//# sourceMappingURL=box.constants.d.ts.map

package/dist/components/layout/box/box.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { BoxProps } from './box.types';
-export declare class Box extends BaseLayout {
+export declare class Box extends BaseLayout implements BoxProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -58,7 +58,6 @@ export declare class Box extends BaseLayout {
     borderWidth: BoxProps['borderWidth'];
     borderColor: BoxProps['borderColor'];
     textAlign: BoxProps['textAlign'];
-    constructor();
     getCSSPropertiesPrefix(): string;
     protected update(changedProperties: PropertyValues<BoxProps>): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -68,4 +67,3 @@ declare global {
         'm-box': Box;
     }
 }
-//# sourceMappingURL=box.d.ts.map

package/dist/components/layout/box/box.styles.d.ts

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

package/dist/components/layout/box/box.types.d.ts

@@ -31,4 +31,3 @@ export type BoxProps = BaseLayoutProps & {
      */
     textAlign?: 'left' | 'center' | 'right';
 };
-//# sourceMappingURL=box.types.d.ts.map

package/dist/components/layout/box/index.d.ts

@@ -1,4 +1,3 @@
 export { Box } from './box';
 export { defaultBoxProps } from './box.constants';
 export type { BoxProps } from './box.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/grid/grid.constants.d.ts

@@ -3,4 +3,3 @@ import type { GridProps } from './grid.types';
 export declare const defaultGridProps: Required<Pick<GridProps, 'minColumnWidth'>> & {
     gap: SpacingToken;
 };
-//# sourceMappingURL=grid.constants.d.ts.map

package/dist/components/layout/grid/grid.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { GridProps } from './grid.types';
-export declare class Grid extends BaseLayout {
+export declare class Grid extends BaseLayout implements GridProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -52,7 +52,6 @@ export declare class Grid extends BaseLayout {
     rowGap: GridProps['rowGap'];
     columnGap: GridProps['columnGap'];
     minColumnWidth: GridProps['minColumnWidth'];
-    constructor();
     getCSSPropertiesPrefix(): string;
     protected update(changedProperties: PropertyValues<GridProps>): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -62,4 +61,3 @@ declare global {
         'm-grid': Grid;
     }
 }
-//# sourceMappingURL=grid.d.ts.map

package/dist/components/layout/grid/grid.styles.d.ts

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

package/dist/components/layout/grid/grid.types.d.ts

@@ -25,4 +25,3 @@ export type GridAttributes = Pick<GridProps, 'gap'> & {
     'column-gap': GridProps['columnGap'];
     'min-column-width': GridProps['minColumnWidth'];
 };
-//# sourceMappingURL=grid.types.d.ts.map

package/dist/components/layout/grid/index.d.ts

@@ -1,4 +1,3 @@
 export { Grid } from './grid';
 export { defaultGridProps } from './grid.constants';
 export type { GridProps, GridAttributes } from './grid.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/group/group.constants.d.ts

@@ -3,4 +3,3 @@ import type { GroupProps } from './group.types';
 export declare const defaultGroupProps: Required<Pick<GroupProps, 'align' | 'justify'>> & {
     gap: SpacingToken;
 };
-//# sourceMappingURL=group.constants.d.ts.map

package/dist/components/layout/group/group.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { GroupProps } from './group.types';
-export declare class Group extends BaseLayout {
+export declare class Group extends BaseLayout implements GroupProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -45,7 +45,6 @@ export declare class Group extends BaseLayout {
     gap: GroupProps['gap'];
     align: GroupProps['align'];
     justify: GroupProps['justify'];
-    constructor();
     getCSSPropertiesPrefix(): string;
     protected update(changedProperties: PropertyValues<GroupProps>): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -55,4 +54,3 @@ declare global {
         'm-group': Group;
     }
 }
-//# sourceMappingURL=group.d.ts.map

package/dist/components/layout/group/group.styles.d.ts

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

package/dist/components/layout/group/group.types.d.ts

@@ -19,4 +19,3 @@ export type GroupProps = BaseLayoutProps & {
     justify?: JustifyContentValue;
 };
 export type GroupAttributes = GroupProps;
-//# sourceMappingURL=group.types.d.ts.map

package/dist/components/layout/group/index.d.ts

@@ -1,4 +1,3 @@
 export { Group } from './group';
 export { defaultGroupProps } from './group.constants';
 export type { GroupProps, GroupAttributes } from './group.types';
-//# sourceMappingURL=index.d.ts.map

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

@@ -6,4 +6,4 @@ export * from './stack';
 export * from './grid';
 export * from './sidebar';
 export * from './switcher';
-//# sourceMappingURL=index.d.ts.map
+export * from './row';

package/dist/components/layout/layout.constants.d.ts

@@ -1,3 +1,2 @@
-export declare const ALIGN_ITEMS_VALUES: readonly ["center", "flex-start", "flex-end", "stretch"];
+export declare const ALIGN_ITEMS_VALUES: readonly ["baseline", "center", "flex-start", "flex-end", "stretch"];
 export declare const JUSTIFY_CONTENT_VALUES: readonly ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"];
-//# sourceMappingURL=layout.constants.d.ts.map

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

@@ -1,4 +1,3 @@
 import type { ALIGN_ITEMS_VALUES, JUSTIFY_CONTENT_VALUES } from './layout.constants';
 export type AlignItemsValue = (typeof ALIGN_ITEMS_VALUES)[number];
 export type JustifyContentValue = (typeof JUSTIFY_CONTENT_VALUES)[number];
-//# sourceMappingURL=layout.types.d.ts.map

package/dist/components/layout/row/column.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import type { ColumnProps } from './row.types';
+export declare class Column extends LitElement implements ColumnProps {
+    protected static CSSPropertiesPrefix: string;
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        sm: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        md: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        lg: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        offsetSm: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        offsetMd: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        offsetLg: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+    };
+    sm: ColumnProps['sm'];
+    md: ColumnProps['md'];
+    lg: ColumnProps['lg'];
+    offsetSm: ColumnProps['offsetSm'];
+    offsetMd: ColumnProps['offsetMd'];
+    offsetLg: ColumnProps['offsetLg'];
+    connectedCallback(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-column': Column;
+    }
+}

package/dist/components/layout/row/container.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class Container extends LitElement {
+    protected static CSSPropertiesPrefix: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-container': Container;
+    }
+}

package/dist/components/layout/row/index.d.ts

@@ -0,0 +1,4 @@
+export { Container } from './container';
+export { Row } from './row';
+export { Column } from './column';
+export type { ColumnProps, ColumnSize, RowProps } from './row.types';

package/dist/components/layout/row/row.constants.d.ts

@@ -0,0 +1,5 @@
+import type { SpacingToken } from '@loadsmart/miranda-tokens';
+export declare const COLUMNS = 4;
+export declare const defaultRowProps: {
+    gap: SpacingToken;
+};

package/dist/components/layout/row/row.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import type { RowProps } from './row.types';
+export declare class Row extends LitElement implements RowProps {
+    protected static CSSPropertiesPrefix: string;
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        gap: {
+            type: StringConstructor;
+        };
+        columnGap: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        rowGap: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    gap: RowProps['gap'];
+    columnGap: RowProps['columnGap'];
+    rowGap: RowProps['rowGap'];
+    connectedCallback(): void;
+    protected update(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-row': Row;
+    }
+}

package/dist/components/layout/row/row.styles.d.ts

@@ -0,0 +1,3 @@
+export declare function containerStyles(): import("lit").CSSResult;
+export declare function rowStyles(): import("lit").CSSResult;
+export declare function columnStyles(): import("lit").CSSResult;

package/dist/components/layout/row/row.types.d.ts

@@ -0,0 +1,24 @@
+import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
+export type RowProps = {
+    /**
+     * Spacing token for the gap between columns **and** rows, when columns wrap.
+     */
+    gap?: SpacingTokenWithNone;
+    /**
+     * Spacing token for the gap between columns.
+     */
+    columnGap?: SpacingTokenWithNone;
+    /**
+     * Spacing token for the gap between rows when columns wrap.
+     */
+    rowGap?: SpacingTokenWithNone;
+};
+export type ColumnSize = '1' | '2' | '3' | '4';
+export type ColumnProps = {
+    sm?: ColumnSize;
+    md?: ColumnSize;
+    lg?: ColumnSize;
+    offsetSm: ColumnSize;
+    offsetMd?: ColumnSize;
+    offsetLg?: ColumnSize;
+};

package/dist/components/layout/sidebar/index.d.ts

@@ -1,4 +1,3 @@
 export { Sidebar } from './sidebar';
 export { defaultSidebarProps } from './sidebar.constants';
 export type { SidebarProps, SidebarAttributes } from './sidebar.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/sidebar/sidebar.constants.d.ts

@@ -3,4 +3,3 @@ import type { SidebarProps } from './sidebar.types';
 export declare const defaultSidebarProps: Required<Pick<SidebarProps, 'sideWidth' | 'minContentWidth' | 'reversed'>> & {
     gap: SpacingToken;
 };
-//# sourceMappingURL=sidebar.constants.d.ts.map

package/dist/components/layout/sidebar/sidebar.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { SidebarProps } from './sidebar.types';
-export declare class Sidebar extends BaseLayout {
+export declare class Sidebar extends BaseLayout implements SidebarProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -61,4 +61,3 @@ declare global {
         'm-sidebar': Sidebar;
     }
 }
-//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/layout/sidebar/sidebar.styles.d.ts

@@ -1,3 +1,2 @@
 export declare function getFlexDirectionValue(reversed?: boolean): "row-reverse" | "row";
 export declare function sidebarStyles(): import("lit").CSSResult;
-//# sourceMappingURL=sidebar.styles.d.ts.map

package/dist/components/layout/sidebar/sidebar.types.d.ts

@@ -26,4 +26,3 @@ export type SidebarAttributes = Pick<SidebarProps, 'gap' | 'reversed'> & {
     'side-width': SidebarProps['sideWidth'];
     'min-content-width': SidebarProps['minContentWidth'];
 };
-//# sourceMappingURL=sidebar.types.d.ts.map

package/dist/components/layout/stack/index.d.ts

@@ -1,4 +1,3 @@
 export { Stack } from './stack';
 export { defaultStackProps } from './stack.constants';
 export type { StackProps, StackAttributes } from './stack.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/stack/stack.constants.d.ts

@@ -3,4 +3,3 @@ import type { StackProps } from './stack.types';
 export declare const defaultStackProps: Required<Pick<StackProps, 'align' | 'justify'>> & {
     gap: SpacingToken;
 };
-//# sourceMappingURL=stack.constants.d.ts.map

package/dist/components/layout/stack/stack.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { StackProps } from './stack.types';
-export declare class Stack extends BaseLayout {
+export declare class Stack extends BaseLayout implements StackProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -45,7 +45,6 @@ export declare class Stack extends BaseLayout {
     gap: StackProps['gap'];
     align: StackProps['align'];
     justify: StackProps['justify'];
-    constructor();
     getCSSPropertiesPrefix(): string;
     protected update(changedProperties: PropertyValues<StackProps>): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -55,4 +54,3 @@ declare global {
         'm-stack': Stack;
     }
 }
-//# sourceMappingURL=stack.d.ts.map

package/dist/components/layout/stack/stack.styles.d.ts

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

package/dist/components/layout/stack/stack.types.d.ts

@@ -19,4 +19,3 @@ export type StackProps = BaseLayoutProps & {
     justify?: JustifyContentValue;
 };
 export type StackAttributes = StackProps;
-//# sourceMappingURL=stack.types.d.ts.map

package/dist/components/layout/switcher/index.d.ts

@@ -1,4 +1,3 @@
 export { Switcher } from './switcher';
 export { defaultSwitcherProps } from './switcher.constants';
 export type { SwitcherProps, SwitcherAttributes } from './switcher.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/switcher/switcher.constants.d.ts

@@ -3,4 +3,3 @@ import type { SwitcherProps } from './switcher.types';
 export declare const defaultSwitcherProps: Required<Pick<SwitcherProps, 'threshold'>> & {
     gap: SpacingToken;
 };
-//# sourceMappingURL=switcher.constants.d.ts.map

package/dist/components/layout/switcher/switcher.d.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { BaseLayout } from '../base-layout';
 import type { SwitcherProps } from './switcher.types';
-export declare class Switcher extends BaseLayout {
+export declare class Switcher extends BaseLayout implements SwitcherProps {
     protected static CSSPropertiesPrefix: string;
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -55,7 +55,6 @@ export declare class Switcher extends BaseLayout {
     columnGap: SwitcherProps['columnGap'];
     threshold: SwitcherProps['threshold'];
     limit: SwitcherProps['limit'];
-    constructor();
     getCSSPropertiesPrefix(): string;
     protected update(changedProperties: PropertyValues<SwitcherProps>): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -65,4 +64,3 @@ declare global {
         'm-switcher': Switcher;
     }
 }
-//# sourceMappingURL=switcher.d.ts.map

package/dist/components/layout/switcher/switcher.styles.d.ts

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

package/dist/components/layout/switcher/switcher.types.d.ts

@@ -28,4 +28,3 @@ export type SwitcherAttributes = Omit<SwitcherProps, 'rowGap' | 'columnGap'> & {
     'row-gap': SwitcherProps['rowGap'];
     'column-gap': SwitcherProps['columnGap'];
 };
-//# sourceMappingURL=switcher.types.d.ts.map

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

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export type { LinkTarget, LinkReferrerPolicy, LinkSize } from './link';