@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/types/components.d.ts

@@ -0,0 +1,2802 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { Placement } from "@popperjs/core";
+import { TablePropsChangedEvent } from "./components/data-table/table/table";
+export { Placement } from "@popperjs/core";
+export { TablePropsChangedEvent } from "./components/data-table/table/table";
+export namespace Components {
+    interface SddsAccordion {
+        /**
+          * Enable or disable divider lines between items
+         */
+        "divider": boolean;
+        /**
+          * Set the variant of the the accordion.
+         */
+        "modeVariant": 'primary' | 'secondary';
+    }
+    interface SddsAccordionItem {
+        /**
+          * Disabled option in `boolean`.
+         */
+        "disabled": boolean;
+        /**
+          * Changes where the expand icon is placed.
+         */
+        "expandIconPosition": 'start' | 'end';
+        /**
+          * Set to true to expand panel open
+         */
+        "expanded": boolean;
+        /**
+          * The header gives users the context about the additional information available inside the panel
+         */
+        "header": string;
+        /**
+          * When true 16px on right padding instead of 64px
+         */
+        "paddingReset": boolean;
+    }
+    interface SddsBadges {
+        /**
+          * Changes visibility of badge
+         */
+        "hidden": boolean;
+        /**
+          * @deprecated Use size prop instead. Changes badge from large to small size
+         */
+        "isSmall": boolean;
+        /**
+          * Sets component size.
+         */
+        "size": 'lg' | 'sm';
+        /**
+          * Value shown in badge
+         */
+        "value": string;
+    }
+    interface SddsBanner {
+        /**
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.
+         */
+        "bannerId": string;
+        /**
+          * Header text.
+         */
+        "header": string;
+        /**
+          * Hides the banner
+         */
+        "hidden": boolean;
+        /**
+          * Hides the banner.
+         */
+        "hideBanner": () => Promise<{ bannerId: string; hidden: boolean; }>;
+        /**
+          * Href for the link
+         */
+        "href": string;
+        /**
+          * Name of the icon for the component. For error and information type the icon is predefined.
+         */
+        "icon": string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "linkRel": string;
+        /**
+          * Where to open the linked URL
+         */
+        "linkTarget": '_self' | '_blank' | '_parent' | '_top';
+        /**
+          * Link text.
+         */
+        "linkText": string;
+        /**
+          * Removes the close button on the banner.
+         */
+        "persistent": boolean;
+        /**
+          * Shows the banner
+         */
+        "showBanner": () => Promise<{ bannerId: string; hidden: boolean; }>;
+        /**
+          * Subheader text.
+         */
+        "subheader": string;
+        /**
+          * Type of banner
+         */
+        "type": 'error' | 'information' | 'none';
+    }
+    interface SddsBlock {
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant": 'primary' | 'secondary';
+    }
+    interface SddsBodyCell {
+        /**
+          * Passing same cell key for all body cells which is used in head cell enables features of text align and hovering
+         */
+        "cellKey": any;
+        /**
+          * Value that will be presented as text inside a cell
+         */
+        "cellValue": string | number;
+        /**
+          * Disables internal padding. Useful when passing other components to cell.
+         */
+        "disablePadding": boolean;
+    }
+    interface SddsBreadcrumb {
+    }
+    interface SddsBreadcrumbItem {
+        /**
+          * Boolean for the current link
+         */
+        "current": boolean;
+        /**
+          * Toggle the disabled state for the breadcrumb
+         */
+        "disabled": boolean;
+        /**
+          * Href for the link
+         */
+        "href": string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel": string;
+        /**
+          * Where to open the linked URL
+         */
+        "target": '_self' | '_blank' | '_parent' | '_top';
+    }
+    interface SddsButton {
+        /**
+          * Control for disabled state of component
+         */
+        "disabled": boolean;
+        /**
+          * When enabled, makes button take 100% width
+         */
+        "fullbleed": boolean;
+        /**
+          * Set the mode variant of the the button.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        "size": 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Text inside a button
+         */
+        "text": string;
+        /**
+          * Type of button
+         */
+        "type": 'primary' | 'secondary' | 'ghost' | 'danger';
+    }
+    interface SddsCard {
+        /**
+          * Divider for the body
+         */
+        "bodyDivider": boolean;
+        /**
+          * Body image src
+         */
+        "bodyImg": string;
+        /**
+          * Alt text for the body image
+         */
+        "bodyImgAlt": string;
+        /**
+          * ID for the card, must be unique.  **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.
+         */
+        "cardId": string;
+        /**
+          * Makes the card clickable.
+         */
+        "clickable": boolean;
+        /**
+          * Text in the header
+         */
+        "header": string;
+        /**
+          * Header image src
+         */
+        "headerImg": string;
+        /**
+          * Alt text for the header image
+         */
+        "headerImgAlt": string;
+        /**
+          * Placement of the header
+         */
+        "headerPlacement": 'above' | 'below';
+        /**
+          * Variant of the card based on the theme used.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Subheader text in the header
+         */
+        "subheader": string;
+    }
+    interface SddsCheckbox {
+        /**
+          * ID for the checkbox's input element. Randomly generated if not specified.
+         */
+        "checkboxId": string;
+        /**
+          * Sets the checkbox as checked
+         */
+        "checked": boolean;
+        /**
+          * Sets the checkbox in a disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Name for the checkbox's input element.
+         */
+        "name": string;
+        /**
+          * Make the checkbox required
+         */
+        "required": boolean;
+        /**
+          * Toggles the checked value of the component.
+         */
+        "toggleCheckbox": () => Promise<{ checkboxId: string; checked: boolean; }>;
+        /**
+          * Value for the checkbox
+         */
+        "value": string;
+    }
+    interface SddsDatetime {
+        /**
+          * Autofocus for input
+         */
+        "autofocus": boolean;
+        /**
+          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM
+         */
+        "defaultValue": string | 'none';
+        /**
+          * Set input in disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Helper text for the component
+         */
+        "helper": string;
+        /**
+          * Label text for the component
+         */
+        "label": string;
+        /**
+          * Set the variant of the the datetime component.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Name property
+         */
+        "name": string;
+        /**
+          * With setting
+         */
+        "noMinWidth": boolean;
+        /**
+          * Size of the input
+         */
+        "size": 'sm' | 'md' | '';
+        /**
+          * Error state of input
+         */
+        "state": string;
+        /**
+          * Which input type, text, password or similar
+         */
+        "type": 'datetime-local' | 'date' | 'time';
+        /**
+          * Value of the input text
+         */
+        "value": string;
+    }
+    interface SddsDropdown {
+        /**
+          * Add the value of the option as string to set it as default
+         */
+        "defaultOption": string;
+        /**
+          * Set to true for disabled states
+         */
+        "disabled": boolean;
+        /**
+          * Add helper text in the bottom of dropdown
+         */
+        "helper": string;
+        /**
+          * Set to true to make the width following the label text length
+         */
+        "inline": boolean;
+        /**
+          * Label text for label inside & outside
+         */
+        "label": string;
+        /**
+          * Controls position of label
+         */
+        "labelPosition": 'no-label' | 'inside' | 'outside';
+        /**
+          * Set the variant of the the dropdown.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Direction that the dropdown will open. By default set to auto.
+         */
+        "openDirection": 'down' | 'up' | 'auto';
+        /**
+          * Placeholder text for dropdown with no selectedLabel item
+         */
+        "placeholder": string;
+        "resetOption": () => Promise<void>;
+        /**
+          * Add the value of the option as string to set it as new selected value
+         */
+        "selectedOption": string;
+        /**
+          * Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated
+         */
+        "size": 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+        /**
+          * Support `error` state
+         */
+        "state": string;
+        /**
+          * `Controls type of dropdown.
+         */
+        "type": 'default' | 'multiselect' | 'filter';
+    }
+    interface SddsDropdownFilter {
+        /**
+          * Data is an array of objects that contains label and value `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`
+         */
+        "data": string;
+        /**
+          * Add the value of the option to set it as default
+         */
+        "defaultOption": string;
+        /**
+          * Add the value of the option to set it as default
+         */
+        "disabled": boolean;
+        /**
+          * Add helper text in the bottom of dropdown
+         */
+        "helper": string;
+        /**
+          * Set to true to make the width following the label text length
+         */
+        "inline": boolean;
+        /**
+          * Label for dropdown with no selected item
+         */
+        "label": string;
+        /**
+          * Position of label
+         */
+        "labelPosition": 'no-label' | 'inside' | 'outside';
+        /**
+          * Placeholder text for dropdown with no selected item
+         */
+        "placeholder": string;
+        /**
+          * Use this method to reset the dropdown. Then it will go back to its initial state.
+         */
+        "resetOption": () => Promise<void>;
+        /**
+          * Add the value of the option as string to set it as new selected value
+         */
+        "selectedOption": string;
+        /**
+          * Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated
+         */
+        "size": 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+        /**
+          * Support `error` state
+         */
+        "state": string;
+    }
+    interface SddsDropdownOption {
+        /**
+          * Sets option to disabled state if true
+         */
+        "disabled": boolean;
+        /**
+          * Selected set to true if selected
+         */
+        "selected": boolean;
+        /**
+          * Value is a unique string that will be used for application logic
+         */
+        "value": string;
+    }
+    interface SddsFooter {
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant": 'primary' | 'secondary';
+    }
+    interface SddsFooterLink {
+        /**
+          * URL for the link
+         */
+        "linkHref": string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel": string;
+        /**
+          * Where to open the linked URL
+         */
+        "target": '_self' | '_blank' | '_parent' | '_top';
+    }
+    interface SddsFooterLinkGroup {
+        /**
+          * Title text for the link group, only valid on top part of footer.
+         */
+        "titleText": string;
+    }
+    interface SddsHeaderCell {
+        /**
+          * Value of column key, usually comes from JSON, needed for sorting
+         */
+        "columnKey": string;
+        /**
+          * Text that displays in column cell
+         */
+        "columnTitle": string;
+        /**
+          * In case noMinWidth setting, user has to specify width value for each column, for example "150px"
+         */
+        "customWidth": string;
+        /**
+          * If passed as prop, enables sorting on that column
+         */
+        "sortable": boolean;
+        /**
+          * Setting for text align, default is left, but user can pass "right" as string - useful for numeric values
+         */
+        "textAlign": string;
+    }
+    interface SddsIcon {
+        /**
+          * Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook
+         */
+        "name": string;
+        /**
+          * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
+         */
+        "size": string;
+    }
+    interface SddsInlineTab {
+        "default": boolean;
+        "disabled": boolean;
+        "label": string;
+    }
+    interface SddsInlineTabs {
+        /**
+          * different height settings. right now only supports "auto", otherwise ignored
+         */
+        "autoHeight": boolean;
+        /**
+          * either use this (default-tab="...") or read attribute "default" from one of the slotted children.
+         */
+        "defaultTab": string;
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * used for switching to a tab programmatically
+         */
+        "showTab": (key: string) => Promise<void>;
+    }
+    interface SddsInlineTabsFullbleed {
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant": 'primary' | 'secondary';
+    }
+    interface SddsLink {
+        /**
+          * Disables the link
+         */
+        "disabled": boolean;
+        /**
+          * URL for the link
+         */
+        "href": string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel": string;
+        /**
+          * Where to open the linked URL
+         */
+        "target": '_self' | '_blank' | '_parent' | '_top';
+        /**
+          * Displays the link with an underline.
+         */
+        "underline": boolean;
+    }
+    interface SddsMessage {
+        /**
+          * Header text for the component.
+         */
+        "header": string;
+        /**
+          * Minimal message styling.
+         */
+        "minimal": boolean;
+        /**
+          * Variant of the component, based on current mode.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Removes the icon in the message.
+         */
+        "noIcon": boolean;
+        /**
+          * Type of message.
+         */
+        "type": 'information' | 'error' | 'warning' | 'success';
+    }
+    interface SddsModal {
+        /**
+          * Sticky or Static Actions
+         */
+        "actions": 'sticky' | 'static';
+        "open": boolean;
+        /**
+          * Shows the modal
+         */
+        "openModal": () => Promise<void>;
+        /**
+          * Disables closing modal on clicking on overlay area.
+         */
+        "prevent": boolean;
+        /**
+          * Size of modal
+         */
+        "size": 'xs' | 'sm' | 'md' | 'lg';
+    }
+    interface SddsNavigationTabs {
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant": 'primary' | 'secondary';
+    }
+    interface SddsPopoverCanvas {
+        /**
+          * Sets the offset distance
+         */
+        "offsetDistance": number;
+        /**
+          * Sets the offset skidding
+         */
+        "offsetSkidding": number;
+        /**
+          * Decides the placement of the Popover Canvas
+         */
+        "placement": Placement;
+        /**
+          * Element that will trigger the popover (takes priority over selector)
+         */
+        "referenceEl": HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the popover
+         */
+        "selector": string;
+        /**
+          * Decides if the Popover Canvas should be visible from the start
+         */
+        "show": boolean;
+    }
+    interface SddsPopoverMenu {
+        /**
+          * Sets the offset distance
+         */
+        "offsetDistance": number;
+        /**
+          * Sets the offset skidding
+         */
+        "offsetSkidding": number;
+        /**
+          * Decides the placement of the Popover Menu
+         */
+        "placement": Placement;
+        /**
+          * Element that will trigger the popover (takes priority over selector)
+         */
+        "referenceEl": HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the popover
+         */
+        "selector": string;
+        /**
+          * Decides if the Popover Menu should be visible from the start
+         */
+        "show": boolean;
+    }
+    interface SddsRadioButton {
+        /**
+          * Decides if the radio button is checked or not.
+         */
+        "checked": boolean;
+        /**
+          * Decides if the radio button is disabled or not.
+         */
+        "disabled": boolean;
+        /**
+          * Name of radio button, used for reference.
+         */
+        "name": string;
+        /**
+          * Unique radio button identifier.
+         */
+        "radioId": string;
+        /**
+          * Decides if the radio button is required or not.
+         */
+        "required": boolean;
+        /**
+          * Value of input.
+         */
+        "value": string;
+    }
+    interface SddsSlider {
+        /**
+          * Decide to show the controls or not
+         */
+        "controls": boolean;
+        /**
+          * Sets the disabled state for the whole component
+         */
+        "disabled": boolean;
+        /**
+          * Decide to show the input field or not
+         */
+        "input": boolean;
+        /**
+          * Text for label
+         */
+        "label": string;
+        /**
+          * Maximum value
+         */
+        "max": string;
+        /**
+          * Minimum value
+         */
+        "min": string;
+        /**
+          * Name property (will be inherited by the native slider component)
+         */
+        "name": string;
+        /**
+          * Sets the read only state for the whole component
+         */
+        "readOnly": boolean;
+        /**
+          * Public method to re-initialise the slider if some configuration props are changed
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Decide to show numbers above the tick markers or not
+         */
+        "showTickNumbers": boolean;
+        /**
+          * Sets the size of the scrubber
+         */
+        "size": 'sm' | '';
+        /**
+          * Id for the sliders input element, randomly generated if not specified.
+         */
+        "sliderId": string;
+        /**
+          * Snap to the ticks grid
+         */
+        "snap": boolean;
+        /**
+          * Defines how much to increment/decrement the value when using controls
+         */
+        "step": string;
+        /**
+          * Number of tick markers (tick for min- and max-value will be added automatically)
+         */
+        "ticks": string;
+        /**
+          * Decide to show the tooltip or not
+         */
+        "tooltip": boolean;
+        /**
+          * Initial value
+         */
+        "value": string;
+    }
+    interface SddsSpinner {
+        /**
+          * Size of spinner
+         */
+        "size": 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Variant of spinner
+         */
+        "variant": 'standard' | 'inverted';
+    }
+    interface SddsStepper {
+        /**
+          * The direction the children are layed out.
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * Hides the label for the child components if true.
+         */
+        "hideLabels": boolean;
+        /**
+          * Text position, only available on direction:horizontal
+         */
+        "labelPosition": 'aside' | 'below';
+        /**
+          * Size of the component and it's children.
+         */
+        "size": 'sm' | 'lg';
+    }
+    interface SddsStepperItem {
+        /**
+          * Label text for the stepper-item.
+         */
+        "labelText": string;
+        /**
+          * Method to set the width if the stepper item based on its siblings widht, used by the parent element.
+         */
+        "setWidth": (width: any) => Promise<void>;
+        /**
+          * State of the stepper-item
+         */
+        "state": 'current' | 'error' | 'success' | 'upcoming';
+    }
+    interface SddsTable {
+        /**
+          * Enables style where data-table toolbar, rows and footer are less high
+         */
+        "compactDesign": boolean;
+        /**
+          * Enables extended row feature of data-table
+         */
+        "enableExpandableRows": boolean;
+        /**
+          * Enables multiselect feature of data-table
+         */
+        "enableMultiselect": boolean;
+        /**
+          * Enables table to take 100% available width with equal spacing of columns
+         */
+        "enableResponsive": boolean;
+        /**
+          * Variant of the component, based on current mode.
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Enables to customise width on data-table columns
+         */
+        "noMinWidth": boolean;
+        /**
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.
+         */
+        "tableId": string;
+        /**
+          * Enables style with vertical dividers between columns
+         */
+        "verticalDividers": boolean;
+    }
+    interface SddsTableBody {
+        /**
+          * Prop to pass JSON string which enables automatic rendering of table rows and cells
+         */
+        "bodyData": any;
+        /**
+          * Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term
+         */
+        "disableFilteringFunction": boolean;
+        /**
+          * Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting
+         */
+        "disableSortingFunction": boolean;
+        /**
+          * Prop for showcase of rendering JSON in body-data, just for presentation purposes
+         */
+        "enableDummyData": boolean;
+    }
+    interface SddsTableBodyRow {
+    }
+    interface SddsTableBodyRowExpandable {
+        /**
+          * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
+         */
+        "colSpan": number;
+    }
+    interface SddsTableFooter {
+        /**
+          * Prop for client to set max number of pages
+         */
+        "clientMaxPages": number;
+        /**
+          * Prop for client to set current page number
+         */
+        "clientPaginationValue": number;
+        /**
+          * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
+         */
+        "clientSetColumnsNumber": number;
+        /**
+          * Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component
+         */
+        "disablePaginationFunction": boolean;
+        /**
+          * Prop to enable client controlled pagination
+         */
+        "enableClientPagination": boolean;
+        /**
+          * Enable pagination and show pagination controls
+         */
+        "enablePagination": boolean;
+        /**
+          * Sets how many rows to display when pagination is enabled
+         */
+        "rowsPerPage": number;
+    }
+    interface SddsTableHeader {
+    }
+    interface SddsTableToolbar {
+        /**
+          * Enables preview of searchbar
+         */
+        "enableFiltering": boolean;
+        /**
+          * Adds title to the data-table
+         */
+        "tableTitle": string;
+    }
+    interface SddsTextarea {
+        /**
+          * Control of autofocus
+         */
+        "autoFocus": boolean;
+        /**
+          * Textarea cols attribute
+         */
+        "cols": number;
+        /**
+          * Set input in disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Helper text
+         */
+        "helper": string;
+        /**
+          * Label text
+         */
+        "label": string;
+        /**
+          * Position of the label for the textfield.
+         */
+        "labelPosition": 'inside' | 'outside' | 'no-label';
+        /**
+          * Max length of input
+         */
+        "maxLength": number;
+        /**
+          * Mode variant of the textarea
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Name attribute
+         */
+        "name": string;
+        /**
+          * Unset minimum width of 208px.
+         */
+        "noMinWidth": boolean;
+        /**
+          * Placeholder text
+         */
+        "placeholder": string;
+        /**
+          * Set input in readonly state
+         */
+        "readOnly": boolean;
+        /**
+          * Textarea rows attribute
+         */
+        "rows": number;
+        /**
+          * Error state of input
+         */
+        "state": 'error' | 'success' | 'default';
+        /**
+          * Value of the input text
+         */
+        "value": string;
+    }
+    interface SddsTextfield {
+        /**
+          * Autofocus for input
+         */
+        "autofocus": boolean;
+        /**
+          * Set input in disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Helper text
+         */
+        "helper": string;
+        /**
+          * Label text
+         */
+        "label": string;
+        /**
+          * Position of the label for the textfield.
+         */
+        "labelPosition": 'inside' | 'outside' | 'no-label';
+        /**
+          * Max length of input
+         */
+        "maxLength": number;
+        /**
+          * Mode variant of the textfield
+         */
+        "modeVariant": 'primary' | 'secondary';
+        /**
+          * Name property
+         */
+        "name": string;
+        /**
+          * With setting
+         */
+        "noMinWidth": boolean;
+        /**
+          * Placeholder text
+         */
+        "placeholder": string;
+        /**
+          * Set input in readonly state
+         */
+        "readOnly": boolean;
+        /**
+          * Size of the input
+         */
+        "size": 'sm' | 'md' | 'lg';
+        /**
+          * Error state of input
+         */
+        "state": 'error' | 'success' | 'default';
+        /**
+          * Which input type, text, password or similar
+         */
+        "type": 'text' | 'password';
+        /**
+          * Value of the input text
+         */
+        "value": string;
+    }
+    interface SddsToast {
+        /**
+          * Header text for the component.
+         */
+        "header": string;
+        /**
+          * Hides the toast.
+         */
+        "hidden": boolean;
+        /**
+          * Hides the toast.
+         */
+        "hideToast": () => Promise<{ toastId: string; }>;
+        /**
+          * Shows the toast.
+         */
+        "showToast": () => Promise<{ toastId: string; }>;
+        /**
+          * Subheader text for the component.
+         */
+        "subheader": string;
+        /**
+          * ID for the toast. Randomly generated if not specified.
+         */
+        "toastId": string;
+        /**
+          * ARIA role for the toast.
+         */
+        "toastRole": 'alert' | 'log' | 'status';
+        /**
+          * Type of toast.
+         */
+        "type": 'information' | 'error' | 'warning' | 'success';
+    }
+    interface SddsToggle {
+        /**
+          * Sets the toggle as checked
+         */
+        "checked": boolean;
+        /**
+          * Sets the toggle in a disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Headline for the toggle
+         */
+        "headline": string;
+        /**
+          * Name of the toggles input element
+         */
+        "name": string;
+        /**
+          * Make the toggle required
+         */
+        "required": boolean;
+        /**
+          * Size of the toggle
+         */
+        "size": 'sm' | 'lg';
+        /**
+          * Toggles the toggle.
+         */
+        "toggle": () => Promise<{ toggleId: string; checked: boolean; }>;
+        /**
+          * ID of the toggles input element, if not specifed it's randomly generated
+         */
+        "toggleId": string;
+    }
+    interface SddsTooltip {
+        /**
+          * Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button.
+         */
+        "mouseOverTooltip": boolean;
+        /**
+          * Placement of tooltip.
+         */
+        "placement": Placement;
+        /**
+          * Element that will trigger the tooltip (takes priority over selector)
+         */
+        "referenceEl": HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the tooltip
+         */
+        "selector": string;
+        /**
+          * Prop in control of showing and hiding prop
+         */
+        "show": boolean;
+        /**
+          * In case tooltip contains only text, no HTML, text can be passed by this prop
+         */
+        "text": string;
+    }
+}
+export interface SddsAccordionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsAccordionItemElement;
+}
+export interface SddsBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsBannerElement;
+}
+export interface SddsCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsCardElement;
+}
+export interface SddsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsCheckboxElement;
+}
+export interface SddsDatetimeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsDatetimeElement;
+}
+export interface SddsDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsDropdownElement;
+}
+export interface SddsDropdownOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsDropdownOptionElement;
+}
+export interface SddsHeaderCellCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsHeaderCellElement;
+}
+export interface SddsRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsRadioButtonElement;
+}
+export interface SddsSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsSliderElement;
+}
+export interface SddsTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableElement;
+}
+export interface SddsTableBodyCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableBodyElement;
+}
+export interface SddsTableBodyRowCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableBodyRowElement;
+}
+export interface SddsTableBodyRowExpandableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableBodyRowExpandableElement;
+}
+export interface SddsTableFooterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableFooterElement;
+}
+export interface SddsTableHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableHeaderElement;
+}
+export interface SddsTableToolbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTableToolbarElement;
+}
+export interface SddsTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTextareaElement;
+}
+export interface SddsTextfieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsTextfieldElement;
+}
+export interface SddsToastCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsToastElement;
+}
+export interface SddsToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSddsToggleElement;
+}
+declare global {
+    interface HTMLSddsAccordionElement extends Components.SddsAccordion, HTMLStencilElement {
+    }
+    var HTMLSddsAccordionElement: {
+        prototype: HTMLSddsAccordionElement;
+        new (): HTMLSddsAccordionElement;
+    };
+    interface HTMLSddsAccordionItemElement extends Components.SddsAccordionItem, HTMLStencilElement {
+    }
+    var HTMLSddsAccordionItemElement: {
+        prototype: HTMLSddsAccordionItemElement;
+        new (): HTMLSddsAccordionItemElement;
+    };
+    interface HTMLSddsBadgesElement extends Components.SddsBadges, HTMLStencilElement {
+    }
+    var HTMLSddsBadgesElement: {
+        prototype: HTMLSddsBadgesElement;
+        new (): HTMLSddsBadgesElement;
+    };
+    interface HTMLSddsBannerElement extends Components.SddsBanner, HTMLStencilElement {
+    }
+    var HTMLSddsBannerElement: {
+        prototype: HTMLSddsBannerElement;
+        new (): HTMLSddsBannerElement;
+    };
+    interface HTMLSddsBlockElement extends Components.SddsBlock, HTMLStencilElement {
+    }
+    var HTMLSddsBlockElement: {
+        prototype: HTMLSddsBlockElement;
+        new (): HTMLSddsBlockElement;
+    };
+    interface HTMLSddsBodyCellElement extends Components.SddsBodyCell, HTMLStencilElement {
+    }
+    var HTMLSddsBodyCellElement: {
+        prototype: HTMLSddsBodyCellElement;
+        new (): HTMLSddsBodyCellElement;
+    };
+    interface HTMLSddsBreadcrumbElement extends Components.SddsBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLSddsBreadcrumbElement: {
+        prototype: HTMLSddsBreadcrumbElement;
+        new (): HTMLSddsBreadcrumbElement;
+    };
+    interface HTMLSddsBreadcrumbItemElement extends Components.SddsBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLSddsBreadcrumbItemElement: {
+        prototype: HTMLSddsBreadcrumbItemElement;
+        new (): HTMLSddsBreadcrumbItemElement;
+    };
+    interface HTMLSddsButtonElement extends Components.SddsButton, HTMLStencilElement {
+    }
+    var HTMLSddsButtonElement: {
+        prototype: HTMLSddsButtonElement;
+        new (): HTMLSddsButtonElement;
+    };
+    interface HTMLSddsCardElement extends Components.SddsCard, HTMLStencilElement {
+    }
+    var HTMLSddsCardElement: {
+        prototype: HTMLSddsCardElement;
+        new (): HTMLSddsCardElement;
+    };
+    interface HTMLSddsCheckboxElement extends Components.SddsCheckbox, HTMLStencilElement {
+    }
+    var HTMLSddsCheckboxElement: {
+        prototype: HTMLSddsCheckboxElement;
+        new (): HTMLSddsCheckboxElement;
+    };
+    interface HTMLSddsDatetimeElement extends Components.SddsDatetime, HTMLStencilElement {
+    }
+    var HTMLSddsDatetimeElement: {
+        prototype: HTMLSddsDatetimeElement;
+        new (): HTMLSddsDatetimeElement;
+    };
+    interface HTMLSddsDropdownElement extends Components.SddsDropdown, HTMLStencilElement {
+    }
+    var HTMLSddsDropdownElement: {
+        prototype: HTMLSddsDropdownElement;
+        new (): HTMLSddsDropdownElement;
+    };
+    interface HTMLSddsDropdownFilterElement extends Components.SddsDropdownFilter, HTMLStencilElement {
+    }
+    var HTMLSddsDropdownFilterElement: {
+        prototype: HTMLSddsDropdownFilterElement;
+        new (): HTMLSddsDropdownFilterElement;
+    };
+    interface HTMLSddsDropdownOptionElement extends Components.SddsDropdownOption, HTMLStencilElement {
+    }
+    var HTMLSddsDropdownOptionElement: {
+        prototype: HTMLSddsDropdownOptionElement;
+        new (): HTMLSddsDropdownOptionElement;
+    };
+    interface HTMLSddsFooterElement extends Components.SddsFooter, HTMLStencilElement {
+    }
+    var HTMLSddsFooterElement: {
+        prototype: HTMLSddsFooterElement;
+        new (): HTMLSddsFooterElement;
+    };
+    interface HTMLSddsFooterLinkElement extends Components.SddsFooterLink, HTMLStencilElement {
+    }
+    var HTMLSddsFooterLinkElement: {
+        prototype: HTMLSddsFooterLinkElement;
+        new (): HTMLSddsFooterLinkElement;
+    };
+    interface HTMLSddsFooterLinkGroupElement extends Components.SddsFooterLinkGroup, HTMLStencilElement {
+    }
+    var HTMLSddsFooterLinkGroupElement: {
+        prototype: HTMLSddsFooterLinkGroupElement;
+        new (): HTMLSddsFooterLinkGroupElement;
+    };
+    interface HTMLSddsHeaderCellElement extends Components.SddsHeaderCell, HTMLStencilElement {
+    }
+    var HTMLSddsHeaderCellElement: {
+        prototype: HTMLSddsHeaderCellElement;
+        new (): HTMLSddsHeaderCellElement;
+    };
+    interface HTMLSddsIconElement extends Components.SddsIcon, HTMLStencilElement {
+    }
+    var HTMLSddsIconElement: {
+        prototype: HTMLSddsIconElement;
+        new (): HTMLSddsIconElement;
+    };
+    interface HTMLSddsInlineTabElement extends Components.SddsInlineTab, HTMLStencilElement {
+    }
+    var HTMLSddsInlineTabElement: {
+        prototype: HTMLSddsInlineTabElement;
+        new (): HTMLSddsInlineTabElement;
+    };
+    interface HTMLSddsInlineTabsElement extends Components.SddsInlineTabs, HTMLStencilElement {
+    }
+    var HTMLSddsInlineTabsElement: {
+        prototype: HTMLSddsInlineTabsElement;
+        new (): HTMLSddsInlineTabsElement;
+    };
+    interface HTMLSddsInlineTabsFullbleedElement extends Components.SddsInlineTabsFullbleed, HTMLStencilElement {
+    }
+    var HTMLSddsInlineTabsFullbleedElement: {
+        prototype: HTMLSddsInlineTabsFullbleedElement;
+        new (): HTMLSddsInlineTabsFullbleedElement;
+    };
+    interface HTMLSddsLinkElement extends Components.SddsLink, HTMLStencilElement {
+    }
+    var HTMLSddsLinkElement: {
+        prototype: HTMLSddsLinkElement;
+        new (): HTMLSddsLinkElement;
+    };
+    interface HTMLSddsMessageElement extends Components.SddsMessage, HTMLStencilElement {
+    }
+    var HTMLSddsMessageElement: {
+        prototype: HTMLSddsMessageElement;
+        new (): HTMLSddsMessageElement;
+    };
+    interface HTMLSddsModalElement extends Components.SddsModal, HTMLStencilElement {
+    }
+    var HTMLSddsModalElement: {
+        prototype: HTMLSddsModalElement;
+        new (): HTMLSddsModalElement;
+    };
+    interface HTMLSddsNavigationTabsElement extends Components.SddsNavigationTabs, HTMLStencilElement {
+    }
+    var HTMLSddsNavigationTabsElement: {
+        prototype: HTMLSddsNavigationTabsElement;
+        new (): HTMLSddsNavigationTabsElement;
+    };
+    interface HTMLSddsPopoverCanvasElement extends Components.SddsPopoverCanvas, HTMLStencilElement {
+    }
+    var HTMLSddsPopoverCanvasElement: {
+        prototype: HTMLSddsPopoverCanvasElement;
+        new (): HTMLSddsPopoverCanvasElement;
+    };
+    interface HTMLSddsPopoverMenuElement extends Components.SddsPopoverMenu, HTMLStencilElement {
+    }
+    var HTMLSddsPopoverMenuElement: {
+        prototype: HTMLSddsPopoverMenuElement;
+        new (): HTMLSddsPopoverMenuElement;
+    };
+    interface HTMLSddsRadioButtonElement extends Components.SddsRadioButton, HTMLStencilElement {
+    }
+    var HTMLSddsRadioButtonElement: {
+        prototype: HTMLSddsRadioButtonElement;
+        new (): HTMLSddsRadioButtonElement;
+    };
+    interface HTMLSddsSliderElement extends Components.SddsSlider, HTMLStencilElement {
+    }
+    var HTMLSddsSliderElement: {
+        prototype: HTMLSddsSliderElement;
+        new (): HTMLSddsSliderElement;
+    };
+    interface HTMLSddsSpinnerElement extends Components.SddsSpinner, HTMLStencilElement {
+    }
+    var HTMLSddsSpinnerElement: {
+        prototype: HTMLSddsSpinnerElement;
+        new (): HTMLSddsSpinnerElement;
+    };
+    interface HTMLSddsStepperElement extends Components.SddsStepper, HTMLStencilElement {
+    }
+    var HTMLSddsStepperElement: {
+        prototype: HTMLSddsStepperElement;
+        new (): HTMLSddsStepperElement;
+    };
+    interface HTMLSddsStepperItemElement extends Components.SddsStepperItem, HTMLStencilElement {
+    }
+    var HTMLSddsStepperItemElement: {
+        prototype: HTMLSddsStepperItemElement;
+        new (): HTMLSddsStepperItemElement;
+    };
+    interface HTMLSddsTableElement extends Components.SddsTable, HTMLStencilElement {
+    }
+    var HTMLSddsTableElement: {
+        prototype: HTMLSddsTableElement;
+        new (): HTMLSddsTableElement;
+    };
+    interface HTMLSddsTableBodyElement extends Components.SddsTableBody, HTMLStencilElement {
+    }
+    var HTMLSddsTableBodyElement: {
+        prototype: HTMLSddsTableBodyElement;
+        new (): HTMLSddsTableBodyElement;
+    };
+    interface HTMLSddsTableBodyRowElement extends Components.SddsTableBodyRow, HTMLStencilElement {
+    }
+    var HTMLSddsTableBodyRowElement: {
+        prototype: HTMLSddsTableBodyRowElement;
+        new (): HTMLSddsTableBodyRowElement;
+    };
+    interface HTMLSddsTableBodyRowExpandableElement extends Components.SddsTableBodyRowExpandable, HTMLStencilElement {
+    }
+    var HTMLSddsTableBodyRowExpandableElement: {
+        prototype: HTMLSddsTableBodyRowExpandableElement;
+        new (): HTMLSddsTableBodyRowExpandableElement;
+    };
+    interface HTMLSddsTableFooterElement extends Components.SddsTableFooter, HTMLStencilElement {
+    }
+    var HTMLSddsTableFooterElement: {
+        prototype: HTMLSddsTableFooterElement;
+        new (): HTMLSddsTableFooterElement;
+    };
+    interface HTMLSddsTableHeaderElement extends Components.SddsTableHeader, HTMLStencilElement {
+    }
+    var HTMLSddsTableHeaderElement: {
+        prototype: HTMLSddsTableHeaderElement;
+        new (): HTMLSddsTableHeaderElement;
+    };
+    interface HTMLSddsTableToolbarElement extends Components.SddsTableToolbar, HTMLStencilElement {
+    }
+    var HTMLSddsTableToolbarElement: {
+        prototype: HTMLSddsTableToolbarElement;
+        new (): HTMLSddsTableToolbarElement;
+    };
+    interface HTMLSddsTextareaElement extends Components.SddsTextarea, HTMLStencilElement {
+    }
+    var HTMLSddsTextareaElement: {
+        prototype: HTMLSddsTextareaElement;
+        new (): HTMLSddsTextareaElement;
+    };
+    interface HTMLSddsTextfieldElement extends Components.SddsTextfield, HTMLStencilElement {
+    }
+    var HTMLSddsTextfieldElement: {
+        prototype: HTMLSddsTextfieldElement;
+        new (): HTMLSddsTextfieldElement;
+    };
+    interface HTMLSddsToastElement extends Components.SddsToast, HTMLStencilElement {
+    }
+    var HTMLSddsToastElement: {
+        prototype: HTMLSddsToastElement;
+        new (): HTMLSddsToastElement;
+    };
+    interface HTMLSddsToggleElement extends Components.SddsToggle, HTMLStencilElement {
+    }
+    var HTMLSddsToggleElement: {
+        prototype: HTMLSddsToggleElement;
+        new (): HTMLSddsToggleElement;
+    };
+    interface HTMLSddsTooltipElement extends Components.SddsTooltip, HTMLStencilElement {
+    }
+    var HTMLSddsTooltipElement: {
+        prototype: HTMLSddsTooltipElement;
+        new (): HTMLSddsTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "sdds-accordion": HTMLSddsAccordionElement;
+        "sdds-accordion-item": HTMLSddsAccordionItemElement;
+        "sdds-badges": HTMLSddsBadgesElement;
+        "sdds-banner": HTMLSddsBannerElement;
+        "sdds-block": HTMLSddsBlockElement;
+        "sdds-body-cell": HTMLSddsBodyCellElement;
+        "sdds-breadcrumb": HTMLSddsBreadcrumbElement;
+        "sdds-breadcrumb-item": HTMLSddsBreadcrumbItemElement;
+        "sdds-button": HTMLSddsButtonElement;
+        "sdds-card": HTMLSddsCardElement;
+        "sdds-checkbox": HTMLSddsCheckboxElement;
+        "sdds-datetime": HTMLSddsDatetimeElement;
+        "sdds-dropdown": HTMLSddsDropdownElement;
+        "sdds-dropdown-filter": HTMLSddsDropdownFilterElement;
+        "sdds-dropdown-option": HTMLSddsDropdownOptionElement;
+        "sdds-footer": HTMLSddsFooterElement;
+        "sdds-footer-link": HTMLSddsFooterLinkElement;
+        "sdds-footer-link-group": HTMLSddsFooterLinkGroupElement;
+        "sdds-header-cell": HTMLSddsHeaderCellElement;
+        "sdds-icon": HTMLSddsIconElement;
+        "sdds-inline-tab": HTMLSddsInlineTabElement;
+        "sdds-inline-tabs": HTMLSddsInlineTabsElement;
+        "sdds-inline-tabs-fullbleed": HTMLSddsInlineTabsFullbleedElement;
+        "sdds-link": HTMLSddsLinkElement;
+        "sdds-message": HTMLSddsMessageElement;
+        "sdds-modal": HTMLSddsModalElement;
+        "sdds-navigation-tabs": HTMLSddsNavigationTabsElement;
+        "sdds-popover-canvas": HTMLSddsPopoverCanvasElement;
+        "sdds-popover-menu": HTMLSddsPopoverMenuElement;
+        "sdds-radio-button": HTMLSddsRadioButtonElement;
+        "sdds-slider": HTMLSddsSliderElement;
+        "sdds-spinner": HTMLSddsSpinnerElement;
+        "sdds-stepper": HTMLSddsStepperElement;
+        "sdds-stepper-item": HTMLSddsStepperItemElement;
+        "sdds-table": HTMLSddsTableElement;
+        "sdds-table-body": HTMLSddsTableBodyElement;
+        "sdds-table-body-row": HTMLSddsTableBodyRowElement;
+        "sdds-table-body-row-expandable": HTMLSddsTableBodyRowExpandableElement;
+        "sdds-table-footer": HTMLSddsTableFooterElement;
+        "sdds-table-header": HTMLSddsTableHeaderElement;
+        "sdds-table-toolbar": HTMLSddsTableToolbarElement;
+        "sdds-textarea": HTMLSddsTextareaElement;
+        "sdds-textfield": HTMLSddsTextfieldElement;
+        "sdds-toast": HTMLSddsToastElement;
+        "sdds-toggle": HTMLSddsToggleElement;
+        "sdds-tooltip": HTMLSddsTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    interface SddsAccordion {
+        /**
+          * Enable or disable divider lines between items
+         */
+        "divider"?: boolean;
+        /**
+          * Set the variant of the the accordion.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsAccordionItem {
+        /**
+          * Disabled option in `boolean`.
+         */
+        "disabled"?: boolean;
+        /**
+          * Changes where the expand icon is placed.
+         */
+        "expandIconPosition"?: 'start' | 'end';
+        /**
+          * Set to true to expand panel open
+         */
+        "expanded"?: boolean;
+        /**
+          * The header gives users the context about the additional information available inside the panel
+         */
+        "header"?: string;
+        /**
+          * Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion
+         */
+        "onSddsToggle"?: (event: SddsAccordionItemCustomEvent<boolean>) => void;
+        /**
+          * When true 16px on right padding instead of 64px
+         */
+        "paddingReset"?: boolean;
+    }
+    interface SddsBadges {
+        /**
+          * Changes visibility of badge
+         */
+        "hidden"?: boolean;
+        /**
+          * @deprecated Use size prop instead. Changes badge from large to small size
+         */
+        "isSmall"?: boolean;
+        /**
+          * Sets component size.
+         */
+        "size"?: 'lg' | 'sm';
+        /**
+          * Value shown in badge
+         */
+        "value"?: string;
+    }
+    interface SddsBanner {
+        /**
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.
+         */
+        "bannerId"?: string;
+        /**
+          * Header text.
+         */
+        "header"?: string;
+        /**
+          * Hides the banner
+         */
+        "hidden"?: boolean;
+        /**
+          * Href for the link
+         */
+        "href"?: string;
+        /**
+          * Name of the icon for the component. For error and information type the icon is predefined.
+         */
+        "icon"?: string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "linkRel"?: string;
+        /**
+          * Where to open the linked URL
+         */
+        "linkTarget"?: '_self' | '_blank' | '_parent' | '_top';
+        /**
+          * Link text.
+         */
+        "linkText"?: string;
+        /**
+          * Sends unique banner identifier when the close button is pressed.
+         */
+        "onSddsClose"?: (event: SddsBannerCustomEvent<{
+    bannerId: string;
+    hidden: boolean;
+  }>) => void;
+        /**
+          * Removes the close button on the banner.
+         */
+        "persistent"?: boolean;
+        /**
+          * Subheader text.
+         */
+        "subheader"?: string;
+        /**
+          * Type of banner
+         */
+        "type"?: 'error' | 'information' | 'none';
+    }
+    interface SddsBlock {
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsBodyCell {
+        /**
+          * Passing same cell key for all body cells which is used in head cell enables features of text align and hovering
+         */
+        "cellKey"?: any;
+        /**
+          * Value that will be presented as text inside a cell
+         */
+        "cellValue"?: string | number;
+        /**
+          * Disables internal padding. Useful when passing other components to cell.
+         */
+        "disablePadding"?: boolean;
+    }
+    interface SddsBreadcrumb {
+    }
+    interface SddsBreadcrumbItem {
+        /**
+          * Boolean for the current link
+         */
+        "current"?: boolean;
+        /**
+          * Toggle the disabled state for the breadcrumb
+         */
+        "disabled"?: boolean;
+        /**
+          * Href for the link
+         */
+        "href"?: string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel"?: string;
+        /**
+          * Where to open the linked URL
+         */
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+    }
+    interface SddsButton {
+        /**
+          * Control for disabled state of component
+         */
+        "disabled"?: boolean;
+        /**
+          * When enabled, makes button take 100% width
+         */
+        "fullbleed"?: boolean;
+        /**
+          * Set the mode variant of the the button.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        "size"?: 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Text inside a button
+         */
+        "text"?: string;
+        /**
+          * Type of button
+         */
+        "type"?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    }
+    interface SddsCard {
+        /**
+          * Divider for the body
+         */
+        "bodyDivider"?: boolean;
+        /**
+          * Body image src
+         */
+        "bodyImg"?: string;
+        /**
+          * Alt text for the body image
+         */
+        "bodyImgAlt"?: string;
+        /**
+          * ID for the card, must be unique.  **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.
+         */
+        "cardId"?: string;
+        /**
+          * Makes the card clickable.
+         */
+        "clickable"?: boolean;
+        /**
+          * Text in the header
+         */
+        "header"?: string;
+        /**
+          * Header image src
+         */
+        "headerImg"?: string;
+        /**
+          * Alt text for the header image
+         */
+        "headerImgAlt"?: string;
+        /**
+          * Placement of the header
+         */
+        "headerPlacement"?: 'above' | 'below';
+        /**
+          * Variant of the card based on the theme used.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Sends unique card identifier when the card is clicked, if clickable=true
+         */
+        "onSddsClick"?: (event: SddsCardCustomEvent<{
+    cardId: string;
+  }>) => void;
+        /**
+          * Subheader text in the header
+         */
+        "subheader"?: string;
+    }
+    interface SddsCheckbox {
+        /**
+          * ID for the checkbox's input element. Randomly generated if not specified.
+         */
+        "checkboxId"?: string;
+        /**
+          * Sets the checkbox as checked
+         */
+        "checked"?: boolean;
+        /**
+          * Sets the checkbox in a disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Name for the checkbox's input element.
+         */
+        "name"?: string;
+        /**
+          * Blur event for the checkbox
+         */
+        "onSddsBlur"?: (event: SddsCheckboxCustomEvent<FocusEvent>) => void;
+        /**
+          * Sends unique checkbox identifier and checked status when it is checked/unchecked.
+         */
+        "onSddsChange"?: (event: SddsCheckboxCustomEvent<{
+    checkboxId: string;
+    checked: boolean;
+    value?: string;
+  }>) => void;
+        /**
+          * Focus event for the checkbox
+         */
+        "onSddsFocus"?: (event: SddsCheckboxCustomEvent<FocusEvent>) => void;
+        /**
+          * Make the checkbox required
+         */
+        "required"?: boolean;
+        /**
+          * Value for the checkbox
+         */
+        "value"?: string;
+    }
+    interface SddsDatetime {
+        /**
+          * Autofocus for input
+         */
+        "autofocus"?: boolean;
+        /**
+          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM
+         */
+        "defaultValue"?: string | 'none';
+        /**
+          * Set input in disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Helper text for the component
+         */
+        "helper"?: string;
+        /**
+          * Label text for the component
+         */
+        "label"?: string;
+        /**
+          * Set the variant of the the datetime component.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Name property
+         */
+        "name"?: string;
+        /**
+          * With setting
+         */
+        "noMinWidth"?: boolean;
+        /**
+          * Change event for the datetime
+         */
+        "onCustomChange"?: (event: SddsDatetimeCustomEvent<any>) => void;
+        /**
+          * Size of the input
+         */
+        "size"?: 'sm' | 'md' | '';
+        /**
+          * Error state of input
+         */
+        "state"?: string;
+        /**
+          * Which input type, text, password or similar
+         */
+        "type"?: 'datetime-local' | 'date' | 'time';
+        /**
+          * Value of the input text
+         */
+        "value"?: string;
+    }
+    interface SddsDropdown {
+        /**
+          * Add the value of the option as string to set it as default
+         */
+        "defaultOption"?: string;
+        /**
+          * Set to true for disabled states
+         */
+        "disabled"?: boolean;
+        /**
+          * Add helper text in the bottom of dropdown
+         */
+        "helper"?: string;
+        /**
+          * Set to true to make the width following the label text length
+         */
+        "inline"?: boolean;
+        /**
+          * Label text for label inside & outside
+         */
+        "label"?: string;
+        /**
+          * Controls position of label
+         */
+        "labelPosition"?: 'no-label' | 'inside' | 'outside';
+        /**
+          * Set the variant of the the dropdown.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        "onInputSearch"?: (event: SddsDropdownCustomEvent<any>) => void;
+        /**
+          * Direction that the dropdown will open. By default set to auto.
+         */
+        "openDirection"?: 'down' | 'up' | 'auto';
+        /**
+          * Placeholder text for dropdown with no selectedLabel item
+         */
+        "placeholder"?: string;
+        /**
+          * Add the value of the option as string to set it as new selected value
+         */
+        "selectedOption"?: string;
+        /**
+          * Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated
+         */
+        "size"?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+        /**
+          * Support `error` state
+         */
+        "state"?: string;
+        /**
+          * `Controls type of dropdown.
+         */
+        "type"?: 'default' | 'multiselect' | 'filter';
+    }
+    interface SddsDropdownFilter {
+        /**
+          * Data is an array of objects that contains label and value `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`
+         */
+        "data"?: string;
+        /**
+          * Add the value of the option to set it as default
+         */
+        "defaultOption"?: string;
+        /**
+          * Add the value of the option to set it as default
+         */
+        "disabled"?: boolean;
+        /**
+          * Add helper text in the bottom of dropdown
+         */
+        "helper"?: string;
+        /**
+          * Set to true to make the width following the label text length
+         */
+        "inline"?: boolean;
+        /**
+          * Label for dropdown with no selected item
+         */
+        "label"?: string;
+        /**
+          * Position of label
+         */
+        "labelPosition"?: 'no-label' | 'inside' | 'outside';
+        /**
+          * Placeholder text for dropdown with no selected item
+         */
+        "placeholder"?: string;
+        /**
+          * Add the value of the option as string to set it as new selected value
+         */
+        "selectedOption"?: string;
+        /**
+          * Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated
+         */
+        "size"?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+        /**
+          * Support `error` state
+         */
+        "state"?: string;
+    }
+    interface SddsDropdownOption {
+        /**
+          * Sets option to disabled state if true
+         */
+        "disabled"?: boolean;
+        "onSelectOption"?: (event: SddsDropdownOptionCustomEvent<any>) => void;
+        /**
+          * Selected set to true if selected
+         */
+        "selected"?: boolean;
+        /**
+          * Value is a unique string that will be used for application logic
+         */
+        "value"?: string;
+    }
+    interface SddsFooter {
+        /**
+          * Mode variant of the component, based on current mode.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsFooterLink {
+        /**
+          * URL for the link
+         */
+        "linkHref"?: string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel"?: string;
+        /**
+          * Where to open the linked URL
+         */
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+    }
+    interface SddsFooterLinkGroup {
+        /**
+          * Title text for the link group, only valid on top part of footer.
+         */
+        "titleText"?: string;
+    }
+    interface SddsHeaderCell {
+        /**
+          * Value of column key, usually comes from JSON, needed for sorting
+         */
+        "columnKey"?: string;
+        /**
+          * Text that displays in column cell
+         */
+        "columnTitle"?: string;
+        /**
+          * In case noMinWidth setting, user has to specify width value for each column, for example "150px"
+         */
+        "customWidth"?: string;
+        /**
+          * Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell
+         */
+        "onHeadCellHoverEvent"?: (event: SddsHeaderCellCustomEvent<any>) => void;
+        /**
+          * Sends unique table identifier,column key and sorting direction to the sdds-table-body component
+         */
+        "onSortColumnDataEvent"?: (event: SddsHeaderCellCustomEvent<any>) => void;
+        /**
+          * Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell
+         */
+        "onTextAlignEvent"?: (event: SddsHeaderCellCustomEvent<any>) => void;
+        /**
+          * If passed as prop, enables sorting on that column
+         */
+        "sortable"?: boolean;
+        /**
+          * Setting for text align, default is left, but user can pass "right" as string - useful for numeric values
+         */
+        "textAlign"?: string;
+    }
+    interface SddsIcon {
+        /**
+          * Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook
+         */
+        "name"?: string;
+        /**
+          * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
+         */
+        "size"?: string;
+    }
+    interface SddsInlineTab {
+        "default"?: boolean;
+        "disabled"?: boolean;
+        "label"?: string;
+    }
+    interface SddsInlineTabs {
+        /**
+          * different height settings. right now only supports "auto", otherwise ignored
+         */
+        "autoHeight"?: boolean;
+        /**
+          * either use this (default-tab="...") or read attribute "default" from one of the slotted children.
+         */
+        "defaultTab"?: string;
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsInlineTabsFullbleed {
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsLink {
+        /**
+          * Disables the link
+         */
+        "disabled"?: boolean;
+        /**
+          * URL for the link
+         */
+        "href"?: string;
+        /**
+          * 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'.
+         */
+        "rel"?: string;
+        /**
+          * Where to open the linked URL
+         */
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+        /**
+          * Displays the link with an underline.
+         */
+        "underline"?: boolean;
+    }
+    interface SddsMessage {
+        /**
+          * Header text for the component.
+         */
+        "header"?: string;
+        /**
+          * Minimal message styling.
+         */
+        "minimal"?: boolean;
+        /**
+          * Variant of the component, based on current mode.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Removes the icon in the message.
+         */
+        "noIcon"?: boolean;
+        /**
+          * Type of message.
+         */
+        "type"?: 'information' | 'error' | 'warning' | 'success';
+    }
+    interface SddsModal {
+        /**
+          * Sticky or Static Actions
+         */
+        "actions"?: 'sticky' | 'static';
+        "open"?: boolean;
+        /**
+          * Disables closing modal on clicking on overlay area.
+         */
+        "prevent"?: boolean;
+        /**
+          * Size of modal
+         */
+        "size"?: 'xs' | 'sm' | 'md' | 'lg';
+    }
+    interface SddsNavigationTabs {
+        /**
+          * Variant of the tabs, primary= on white, secondary= on grey50
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+    }
+    interface SddsPopoverCanvas {
+        /**
+          * Sets the offset distance
+         */
+        "offsetDistance"?: number;
+        /**
+          * Sets the offset skidding
+         */
+        "offsetSkidding"?: number;
+        /**
+          * Decides the placement of the Popover Canvas
+         */
+        "placement"?: Placement;
+        /**
+          * Element that will trigger the popover (takes priority over selector)
+         */
+        "referenceEl"?: HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the popover
+         */
+        "selector"?: string;
+        /**
+          * Decides if the Popover Canvas should be visible from the start
+         */
+        "show"?: boolean;
+    }
+    interface SddsPopoverMenu {
+        /**
+          * Sets the offset distance
+         */
+        "offsetDistance"?: number;
+        /**
+          * Sets the offset skidding
+         */
+        "offsetSkidding"?: number;
+        /**
+          * Decides the placement of the Popover Menu
+         */
+        "placement"?: Placement;
+        /**
+          * Element that will trigger the popover (takes priority over selector)
+         */
+        "referenceEl"?: HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the popover
+         */
+        "selector"?: string;
+        /**
+          * Decides if the Popover Menu should be visible from the start
+         */
+        "show"?: boolean;
+    }
+    interface SddsRadioButton {
+        /**
+          * Decides if the radio button is checked or not.
+         */
+        "checked"?: boolean;
+        /**
+          * Decides if the radio button is disabled or not.
+         */
+        "disabled"?: boolean;
+        /**
+          * Name of radio button, used for reference.
+         */
+        "name"?: string;
+        /**
+          * Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing.
+         */
+        "onSddsChange"?: (event: SddsRadioButtonCustomEvent<{
+    radioId: string;
+    value: string;
+  }>) => void;
+        /**
+          * Unique radio button identifier.
+         */
+        "radioId"?: string;
+        /**
+          * Decides if the radio button is required or not.
+         */
+        "required"?: boolean;
+        /**
+          * Value of input.
+         */
+        "value"?: string;
+    }
+    interface SddsSlider {
+        /**
+          * Decide to show the controls or not
+         */
+        "controls"?: boolean;
+        /**
+          * Sets the disabled state for the whole component
+         */
+        "disabled"?: boolean;
+        /**
+          * Decide to show the input field or not
+         */
+        "input"?: boolean;
+        /**
+          * Text for label
+         */
+        "label"?: string;
+        /**
+          * Maximum value
+         */
+        "max"?: string;
+        /**
+          * Minimum value
+         */
+        "min"?: string;
+        /**
+          * Name property (will be inherited by the native slider component)
+         */
+        "name"?: string;
+        /**
+          * Sends unique checkbox identifier and value when the slider has a change in value.
+         */
+        "onSddsChange"?: (event: SddsSliderCustomEvent<{
+    value: string;
+  }>) => void;
+        /**
+          * Sets the read only state for the whole component
+         */
+        "readOnly"?: boolean;
+        /**
+          * Decide to show numbers above the tick markers or not
+         */
+        "showTickNumbers"?: boolean;
+        /**
+          * Sets the size of the scrubber
+         */
+        "size"?: 'sm' | '';
+        /**
+          * Id for the sliders input element, randomly generated if not specified.
+         */
+        "sliderId"?: string;
+        /**
+          * Snap to the ticks grid
+         */
+        "snap"?: boolean;
+        /**
+          * Defines how much to increment/decrement the value when using controls
+         */
+        "step"?: string;
+        /**
+          * Number of tick markers (tick for min- and max-value will be added automatically)
+         */
+        "ticks"?: string;
+        /**
+          * Decide to show the tooltip or not
+         */
+        "tooltip"?: boolean;
+        /**
+          * Initial value
+         */
+        "value"?: string;
+    }
+    interface SddsSpinner {
+        /**
+          * Size of spinner
+         */
+        "size"?: 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Variant of spinner
+         */
+        "variant"?: 'standard' | 'inverted';
+    }
+    interface SddsStepper {
+        /**
+          * The direction the children are layed out.
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Hides the label for the child components if true.
+         */
+        "hideLabels"?: boolean;
+        /**
+          * Text position, only available on direction:horizontal
+         */
+        "labelPosition"?: 'aside' | 'below';
+        /**
+          * Size of the component and it's children.
+         */
+        "size"?: 'sm' | 'lg';
+    }
+    interface SddsStepperItem {
+        /**
+          * Label text for the stepper-item.
+         */
+        "labelText"?: string;
+        /**
+          * State of the stepper-item
+         */
+        "state"?: 'current' | 'error' | 'success' | 'upcoming';
+    }
+    interface SddsTable {
+        /**
+          * Enables style where data-table toolbar, rows and footer are less high
+         */
+        "compactDesign"?: boolean;
+        /**
+          * Enables extended row feature of data-table
+         */
+        "enableExpandableRows"?: boolean;
+        /**
+          * Enables multiselect feature of data-table
+         */
+        "enableMultiselect"?: boolean;
+        /**
+          * Enables table to take 100% available width with equal spacing of columns
+         */
+        "enableResponsive"?: boolean;
+        /**
+          * Variant of the component, based on current mode.
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Enables to customise width on data-table columns
+         */
+        "noMinWidth"?: boolean;
+        /**
+          * Broadcasts changes to the tables props
+         */
+        "onTablePropsChangedEvent"?: (event: SddsTableCustomEvent<TablePropsChangedEvent>) => void;
+        /**
+          * ID used for internal table functionality and events, must be unique.  **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.
+         */
+        "tableId"?: string;
+        /**
+          * Enables style with vertical dividers between columns
+         */
+        "verticalDividers"?: boolean;
+    }
+    interface SddsTableBody {
+        /**
+          * Prop to pass JSON string which enables automatic rendering of table rows and cells
+         */
+        "bodyData"?: any;
+        /**
+          * Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term
+         */
+        "disableFilteringFunction"?: boolean;
+        /**
+          * Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting
+         */
+        "disableSortingFunction"?: boolean;
+        /**
+          * Prop for showcase of rendering JSON in body-data, just for presentation purposes
+         */
+        "enableDummyData"?: boolean;
+        /**
+          * Event that sends unique table identifier and enable/disable status for sorting functionality
+         */
+        "onSortingSwitcherEvent"?: (event: SddsTableBodyCustomEvent<any>) => void;
+        /**
+          * Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled
+         */
+        "onUpdateBodyCheckboxesEvent"?: (event: SddsTableBodyCustomEvent<any>) => void;
+        /**
+          * Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used
+         */
+        "onUpdateMainCheckboxEvent"?: (event: SddsTableBodyCustomEvent<any>) => void;
+    }
+    interface SddsTableBodyRow {
+        /**
+          * Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control
+         */
+        "onBodyRowToTable"?: (event: SddsTableBodyRowCustomEvent<boolean>) => void;
+        /**
+          * Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run
+         */
+        "onRunPaginationEvent"?: (event: SddsTableBodyRowCustomEvent<string>) => void;
+    }
+    interface SddsTableBodyRowExpandable {
+        /**
+          * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
+         */
+        "colSpan"?: number;
+        /**
+          * Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run
+         */
+        "onRunPaginationEvent"?: (event: SddsTableBodyRowExpandableCustomEvent<string>) => void;
+        /**
+          * Sends out status of itw own expended status feature to table header component
+         */
+        "onSingleRowExpandedEvent"?: (event: SddsTableBodyRowExpandableCustomEvent<any>) => void;
+    }
+    interface SddsTableFooter {
+        /**
+          * Prop for client to set max number of pages
+         */
+        "clientMaxPages"?: number;
+        /**
+          * Prop for client to set current page number
+         */
+        "clientPaginationValue"?: number;
+        /**
+          * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
+         */
+        "clientSetColumnsNumber"?: number;
+        /**
+          * Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component
+         */
+        "disablePaginationFunction"?: boolean;
+        /**
+          * Prop to enable client controlled pagination
+         */
+        "enableClientPagination"?: boolean;
+        /**
+          * Enable pagination and show pagination controls
+         */
+        "enablePagination"?: boolean;
+        /**
+          * Event to send current page value back to sdds-table-body component
+         */
+        "onCurrentPageValueEvent"?: (event: SddsTableFooterCustomEvent<any>) => void;
+        /**
+          * Event that footer sends out in order to receive other necessary information from other subcomponents
+         */
+        "onEnablePaginationEvent"?: (event: SddsTableFooterCustomEvent<any>) => void;
+        /**
+          * Sets how many rows to display when pagination is enabled
+         */
+        "rowsPerPage"?: number;
+    }
+    interface SddsTableHeader {
+        /**
+          * Send status of main checkbox in header to the parent, sdds-table component
+         */
+        "onMainCheckboxSelectedEvent"?: (event: SddsTableHeaderCustomEvent<any>) => void;
+    }
+    interface SddsTableToolbar {
+        /**
+          * Enables preview of searchbar
+         */
+        "enableFiltering"?: boolean;
+        /**
+          * Used for sending users input to main parent <sdds-table> component
+         */
+        "onTableFilteringTerm"?: (event: SddsTableToolbarCustomEvent<any>) => void;
+        /**
+          * Adds title to the data-table
+         */
+        "tableTitle"?: string;
+    }
+    interface SddsTextarea {
+        /**
+          * Control of autofocus
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Textarea cols attribute
+         */
+        "cols"?: number;
+        /**
+          * Set input in disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Helper text
+         */
+        "helper"?: string;
+        /**
+          * Label text
+         */
+        "label"?: string;
+        /**
+          * Position of the label for the textfield.
+         */
+        "labelPosition"?: 'inside' | 'outside' | 'no-label';
+        /**
+          * Max length of input
+         */
+        "maxLength"?: number;
+        /**
+          * Mode variant of the textarea
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Name attribute
+         */
+        "name"?: string;
+        /**
+          * Unset minimum width of 208px.
+         */
+        "noMinWidth"?: boolean;
+        /**
+          * Blur event for the textarea
+         */
+        "onSddsBlur"?: (event: SddsTextareaCustomEvent<FocusEvent>) => void;
+        /**
+          * Change event for the textarea
+         */
+        "onSddsChange"?: (event: SddsTextareaCustomEvent<any>) => void;
+        /**
+          * Focus event for the textarea
+         */
+        "onSddsFocus"?: (event: SddsTextareaCustomEvent<FocusEvent>) => void;
+        /**
+          * Input event for the textarea
+         */
+        "onSddsInput"?: (event: SddsTextareaCustomEvent<InputEvent>) => void;
+        /**
+          * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Set input in readonly state
+         */
+        "readOnly"?: boolean;
+        /**
+          * Textarea rows attribute
+         */
+        "rows"?: number;
+        /**
+          * Error state of input
+         */
+        "state"?: 'error' | 'success' | 'default';
+        /**
+          * Value of the input text
+         */
+        "value"?: string;
+    }
+    interface SddsTextfield {
+        /**
+          * Autofocus for input
+         */
+        "autofocus"?: boolean;
+        /**
+          * Set input in disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Helper text
+         */
+        "helper"?: string;
+        /**
+          * Label text
+         */
+        "label"?: string;
+        /**
+          * Position of the label for the textfield.
+         */
+        "labelPosition"?: 'inside' | 'outside' | 'no-label';
+        /**
+          * Max length of input
+         */
+        "maxLength"?: number;
+        /**
+          * Mode variant of the textfield
+         */
+        "modeVariant"?: 'primary' | 'secondary';
+        /**
+          * Name property
+         */
+        "name"?: string;
+        /**
+          * With setting
+         */
+        "noMinWidth"?: boolean;
+        /**
+          * Blur event for the textfield
+         */
+        "onSddsBlur"?: (event: SddsTextfieldCustomEvent<FocusEvent>) => void;
+        /**
+          * Change event for the textfield
+         */
+        "onSddsChange"?: (event: SddsTextfieldCustomEvent<any>) => void;
+        /**
+          * Focus event for the textfield
+         */
+        "onSddsFocus"?: (event: SddsTextfieldCustomEvent<FocusEvent>) => void;
+        /**
+          * Input event for the textfield
+         */
+        "onSddsInput"?: (event: SddsTextfieldCustomEvent<InputEvent>) => void;
+        /**
+          * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Set input in readonly state
+         */
+        "readOnly"?: boolean;
+        /**
+          * Size of the input
+         */
+        "size"?: 'sm' | 'md' | 'lg';
+        /**
+          * Error state of input
+         */
+        "state"?: 'error' | 'success' | 'default';
+        /**
+          * Which input type, text, password or similar
+         */
+        "type"?: 'text' | 'password';
+        /**
+          * Value of the input text
+         */
+        "value"?: string;
+    }
+    interface SddsToast {
+        /**
+          * Header text for the component.
+         */
+        "header"?: string;
+        /**
+          * Hides the toast.
+         */
+        "hidden"?: boolean;
+        /**
+          * Sends unique toast identifier component is closed.
+         */
+        "onSddsClose"?: (event: SddsToastCustomEvent<{
+    toastId: string;
+  }>) => void;
+        /**
+          * Subheader text for the component.
+         */
+        "subheader"?: string;
+        /**
+          * ID for the toast. Randomly generated if not specified.
+         */
+        "toastId"?: string;
+        /**
+          * ARIA role for the toast.
+         */
+        "toastRole"?: 'alert' | 'log' | 'status';
+        /**
+          * Type of toast.
+         */
+        "type"?: 'information' | 'error' | 'warning' | 'success';
+    }
+    interface SddsToggle {
+        /**
+          * Sets the toggle as checked
+         */
+        "checked"?: boolean;
+        /**
+          * Sets the toggle in a disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Headline for the toggle
+         */
+        "headline"?: string;
+        /**
+          * Name of the toggles input element
+         */
+        "name"?: string;
+        /**
+          * Sends unique toggle identifier and status when it is toggled.
+         */
+        "onSddsToggle"?: (event: SddsToggleCustomEvent<{
+    toggleId: string;
+    checked: boolean;
+  }>) => void;
+        /**
+          * Make the toggle required
+         */
+        "required"?: boolean;
+        /**
+          * Size of the toggle
+         */
+        "size"?: 'sm' | 'lg';
+        /**
+          * ID of the toggles input element, if not specifed it's randomly generated
+         */
+        "toggleId"?: string;
+    }
+    interface SddsTooltip {
+        /**
+          * Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button.
+         */
+        "mouseOverTooltip"?: boolean;
+        /**
+          * Placement of tooltip.
+         */
+        "placement"?: Placement;
+        /**
+          * Element that will trigger the tooltip (takes priority over selector)
+         */
+        "referenceEl"?: HTMLElement;
+        /**
+          * The CSS-selector for an element that will trigger the tooltip
+         */
+        "selector"?: string;
+        /**
+          * Prop in control of showing and hiding prop
+         */
+        "show"?: boolean;
+        /**
+          * In case tooltip contains only text, no HTML, text can be passed by this prop
+         */
+        "text"?: string;
+    }
+    interface IntrinsicElements {
+        "sdds-accordion": SddsAccordion;
+        "sdds-accordion-item": SddsAccordionItem;
+        "sdds-badges": SddsBadges;
+        "sdds-banner": SddsBanner;
+        "sdds-block": SddsBlock;
+        "sdds-body-cell": SddsBodyCell;
+        "sdds-breadcrumb": SddsBreadcrumb;
+        "sdds-breadcrumb-item": SddsBreadcrumbItem;
+        "sdds-button": SddsButton;
+        "sdds-card": SddsCard;
+        "sdds-checkbox": SddsCheckbox;
+        "sdds-datetime": SddsDatetime;
+        "sdds-dropdown": SddsDropdown;
+        "sdds-dropdown-filter": SddsDropdownFilter;
+        "sdds-dropdown-option": SddsDropdownOption;
+        "sdds-footer": SddsFooter;
+        "sdds-footer-link": SddsFooterLink;
+        "sdds-footer-link-group": SddsFooterLinkGroup;
+        "sdds-header-cell": SddsHeaderCell;
+        "sdds-icon": SddsIcon;
+        "sdds-inline-tab": SddsInlineTab;
+        "sdds-inline-tabs": SddsInlineTabs;
+        "sdds-inline-tabs-fullbleed": SddsInlineTabsFullbleed;
+        "sdds-link": SddsLink;
+        "sdds-message": SddsMessage;
+        "sdds-modal": SddsModal;
+        "sdds-navigation-tabs": SddsNavigationTabs;
+        "sdds-popover-canvas": SddsPopoverCanvas;
+        "sdds-popover-menu": SddsPopoverMenu;
+        "sdds-radio-button": SddsRadioButton;
+        "sdds-slider": SddsSlider;
+        "sdds-spinner": SddsSpinner;
+        "sdds-stepper": SddsStepper;
+        "sdds-stepper-item": SddsStepperItem;
+        "sdds-table": SddsTable;
+        "sdds-table-body": SddsTableBody;
+        "sdds-table-body-row": SddsTableBodyRow;
+        "sdds-table-body-row-expandable": SddsTableBodyRowExpandable;
+        "sdds-table-footer": SddsTableFooter;
+        "sdds-table-header": SddsTableHeader;
+        "sdds-table-toolbar": SddsTableToolbar;
+        "sdds-textarea": SddsTextarea;
+        "sdds-textfield": SddsTextfield;
+        "sdds-toast": SddsToast;
+        "sdds-toggle": SddsToggle;
+        "sdds-tooltip": SddsTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "sdds-accordion": LocalJSX.SddsAccordion & JSXBase.HTMLAttributes<HTMLSddsAccordionElement>;
+            "sdds-accordion-item": LocalJSX.SddsAccordionItem & JSXBase.HTMLAttributes<HTMLSddsAccordionItemElement>;
+            "sdds-badges": LocalJSX.SddsBadges & JSXBase.HTMLAttributes<HTMLSddsBadgesElement>;
+            "sdds-banner": LocalJSX.SddsBanner & JSXBase.HTMLAttributes<HTMLSddsBannerElement>;
+            "sdds-block": LocalJSX.SddsBlock & JSXBase.HTMLAttributes<HTMLSddsBlockElement>;
+            "sdds-body-cell": LocalJSX.SddsBodyCell & JSXBase.HTMLAttributes<HTMLSddsBodyCellElement>;
+            "sdds-breadcrumb": LocalJSX.SddsBreadcrumb & JSXBase.HTMLAttributes<HTMLSddsBreadcrumbElement>;
+            "sdds-breadcrumb-item": LocalJSX.SddsBreadcrumbItem & JSXBase.HTMLAttributes<HTMLSddsBreadcrumbItemElement>;
+            "sdds-button": LocalJSX.SddsButton & JSXBase.HTMLAttributes<HTMLSddsButtonElement>;
+            "sdds-card": LocalJSX.SddsCard & JSXBase.HTMLAttributes<HTMLSddsCardElement>;
+            "sdds-checkbox": LocalJSX.SddsCheckbox & JSXBase.HTMLAttributes<HTMLSddsCheckboxElement>;
+            "sdds-datetime": LocalJSX.SddsDatetime & JSXBase.HTMLAttributes<HTMLSddsDatetimeElement>;
+            "sdds-dropdown": LocalJSX.SddsDropdown & JSXBase.HTMLAttributes<HTMLSddsDropdownElement>;
+            "sdds-dropdown-filter": LocalJSX.SddsDropdownFilter & JSXBase.HTMLAttributes<HTMLSddsDropdownFilterElement>;
+            "sdds-dropdown-option": LocalJSX.SddsDropdownOption & JSXBase.HTMLAttributes<HTMLSddsDropdownOptionElement>;
+            "sdds-footer": LocalJSX.SddsFooter & JSXBase.HTMLAttributes<HTMLSddsFooterElement>;
+            "sdds-footer-link": LocalJSX.SddsFooterLink & JSXBase.HTMLAttributes<HTMLSddsFooterLinkElement>;
+            "sdds-footer-link-group": LocalJSX.SddsFooterLinkGroup & JSXBase.HTMLAttributes<HTMLSddsFooterLinkGroupElement>;
+            "sdds-header-cell": LocalJSX.SddsHeaderCell & JSXBase.HTMLAttributes<HTMLSddsHeaderCellElement>;
+            "sdds-icon": LocalJSX.SddsIcon & JSXBase.HTMLAttributes<HTMLSddsIconElement>;
+            "sdds-inline-tab": LocalJSX.SddsInlineTab & JSXBase.HTMLAttributes<HTMLSddsInlineTabElement>;
+            "sdds-inline-tabs": LocalJSX.SddsInlineTabs & JSXBase.HTMLAttributes<HTMLSddsInlineTabsElement>;
+            "sdds-inline-tabs-fullbleed": LocalJSX.SddsInlineTabsFullbleed & JSXBase.HTMLAttributes<HTMLSddsInlineTabsFullbleedElement>;
+            "sdds-link": LocalJSX.SddsLink & JSXBase.HTMLAttributes<HTMLSddsLinkElement>;
+            "sdds-message": LocalJSX.SddsMessage & JSXBase.HTMLAttributes<HTMLSddsMessageElement>;
+            "sdds-modal": LocalJSX.SddsModal & JSXBase.HTMLAttributes<HTMLSddsModalElement>;
+            "sdds-navigation-tabs": LocalJSX.SddsNavigationTabs & JSXBase.HTMLAttributes<HTMLSddsNavigationTabsElement>;
+            "sdds-popover-canvas": LocalJSX.SddsPopoverCanvas & JSXBase.HTMLAttributes<HTMLSddsPopoverCanvasElement>;
+            "sdds-popover-menu": LocalJSX.SddsPopoverMenu & JSXBase.HTMLAttributes<HTMLSddsPopoverMenuElement>;
+            "sdds-radio-button": LocalJSX.SddsRadioButton & JSXBase.HTMLAttributes<HTMLSddsRadioButtonElement>;
+            "sdds-slider": LocalJSX.SddsSlider & JSXBase.HTMLAttributes<HTMLSddsSliderElement>;
+            "sdds-spinner": LocalJSX.SddsSpinner & JSXBase.HTMLAttributes<HTMLSddsSpinnerElement>;
+            "sdds-stepper": LocalJSX.SddsStepper & JSXBase.HTMLAttributes<HTMLSddsStepperElement>;
+            "sdds-stepper-item": LocalJSX.SddsStepperItem & JSXBase.HTMLAttributes<HTMLSddsStepperItemElement>;
+            "sdds-table": LocalJSX.SddsTable & JSXBase.HTMLAttributes<HTMLSddsTableElement>;
+            "sdds-table-body": LocalJSX.SddsTableBody & JSXBase.HTMLAttributes<HTMLSddsTableBodyElement>;
+            "sdds-table-body-row": LocalJSX.SddsTableBodyRow & JSXBase.HTMLAttributes<HTMLSddsTableBodyRowElement>;
+            "sdds-table-body-row-expandable": LocalJSX.SddsTableBodyRowExpandable & JSXBase.HTMLAttributes<HTMLSddsTableBodyRowExpandableElement>;
+            "sdds-table-footer": LocalJSX.SddsTableFooter & JSXBase.HTMLAttributes<HTMLSddsTableFooterElement>;
+            "sdds-table-header": LocalJSX.SddsTableHeader & JSXBase.HTMLAttributes<HTMLSddsTableHeaderElement>;
+            "sdds-table-toolbar": LocalJSX.SddsTableToolbar & JSXBase.HTMLAttributes<HTMLSddsTableToolbarElement>;
+            "sdds-textarea": LocalJSX.SddsTextarea & JSXBase.HTMLAttributes<HTMLSddsTextareaElement>;
+            "sdds-textfield": LocalJSX.SddsTextfield & JSXBase.HTMLAttributes<HTMLSddsTextfieldElement>;
+            "sdds-toast": LocalJSX.SddsToast & JSXBase.HTMLAttributes<HTMLSddsToastElement>;
+            "sdds-toggle": LocalJSX.SddsToggle & JSXBase.HTMLAttributes<HTMLSddsToggleElement>;
+            "sdds-tooltip": LocalJSX.SddsTooltip & JSXBase.HTMLAttributes<HTMLSddsTooltipElement>;
+        }
+    }
+}