@sula-tech/webcomponents 0.4.0 → 0.5.0

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Yyeke16a.js';
-export { s as setNonce } from './index-Yyeke16a.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-or7qTZgT.js';
+export { s as setNonce } from './index-or7qTZgT.js';
 
 /*
  Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_14",[[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelAnimationClass":[32]},[[4,"click","handleClick"]]],[1,"sula-menu-select-list",{"items":[1040]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_16",[[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-dropdown/sula-dropdown.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaMenuListItem, SulaMenuSelectListCustomEvent } from '../../components';
+export declare class SulaDropdown {
+    /**
+     * Dropdown label
+     */
+    label: string;
+    /**
+     * Dropdown is disabled
+     */
+    disabled: boolean;
+    /**
+     * Items for list
+     */
+    items: SulaMenuListItem[];
+    /**
+     * Value for dropdown
+     */
+    value?: SulaMenuListItem;
+    /**
+     * Event emitted when dropdown is clicked
+     */
+    dropdownClicked: EventEmitter<void>;
+    /**
+     * Event emitted when dropdown is focused
+     */
+    dropdownFocused: EventEmitter<void>;
+    /**
+     * Event emitted when dropdown is focused out
+     */
+    dropdownFocusedOut: EventEmitter<void>;
+    /**
+     * Event emitted when item is selected
+     */
+    menuItemSelected: EventEmitter<SulaMenuListItem>;
+    selectedItem?: SulaMenuListItem;
+    showItems: boolean;
+    isFocused: boolean;
+    node?: HTMLElement;
+    handleValueChange(): void;
+    handleDocumentClick(event: Event): void;
+    componentWillLoad(): void;
+    handleClick: () => void;
+    handleItemSelected: (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
+    getIconClass(): "text-text-primary" | "text-icon-disabled";
+    handleFocus: () => void;
+    handleBlur: () => void;
+    render(): any;
+}

package/dist/types/components/sula-dropdown/sula-dropdown.stories.d.ts

@@ -0,0 +1,68 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        items: {
+            control: string;
+            defaultValue: any[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        value: {
+            control: string;
+            defaultValue: any;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        dropdownClicked: {
+            action: string;
+            description: string;
+        };
+        dropdownFocused: {
+            action: string;
+            description: string;
+        };
+        dropdownFocusedOut: {
+            action: string;
+            description: string;
+        };
+        menuItemSelected: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithSelectedValue: any;
+export declare const Disabled: any;
+export declare const DisabledWithValue: any;
+export declare const EmptyItems: any;
+export declare const LongItemsList: any;

package/dist/types/components/sula-menu-select-list/sula-menu-select-list.d.ts

@@ -5,6 +5,10 @@ export declare class SulaMenuSelectList {
      * Items for list
      */
     items: SulaMenuListItem[];
+    /**
+     * Menu is full width
+     */
+    fullWidth: boolean;
     /**
      * Event emitted when item is selected
      */

package/dist/types/components/sula-textarea/sula-textarea.d.ts

@@ -48,14 +48,17 @@ export declare class SulaTextarea {
     isActive: boolean;
     textValue: string;
     textareaIsFocused: boolean;
-    labelAnimationClass: string;
     textareaElement: HTMLTextAreaElement;
     node?: HTMLElement;
+    activeLabelElement: HTMLLabelElement;
+    labelElement: HTMLLabelElement;
     handleClick(event: Event): void;
     focusOnTextarea(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     setLabelUp(): void;
     setLabelDown(): void;
+    changeElementsStyle(): void;
     handleTextareaClick: () => void;
     handleTextareaChanges: (event: InputEvent) => void;
     handleFocus: () => void;

package/dist/types/components/sula-timeline-list/model/sula-timeline-list.model.d.ts

@@ -0,0 +1,16 @@
+export interface SulaTimelineListItem {
+    weekdayText?: SulaTimelineListItemWeekdayText;
+    iconStatus?: SulaTimelineListItemIconStatus;
+    title: string;
+    message?: string;
+    hasLink?: boolean;
+}
+export interface SulaTimelineListItemWeekdayText {
+    weekday: string;
+    day: number;
+}
+export declare enum SulaTimelineListItemIconStatus {
+    Success = "success",
+    Error = "error",
+    Warning = "warning"
+}

package/dist/types/components/sula-timeline-list/sula-timeline-list.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaTimelineListItem, SulaTimelineListItemIconStatus } from './model/sula-timeline-list.model';
+export declare class SulaTimelineList {
+    /**
+     * Timeline list. (Can be use with weekday text or icon with status)
+     */
+    sulaTimelineList: SulaTimelineListItem[];
+    /**
+     * Event emitted when item is clicked.
+     */
+    itemClicked: EventEmitter<SulaTimelineListItem>;
+    handleItemClick: (item: SulaTimelineListItem) => void;
+    getIconBackgroundColorByStatus(status: SulaTimelineListItemIconStatus): string;
+    getIconByStatus(status: SulaTimelineListItemIconStatus): string;
+    getIconColorByStatus(status: SulaTimelineListItemIconStatus): string;
+    render(): any;
+}

package/dist/types/components/sula-timeline-list/sula-timeline-list.stories.d.ts

@@ -0,0 +1,47 @@
+import { SulaTimelineListItemIconStatus } from './model/sula-timeline-list.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        sulaTimelineList: {
+            control: string;
+            defaultValue: ({
+                title: string;
+                message: string;
+                weekdayText: {
+                    weekday: string;
+                    day: string;
+                };
+                iconStatus?: undefined;
+            } | {
+                title: string;
+                message: string;
+                iconStatus: SulaTimelineListItemIconStatus;
+                weekdayText?: undefined;
+            })[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        itemClicked: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithIconStatus: any;
+export declare const MixedContent: any;
+export declare const OnlyTitles: any;
+export declare const SingleItem: any;
+export declare const SuccessFlow: any;
+export declare const ErrorFlow: any;

package/dist/types/components.d.ts

@@ -11,24 +11,28 @@ import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType
 import { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 import { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
 import { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
+import { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
 import { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
 import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 import { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
 import { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 import { SulaTilesSize, SulaTilesType } from "./components/sula-tiles/model/sula-tiles.model";
+import { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula-timeline-list.model";
 export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 export { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
 export { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
 export { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 export { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
 export { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
+export { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
 export { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
 export { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 export { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
 export { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 export { SulaTilesSize, SulaTilesType } from "./components/sula-tiles/model/sula-tiles.model";
+export { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula-timeline-list.model";
 export namespace Components {
     interface SulaAvatar {
         /**
@@ -163,6 +167,26 @@ export namespace Components {
          */
         "text": string;
     }
+    interface SulaDropdown {
+        /**
+          * Dropdown is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Items for list
+          * @default []
+         */
+        "items": SulaMenuListItem1[];
+        /**
+          * Dropdown label
+         */
+        "label": string;
+        /**
+          * Value for dropdown
+         */
+        "value"?: SulaMenuListItem1;
+    }
     interface SulaIcon {
         /**
           * Custom class to be applied to the icon
@@ -182,6 +206,11 @@ export namespace Components {
         "size": SulaLoaderSize;
     }
     interface SulaMenuSelectList {
+        /**
+          * Menu is full width
+          * @default false
+         */
+        "fullWidth": boolean;
         /**
           * Items for list
           * @default []
@@ -375,6 +404,13 @@ export namespace Components {
          */
         "type": SulaTilesType;
     }
+    interface SulaTimelineList {
+        /**
+          * Timeline list. (Can be use with weekday text or icon with status)
+          * @default []
+         */
+        "sulaTimelineList": SulaTimelineListItem[];
+    }
 }
 export interface SulaButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -388,6 +424,10 @@ export interface SulaChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaChipElement;
 }
+export interface SulaDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaDropdownElement;
+}
 export interface SulaMenuSelectListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaMenuSelectListElement;
@@ -412,6 +452,10 @@ export interface SulaTilesCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaTilesElement;
 }
+export interface SulaTimelineListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaTimelineListElement;
+}
 declare global {
     interface HTMLSulaAvatarElement extends Components.SulaAvatar, HTMLStencilElement {
     }
@@ -479,6 +523,26 @@ declare global {
         prototype: HTMLSulaChipElement;
         new (): HTMLSulaChipElement;
     };
+    interface HTMLSulaDropdownElementEventMap {
+        "dropdownClicked": void;
+        "dropdownFocused": void;
+        "dropdownFocusedOut": void;
+        "menuItemSelected": SulaMenuListItem1;
+    }
+    interface HTMLSulaDropdownElement extends Components.SulaDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaDropdownElementEventMap>(type: K, listener: (this: HTMLSulaDropdownElement, ev: SulaDropdownCustomEvent<HTMLSulaDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSulaDropdownElementEventMap>(type: K, listener: (this: HTMLSulaDropdownElement, ev: SulaDropdownCustomEvent<HTMLSulaDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSulaDropdownElement: {
+        prototype: HTMLSulaDropdownElement;
+        new (): HTMLSulaDropdownElement;
+    };
     interface HTMLSulaIconElement extends Components.SulaIcon, HTMLStencilElement {
     }
     var HTMLSulaIconElement: {
@@ -607,12 +671,30 @@ declare global {
         prototype: HTMLSulaTilesElement;
         new (): HTMLSulaTilesElement;
     };
+    interface HTMLSulaTimelineListElementEventMap {
+        "itemClicked": SulaTimelineListItem;
+    }
+    interface HTMLSulaTimelineListElement extends Components.SulaTimelineList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaTimelineListElementEventMap>(type: K, listener: (this: HTMLSulaTimelineListElement, ev: SulaTimelineListCustomEvent<HTMLSulaTimelineListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSulaTimelineListElementEventMap>(type: K, listener: (this: HTMLSulaTimelineListElement, ev: SulaTimelineListCustomEvent<HTMLSulaTimelineListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSulaTimelineListElement: {
+        prototype: HTMLSulaTimelineListElement;
+        new (): HTMLSulaTimelineListElement;
+    };
     interface HTMLElementTagNameMap {
         "sula-avatar": HTMLSulaAvatarElement;
         "sula-badge": HTMLSulaBadgeElement;
         "sula-button": HTMLSulaButtonElement;
         "sula-checkbox": HTMLSulaCheckboxElement;
         "sula-chip": HTMLSulaChipElement;
+        "sula-dropdown": HTMLSulaDropdownElement;
         "sula-icon": HTMLSulaIconElement;
         "sula-loader": HTMLSulaLoaderElement;
         "sula-menu-select-list": HTMLSulaMenuSelectListElement;
@@ -622,6 +704,7 @@ declare global {
         "sula-textarea": HTMLSulaTextareaElement;
         "sula-textfield": HTMLSulaTextfieldElement;
         "sula-tiles": HTMLSulaTilesElement;
+        "sula-timeline-list": HTMLSulaTimelineListElement;
     }
 }
 declare namespace LocalJSX {
@@ -783,6 +866,42 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface SulaDropdown {
+        /**
+          * Dropdown is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Items for list
+          * @default []
+         */
+        "items"?: SulaMenuListItem1[];
+        /**
+          * Dropdown label
+         */
+        "label"?: string;
+        /**
+          * Event emitted when dropdown is clicked
+         */
+        "onDropdownClicked"?: (event: SulaDropdownCustomEvent<void>) => void;
+        /**
+          * Event emitted when dropdown is focused
+         */
+        "onDropdownFocused"?: (event: SulaDropdownCustomEvent<void>) => void;
+        /**
+          * Event emitted when dropdown is focused out
+         */
+        "onDropdownFocusedOut"?: (event: SulaDropdownCustomEvent<void>) => void;
+        /**
+          * Event emitted when item is selected
+         */
+        "onMenuItemSelected"?: (event: SulaDropdownCustomEvent<SulaMenuListItem1>) => void;
+        /**
+          * Value for dropdown
+         */
+        "value"?: SulaMenuListItem1;
+    }
     interface SulaIcon {
         /**
           * Custom class to be applied to the icon
@@ -802,6 +921,11 @@ declare namespace LocalJSX {
         "size"?: SulaLoaderSize;
     }
     interface SulaMenuSelectList {
+        /**
+          * Menu is full width
+          * @default false
+         */
+        "fullWidth"?: boolean;
         /**
           * Items for list
           * @default []
@@ -1052,12 +1176,24 @@ declare namespace LocalJSX {
          */
         "type"?: SulaTilesType;
     }
+    interface SulaTimelineList {
+        /**
+          * Event emitted when item is clicked.
+         */
+        "onItemClicked"?: (event: SulaTimelineListCustomEvent<SulaTimelineListItem>) => void;
+        /**
+          * Timeline list. (Can be use with weekday text or icon with status)
+          * @default []
+         */
+        "sulaTimelineList"?: SulaTimelineListItem[];
+    }
     interface IntrinsicElements {
         "sula-avatar": SulaAvatar;
         "sula-badge": SulaBadge;
         "sula-button": SulaButton;
         "sula-checkbox": SulaCheckbox;
         "sula-chip": SulaChip;
+        "sula-dropdown": SulaDropdown;
         "sula-icon": SulaIcon;
         "sula-loader": SulaLoader;
         "sula-menu-select-list": SulaMenuSelectList;
@@ -1067,6 +1203,7 @@ declare namespace LocalJSX {
         "sula-textarea": SulaTextarea;
         "sula-textfield": SulaTextfield;
         "sula-tiles": SulaTiles;
+        "sula-timeline-list": SulaTimelineList;
     }
 }
 export { LocalJSX as JSX };
@@ -1078,6 +1215,7 @@ declare module "@stencil/core" {
             "sula-button": LocalJSX.SulaButton & JSXBase.HTMLAttributes<HTMLSulaButtonElement>;
             "sula-checkbox": LocalJSX.SulaCheckbox & JSXBase.HTMLAttributes<HTMLSulaCheckboxElement>;
             "sula-chip": LocalJSX.SulaChip & JSXBase.HTMLAttributes<HTMLSulaChipElement>;
+            "sula-dropdown": LocalJSX.SulaDropdown & JSXBase.HTMLAttributes<HTMLSulaDropdownElement>;
             "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
             "sula-loader": LocalJSX.SulaLoader & JSXBase.HTMLAttributes<HTMLSulaLoaderElement>;
             "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
@@ -1087,6 +1225,7 @@ declare module "@stencil/core" {
             "sula-textarea": LocalJSX.SulaTextarea & JSXBase.HTMLAttributes<HTMLSulaTextareaElement>;
             "sula-textfield": LocalJSX.SulaTextfield & JSXBase.HTMLAttributes<HTMLSulaTextfieldElement>;
             "sula-tiles": LocalJSX.SulaTiles & JSXBase.HTMLAttributes<HTMLSulaTilesElement>;
+            "sula-timeline-list": LocalJSX.SulaTimelineList & JSXBase.HTMLAttributes<HTMLSulaTimelineListElement>;
         }
     }
 }