@limetech/lime-elements 36.4.0 → 37.0.0-dev.1

package/dist/types/components.d.ts

@@ -25,7 +25,49 @@ import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
+export { ActionBarItem } from "./components/action-bar/action-bar.types";
+export { ListSeparator } from "./components/list/list-item.types";
+export { OpenDirection } from "./components/menu/menu.types";
+export { ListSeparator as ListSeparator1 } from "src/interface";
+export { Action as Action1, ActionBarItem as ActionBarItem1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator as ListSeparator2, ListType, MenuItem, MenuListType, OpenDirection as OpenDirection1, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
+export { Button } from "./components/button/button.types";
+export { CalloutType } from "./components/callout/callout.types";
+export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
+export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
+export { Action } from "./components/collapsible-section/action";
+export { DockItem } from "./components/dock/dock.types";
+export { FormError, ValidationError, ValidationStatus } from "./components/form/form.types";
+export { IconSize } from "./components/icon/icon.types";
+export { InfoTileProgress } from "./components/info-tile/info-tile.types";
+export { InputType } from "./components/input-field/input-field.types";
+export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
+export { FlowItem } from "./components/progress-flow/progress-flow.types";
+export { Tab } from "./components/tab-bar/tab.types";
+export { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
+export { Layout } from "./components/table/layout";
 export namespace Components {
+    /**
+     * An action bar is a user interface element commonly found in software applications and websites.
+     * It typically appears at the top of the screen or within a specific section
+     * and serves as a centralized hub for accessing various actions and commands
+     * relevant to the current context or page.
+     * The action bar often contains a set of clickable icons or buttons (icons + labels)
+     * that represent specific actions, such as saving, deleting, editing, sharing,
+     * or bulk operations for selected items.
+     * The purpose of an action bar is to provide quick and convenient access to
+     * frequently used functionalities, enabling users to perform common tasks efficiently.
+     * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+     * The action bar's design and layout can vary based on the platform or application,
+     * but its primary goal remains consistent—to
+     * empower users to interact with the software and perform desired actions effortlessly.
+     * @exampleComponent limel-example-action-bar
+     * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-colors
+     * @exampleComponent limel-example-action-bar-floating
+     * @exampleComponent limel-example-action-bar-styling
+     * @exampleComponent limel-example-action-bar-as-primary-component
+     * @private 
+     */
     interface LimelActionBar {
         /**
           * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
@@ -44,6 +86,9 @@ export namespace Components {
          */
         "openDirection": OpenDirection;
     }
+    /**
+     * @private 
+     */
     interface LimelActionBarItem {
         /**
           * When the item is displayed in the available width, this will be `false`.
@@ -54,6 +99,9 @@ export namespace Components {
          */
         "item": ActionBarItem | ListSeparator1;
     }
+    /**
+     * @private 
+     */
     interface LimelActionBarOverflowMenu {
         /**
           * List of the items that should be rendered in the overflow menu.
@@ -64,12 +112,22 @@ export namespace Components {
          */
         "openDirection": OpenDirection1;
     }
+    /**
+     * The Badge component can be used to display a notification badge,
+     * optionally with a number or a text label.
+     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-number
+     * @exampleComponent limel-example-badge-string
+     */
     interface LimelBadge {
         /**
           * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters.
          */
         "label"?: number | string;
     }
+    /**
+     * @exampleComponent limel-example-banner
+     */
     interface LimelBanner {
         /**
           * Close the banner
@@ -88,6 +146,19 @@ export namespace Components {
          */
         "open": () => Promise<void>;
     }
+    /**
+     * @exampleComponent limel-example-button-basic
+     * @exampleComponent limel-example-button-primary
+     * @exampleComponent limel-example-button-outlined
+     * @exampleComponent limel-example-button-disabled
+     * @exampleComponent limel-example-button-icon
+     * @exampleComponent limel-example-button-loading
+     * @exampleComponent limel-example-button-click-success
+     * @exampleComponent limel-example-button-click-fail
+     * @exampleComponent limel-example-button-reduce-presence
+     * @exampleComponent limel-example-button-colors
+     * @exampleComponent limel-example-button-composite
+     */
     interface LimelButton {
         /**
           * Set to `true` to disable the button.
@@ -118,6 +189,35 @@ export namespace Components {
          */
         "primary": boolean;
     }
+    /**
+     * A button group control is a linear set of two or more buttons.
+     * ## Usage
+     * Button groups are often used to display different views of the same thing. A
+     * common example of this component is when you switch between [ Map | Transit
+     * | Satellite ] views to look at an area on the map.
+     * In some cases, button groups may serve as quick filters as well. For example
+     * a list of contacts, in which the user can switch to [ All | Favorites
+     * | Frequently contacted ] can incorporate a button group to quickly filter out
+     * items and display subsets of them.
+     * ## Layout
+     * The button groups are usually placed in top headers and action bars,
+     * sometimes with other elements. Since the group items will always be rendered
+     * in a row, you must make sure not to have too many buttons in the group.
+     * Because if the container of your button group does not get enough space to
+     * fit in all its buttons, they will have to truncate their text and may appear
+     * very cramped together. Always think about how your button group will appear
+     * on a small screen such as phones.
+     * :::note
+     * Button can contain text or icons, but not both simultaneously!
+     * :::
+     * Within the group, icon buttons will all have the same width, while each text button
+     * inherits its width from its content.
+     * @exampleComponent limel-example-button-group-icons
+     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-mix
+     * @exampleComponent limel-example-button-group-badges
+     * @exampleComponent limel-example-button-group-composite
+     */
     interface LimelButtonGroup {
         /**
           * True if the button-group should be disabled
@@ -128,6 +228,31 @@ export namespace Components {
          */
         "value": Button[];
     }
+    /**
+     * Callouts—also known as Admonitions—are useful for including supportive or
+     * special content within a large piece of text, or even inside a user
+     * interface.
+     * When used in a document or text based user interface, the callout attracts
+     * the reader's attention to a particular piece of information, without
+     * significantly interrupting their flow of reading the document.
+     * In a user interface, a callout is more intrusive to the end-user. Still, it
+     * could be a good choice when you intend to slightly disturb the user's
+     * attention, and challenge them to pay extra attention to the information
+     * presented. In such cases, a callout should not be used as a static and
+     * constantly present element of the UI. Rather, it should be displayed when
+     * something unusual or remarkable demands the user's attention.
+     * @exampleComponent limel-example-callout-note
+     * @exampleComponent limel-example-callout-important
+     * @exampleComponent limel-example-callout-tip
+     * @exampleComponent limel-example-callout-caution
+     * @exampleComponent limel-example-callout-warning
+     * @exampleComponent limel-example-callout-rich-content
+     * @exampleComponent limel-example-callout-custom-heading
+     * @exampleComponent limel-example-callout-custom-icon
+     * @exampleComponent limel-example-callout-styles
+     * @exampleComponent limel-example-custom-type
+     * @exampleComponent limel-example-callout-composite
+     */
     interface LimelCallout {
         /**
           * Heading of the callout, which can be used to override the default heading which is displayed based on the chosen `type`.
@@ -146,6 +271,10 @@ export namespace Components {
          */
         "type"?: CalloutType;
     }
+    /**
+     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-helper-text
+     */
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -176,6 +305,17 @@ export namespace Components {
          */
         "required": boolean;
     }
+    /**
+     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-choice
+     * @exampleComponent limel-example-chip-set-filter
+     * @exampleComponent limel-example-chip-set-filter-badge
+     * @exampleComponent limel-example-chip-set-input
+     * @exampleComponent limel-example-chip-set-input-type-text
+     * @exampleComponent limel-example-chip-set-input-type-search
+     * @exampleComponent limel-example-chip-icon-color
+     * @exampleComponent limel-example-chip-set-composite
+     */
     interface LimelChipSet {
         /**
           * Whether the "Clear all" buttons should be shown
@@ -254,6 +394,26 @@ export namespace Components {
          */
         "value": Chip[];
     }
+    /**
+     * The circular progress component can be used to visualize the curent state of
+     * a progress in a scale; for example percentage of completion of a task.
+     * Its compact UI makes the component suitable when there is not enough screen
+     * space available to visualise such information.
+     * This component allows you to define your scale, from `0` to a desired
+     * `maxValue`; and also lets you chose a proper `suffix` for your scale.
+     * :::note
+     * The component will round up the value when it is displayed, and only shows
+     * one decimal digit.
+     * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
+     * Of course such numbers, if bigger than `maxValue` will be visualized as a
+     * full progress.
+     * :::
+     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-sizes
+     * @exampleComponent limel-example-circular-progress-props
+     * @exampleComponent limel-example-circular-progress-css-variables
+     * @exampleComponent limel-example-circular-progress-percentage-colors
+     */
     interface LimelCircularProgress {
         /**
           * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
@@ -280,6 +440,13 @@ export namespace Components {
          */
         "value": number;
     }
+    /**
+     * Currently this component support syntax highlighting for `javascript`,
+     * `json` and `typescript` formats.
+     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+     * @exampleComponent limel-example-code-editor-fold-lint
+     */
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
@@ -310,6 +477,13 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @exampleComponent limel-example-collapsible-section
+     * @exampleComponent limel-example-collapsible-section-actions
+     * @exampleComponent limel-example-collapsible-section-css-props
+     * @exampleComponent limel-example-collapsible-section-external-control
+     * @exampleComponent limel-example-collapsible-section-with-slider
+     */
     interface LimelCollapsibleSection {
         /**
           * Actions to place to the far right inside the header
@@ -324,6 +498,17 @@ export namespace Components {
          */
         "isOpen": boolean;
     }
+    /**
+     * This component enables you to select a swatch from out color palette, simply
+     * by clicking on it. You can then copy the css variable name of the chosen color
+     * and use it where desired.
+     * The color picker can also show you a preview of any valid color name or color value.
+     * :::note
+     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * :::
+     * @exampleComponent limel-example-color-picker
+     * @exampleComponent limel-example-color-picker-readonly
+     */
     interface LimelColorPicker {
         /**
           * Helper text of the input field
@@ -350,6 +535,9 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @private 
+     */
     interface LimelColorPickerPalette {
         /**
           * Helper text of the input field
@@ -368,12 +556,28 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @private 
+     */
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
          */
         "config": object;
     }
+    /**
+     * @exampleComponent limel-example-date-picker-datetime
+     * @exampleComponent limel-example-date-picker-date
+     * @exampleComponent limel-example-date-picker-time
+     * @exampleComponent limel-example-date-picker-week
+     * @exampleComponent limel-example-date-picker-month
+     * @exampleComponent limel-example-date-picker-quarter
+     * @exampleComponent limel-example-date-picker-year
+     * @exampleComponent limel-example-date-picker-formatted
+     * @exampleComponent limel-example-date-picker-programmatic-change
+     * @exampleComponent limel-example-date-picker-composite
+     * @exampleComponent limel-example-date-picker-custom-formatter
+     */
     interface LimelDatePicker {
         /**
           * Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
@@ -424,6 +628,29 @@ export namespace Components {
          */
         "value": Date;
     }
+    /**
+     * :::note
+     * Regarding the `close` event: When putting other elements that emit `close`
+     * events inside a dialog, those events must be caught and stopped inside the
+     * dialog. If not, they will bubble to the event handler listening for `close`
+     * events on the dialog, which will close the dialog too.
+     * See the example _Nested `close` events_.
+     * :::
+     * :::important
+     * Are you developing for
+     * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that
+     * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
+     * from Lime Web Components to open dialogs in Lime CRM.
+     * :::
+     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-nested-close-events
+     * @exampleComponent limel-example-dialog-heading
+     * @exampleComponent limel-example-dialog-form
+     * @exampleComponent limel-example-dialog-size
+     * @exampleComponent limel-example-dialog-fullscreen
+     * @exampleComponent limel-example-dialog-closing-actions
+     * @exampleComponent limel-example-dialog-action-buttons
+     */
     interface LimelDialog {
         /**
           * Defines which action triggers a close-event.
@@ -442,6 +669,14 @@ export namespace Components {
          */
         "open": boolean;
     }
+    /**
+     * @exampleComponent limel-example-dock-basic
+     * @exampleComponent limel-example-dock-custom-component
+     * @exampleComponent limel-example-dock-notification
+     * @exampleComponent limel-example-dock-mobile
+     * @exampleComponent limel-example-dock-expanded
+     * @exampleComponent limel-example-dock-colors-css
+     */
     interface LimelDock {
         /**
           * A label used to describe the purpose of the navigation element to users of assistive technologies, like screen readers. Especially useful when there are multiple navigation elements in the user interface. Example value: "Primary navigation"
@@ -468,6 +703,9 @@ export namespace Components {
          */
         "mobileBreakPoint"?: number;
     }
+    /**
+     * @private 
+     */
     interface LimelDockButton {
         /**
           * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
@@ -482,6 +720,33 @@ export namespace Components {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This component lets end-users select a *single* file from their device
+     * storage. Regardless of the user's device or operating system, this component
+     * opens up a file picker dialog that allows the user to choose a file.
+     * ## Using correct labels
+     * This file picker can be used in different contexts. The component's distinct
+     * visual design including the upload icon hints end-users that this is not a
+     * normal input field like other fields in the form for example.
+     * :::important
+     * you need to use a descriptive `label` that clarifies the
+     * functionality of the file picker, and/or provides users with clear
+     * instructions.
+     * Depending on the context, you may need to avoid labels such as:
+     * - File
+     * - Document
+     * and instead consider using labels like:
+     * - Attach a file
+     * - Upload a file
+     * - Choose a document
+     * - Choose a file
+     * and similar phrases...
+     * :::
+     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-custom-icon
+     * @exampleComponent limel-example-file-accepted-types
+     * @exampleComponent limel-example-file-composite
+     */
     interface LimelFile {
         /**
           * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
@@ -512,6 +777,12 @@ export namespace Components {
          */
         "value": FileInfo;
     }
+    /**
+     * This component is internal and only supposed to be used by
+     * the limel-date-picker. This component is needed in order for us
+     * to render the flatpickr calendar in a portal.
+     * @private 
+     */
     interface LimelFlatpickrAdapter {
         /**
           * Format to display the selected date in.
@@ -539,6 +810,13 @@ export namespace Components {
          */
         "value": Date;
     }
+    /**
+     * This component is deprecated and will be removed in a future version of
+     * Lime Elements. Please use CSS for your flexible container needs 🙂
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+     * @deprecated 
+     * @private 
+     */
     interface LimelFlexContainer {
         /**
           * Specify how items are aligned along the cross axis
@@ -557,6 +835,19 @@ export namespace Components {
          */
         "reverse": boolean;
     }
+    /**
+     * @exampleComponent limel-example-form
+     * @exampleComponent limel-example-nested-form
+     * @exampleComponent limel-example-list-form
+     * @exampleComponent limel-example-dynamic-form
+     * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-props-factory-form
+     * @exampleComponent limel-example-form-layout
+     * @exampleComponent limel-example-form-span-fields
+     * @exampleComponent limel-example-custom-error-message
+     * @exampleComponent limel-example-server-errors
+     * @exampleComponent limel-example-form-row-layout
+     */
     interface LimelForm {
         /**
           * Set to `true` to disable the whole form.
@@ -586,8 +877,51 @@ export namespace Components {
          */
         "value": object;
     }
+    /**
+     * The `limel-grid` component creates a grid which can be used to control the
+     * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+     * to enable easy configuration of its child-elements.
+     * @exampleComponent limel-example-grid
+     */
     interface LimelGrid {
     }
+    /**
+     * A header is the top most visual element in a component, page, card, or a view.
+     * ## Usage
+     * A header is the first thing that clarifies a context for users.
+     * Due to their positions in the UI hierarchy, headers are the most
+     * prominent elements of a user interface; and because of that, they carry both
+     * vital information and fundamental controls for the area of the interface
+     * they represent.
+     * For example, when a header is placed on top of a card, it should quickly
+     * explain the card to the user. When placed on top of a modal, it should easily
+     * clarify what the modal is about. When displayed on top of a fullscreen view,
+     * it should indicate where in the system users are, and what part of the app
+     * they are looking at.
+     * ## Layout
+     * The vital information in a header is usually manifested in form of an icon,
+     * and a heading. A subheading also could be added to provide supplementary
+     * information. There is also a third place for displaying supplementary information
+     * or "supporting text", which will be rendered as a part of the subheading.
+     * Along with this information, headers can also include actions, controls, or
+     * menus.
+     * :::important
+     * Such actions or menus must affect the entire section of the interface
+     * which the header is representing. For example, a _Delete_ button on a card
+     * header must delete that entire card and its respective contents all together,
+     * not for example a selected item which is visible in the content of that card.
+     * :::
+     * :::warning
+     * Do not user background color on icons in the headers. It is much better and
+     * much easier for the eye if your icon itself has a color.
+     * Background colors behind icons make them look like "call to action" buttons
+     * and take a lot of attention from users.
+     * :::
+     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-colors
+     * @exampleComponent limel-example-header-responsive
+     * @exampleComponent limel-example-header-narrow
+     */
     interface LimelHeader {
         /**
           * Title to display
@@ -606,6 +940,30 @@ export namespace Components {
          */
         "supportingText": string;
     }
+    /**
+     * This is an internal and private component that many input fields
+     * use to display a helper text, along with a character counter below the
+     * input field.
+     * We created this to keep the visual styles the same everywhere
+     * and to avoid importing styles separately.
+     * Also this enables us to open the helper line in limel-portal,
+     * more easily without having to send the styles to the portal.
+     * :::note
+     * When the component has no content, it will get a `display: none`
+     * as styles to avoid creating empty holes in the UI of the parent component.
+     * For example, in a `flex` or `grid` component that has a `gap`,
+     * we don't want the empty `limel-helper-line` to render and cause unnecessary
+     * gaps in the UI.
+     * However, to be more resourceful, the parent component can choose not
+     * to render the helper-line as well.
+     * :::
+     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-invalid
+     * @exampleComponent limel-example-helper-line-long-text
+     * @exampleComponent limel-example-helper-line-long-text-no-counter
+     * @exampleComponent limel-example-helper-line-character-counter
+     * @private 
+     */
     interface LimelHelperLine {
         /**
           * The helper text that is displayed on the left side.
@@ -628,6 +986,49 @@ export namespace Components {
          */
         "maxLength"?: number;
     }
+    /**
+     * The recommended icon library for use with Lime Elements is the Windows 10 set
+     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
+     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
+     * you will have to supply your own icons.
+     * The size and color of the icon is set in CSS, however there are a few
+     * standard sizes defined that can be used with the `size` property.
+     * ### Setup
+     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
+     * __@lundalogik/lime-icons8__ must be made available on the webserver.
+     * To use a different icon set, the icons must be placed in a folder structure
+     * that looks like this: `assets/icons/<name-of-icon>.svg`
+     * If `assets` is placed in the root, no other setup is needed. The icons will
+     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
+     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
+     * icons available is to use the HTML `base` element:
+     * ```
+     * <base href="/my/parent/path/">
+     * ```
+     * If this is not enough, or if the `base` element is already in use for
+     * something else, a global icon path can be configured with the `limel-config`
+     * element:
+     * ```
+     * <limel-config config={{iconPath: '/my/parent/path/'}} />
+     * ```
+     * ### Lime icons
+     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * designed by our designers at Lime.
+     * The names of these icons start with `-lime-`, which makes them easy to
+     * find using the Icon Finder tool below.
+     * :::note
+     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
+     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * our color palette css files into your project to render the icons properly.
+     * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
+     * and how to do this.
+     * :::
+     * ### Icon Finder
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * @exampleComponent limel-example-icon
+     * @exampleComponent limel-example-icon-background
+     */
     interface LimelIcon {
         /**
           * Set to `true` to give the icon a round background with some padding. Only works when the `size` attribute is also set.
@@ -642,6 +1043,13 @@ export namespace Components {
          */
         "size": IconSize;
     }
+    /**
+     * @exampleComponent limel-example-icon-button-basic
+     * @exampleComponent limel-example-icon-button-disabled
+     * @exampleComponent limel-example-icon-button-elevated
+     * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-composite
+     */
     interface LimelIconButton {
         /**
           * Set to `true` to disable the button.
@@ -660,6 +1068,19 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * It offers features for visualizing aggregated data along with supplementary
+     * information.
+     * If clicking on the component should navigate the user to
+     * a new screen or web page, you need to provide a URL,
+     * using the `link` property.
+     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-badge
+     * @exampleComponent limel-example-info-tile-progress
+     * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-styling
+     */
     interface LimelInfoTile {
         /**
           * If supplied, the info tile will display a notification badge.
@@ -702,6 +1123,24 @@ export namespace Components {
          */
         "value": number | string;
     }
+    /**
+     * @exampleComponent limel-example-input-field-text
+     * @exampleComponent limel-example-input-field-placeholder
+     * @exampleComponent limel-example-input-field-text-multiple
+     * @exampleComponent limel-example-input-field-number
+     * @exampleComponent limel-example-input-field-autocomplete
+     * @exampleComponent limel-example-input-field-icon-leading
+     * @exampleComponent limel-example-input-field-icon-trailing
+     * @exampleComponent limel-example-input-field-icon-both
+     * @exampleComponent limel-example-input-field-showlink
+     * @exampleComponent limel-example-input-field-error-icon
+     * @exampleComponent limel-example-input-field-textarea
+     * @exampleComponent limel-example-input-field-suffix
+     * @exampleComponent limel-example-input-field-prefix
+     * @exampleComponent limel-example-input-field-search
+     * @exampleComponent limel-example-input-field-pattern
+     * @exampleComponent limel-example-input-field-focus
+     */
     interface LimelInputField {
         /**
           * list of suggestions `value` can autocomplete to.
@@ -792,6 +1231,11 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-color
+     * @exampleComponent limel-example-linear-progress-indeterminate
+     */
     interface LimelLinearProgress {
         /**
           * Puts the progress bar in an indeterminate state
@@ -802,6 +1246,22 @@ export namespace Components {
          */
         "value": number;
     }
+    /**
+     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-secondary
+     * @exampleComponent limel-example-list-selectable
+     * @exampleComponent limel-example-list-icons
+     * @exampleComponent limel-example-list-badge-icons
+     * @exampleComponent limel-example-list-checkbox
+     * @exampleComponent limel-example-list-checkbox-icons
+     * @exampleComponent limel-example-list-radio-button
+     * @exampleComponent limel-example-list-radio-button-icons
+     * @exampleComponent limel-example-list-action
+     * @exampleComponent limel-example-list-striped
+     * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
+     * @exampleComponent limel-example-list-grid
+     * @exampleComponent limel-example-list-primary-component
+     */
     interface LimelList {
         /**
           * Set to `true` if the list should display larger icons with a background
@@ -824,6 +1284,18 @@ export namespace Components {
          */
         "type": ListType;
     }
+    /**
+     * @exampleComponent limel-example-menu-basic
+     * @exampleComponent limel-example-menu-disabled
+     * @exampleComponent limel-example-menu-open-direction
+     * @exampleComponent limel-example-menu-icons
+     * @exampleComponent limel-example-menu-badge-icons
+     * @exampleComponent limel-example-menu-grid
+     * @exampleComponent limel-example-menu-hotkeys
+     * @exampleComponent limel-example-menu-secondary-text
+     * @exampleComponent limel-example-menu-notification
+     * @exampleComponent limel-example-menu-composite
+     */
     interface LimelMenu {
         /**
           * Defines whether the menu should show badges.
@@ -850,6 +1322,9 @@ export namespace Components {
          */
         "openDirection": OpenDirection1;
     }
+    /**
+     * @private 
+     */
     interface LimelMenuList {
         /**
           * Set to `true` if the list should display larger icons with a background
@@ -872,6 +1347,9 @@ export namespace Components {
          */
         "type": MenuListType;
     }
+    /**
+     * @private 
+     */
     interface LimelMenuSurface {
         /**
           * Clicks in this element should not be prevented when the menu surface is open
@@ -882,6 +1360,15 @@ export namespace Components {
          */
         "open": boolean;
     }
+    /**
+     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-multiple
+     * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-empty-suggestions
+     * @exampleComponent limel-example-picker-leading-icon
+     * @exampleComponent limel-example-picker-static-actions
+     * @exampleComponent limel-example-picker-composite
+     */
     interface LimelPicker {
         /**
           * Position of the custom static actions in the picker's results dropdown. Can be set to `'top'` or `'bottom'`.
@@ -948,6 +1435,44 @@ export namespace Components {
          */
         "value": ListItem<number | string> | Array<ListItem<number | string>>;
     }
+    /**
+     * A popover is an impermanent layer that is displayed on top of other content
+     * when user taps an element that triggers the popover. This element can be
+     * practically anything, a button, piece of text, and icon, etc.
+     * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer
+     * that darkens the content below them. Also for the same reason, they can be
+     * dismissed by tapping or clicking another part of the screen, but not by a
+     * clicking a button or link on the popover itself.
+     * :::warning
+     * The component is emitting a close event when you click outside its container
+     * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react
+     * properly on this event and hide the component (preferably by setting the
+     * property `open` to `false`).
+     * :::
+     * ## Usage
+     * Use a popover to show **options** or **information** related to the trigger
+     * onscreen. A typical use case for popovers is a tooltip, in which you show
+     * help text or contextual information to users.
+     * Popovers are most appropriate on larger screens but can be used on smaller
+     * screens too, as long as their content is responsive and takes into account
+     * the context they are displayed on.
+     * When a popover is displayed, interactions with other controls are blocked,
+     * until user dismisses the popover.
+     * ## Layout
+     * Popovers has only one slot in which you can import a custom web-component.
+     * :::note
+     * You must make sure that web-components that you import into the slot has
+     * a `width: 100%;` style so that it can horizontally stretch across the popover.
+     * However, `width` of the popover can be controlled by specifying a CSS variable
+     * of `--popover-surface-width`. If you don't specify any width, the popover
+     * will grow as wide as its content.
+     * :::
+     * :::important
+     * Do not make a popover too big. They should never take over the entire screen.
+     * If your content is that big, you should probably be using a Modal instead.
+     * :::
+     * @exampleComponent limel-example-popover
+     */
     interface LimelPopover {
         /**
           * True if the content within the popover should be visible
@@ -958,12 +1483,36 @@ export namespace Components {
          */
         "openDirection": OpenDirection;
     }
+    /**
+     * @private 
+     */
     interface LimelPopoverSurface {
         /**
           * Content to render
          */
         "contentCollection": HTMLCollection;
     }
+    /**
+     * The portal component provides a way to render children into a DOM node that
+     * exist outside the DOM hierarchy of the parent component.
+     * There are some caveats when using this component
+     * Events might not bubble up as expected since the content is moved out to
+     * another DOM node.
+     * Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web compoent it will work without any issues.
+     * Alternatively, use the
+     * `style=""` html attribute.
+     * Any component that is placed inside the container must have a style of
+     * `max-height: inherit`. This ensures that its placement is calculated
+     * correctly in relation to the trigger, and that it never covers its own
+     * trigger.
+     * When the node is moved in the DOM, `disconnectedCallback` and
+     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
+     * to do any tear-down, the appropriate setup will have to be done again on
+     * `connectedCallback`.
+     * @private 
+     * @exampleComponent limel-example-portal
+     */
     interface LimelPortal {
         /**
           * A unique ID.
@@ -994,6 +1543,15 @@ export namespace Components {
          */
         "visible": boolean;
     }
+    /**
+     * @exampleComponent limel-example-progress-flow-basic
+     * @exampleComponent limel-example-progress-flow-secondary-text
+     * @exampleComponent limel-example-progress-flow-disabled-step
+     * @exampleComponent limel-example-progress-flow-colors
+     * @exampleComponent limel-example-progress-flow-colors-css
+     * @exampleComponent limel-example-progress-flow-off-progress-steps
+     * @exampleComponent limel-example-progress-flow-narrow
+     */
     interface LimelProgressFlow {
         /**
           * Set to `true` to disable the progress flow. Use `disabled` to indicate that the component can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
@@ -1008,6 +1566,9 @@ export namespace Components {
          */
         "readonly": boolean;
     }
+    /**
+     * @private 
+     */
     interface LimelProgressFlowItem {
         /**
           * True if the flow item should be disabled
@@ -1022,6 +1583,16 @@ export namespace Components {
          */
         "readonly": boolean;
     }
+    /**
+     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-with-icons
+     * @exampleComponent limel-example-select-multiple
+     * @exampleComponent limel-example-select-with-empty-option
+     * @exampleComponent limel-example-select-preselected
+     * @exampleComponent limel-example-select-change-options
+     * @exampleComponent limel-example-select-narrow
+     * @exampleComponent limel-example-select-dialog
+     */
     interface LimelSelect {
         /**
           * Set to `true` to make the field disabled. and visually shows that the `select` component is editable but disabled. This tells the users that if certain requirements are met, the component may become interactable.
@@ -1060,6 +1631,18 @@ export namespace Components {
          */
         "value": Option | Option[];
     }
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * Clicking on the component should navigate the user to a new screen,
+     * to which you need to provide a URL, by specifying an `href` for the `link` property.
+     * By default, this navigation will happen within the same browser tab.
+     * However, it is possible to override that behavior, by specifying a `target`
+     * for the `link` property
+     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-notification
+     * @exampleComponent limel-example-shortcut-styling
+     * @exampleComponent limel-example-shortcut-with-click-handler
+     */
     interface LimelShortcut {
         /**
           * If specified, will display a notification badge on the shortcut.
@@ -1082,6 +1665,12 @@ export namespace Components {
          */
         "link"?: Link;
     }
+    /**
+     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-multiplier
+     * @exampleComponent limel-example-slider-multiplier-percentage-colors
+     * @exampleComponent limel-example-slider-composite
+     */
     interface LimelSlider {
         /**
           * Disables the slider when `true`, and visually shows that the field is editable but disabled. This tells the users that if certain requirements are met, the slider may become interactable.
@@ -1124,6 +1713,30 @@ export namespace Components {
          */
         "valuemin": number;
     }
+    /**
+     * A Snackbar –also known as "Toast"– is used to inform the end user
+     * about an action or a process in the system.
+     * The information could vary from announcing that a process has just started,
+     * is taking place now, has ended, or has been interrupted or canceled.
+     * The information that you provide using a snackbar should be:
+     * - temporary
+     * - contextual
+     * - short
+     * - and most importantly, ignorable.
+     * It means if the user misses the information, it shouldn't be a big deal.
+     * :::note
+     * If the information you want to display has a higher importance or priority,
+     * and you need to make sure that the user takes an action to dismiss it,
+     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * For more complex interactions and for delivering more detailed information,
+     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * :::
+     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-dismissible
+     * @exampleComponent limel-example-snackbar-with-action
+     * @exampleComponent limel-example-snackbar-with-changing-messages
+     * @exampleComponent limel-example-snackbar-positioning
+     */
     interface LimelSnackbar {
         /**
           * The text to display for the action button.
@@ -1154,6 +1767,11 @@ export namespace Components {
          */
         "timeout"?: number;
     }
+    /**
+     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-color
+     * @exampleComponent limel-example-spinner-size
+     */
     interface LimelSpinner {
         /**
           * Gives the spinner the shape of Lime Technologies' logo
@@ -1164,6 +1782,19 @@ export namespace Components {
          */
         "size": SpinnerSize;
     }
+    /**
+     * A split button is a button with two components:
+     * a button and a side-menu attached to it.
+     * Clicking on the button runs a default action,
+     * and clicking on the arrow opens up a list of other possible actions.
+     * :::warning
+     * - Never use a split button for navigation purposes, such as going to next page.
+     * The button should only be used for performing commands!
+     * - Never use this component instead of a Select or Menu component!
+     * :::
+     * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-repeat-default-command
+     */
     interface LimelSplitButton {
         /**
           * Set to `true` to disable the button.
@@ -1186,6 +1817,9 @@ export namespace Components {
          */
         "primary": boolean;
     }
+    /**
+     * @exampleComponent limel-example-switch
+     */
     interface LimelSwitch {
         /**
           * Disables the switch when `true`, and visually shows that the switch is editable but disabled. This tells the users that if certain requirements are met, the switch may become interactable.
@@ -1204,18 +1838,68 @@ export namespace Components {
          */
         "value": boolean;
     }
+    /**
+     * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
+     * :::warning
+     * Tab bars should be strictly used for navigation at the top levels.
+     * They should never be used to perform actions, or navigate away from the view which contains them.
+     * :::
+     * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
+     * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
+     * :::tip Other things to consider
+     * Never divide the content of a tab using a nested tab bar.
+     * Never place two tab bars within the same screen.
+     * Never use background color for icons in tabs.
+     * Avoid having long labels for tabs.
+     * A tab will never be removed or get disabled, even if there is no content under it.
+     * :::
+     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
+     * @exampleComponent limel-example-tab-bar-with-equal-tab-width
+     */
     interface LimelTabBar {
         /**
           * List of tabs to display
          */
         "tabs": Tab[];
     }
+    /**
+     * The `limel-tab-panel` component uses the `limel-tab-bar` component together
+     * with custom slotted components and will display the content for the currently
+     * active tab. Each slotted component must have an id equal to the id of the
+     * corresponding tab it belongs to. These components should implement the
+     * [TabPanelComponent](#/type/TabPanelComponent/) interface.
+     * The `limel-tab-panel` component will automatically set each tab configuration
+     * on the corresponding slotted component as a property named `tab` so that the
+     * component can take action upon that. Sometimes it might be desirable to not
+     * load data or render anything until the tab is active.
+     * The slotted components can also emit the `changeTab` event to update anything
+     * inside the actual tab, e.g. to change the icon, color or badge.
+     * @exampleComponent limel-example-tab-panel
+     */
     interface LimelTabPanel {
         /**
           * The tabs to display in the panel
          */
         "tabs": Tab[];
     }
+    /**
+     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-custom-components
+     * @exampleComponent limel-example-table-header-menu
+     * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-sorting-disabled
+     * @exampleComponent limel-example-table-local
+     * @exampleComponent limel-example-table-remote
+     * @exampleComponent limel-example-table-activate-row
+     * @exampleComponent limel-example-table-selectable-rows
+     * @exampleComponent limel-example-table-default-sorted
+     * @exampleComponent limel-example-table-layout-default
+     * @exampleComponent limel-example-table-layout-stretch-last-column
+     * @exampleComponent limel-example-table-layout-stretch-columns
+     * @exampleComponent limel-example-table-layout-low-density
+     * @exampleComponent limel-example-table-interactive-rows
+     */
     interface LimelTable {
         /**
           * Active row in the table
@@ -1278,6 +1962,45 @@ export namespace Components {
          */
         "totalRows": number;
     }
+    /**
+     * A tooltip can be used to display a descriptive text for any element.
+     * The displayed content must be a brief and supplemental string of text,
+     * identifying the element or describing its function for the user,
+     * helping them better understand unfamiliar objects that aren't described
+     * directly in the UI.
+     * ## Interaction
+     * The tooltip appears after a slight delay, when the element is hovered;
+     * and disappears as soon as the cursor leaves the element.
+     * Therefore, users cannot interact with the tip, but if the trigger element
+     * itself is interactive, it will remain interactible even with a tooltip bound
+     * to it.
+     * :::note
+     * In order to display the tooltip, the tooltip element and its trigger element
+     * must be within the same document or document fragment.
+     * A good practice is to just place them next to each other like below:
+     * ```html
+     * <limel-button icon="search" id="tooltip-example" />
+     * <limel-tooltip label="Search" elementId="tooltip-example" />
+     * ```
+     * :::
+     * ## Usage
+     * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+     * Use them only when they add significant value.
+     * - A good tip is concise, helpful, and informative.
+     * Don't explain the obvious or simply repeat what is already on the screen.
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * - If the tip is essential to the primary tasks that the user is performing,
+     * such as warnings or important notes, include the information directly in the
+     * interface instead.
+     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * use that, not a tooltip.
+     * - Make sure to use the tooltip on an element that users naturally and
+     * effortlessly recognize can be hovered.
+     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-max-character
+     * @exampleComponent limel-example-tooltip-composite
+     * @private 
+     */
     interface LimelTooltip {
         /**
           * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
@@ -1296,6 +2019,10 @@ export namespace Components {
          */
         "maxlength"?: number;
     }
+    /**
+     * This component is used internally by `limel-tooltip`.
+     * @private 
+     */
     interface LimelTooltipContent {
         /**
           * Read more in tooltip.tsx
@@ -1448,324 +2175,1031 @@ export interface LimelTableCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLimelTableElement;
 }
 declare global {
+    /**
+     * An action bar is a user interface element commonly found in software applications and websites.
+     * It typically appears at the top of the screen or within a specific section
+     * and serves as a centralized hub for accessing various actions and commands
+     * relevant to the current context or page.
+     * The action bar often contains a set of clickable icons or buttons (icons + labels)
+     * that represent specific actions, such as saving, deleting, editing, sharing,
+     * or bulk operations for selected items.
+     * The purpose of an action bar is to provide quick and convenient access to
+     * frequently used functionalities, enabling users to perform common tasks efficiently.
+     * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+     * The action bar's design and layout can vary based on the platform or application,
+     * but its primary goal remains consistent—to
+     * empower users to interact with the software and perform desired actions effortlessly.
+     * @exampleComponent limel-example-action-bar
+     * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-colors
+     * @exampleComponent limel-example-action-bar-floating
+     * @exampleComponent limel-example-action-bar-styling
+     * @exampleComponent limel-example-action-bar-as-primary-component
+     * @private 
+     */
     interface HTMLLimelActionBarElement extends Components.LimelActionBar, HTMLStencilElement {
     }
     var HTMLLimelActionBarElement: {
         prototype: HTMLLimelActionBarElement;
         new (): HTMLLimelActionBarElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelActionBarItemElement extends Components.LimelActionBarItem, HTMLStencilElement {
     }
     var HTMLLimelActionBarItemElement: {
         prototype: HTMLLimelActionBarItemElement;
         new (): HTMLLimelActionBarItemElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelActionBarOverflowMenuElement extends Components.LimelActionBarOverflowMenu, HTMLStencilElement {
     }
     var HTMLLimelActionBarOverflowMenuElement: {
         prototype: HTMLLimelActionBarOverflowMenuElement;
         new (): HTMLLimelActionBarOverflowMenuElement;
     };
+    /**
+     * The Badge component can be used to display a notification badge,
+     * optionally with a number or a text label.
+     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-number
+     * @exampleComponent limel-example-badge-string
+     */
     interface HTMLLimelBadgeElement extends Components.LimelBadge, HTMLStencilElement {
     }
     var HTMLLimelBadgeElement: {
         prototype: HTMLLimelBadgeElement;
         new (): HTMLLimelBadgeElement;
     };
+    /**
+     * @exampleComponent limel-example-banner
+     */
     interface HTMLLimelBannerElement extends Components.LimelBanner, HTMLStencilElement {
     }
     var HTMLLimelBannerElement: {
         prototype: HTMLLimelBannerElement;
         new (): HTMLLimelBannerElement;
     };
+    /**
+     * @exampleComponent limel-example-button-basic
+     * @exampleComponent limel-example-button-primary
+     * @exampleComponent limel-example-button-outlined
+     * @exampleComponent limel-example-button-disabled
+     * @exampleComponent limel-example-button-icon
+     * @exampleComponent limel-example-button-loading
+     * @exampleComponent limel-example-button-click-success
+     * @exampleComponent limel-example-button-click-fail
+     * @exampleComponent limel-example-button-reduce-presence
+     * @exampleComponent limel-example-button-colors
+     * @exampleComponent limel-example-button-composite
+     */
     interface HTMLLimelButtonElement extends Components.LimelButton, HTMLStencilElement {
     }
     var HTMLLimelButtonElement: {
         prototype: HTMLLimelButtonElement;
         new (): HTMLLimelButtonElement;
     };
+    /**
+     * A button group control is a linear set of two or more buttons.
+     * ## Usage
+     * Button groups are often used to display different views of the same thing. A
+     * common example of this component is when you switch between [ Map | Transit
+     * | Satellite ] views to look at an area on the map.
+     * In some cases, button groups may serve as quick filters as well. For example
+     * a list of contacts, in which the user can switch to [ All | Favorites
+     * | Frequently contacted ] can incorporate a button group to quickly filter out
+     * items and display subsets of them.
+     * ## Layout
+     * The button groups are usually placed in top headers and action bars,
+     * sometimes with other elements. Since the group items will always be rendered
+     * in a row, you must make sure not to have too many buttons in the group.
+     * Because if the container of your button group does not get enough space to
+     * fit in all its buttons, they will have to truncate their text and may appear
+     * very cramped together. Always think about how your button group will appear
+     * on a small screen such as phones.
+     * :::note
+     * Button can contain text or icons, but not both simultaneously!
+     * :::
+     * Within the group, icon buttons will all have the same width, while each text button
+     * inherits its width from its content.
+     * @exampleComponent limel-example-button-group-icons
+     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-mix
+     * @exampleComponent limel-example-button-group-badges
+     * @exampleComponent limel-example-button-group-composite
+     */
     interface HTMLLimelButtonGroupElement extends Components.LimelButtonGroup, HTMLStencilElement {
     }
     var HTMLLimelButtonGroupElement: {
         prototype: HTMLLimelButtonGroupElement;
         new (): HTMLLimelButtonGroupElement;
     };
+    /**
+     * Callouts—also known as Admonitions—are useful for including supportive or
+     * special content within a large piece of text, or even inside a user
+     * interface.
+     * When used in a document or text based user interface, the callout attracts
+     * the reader's attention to a particular piece of information, without
+     * significantly interrupting their flow of reading the document.
+     * In a user interface, a callout is more intrusive to the end-user. Still, it
+     * could be a good choice when you intend to slightly disturb the user's
+     * attention, and challenge them to pay extra attention to the information
+     * presented. In such cases, a callout should not be used as a static and
+     * constantly present element of the UI. Rather, it should be displayed when
+     * something unusual or remarkable demands the user's attention.
+     * @exampleComponent limel-example-callout-note
+     * @exampleComponent limel-example-callout-important
+     * @exampleComponent limel-example-callout-tip
+     * @exampleComponent limel-example-callout-caution
+     * @exampleComponent limel-example-callout-warning
+     * @exampleComponent limel-example-callout-rich-content
+     * @exampleComponent limel-example-callout-custom-heading
+     * @exampleComponent limel-example-callout-custom-icon
+     * @exampleComponent limel-example-callout-styles
+     * @exampleComponent limel-example-custom-type
+     * @exampleComponent limel-example-callout-composite
+     */
     interface HTMLLimelCalloutElement extends Components.LimelCallout, HTMLStencilElement {
     }
     var HTMLLimelCalloutElement: {
         prototype: HTMLLimelCalloutElement;
         new (): HTMLLimelCalloutElement;
     };
+    /**
+     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-helper-text
+     */
     interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
     }
     var HTMLLimelCheckboxElement: {
         prototype: HTMLLimelCheckboxElement;
         new (): HTMLLimelCheckboxElement;
     };
+    /**
+     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-choice
+     * @exampleComponent limel-example-chip-set-filter
+     * @exampleComponent limel-example-chip-set-filter-badge
+     * @exampleComponent limel-example-chip-set-input
+     * @exampleComponent limel-example-chip-set-input-type-text
+     * @exampleComponent limel-example-chip-set-input-type-search
+     * @exampleComponent limel-example-chip-icon-color
+     * @exampleComponent limel-example-chip-set-composite
+     */
     interface HTMLLimelChipSetElement extends Components.LimelChipSet, HTMLStencilElement {
     }
     var HTMLLimelChipSetElement: {
         prototype: HTMLLimelChipSetElement;
         new (): HTMLLimelChipSetElement;
     };
+    /**
+     * The circular progress component can be used to visualize the curent state of
+     * a progress in a scale; for example percentage of completion of a task.
+     * Its compact UI makes the component suitable when there is not enough screen
+     * space available to visualise such information.
+     * This component allows you to define your scale, from `0` to a desired
+     * `maxValue`; and also lets you chose a proper `suffix` for your scale.
+     * :::note
+     * The component will round up the value when it is displayed, and only shows
+     * one decimal digit.
+     * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
+     * Of course such numbers, if bigger than `maxValue` will be visualized as a
+     * full progress.
+     * :::
+     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-sizes
+     * @exampleComponent limel-example-circular-progress-props
+     * @exampleComponent limel-example-circular-progress-css-variables
+     * @exampleComponent limel-example-circular-progress-percentage-colors
+     */
     interface HTMLLimelCircularProgressElement extends Components.LimelCircularProgress, HTMLStencilElement {
     }
     var HTMLLimelCircularProgressElement: {
         prototype: HTMLLimelCircularProgressElement;
         new (): HTMLLimelCircularProgressElement;
     };
+    /**
+     * Currently this component support syntax highlighting for `javascript`,
+     * `json` and `typescript` formats.
+     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+     * @exampleComponent limel-example-code-editor-fold-lint
+     */
     interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
     }
     var HTMLLimelCodeEditorElement: {
         prototype: HTMLLimelCodeEditorElement;
         new (): HTMLLimelCodeEditorElement;
     };
+    /**
+     * @exampleComponent limel-example-collapsible-section
+     * @exampleComponent limel-example-collapsible-section-actions
+     * @exampleComponent limel-example-collapsible-section-css-props
+     * @exampleComponent limel-example-collapsible-section-external-control
+     * @exampleComponent limel-example-collapsible-section-with-slider
+     */
     interface HTMLLimelCollapsibleSectionElement extends Components.LimelCollapsibleSection, HTMLStencilElement {
     }
     var HTMLLimelCollapsibleSectionElement: {
         prototype: HTMLLimelCollapsibleSectionElement;
         new (): HTMLLimelCollapsibleSectionElement;
     };
+    /**
+     * This component enables you to select a swatch from out color palette, simply
+     * by clicking on it. You can then copy the css variable name of the chosen color
+     * and use it where desired.
+     * The color picker can also show you a preview of any valid color name or color value.
+     * :::note
+     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * :::
+     * @exampleComponent limel-example-color-picker
+     * @exampleComponent limel-example-color-picker-readonly
+     */
     interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
     }
     var HTMLLimelColorPickerElement: {
         prototype: HTMLLimelColorPickerElement;
         new (): HTMLLimelColorPickerElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelColorPickerPaletteElement extends Components.LimelColorPickerPalette, HTMLStencilElement {
     }
     var HTMLLimelColorPickerPaletteElement: {
         prototype: HTMLLimelColorPickerPaletteElement;
         new (): HTMLLimelColorPickerPaletteElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelConfigElement extends Components.LimelConfig, HTMLStencilElement {
     }
     var HTMLLimelConfigElement: {
         prototype: HTMLLimelConfigElement;
         new (): HTMLLimelConfigElement;
     };
+    /**
+     * @exampleComponent limel-example-date-picker-datetime
+     * @exampleComponent limel-example-date-picker-date
+     * @exampleComponent limel-example-date-picker-time
+     * @exampleComponent limel-example-date-picker-week
+     * @exampleComponent limel-example-date-picker-month
+     * @exampleComponent limel-example-date-picker-quarter
+     * @exampleComponent limel-example-date-picker-year
+     * @exampleComponent limel-example-date-picker-formatted
+     * @exampleComponent limel-example-date-picker-programmatic-change
+     * @exampleComponent limel-example-date-picker-composite
+     * @exampleComponent limel-example-date-picker-custom-formatter
+     */
     interface HTMLLimelDatePickerElement extends Components.LimelDatePicker, HTMLStencilElement {
     }
     var HTMLLimelDatePickerElement: {
         prototype: HTMLLimelDatePickerElement;
         new (): HTMLLimelDatePickerElement;
     };
+    /**
+     * :::note
+     * Regarding the `close` event: When putting other elements that emit `close`
+     * events inside a dialog, those events must be caught and stopped inside the
+     * dialog. If not, they will bubble to the event handler listening for `close`
+     * events on the dialog, which will close the dialog too.
+     * See the example _Nested `close` events_.
+     * :::
+     * :::important
+     * Are you developing for
+     * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that
+     * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
+     * from Lime Web Components to open dialogs in Lime CRM.
+     * :::
+     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-nested-close-events
+     * @exampleComponent limel-example-dialog-heading
+     * @exampleComponent limel-example-dialog-form
+     * @exampleComponent limel-example-dialog-size
+     * @exampleComponent limel-example-dialog-fullscreen
+     * @exampleComponent limel-example-dialog-closing-actions
+     * @exampleComponent limel-example-dialog-action-buttons
+     */
     interface HTMLLimelDialogElement extends Components.LimelDialog, HTMLStencilElement {
     }
     var HTMLLimelDialogElement: {
         prototype: HTMLLimelDialogElement;
         new (): HTMLLimelDialogElement;
     };
+    /**
+     * @exampleComponent limel-example-dock-basic
+     * @exampleComponent limel-example-dock-custom-component
+     * @exampleComponent limel-example-dock-notification
+     * @exampleComponent limel-example-dock-mobile
+     * @exampleComponent limel-example-dock-expanded
+     * @exampleComponent limel-example-dock-colors-css
+     */
     interface HTMLLimelDockElement extends Components.LimelDock, HTMLStencilElement {
     }
     var HTMLLimelDockElement: {
         prototype: HTMLLimelDockElement;
         new (): HTMLLimelDockElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelDockButtonElement extends Components.LimelDockButton, HTMLStencilElement {
     }
     var HTMLLimelDockButtonElement: {
         prototype: HTMLLimelDockButtonElement;
         new (): HTMLLimelDockButtonElement;
     };
+    /**
+     * This component lets end-users select a *single* file from their device
+     * storage. Regardless of the user's device or operating system, this component
+     * opens up a file picker dialog that allows the user to choose a file.
+     * ## Using correct labels
+     * This file picker can be used in different contexts. The component's distinct
+     * visual design including the upload icon hints end-users that this is not a
+     * normal input field like other fields in the form for example.
+     * :::important
+     * you need to use a descriptive `label` that clarifies the
+     * functionality of the file picker, and/or provides users with clear
+     * instructions.
+     * Depending on the context, you may need to avoid labels such as:
+     * - File
+     * - Document
+     * and instead consider using labels like:
+     * - Attach a file
+     * - Upload a file
+     * - Choose a document
+     * - Choose a file
+     * and similar phrases...
+     * :::
+     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-custom-icon
+     * @exampleComponent limel-example-file-accepted-types
+     * @exampleComponent limel-example-file-composite
+     */
     interface HTMLLimelFileElement extends Components.LimelFile, HTMLStencilElement {
     }
     var HTMLLimelFileElement: {
         prototype: HTMLLimelFileElement;
         new (): HTMLLimelFileElement;
     };
+    /**
+     * This component is internal and only supposed to be used by
+     * the limel-date-picker. This component is needed in order for us
+     * to render the flatpickr calendar in a portal.
+     * @private 
+     */
     interface HTMLLimelFlatpickrAdapterElement extends Components.LimelFlatpickrAdapter, HTMLStencilElement {
     }
     var HTMLLimelFlatpickrAdapterElement: {
         prototype: HTMLLimelFlatpickrAdapterElement;
         new (): HTMLLimelFlatpickrAdapterElement;
     };
+    /**
+     * This component is deprecated and will be removed in a future version of
+     * Lime Elements. Please use CSS for your flexible container needs 🙂
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+     * @deprecated 
+     * @private 
+     */
     interface HTMLLimelFlexContainerElement extends Components.LimelFlexContainer, HTMLStencilElement {
     }
     var HTMLLimelFlexContainerElement: {
         prototype: HTMLLimelFlexContainerElement;
         new (): HTMLLimelFlexContainerElement;
     };
+    /**
+     * @exampleComponent limel-example-form
+     * @exampleComponent limel-example-nested-form
+     * @exampleComponent limel-example-list-form
+     * @exampleComponent limel-example-dynamic-form
+     * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-props-factory-form
+     * @exampleComponent limel-example-form-layout
+     * @exampleComponent limel-example-form-span-fields
+     * @exampleComponent limel-example-custom-error-message
+     * @exampleComponent limel-example-server-errors
+     * @exampleComponent limel-example-form-row-layout
+     */
     interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
     }
     var HTMLLimelFormElement: {
         prototype: HTMLLimelFormElement;
         new (): HTMLLimelFormElement;
     };
+    /**
+     * The `limel-grid` component creates a grid which can be used to control the
+     * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+     * to enable easy configuration of its child-elements.
+     * @exampleComponent limel-example-grid
+     */
     interface HTMLLimelGridElement extends Components.LimelGrid, HTMLStencilElement {
     }
     var HTMLLimelGridElement: {
         prototype: HTMLLimelGridElement;
         new (): HTMLLimelGridElement;
     };
+    /**
+     * A header is the top most visual element in a component, page, card, or a view.
+     * ## Usage
+     * A header is the first thing that clarifies a context for users.
+     * Due to their positions in the UI hierarchy, headers are the most
+     * prominent elements of a user interface; and because of that, they carry both
+     * vital information and fundamental controls for the area of the interface
+     * they represent.
+     * For example, when a header is placed on top of a card, it should quickly
+     * explain the card to the user. When placed on top of a modal, it should easily
+     * clarify what the modal is about. When displayed on top of a fullscreen view,
+     * it should indicate where in the system users are, and what part of the app
+     * they are looking at.
+     * ## Layout
+     * The vital information in a header is usually manifested in form of an icon,
+     * and a heading. A subheading also could be added to provide supplementary
+     * information. There is also a third place for displaying supplementary information
+     * or "supporting text", which will be rendered as a part of the subheading.
+     * Along with this information, headers can also include actions, controls, or
+     * menus.
+     * :::important
+     * Such actions or menus must affect the entire section of the interface
+     * which the header is representing. For example, a _Delete_ button on a card
+     * header must delete that entire card and its respective contents all together,
+     * not for example a selected item which is visible in the content of that card.
+     * :::
+     * :::warning
+     * Do not user background color on icons in the headers. It is much better and
+     * much easier for the eye if your icon itself has a color.
+     * Background colors behind icons make them look like "call to action" buttons
+     * and take a lot of attention from users.
+     * :::
+     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-colors
+     * @exampleComponent limel-example-header-responsive
+     * @exampleComponent limel-example-header-narrow
+     */
     interface HTMLLimelHeaderElement extends Components.LimelHeader, HTMLStencilElement {
     }
     var HTMLLimelHeaderElement: {
         prototype: HTMLLimelHeaderElement;
         new (): HTMLLimelHeaderElement;
     };
+    /**
+     * This is an internal and private component that many input fields
+     * use to display a helper text, along with a character counter below the
+     * input field.
+     * We created this to keep the visual styles the same everywhere
+     * and to avoid importing styles separately.
+     * Also this enables us to open the helper line in limel-portal,
+     * more easily without having to send the styles to the portal.
+     * :::note
+     * When the component has no content, it will get a `display: none`
+     * as styles to avoid creating empty holes in the UI of the parent component.
+     * For example, in a `flex` or `grid` component that has a `gap`,
+     * we don't want the empty `limel-helper-line` to render and cause unnecessary
+     * gaps in the UI.
+     * However, to be more resourceful, the parent component can choose not
+     * to render the helper-line as well.
+     * :::
+     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-invalid
+     * @exampleComponent limel-example-helper-line-long-text
+     * @exampleComponent limel-example-helper-line-long-text-no-counter
+     * @exampleComponent limel-example-helper-line-character-counter
+     * @private 
+     */
     interface HTMLLimelHelperLineElement extends Components.LimelHelperLine, HTMLStencilElement {
     }
     var HTMLLimelHelperLineElement: {
         prototype: HTMLLimelHelperLineElement;
         new (): HTMLLimelHelperLineElement;
     };
+    /**
+     * The recommended icon library for use with Lime Elements is the Windows 10 set
+     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
+     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
+     * you will have to supply your own icons.
+     * The size and color of the icon is set in CSS, however there are a few
+     * standard sizes defined that can be used with the `size` property.
+     * ### Setup
+     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
+     * __@lundalogik/lime-icons8__ must be made available on the webserver.
+     * To use a different icon set, the icons must be placed in a folder structure
+     * that looks like this: `assets/icons/<name-of-icon>.svg`
+     * If `assets` is placed in the root, no other setup is needed. The icons will
+     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
+     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
+     * icons available is to use the HTML `base` element:
+     * ```
+     * <base href="/my/parent/path/">
+     * ```
+     * If this is not enough, or if the `base` element is already in use for
+     * something else, a global icon path can be configured with the `limel-config`
+     * element:
+     * ```
+     * <limel-config config={{iconPath: '/my/parent/path/'}} />
+     * ```
+     * ### Lime icons
+     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * designed by our designers at Lime.
+     * The names of these icons start with `-lime-`, which makes them easy to
+     * find using the Icon Finder tool below.
+     * :::note
+     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
+     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * our color palette css files into your project to render the icons properly.
+     * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
+     * and how to do this.
+     * :::
+     * ### Icon Finder
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * @exampleComponent limel-example-icon
+     * @exampleComponent limel-example-icon-background
+     */
     interface HTMLLimelIconElement extends Components.LimelIcon, HTMLStencilElement {
     }
     var HTMLLimelIconElement: {
         prototype: HTMLLimelIconElement;
         new (): HTMLLimelIconElement;
     };
+    /**
+     * @exampleComponent limel-example-icon-button-basic
+     * @exampleComponent limel-example-icon-button-disabled
+     * @exampleComponent limel-example-icon-button-elevated
+     * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-composite
+     */
     interface HTMLLimelIconButtonElement extends Components.LimelIconButton, HTMLStencilElement {
     }
     var HTMLLimelIconButtonElement: {
         prototype: HTMLLimelIconButtonElement;
         new (): HTMLLimelIconButtonElement;
     };
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * It offers features for visualizing aggregated data along with supplementary
+     * information.
+     * If clicking on the component should navigate the user to
+     * a new screen or web page, you need to provide a URL,
+     * using the `link` property.
+     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-badge
+     * @exampleComponent limel-example-info-tile-progress
+     * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-styling
+     */
     interface HTMLLimelInfoTileElement extends Components.LimelInfoTile, HTMLStencilElement {
     }
     var HTMLLimelInfoTileElement: {
         prototype: HTMLLimelInfoTileElement;
         new (): HTMLLimelInfoTileElement;
     };
+    /**
+     * @exampleComponent limel-example-input-field-text
+     * @exampleComponent limel-example-input-field-placeholder
+     * @exampleComponent limel-example-input-field-text-multiple
+     * @exampleComponent limel-example-input-field-number
+     * @exampleComponent limel-example-input-field-autocomplete
+     * @exampleComponent limel-example-input-field-icon-leading
+     * @exampleComponent limel-example-input-field-icon-trailing
+     * @exampleComponent limel-example-input-field-icon-both
+     * @exampleComponent limel-example-input-field-showlink
+     * @exampleComponent limel-example-input-field-error-icon
+     * @exampleComponent limel-example-input-field-textarea
+     * @exampleComponent limel-example-input-field-suffix
+     * @exampleComponent limel-example-input-field-prefix
+     * @exampleComponent limel-example-input-field-search
+     * @exampleComponent limel-example-input-field-pattern
+     * @exampleComponent limel-example-input-field-focus
+     */
     interface HTMLLimelInputFieldElement extends Components.LimelInputField, HTMLStencilElement {
     }
     var HTMLLimelInputFieldElement: {
         prototype: HTMLLimelInputFieldElement;
         new (): HTMLLimelInputFieldElement;
     };
+    /**
+     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-color
+     * @exampleComponent limel-example-linear-progress-indeterminate
+     */
     interface HTMLLimelLinearProgressElement extends Components.LimelLinearProgress, HTMLStencilElement {
     }
     var HTMLLimelLinearProgressElement: {
         prototype: HTMLLimelLinearProgressElement;
         new (): HTMLLimelLinearProgressElement;
     };
+    /**
+     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-secondary
+     * @exampleComponent limel-example-list-selectable
+     * @exampleComponent limel-example-list-icons
+     * @exampleComponent limel-example-list-badge-icons
+     * @exampleComponent limel-example-list-checkbox
+     * @exampleComponent limel-example-list-checkbox-icons
+     * @exampleComponent limel-example-list-radio-button
+     * @exampleComponent limel-example-list-radio-button-icons
+     * @exampleComponent limel-example-list-action
+     * @exampleComponent limel-example-list-striped
+     * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
+     * @exampleComponent limel-example-list-grid
+     * @exampleComponent limel-example-list-primary-component
+     */
     interface HTMLLimelListElement extends Components.LimelList, HTMLStencilElement {
     }
     var HTMLLimelListElement: {
         prototype: HTMLLimelListElement;
         new (): HTMLLimelListElement;
     };
+    /**
+     * @exampleComponent limel-example-menu-basic
+     * @exampleComponent limel-example-menu-disabled
+     * @exampleComponent limel-example-menu-open-direction
+     * @exampleComponent limel-example-menu-icons
+     * @exampleComponent limel-example-menu-badge-icons
+     * @exampleComponent limel-example-menu-grid
+     * @exampleComponent limel-example-menu-hotkeys
+     * @exampleComponent limel-example-menu-secondary-text
+     * @exampleComponent limel-example-menu-notification
+     * @exampleComponent limel-example-menu-composite
+     */
     interface HTMLLimelMenuElement extends Components.LimelMenu, HTMLStencilElement {
     }
     var HTMLLimelMenuElement: {
         prototype: HTMLLimelMenuElement;
         new (): HTMLLimelMenuElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelMenuListElement extends Components.LimelMenuList, HTMLStencilElement {
     }
     var HTMLLimelMenuListElement: {
         prototype: HTMLLimelMenuListElement;
         new (): HTMLLimelMenuListElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelMenuSurfaceElement extends Components.LimelMenuSurface, HTMLStencilElement {
     }
     var HTMLLimelMenuSurfaceElement: {
         prototype: HTMLLimelMenuSurfaceElement;
         new (): HTMLLimelMenuSurfaceElement;
     };
+    /**
+     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-multiple
+     * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-empty-suggestions
+     * @exampleComponent limel-example-picker-leading-icon
+     * @exampleComponent limel-example-picker-static-actions
+     * @exampleComponent limel-example-picker-composite
+     */
     interface HTMLLimelPickerElement extends Components.LimelPicker, HTMLStencilElement {
     }
     var HTMLLimelPickerElement: {
         prototype: HTMLLimelPickerElement;
         new (): HTMLLimelPickerElement;
     };
+    /**
+     * A popover is an impermanent layer that is displayed on top of other content
+     * when user taps an element that triggers the popover. This element can be
+     * practically anything, a button, piece of text, and icon, etc.
+     * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer
+     * that darkens the content below them. Also for the same reason, they can be
+     * dismissed by tapping or clicking another part of the screen, but not by a
+     * clicking a button or link on the popover itself.
+     * :::warning
+     * The component is emitting a close event when you click outside its container
+     * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react
+     * properly on this event and hide the component (preferably by setting the
+     * property `open` to `false`).
+     * :::
+     * ## Usage
+     * Use a popover to show **options** or **information** related to the trigger
+     * onscreen. A typical use case for popovers is a tooltip, in which you show
+     * help text or contextual information to users.
+     * Popovers are most appropriate on larger screens but can be used on smaller
+     * screens too, as long as their content is responsive and takes into account
+     * the context they are displayed on.
+     * When a popover is displayed, interactions with other controls are blocked,
+     * until user dismisses the popover.
+     * ## Layout
+     * Popovers has only one slot in which you can import a custom web-component.
+     * :::note
+     * You must make sure that web-components that you import into the slot has
+     * a `width: 100%;` style so that it can horizontally stretch across the popover.
+     * However, `width` of the popover can be controlled by specifying a CSS variable
+     * of `--popover-surface-width`. If you don't specify any width, the popover
+     * will grow as wide as its content.
+     * :::
+     * :::important
+     * Do not make a popover too big. They should never take over the entire screen.
+     * If your content is that big, you should probably be using a Modal instead.
+     * :::
+     * @exampleComponent limel-example-popover
+     */
     interface HTMLLimelPopoverElement extends Components.LimelPopover, HTMLStencilElement {
     }
     var HTMLLimelPopoverElement: {
         prototype: HTMLLimelPopoverElement;
         new (): HTMLLimelPopoverElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelPopoverSurfaceElement extends Components.LimelPopoverSurface, HTMLStencilElement {
     }
     var HTMLLimelPopoverSurfaceElement: {
         prototype: HTMLLimelPopoverSurfaceElement;
         new (): HTMLLimelPopoverSurfaceElement;
     };
+    /**
+     * The portal component provides a way to render children into a DOM node that
+     * exist outside the DOM hierarchy of the parent component.
+     * There are some caveats when using this component
+     * Events might not bubble up as expected since the content is moved out to
+     * another DOM node.
+     * Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web compoent it will work without any issues.
+     * Alternatively, use the
+     * `style=""` html attribute.
+     * Any component that is placed inside the container must have a style of
+     * `max-height: inherit`. This ensures that its placement is calculated
+     * correctly in relation to the trigger, and that it never covers its own
+     * trigger.
+     * When the node is moved in the DOM, `disconnectedCallback` and
+     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
+     * to do any tear-down, the appropriate setup will have to be done again on
+     * `connectedCallback`.
+     * @private 
+     * @exampleComponent limel-example-portal
+     */
     interface HTMLLimelPortalElement extends Components.LimelPortal, HTMLStencilElement {
     }
     var HTMLLimelPortalElement: {
         prototype: HTMLLimelPortalElement;
         new (): HTMLLimelPortalElement;
     };
+    /**
+     * @exampleComponent limel-example-progress-flow-basic
+     * @exampleComponent limel-example-progress-flow-secondary-text
+     * @exampleComponent limel-example-progress-flow-disabled-step
+     * @exampleComponent limel-example-progress-flow-colors
+     * @exampleComponent limel-example-progress-flow-colors-css
+     * @exampleComponent limel-example-progress-flow-off-progress-steps
+     * @exampleComponent limel-example-progress-flow-narrow
+     */
     interface HTMLLimelProgressFlowElement extends Components.LimelProgressFlow, HTMLStencilElement {
     }
     var HTMLLimelProgressFlowElement: {
         prototype: HTMLLimelProgressFlowElement;
         new (): HTMLLimelProgressFlowElement;
     };
+    /**
+     * @private 
+     */
     interface HTMLLimelProgressFlowItemElement extends Components.LimelProgressFlowItem, HTMLStencilElement {
     }
     var HTMLLimelProgressFlowItemElement: {
         prototype: HTMLLimelProgressFlowItemElement;
         new (): HTMLLimelProgressFlowItemElement;
     };
+    /**
+     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-with-icons
+     * @exampleComponent limel-example-select-multiple
+     * @exampleComponent limel-example-select-with-empty-option
+     * @exampleComponent limel-example-select-preselected
+     * @exampleComponent limel-example-select-change-options
+     * @exampleComponent limel-example-select-narrow
+     * @exampleComponent limel-example-select-dialog
+     */
     interface HTMLLimelSelectElement extends Components.LimelSelect, HTMLStencilElement {
     }
     var HTMLLimelSelectElement: {
         prototype: HTMLLimelSelectElement;
         new (): HTMLLimelSelectElement;
     };
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * Clicking on the component should navigate the user to a new screen,
+     * to which you need to provide a URL, by specifying an `href` for the `link` property.
+     * By default, this navigation will happen within the same browser tab.
+     * However, it is possible to override that behavior, by specifying a `target`
+     * for the `link` property
+     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-notification
+     * @exampleComponent limel-example-shortcut-styling
+     * @exampleComponent limel-example-shortcut-with-click-handler
+     */
     interface HTMLLimelShortcutElement extends Components.LimelShortcut, HTMLStencilElement {
     }
     var HTMLLimelShortcutElement: {
         prototype: HTMLLimelShortcutElement;
         new (): HTMLLimelShortcutElement;
     };
+    /**
+     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-multiplier
+     * @exampleComponent limel-example-slider-multiplier-percentage-colors
+     * @exampleComponent limel-example-slider-composite
+     */
     interface HTMLLimelSliderElement extends Components.LimelSlider, HTMLStencilElement {
     }
     var HTMLLimelSliderElement: {
         prototype: HTMLLimelSliderElement;
         new (): HTMLLimelSliderElement;
     };
+    /**
+     * A Snackbar –also known as "Toast"– is used to inform the end user
+     * about an action or a process in the system.
+     * The information could vary from announcing that a process has just started,
+     * is taking place now, has ended, or has been interrupted or canceled.
+     * The information that you provide using a snackbar should be:
+     * - temporary
+     * - contextual
+     * - short
+     * - and most importantly, ignorable.
+     * It means if the user misses the information, it shouldn't be a big deal.
+     * :::note
+     * If the information you want to display has a higher importance or priority,
+     * and you need to make sure that the user takes an action to dismiss it,
+     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * For more complex interactions and for delivering more detailed information,
+     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * :::
+     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-dismissible
+     * @exampleComponent limel-example-snackbar-with-action
+     * @exampleComponent limel-example-snackbar-with-changing-messages
+     * @exampleComponent limel-example-snackbar-positioning
+     */
     interface HTMLLimelSnackbarElement extends Components.LimelSnackbar, HTMLStencilElement {
     }
     var HTMLLimelSnackbarElement: {
         prototype: HTMLLimelSnackbarElement;
         new (): HTMLLimelSnackbarElement;
     };
+    /**
+     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-color
+     * @exampleComponent limel-example-spinner-size
+     */
     interface HTMLLimelSpinnerElement extends Components.LimelSpinner, HTMLStencilElement {
     }
     var HTMLLimelSpinnerElement: {
         prototype: HTMLLimelSpinnerElement;
         new (): HTMLLimelSpinnerElement;
     };
+    /**
+     * A split button is a button with two components:
+     * a button and a side-menu attached to it.
+     * Clicking on the button runs a default action,
+     * and clicking on the arrow opens up a list of other possible actions.
+     * :::warning
+     * - Never use a split button for navigation purposes, such as going to next page.
+     * The button should only be used for performing commands!
+     * - Never use this component instead of a Select or Menu component!
+     * :::
+     * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-repeat-default-command
+     */
     interface HTMLLimelSplitButtonElement extends Components.LimelSplitButton, HTMLStencilElement {
     }
     var HTMLLimelSplitButtonElement: {
         prototype: HTMLLimelSplitButtonElement;
         new (): HTMLLimelSplitButtonElement;
     };
+    /**
+     * @exampleComponent limel-example-switch
+     */
     interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
     }
     var HTMLLimelSwitchElement: {
         prototype: HTMLLimelSwitchElement;
         new (): HTMLLimelSwitchElement;
     };
+    /**
+     * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
+     * :::warning
+     * Tab bars should be strictly used for navigation at the top levels.
+     * They should never be used to perform actions, or navigate away from the view which contains them.
+     * :::
+     * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
+     * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
+     * :::tip Other things to consider
+     * Never divide the content of a tab using a nested tab bar.
+     * Never place two tab bars within the same screen.
+     * Never use background color for icons in tabs.
+     * Avoid having long labels for tabs.
+     * A tab will never be removed or get disabled, even if there is no content under it.
+     * :::
+     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
+     * @exampleComponent limel-example-tab-bar-with-equal-tab-width
+     */
     interface HTMLLimelTabBarElement extends Components.LimelTabBar, HTMLStencilElement {
     }
     var HTMLLimelTabBarElement: {
         prototype: HTMLLimelTabBarElement;
         new (): HTMLLimelTabBarElement;
     };
+    /**
+     * The `limel-tab-panel` component uses the `limel-tab-bar` component together
+     * with custom slotted components and will display the content for the currently
+     * active tab. Each slotted component must have an id equal to the id of the
+     * corresponding tab it belongs to. These components should implement the
+     * [TabPanelComponent](#/type/TabPanelComponent/) interface.
+     * The `limel-tab-panel` component will automatically set each tab configuration
+     * on the corresponding slotted component as a property named `tab` so that the
+     * component can take action upon that. Sometimes it might be desirable to not
+     * load data or render anything until the tab is active.
+     * The slotted components can also emit the `changeTab` event to update anything
+     * inside the actual tab, e.g. to change the icon, color or badge.
+     * @exampleComponent limel-example-tab-panel
+     */
     interface HTMLLimelTabPanelElement extends Components.LimelTabPanel, HTMLStencilElement {
     }
     var HTMLLimelTabPanelElement: {
         prototype: HTMLLimelTabPanelElement;
         new (): HTMLLimelTabPanelElement;
     };
+    /**
+     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-custom-components
+     * @exampleComponent limel-example-table-header-menu
+     * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-sorting-disabled
+     * @exampleComponent limel-example-table-local
+     * @exampleComponent limel-example-table-remote
+     * @exampleComponent limel-example-table-activate-row
+     * @exampleComponent limel-example-table-selectable-rows
+     * @exampleComponent limel-example-table-default-sorted
+     * @exampleComponent limel-example-table-layout-default
+     * @exampleComponent limel-example-table-layout-stretch-last-column
+     * @exampleComponent limel-example-table-layout-stretch-columns
+     * @exampleComponent limel-example-table-layout-low-density
+     * @exampleComponent limel-example-table-interactive-rows
+     */
     interface HTMLLimelTableElement extends Components.LimelTable, HTMLStencilElement {
     }
     var HTMLLimelTableElement: {
         prototype: HTMLLimelTableElement;
         new (): HTMLLimelTableElement;
     };
+    /**
+     * A tooltip can be used to display a descriptive text for any element.
+     * The displayed content must be a brief and supplemental string of text,
+     * identifying the element or describing its function for the user,
+     * helping them better understand unfamiliar objects that aren't described
+     * directly in the UI.
+     * ## Interaction
+     * The tooltip appears after a slight delay, when the element is hovered;
+     * and disappears as soon as the cursor leaves the element.
+     * Therefore, users cannot interact with the tip, but if the trigger element
+     * itself is interactive, it will remain interactible even with a tooltip bound
+     * to it.
+     * :::note
+     * In order to display the tooltip, the tooltip element and its trigger element
+     * must be within the same document or document fragment.
+     * A good practice is to just place them next to each other like below:
+     * ```html
+     * <limel-button icon="search" id="tooltip-example" />
+     * <limel-tooltip label="Search" elementId="tooltip-example" />
+     * ```
+     * :::
+     * ## Usage
+     * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+     * Use them only when they add significant value.
+     * - A good tip is concise, helpful, and informative.
+     * Don't explain the obvious or simply repeat what is already on the screen.
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * - If the tip is essential to the primary tasks that the user is performing,
+     * such as warnings or important notes, include the information directly in the
+     * interface instead.
+     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * use that, not a tooltip.
+     * - Make sure to use the tooltip on an element that users naturally and
+     * effortlessly recognize can be hovered.
+     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-max-character
+     * @exampleComponent limel-example-tooltip-composite
+     * @private 
+     */
     interface HTMLLimelTooltipElement extends Components.LimelTooltip, HTMLStencilElement {
     }
     var HTMLLimelTooltipElement: {
         prototype: HTMLLimelTooltipElement;
         new (): HTMLLimelTooltipElement;
     };
+    /**
+     * This component is used internally by `limel-tooltip`.
+     * @private 
+     */
     interface HTMLLimelTooltipContentElement extends Components.LimelTooltipContent, HTMLStencilElement {
     }
     var HTMLLimelTooltipContentElement: {
@@ -1830,6 +3264,28 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * An action bar is a user interface element commonly found in software applications and websites.
+     * It typically appears at the top of the screen or within a specific section
+     * and serves as a centralized hub for accessing various actions and commands
+     * relevant to the current context or page.
+     * The action bar often contains a set of clickable icons or buttons (icons + labels)
+     * that represent specific actions, such as saving, deleting, editing, sharing,
+     * or bulk operations for selected items.
+     * The purpose of an action bar is to provide quick and convenient access to
+     * frequently used functionalities, enabling users to perform common tasks efficiently.
+     * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+     * The action bar's design and layout can vary based on the platform or application,
+     * but its primary goal remains consistent—to
+     * empower users to interact with the software and perform desired actions effortlessly.
+     * @exampleComponent limel-example-action-bar
+     * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-colors
+     * @exampleComponent limel-example-action-bar-floating
+     * @exampleComponent limel-example-action-bar-styling
+     * @exampleComponent limel-example-action-bar-as-primary-component
+     * @private 
+     */
     interface LimelActionBar {
         /**
           * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
@@ -1852,6 +3308,9 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection;
     }
+    /**
+     * @private 
+     */
     interface LimelActionBarItem {
         /**
           * When the item is displayed in the available width, this will be `false`.
@@ -1866,6 +3325,9 @@ declare namespace LocalJSX {
          */
         "onSelect"?: (event: LimelActionBarItemCustomEvent<ActionBarItem | ListSeparator1>) => void;
     }
+    /**
+     * @private 
+     */
     interface LimelActionBarOverflowMenu {
         /**
           * List of the items that should be rendered in the overflow menu.
@@ -1877,12 +3339,22 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection1;
     }
+    /**
+     * The Badge component can be used to display a notification badge,
+     * optionally with a number or a text label.
+     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-number
+     * @exampleComponent limel-example-badge-string
+     */
     interface LimelBadge {
         /**
           * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters.
          */
         "label"?: number | string;
     }
+    /**
+     * @exampleComponent limel-example-banner
+     */
     interface LimelBanner {
         /**
           * Set icon for the banner
@@ -1893,6 +3365,19 @@ declare namespace LocalJSX {
          */
         "message"?: string;
     }
+    /**
+     * @exampleComponent limel-example-button-basic
+     * @exampleComponent limel-example-button-primary
+     * @exampleComponent limel-example-button-outlined
+     * @exampleComponent limel-example-button-disabled
+     * @exampleComponent limel-example-button-icon
+     * @exampleComponent limel-example-button-loading
+     * @exampleComponent limel-example-button-click-success
+     * @exampleComponent limel-example-button-click-fail
+     * @exampleComponent limel-example-button-reduce-presence
+     * @exampleComponent limel-example-button-colors
+     * @exampleComponent limel-example-button-composite
+     */
     interface LimelButton {
         /**
           * Set to `true` to disable the button.
@@ -1923,6 +3408,35 @@ declare namespace LocalJSX {
          */
         "primary"?: boolean;
     }
+    /**
+     * A button group control is a linear set of two or more buttons.
+     * ## Usage
+     * Button groups are often used to display different views of the same thing. A
+     * common example of this component is when you switch between [ Map | Transit
+     * | Satellite ] views to look at an area on the map.
+     * In some cases, button groups may serve as quick filters as well. For example
+     * a list of contacts, in which the user can switch to [ All | Favorites
+     * | Frequently contacted ] can incorporate a button group to quickly filter out
+     * items and display subsets of them.
+     * ## Layout
+     * The button groups are usually placed in top headers and action bars,
+     * sometimes with other elements. Since the group items will always be rendered
+     * in a row, you must make sure not to have too many buttons in the group.
+     * Because if the container of your button group does not get enough space to
+     * fit in all its buttons, they will have to truncate their text and may appear
+     * very cramped together. Always think about how your button group will appear
+     * on a small screen such as phones.
+     * :::note
+     * Button can contain text or icons, but not both simultaneously!
+     * :::
+     * Within the group, icon buttons will all have the same width, while each text button
+     * inherits its width from its content.
+     * @exampleComponent limel-example-button-group-icons
+     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-mix
+     * @exampleComponent limel-example-button-group-badges
+     * @exampleComponent limel-example-button-group-composite
+     */
     interface LimelButtonGroup {
         /**
           * True if the button-group should be disabled
@@ -1937,6 +3451,31 @@ declare namespace LocalJSX {
          */
         "value"?: Button[];
     }
+    /**
+     * Callouts—also known as Admonitions—are useful for including supportive or
+     * special content within a large piece of text, or even inside a user
+     * interface.
+     * When used in a document or text based user interface, the callout attracts
+     * the reader's attention to a particular piece of information, without
+     * significantly interrupting their flow of reading the document.
+     * In a user interface, a callout is more intrusive to the end-user. Still, it
+     * could be a good choice when you intend to slightly disturb the user's
+     * attention, and challenge them to pay extra attention to the information
+     * presented. In such cases, a callout should not be used as a static and
+     * constantly present element of the UI. Rather, it should be displayed when
+     * something unusual or remarkable demands the user's attention.
+     * @exampleComponent limel-example-callout-note
+     * @exampleComponent limel-example-callout-important
+     * @exampleComponent limel-example-callout-tip
+     * @exampleComponent limel-example-callout-caution
+     * @exampleComponent limel-example-callout-warning
+     * @exampleComponent limel-example-callout-rich-content
+     * @exampleComponent limel-example-callout-custom-heading
+     * @exampleComponent limel-example-callout-custom-icon
+     * @exampleComponent limel-example-callout-styles
+     * @exampleComponent limel-example-custom-type
+     * @exampleComponent limel-example-callout-composite
+     */
     interface LimelCallout {
         /**
           * Heading of the callout, which can be used to override the default heading which is displayed based on the chosen `type`.
@@ -1955,6 +3494,10 @@ declare namespace LocalJSX {
          */
         "type"?: CalloutType;
     }
+    /**
+     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-helper-text
+     */
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -1989,6 +3532,17 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-choice
+     * @exampleComponent limel-example-chip-set-filter
+     * @exampleComponent limel-example-chip-set-filter-badge
+     * @exampleComponent limel-example-chip-set-input
+     * @exampleComponent limel-example-chip-set-input-type-text
+     * @exampleComponent limel-example-chip-set-input-type-search
+     * @exampleComponent limel-example-chip-icon-color
+     * @exampleComponent limel-example-chip-set-composite
+     */
     interface LimelChipSet {
         /**
           * Whether the "Clear all" buttons should be shown
@@ -2071,6 +3625,26 @@ declare namespace LocalJSX {
          */
         "value"?: Chip[];
     }
+    /**
+     * The circular progress component can be used to visualize the curent state of
+     * a progress in a scale; for example percentage of completion of a task.
+     * Its compact UI makes the component suitable when there is not enough screen
+     * space available to visualise such information.
+     * This component allows you to define your scale, from `0` to a desired
+     * `maxValue`; and also lets you chose a proper `suffix` for your scale.
+     * :::note
+     * The component will round up the value when it is displayed, and only shows
+     * one decimal digit.
+     * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
+     * Of course such numbers, if bigger than `maxValue` will be visualized as a
+     * full progress.
+     * :::
+     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-sizes
+     * @exampleComponent limel-example-circular-progress-props
+     * @exampleComponent limel-example-circular-progress-css-variables
+     * @exampleComponent limel-example-circular-progress-percentage-colors
+     */
     interface LimelCircularProgress {
         /**
           * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
@@ -2097,6 +3671,13 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    /**
+     * Currently this component support syntax highlighting for `javascript`,
+     * `json` and `typescript` formats.
+     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+     * @exampleComponent limel-example-code-editor-fold-lint
+     */
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
@@ -2131,6 +3712,13 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @exampleComponent limel-example-collapsible-section
+     * @exampleComponent limel-example-collapsible-section-actions
+     * @exampleComponent limel-example-collapsible-section-css-props
+     * @exampleComponent limel-example-collapsible-section-external-control
+     * @exampleComponent limel-example-collapsible-section-with-slider
+     */
     interface LimelCollapsibleSection {
         /**
           * Actions to place to the far right inside the header
@@ -2157,6 +3745,17 @@ declare namespace LocalJSX {
          */
         "onOpen"?: (event: LimelCollapsibleSectionCustomEvent<void>) => void;
     }
+    /**
+     * This component enables you to select a swatch from out color palette, simply
+     * by clicking on it. You can then copy the css variable name of the chosen color
+     * and use it where desired.
+     * The color picker can also show you a preview of any valid color name or color value.
+     * :::note
+     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * :::
+     * @exampleComponent limel-example-color-picker
+     * @exampleComponent limel-example-color-picker-readonly
+     */
     interface LimelColorPicker {
         /**
           * Helper text of the input field
@@ -2187,6 +3786,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @private 
+     */
     interface LimelColorPickerPalette {
         /**
           * Helper text of the input field
@@ -2209,12 +3811,28 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @private 
+     */
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
          */
         "config"?: object;
     }
+    /**
+     * @exampleComponent limel-example-date-picker-datetime
+     * @exampleComponent limel-example-date-picker-date
+     * @exampleComponent limel-example-date-picker-time
+     * @exampleComponent limel-example-date-picker-week
+     * @exampleComponent limel-example-date-picker-month
+     * @exampleComponent limel-example-date-picker-quarter
+     * @exampleComponent limel-example-date-picker-year
+     * @exampleComponent limel-example-date-picker-formatted
+     * @exampleComponent limel-example-date-picker-programmatic-change
+     * @exampleComponent limel-example-date-picker-composite
+     * @exampleComponent limel-example-date-picker-custom-formatter
+     */
     interface LimelDatePicker {
         /**
           * Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
@@ -2269,6 +3887,29 @@ declare namespace LocalJSX {
          */
         "value"?: Date;
     }
+    /**
+     * :::note
+     * Regarding the `close` event: When putting other elements that emit `close`
+     * events inside a dialog, those events must be caught and stopped inside the
+     * dialog. If not, they will bubble to the event handler listening for `close`
+     * events on the dialog, which will close the dialog too.
+     * See the example _Nested `close` events_.
+     * :::
+     * :::important
+     * Are you developing for
+     * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that
+     * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
+     * from Lime Web Components to open dialogs in Lime CRM.
+     * :::
+     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-nested-close-events
+     * @exampleComponent limel-example-dialog-heading
+     * @exampleComponent limel-example-dialog-form
+     * @exampleComponent limel-example-dialog-size
+     * @exampleComponent limel-example-dialog-fullscreen
+     * @exampleComponent limel-example-dialog-closing-actions
+     * @exampleComponent limel-example-dialog-action-buttons
+     */
     interface LimelDialog {
         /**
           * Defines which action triggers a close-event.
@@ -2295,6 +3936,14 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-dock-basic
+     * @exampleComponent limel-example-dock-custom-component
+     * @exampleComponent limel-example-dock-notification
+     * @exampleComponent limel-example-dock-mobile
+     * @exampleComponent limel-example-dock-expanded
+     * @exampleComponent limel-example-dock-colors-css
+     */
     interface LimelDock {
         /**
           * A label used to describe the purpose of the navigation element to users of assistive technologies, like screen readers. Especially useful when there are multiple navigation elements in the user interface. Example value: "Primary navigation"
@@ -2337,6 +3986,9 @@ declare namespace LocalJSX {
          */
         "onMenuOpen"?: (event: LimelDockCustomEvent<DockItem>) => void;
     }
+    /**
+     * @private 
+     */
     interface LimelDockButton {
         /**
           * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
@@ -2363,6 +4015,33 @@ declare namespace LocalJSX {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This component lets end-users select a *single* file from their device
+     * storage. Regardless of the user's device or operating system, this component
+     * opens up a file picker dialog that allows the user to choose a file.
+     * ## Using correct labels
+     * This file picker can be used in different contexts. The component's distinct
+     * visual design including the upload icon hints end-users that this is not a
+     * normal input field like other fields in the form for example.
+     * :::important
+     * you need to use a descriptive `label` that clarifies the
+     * functionality of the file picker, and/or provides users with clear
+     * instructions.
+     * Depending on the context, you may need to avoid labels such as:
+     * - File
+     * - Document
+     * and instead consider using labels like:
+     * - Attach a file
+     * - Upload a file
+     * - Choose a document
+     * - Choose a file
+     * and similar phrases...
+     * :::
+     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-custom-icon
+     * @exampleComponent limel-example-file-accepted-types
+     * @exampleComponent limel-example-file-composite
+     */
     interface LimelFile {
         /**
           * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
@@ -2401,6 +4080,12 @@ declare namespace LocalJSX {
          */
         "value"?: FileInfo;
     }
+    /**
+     * This component is internal and only supposed to be used by
+     * the limel-date-picker. This component is needed in order for us
+     * to render the flatpickr calendar in a portal.
+     * @private 
+     */
     interface LimelFlatpickrAdapter {
         /**
           * Format to display the selected date in.
@@ -2432,6 +4117,13 @@ declare namespace LocalJSX {
          */
         "value"?: Date;
     }
+    /**
+     * This component is deprecated and will be removed in a future version of
+     * Lime Elements. Please use CSS for your flexible container needs 🙂
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+     * @deprecated 
+     * @private 
+     */
     interface LimelFlexContainer {
         /**
           * Specify how items are aligned along the cross axis
@@ -2450,6 +4142,19 @@ declare namespace LocalJSX {
          */
         "reverse"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-form
+     * @exampleComponent limel-example-nested-form
+     * @exampleComponent limel-example-list-form
+     * @exampleComponent limel-example-dynamic-form
+     * @exampleComponent limel-example-custom-component-form
+     * @exampleComponent limel-example-props-factory-form
+     * @exampleComponent limel-example-form-layout
+     * @exampleComponent limel-example-form-span-fields
+     * @exampleComponent limel-example-custom-error-message
+     * @exampleComponent limel-example-server-errors
+     * @exampleComponent limel-example-form-row-layout
+     */
     interface LimelForm {
         /**
           * Set to `true` to disable the whole form.
@@ -2487,8 +4192,51 @@ declare namespace LocalJSX {
          */
         "value"?: object;
     }
+    /**
+     * The `limel-grid` component creates a grid which can be used to control the
+     * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+     * to enable easy configuration of its child-elements.
+     * @exampleComponent limel-example-grid
+     */
     interface LimelGrid {
     }
+    /**
+     * A header is the top most visual element in a component, page, card, or a view.
+     * ## Usage
+     * A header is the first thing that clarifies a context for users.
+     * Due to their positions in the UI hierarchy, headers are the most
+     * prominent elements of a user interface; and because of that, they carry both
+     * vital information and fundamental controls for the area of the interface
+     * they represent.
+     * For example, when a header is placed on top of a card, it should quickly
+     * explain the card to the user. When placed on top of a modal, it should easily
+     * clarify what the modal is about. When displayed on top of a fullscreen view,
+     * it should indicate where in the system users are, and what part of the app
+     * they are looking at.
+     * ## Layout
+     * The vital information in a header is usually manifested in form of an icon,
+     * and a heading. A subheading also could be added to provide supplementary
+     * information. There is also a third place for displaying supplementary information
+     * or "supporting text", which will be rendered as a part of the subheading.
+     * Along with this information, headers can also include actions, controls, or
+     * menus.
+     * :::important
+     * Such actions or menus must affect the entire section of the interface
+     * which the header is representing. For example, a _Delete_ button on a card
+     * header must delete that entire card and its respective contents all together,
+     * not for example a selected item which is visible in the content of that card.
+     * :::
+     * :::warning
+     * Do not user background color on icons in the headers. It is much better and
+     * much easier for the eye if your icon itself has a color.
+     * Background colors behind icons make them look like "call to action" buttons
+     * and take a lot of attention from users.
+     * :::
+     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-colors
+     * @exampleComponent limel-example-header-responsive
+     * @exampleComponent limel-example-header-narrow
+     */
     interface LimelHeader {
         /**
           * Title to display
@@ -2507,6 +4255,30 @@ declare namespace LocalJSX {
          */
         "supportingText"?: string;
     }
+    /**
+     * This is an internal and private component that many input fields
+     * use to display a helper text, along with a character counter below the
+     * input field.
+     * We created this to keep the visual styles the same everywhere
+     * and to avoid importing styles separately.
+     * Also this enables us to open the helper line in limel-portal,
+     * more easily without having to send the styles to the portal.
+     * :::note
+     * When the component has no content, it will get a `display: none`
+     * as styles to avoid creating empty holes in the UI of the parent component.
+     * For example, in a `flex` or `grid` component that has a `gap`,
+     * we don't want the empty `limel-helper-line` to render and cause unnecessary
+     * gaps in the UI.
+     * However, to be more resourceful, the parent component can choose not
+     * to render the helper-line as well.
+     * :::
+     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-invalid
+     * @exampleComponent limel-example-helper-line-long-text
+     * @exampleComponent limel-example-helper-line-long-text-no-counter
+     * @exampleComponent limel-example-helper-line-character-counter
+     * @private 
+     */
     interface LimelHelperLine {
         /**
           * The helper text that is displayed on the left side.
@@ -2529,6 +4301,49 @@ declare namespace LocalJSX {
          */
         "maxLength"?: number;
     }
+    /**
+     * The recommended icon library for use with Lime Elements is the Windows 10 set
+     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
+     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
+     * you will have to supply your own icons.
+     * The size and color of the icon is set in CSS, however there are a few
+     * standard sizes defined that can be used with the `size` property.
+     * ### Setup
+     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
+     * __@lundalogik/lime-icons8__ must be made available on the webserver.
+     * To use a different icon set, the icons must be placed in a folder structure
+     * that looks like this: `assets/icons/<name-of-icon>.svg`
+     * If `assets` is placed in the root, no other setup is needed. The icons will
+     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
+     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
+     * icons available is to use the HTML `base` element:
+     * ```
+     * <base href="/my/parent/path/">
+     * ```
+     * If this is not enough, or if the `base` element is already in use for
+     * something else, a global icon path can be configured with the `limel-config`
+     * element:
+     * ```
+     * <limel-config config={{iconPath: '/my/parent/path/'}} />
+     * ```
+     * ### Lime icons
+     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * designed by our designers at Lime.
+     * The names of these icons start with `-lime-`, which makes them easy to
+     * find using the Icon Finder tool below.
+     * :::note
+     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
+     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * our color palette css files into your project to render the icons properly.
+     * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
+     * and how to do this.
+     * :::
+     * ### Icon Finder
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * @exampleComponent limel-example-icon
+     * @exampleComponent limel-example-icon-background
+     */
     interface LimelIcon {
         /**
           * Set to `true` to give the icon a round background with some padding. Only works when the `size` attribute is also set.
@@ -2543,6 +4358,13 @@ declare namespace LocalJSX {
          */
         "size"?: IconSize;
     }
+    /**
+     * @exampleComponent limel-example-icon-button-basic
+     * @exampleComponent limel-example-icon-button-disabled
+     * @exampleComponent limel-example-icon-button-elevated
+     * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-composite
+     */
     interface LimelIconButton {
         /**
           * Set to `true` to disable the button.
@@ -2561,6 +4383,19 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * It offers features for visualizing aggregated data along with supplementary
+     * information.
+     * If clicking on the component should navigate the user to
+     * a new screen or web page, you need to provide a URL,
+     * using the `link` property.
+     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-badge
+     * @exampleComponent limel-example-info-tile-progress
+     * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-styling
+     */
     interface LimelInfoTile {
         /**
           * If supplied, the info tile will display a notification badge.
@@ -2603,6 +4438,24 @@ declare namespace LocalJSX {
          */
         "value"?: number | string;
     }
+    /**
+     * @exampleComponent limel-example-input-field-text
+     * @exampleComponent limel-example-input-field-placeholder
+     * @exampleComponent limel-example-input-field-text-multiple
+     * @exampleComponent limel-example-input-field-number
+     * @exampleComponent limel-example-input-field-autocomplete
+     * @exampleComponent limel-example-input-field-icon-leading
+     * @exampleComponent limel-example-input-field-icon-trailing
+     * @exampleComponent limel-example-input-field-icon-both
+     * @exampleComponent limel-example-input-field-showlink
+     * @exampleComponent limel-example-input-field-error-icon
+     * @exampleComponent limel-example-input-field-textarea
+     * @exampleComponent limel-example-input-field-suffix
+     * @exampleComponent limel-example-input-field-prefix
+     * @exampleComponent limel-example-input-field-search
+     * @exampleComponent limel-example-input-field-pattern
+     * @exampleComponent limel-example-input-field-focus
+     */
     interface LimelInputField {
         /**
           * list of suggestions `value` can autocomplete to.
@@ -2701,6 +4554,11 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-color
+     * @exampleComponent limel-example-linear-progress-indeterminate
+     */
     interface LimelLinearProgress {
         /**
           * Puts the progress bar in an indeterminate state
@@ -2711,6 +4569,22 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    /**
+     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-secondary
+     * @exampleComponent limel-example-list-selectable
+     * @exampleComponent limel-example-list-icons
+     * @exampleComponent limel-example-list-badge-icons
+     * @exampleComponent limel-example-list-checkbox
+     * @exampleComponent limel-example-list-checkbox-icons
+     * @exampleComponent limel-example-list-radio-button
+     * @exampleComponent limel-example-list-radio-button-icons
+     * @exampleComponent limel-example-list-action
+     * @exampleComponent limel-example-list-striped
+     * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
+     * @exampleComponent limel-example-list-grid
+     * @exampleComponent limel-example-list-primary-component
+     */
     interface LimelList {
         /**
           * Set to `true` if the list should display larger icons with a background
@@ -2741,6 +4615,18 @@ declare namespace LocalJSX {
          */
         "type"?: ListType;
     }
+    /**
+     * @exampleComponent limel-example-menu-basic
+     * @exampleComponent limel-example-menu-disabled
+     * @exampleComponent limel-example-menu-open-direction
+     * @exampleComponent limel-example-menu-icons
+     * @exampleComponent limel-example-menu-badge-icons
+     * @exampleComponent limel-example-menu-grid
+     * @exampleComponent limel-example-menu-hotkeys
+     * @exampleComponent limel-example-menu-secondary-text
+     * @exampleComponent limel-example-menu-notification
+     * @exampleComponent limel-example-menu-composite
+     */
     interface LimelMenu {
         /**
           * Defines whether the menu should show badges.
@@ -2775,6 +4661,9 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection1;
     }
+    /**
+     * @private 
+     */
     interface LimelMenuList {
         /**
           * Set to `true` if the list should display larger icons with a background
@@ -2801,6 +4690,9 @@ declare namespace LocalJSX {
          */
         "type"?: MenuListType;
     }
+    /**
+     * @private 
+     */
     interface LimelMenuSurface {
         /**
           * Clicks in this element should not be prevented when the menu surface is open
@@ -2815,6 +4707,15 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-multiple
+     * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-empty-suggestions
+     * @exampleComponent limel-example-picker-leading-icon
+     * @exampleComponent limel-example-picker-static-actions
+     * @exampleComponent limel-example-picker-composite
+     */
     interface LimelPicker {
         /**
           * Position of the custom static actions in the picker's results dropdown. Can be set to `'top'` or `'bottom'`.
@@ -2893,6 +4794,44 @@ declare namespace LocalJSX {
          */
         "value"?: ListItem<number | string> | Array<ListItem<number | string>>;
     }
+    /**
+     * A popover is an impermanent layer that is displayed on top of other content
+     * when user taps an element that triggers the popover. This element can be
+     * practically anything, a button, piece of text, and icon, etc.
+     * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer
+     * that darkens the content below them. Also for the same reason, they can be
+     * dismissed by tapping or clicking another part of the screen, but not by a
+     * clicking a button or link on the popover itself.
+     * :::warning
+     * The component is emitting a close event when you click outside its container
+     * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react
+     * properly on this event and hide the component (preferably by setting the
+     * property `open` to `false`).
+     * :::
+     * ## Usage
+     * Use a popover to show **options** or **information** related to the trigger
+     * onscreen. A typical use case for popovers is a tooltip, in which you show
+     * help text or contextual information to users.
+     * Popovers are most appropriate on larger screens but can be used on smaller
+     * screens too, as long as their content is responsive and takes into account
+     * the context they are displayed on.
+     * When a popover is displayed, interactions with other controls are blocked,
+     * until user dismisses the popover.
+     * ## Layout
+     * Popovers has only one slot in which you can import a custom web-component.
+     * :::note
+     * You must make sure that web-components that you import into the slot has
+     * a `width: 100%;` style so that it can horizontally stretch across the popover.
+     * However, `width` of the popover can be controlled by specifying a CSS variable
+     * of `--popover-surface-width`. If you don't specify any width, the popover
+     * will grow as wide as its content.
+     * :::
+     * :::important
+     * Do not make a popover too big. They should never take over the entire screen.
+     * If your content is that big, you should probably be using a Modal instead.
+     * :::
+     * @exampleComponent limel-example-popover
+     */
     interface LimelPopover {
         /**
           * Emits an event when the component is closing
@@ -2907,12 +4846,36 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection;
     }
+    /**
+     * @private 
+     */
     interface LimelPopoverSurface {
         /**
           * Content to render
          */
         "contentCollection"?: HTMLCollection;
     }
+    /**
+     * The portal component provides a way to render children into a DOM node that
+     * exist outside the DOM hierarchy of the parent component.
+     * There are some caveats when using this component
+     * Events might not bubble up as expected since the content is moved out to
+     * another DOM node.
+     * Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web compoent it will work without any issues.
+     * Alternatively, use the
+     * `style=""` html attribute.
+     * Any component that is placed inside the container must have a style of
+     * `max-height: inherit`. This ensures that its placement is calculated
+     * correctly in relation to the trigger, and that it never covers its own
+     * trigger.
+     * When the node is moved in the DOM, `disconnectedCallback` and
+     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
+     * to do any tear-down, the appropriate setup will have to be done again on
+     * `connectedCallback`.
+     * @private 
+     * @exampleComponent limel-example-portal
+     */
     interface LimelPortal {
         /**
           * A unique ID.
@@ -2943,6 +4906,15 @@ declare namespace LocalJSX {
          */
         "visible"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-progress-flow-basic
+     * @exampleComponent limel-example-progress-flow-secondary-text
+     * @exampleComponent limel-example-progress-flow-disabled-step
+     * @exampleComponent limel-example-progress-flow-colors
+     * @exampleComponent limel-example-progress-flow-colors-css
+     * @exampleComponent limel-example-progress-flow-off-progress-steps
+     * @exampleComponent limel-example-progress-flow-narrow
+     */
     interface LimelProgressFlow {
         /**
           * Set to `true` to disable the progress flow. Use `disabled` to indicate that the component can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
@@ -2961,6 +4933,9 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
     }
+    /**
+     * @private 
+     */
     interface LimelProgressFlowItem {
         /**
           * True if the flow item should be disabled
@@ -2979,6 +4954,16 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-with-icons
+     * @exampleComponent limel-example-select-multiple
+     * @exampleComponent limel-example-select-with-empty-option
+     * @exampleComponent limel-example-select-preselected
+     * @exampleComponent limel-example-select-change-options
+     * @exampleComponent limel-example-select-narrow
+     * @exampleComponent limel-example-select-dialog
+     */
     interface LimelSelect {
         /**
           * Set to `true` to make the field disabled. and visually shows that the `select` component is editable but disabled. This tells the users that if certain requirements are met, the component may become interactable.
@@ -3021,6 +5006,18 @@ declare namespace LocalJSX {
          */
         "value"?: Option | Option[];
     }
+    /**
+     * This component can be used on places such as a start page or a dashboard.
+     * Clicking on the component should navigate the user to a new screen,
+     * to which you need to provide a URL, by specifying an `href` for the `link` property.
+     * By default, this navigation will happen within the same browser tab.
+     * However, it is possible to override that behavior, by specifying a `target`
+     * for the `link` property
+     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-notification
+     * @exampleComponent limel-example-shortcut-styling
+     * @exampleComponent limel-example-shortcut-with-click-handler
+     */
     interface LimelShortcut {
         /**
           * If specified, will display a notification badge on the shortcut.
@@ -3043,6 +5040,12 @@ declare namespace LocalJSX {
          */
         "link"?: Link;
     }
+    /**
+     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-multiplier
+     * @exampleComponent limel-example-slider-multiplier-percentage-colors
+     * @exampleComponent limel-example-slider-composite
+     */
     interface LimelSlider {
         /**
           * Disables the slider when `true`, and visually shows that the field is editable but disabled. This tells the users that if certain requirements are met, the slider may become interactable.
@@ -3089,6 +5092,30 @@ declare namespace LocalJSX {
          */
         "valuemin"?: number;
     }
+    /**
+     * A Snackbar –also known as "Toast"– is used to inform the end user
+     * about an action or a process in the system.
+     * The information could vary from announcing that a process has just started,
+     * is taking place now, has ended, or has been interrupted or canceled.
+     * The information that you provide using a snackbar should be:
+     * - temporary
+     * - contextual
+     * - short
+     * - and most importantly, ignorable.
+     * It means if the user misses the information, it shouldn't be a big deal.
+     * :::note
+     * If the information you want to display has a higher importance or priority,
+     * and you need to make sure that the user takes an action to dismiss it,
+     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * For more complex interactions and for delivering more detailed information,
+     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * :::
+     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-dismissible
+     * @exampleComponent limel-example-snackbar-with-action
+     * @exampleComponent limel-example-snackbar-with-changing-messages
+     * @exampleComponent limel-example-snackbar-positioning
+     */
     interface LimelSnackbar {
         /**
           * The text to display for the action button.
@@ -3123,6 +5150,11 @@ declare namespace LocalJSX {
          */
         "timeout"?: number;
     }
+    /**
+     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-color
+     * @exampleComponent limel-example-spinner-size
+     */
     interface LimelSpinner {
         /**
           * Gives the spinner the shape of Lime Technologies' logo
@@ -3133,6 +5165,19 @@ declare namespace LocalJSX {
          */
         "size"?: SpinnerSize;
     }
+    /**
+     * A split button is a button with two components:
+     * a button and a side-menu attached to it.
+     * Clicking on the button runs a default action,
+     * and clicking on the arrow opens up a list of other possible actions.
+     * :::warning
+     * - Never use a split button for navigation purposes, such as going to next page.
+     * The button should only be used for performing commands!
+     * - Never use this component instead of a Select or Menu component!
+     * :::
+     * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-repeat-default-command
+     */
     interface LimelSplitButton {
         /**
           * Set to `true` to disable the button.
@@ -3159,6 +5204,9 @@ declare namespace LocalJSX {
          */
         "primary"?: boolean;
     }
+    /**
+     * @exampleComponent limel-example-switch
+     */
     interface LimelSwitch {
         /**
           * Disables the switch when `true`, and visually shows that the switch is editable but disabled. This tells the users that if certain requirements are met, the switch may become interactable.
@@ -3181,6 +5229,25 @@ declare namespace LocalJSX {
          */
         "value"?: boolean;
     }
+    /**
+     * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
+     * :::warning
+     * Tab bars should be strictly used for navigation at the top levels.
+     * They should never be used to perform actions, or navigate away from the view which contains them.
+     * :::
+     * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
+     * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
+     * :::tip Other things to consider
+     * Never divide the content of a tab using a nested tab bar.
+     * Never place two tab bars within the same screen.
+     * Never use background color for icons in tabs.
+     * Avoid having long labels for tabs.
+     * A tab will never be removed or get disabled, even if there is no content under it.
+     * :::
+     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
+     * @exampleComponent limel-example-tab-bar-with-equal-tab-width
+     */
     interface LimelTabBar {
         /**
           * Emitted when a tab has been changed
@@ -3191,6 +5258,20 @@ declare namespace LocalJSX {
          */
         "tabs"?: Tab[];
     }
+    /**
+     * The `limel-tab-panel` component uses the `limel-tab-bar` component together
+     * with custom slotted components and will display the content for the currently
+     * active tab. Each slotted component must have an id equal to the id of the
+     * corresponding tab it belongs to. These components should implement the
+     * [TabPanelComponent](#/type/TabPanelComponent/) interface.
+     * The `limel-tab-panel` component will automatically set each tab configuration
+     * on the corresponding slotted component as a property named `tab` so that the
+     * component can take action upon that. Sometimes it might be desirable to not
+     * load data or render anything until the tab is active.
+     * The slotted components can also emit the `changeTab` event to update anything
+     * inside the actual tab, e.g. to change the icon, color or badge.
+     * @exampleComponent limel-example-tab-panel
+     */
     interface LimelTabPanel {
         /**
           * Emitted when a tab has been changed
@@ -3201,6 +5282,23 @@ declare namespace LocalJSX {
          */
         "tabs"?: Tab[];
     }
+    /**
+     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-custom-components
+     * @exampleComponent limel-example-table-header-menu
+     * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-sorting-disabled
+     * @exampleComponent limel-example-table-local
+     * @exampleComponent limel-example-table-remote
+     * @exampleComponent limel-example-table-activate-row
+     * @exampleComponent limel-example-table-selectable-rows
+     * @exampleComponent limel-example-table-default-sorted
+     * @exampleComponent limel-example-table-layout-default
+     * @exampleComponent limel-example-table-layout-stretch-last-column
+     * @exampleComponent limel-example-table-layout-stretch-columns
+     * @exampleComponent limel-example-table-layout-low-density
+     * @exampleComponent limel-example-table-interactive-rows
+     */
     interface LimelTable {
         /**
           * Active row in the table
@@ -3291,6 +5389,45 @@ declare namespace LocalJSX {
          */
         "totalRows"?: number;
     }
+    /**
+     * A tooltip can be used to display a descriptive text for any element.
+     * The displayed content must be a brief and supplemental string of text,
+     * identifying the element or describing its function for the user,
+     * helping them better understand unfamiliar objects that aren't described
+     * directly in the UI.
+     * ## Interaction
+     * The tooltip appears after a slight delay, when the element is hovered;
+     * and disappears as soon as the cursor leaves the element.
+     * Therefore, users cannot interact with the tip, but if the trigger element
+     * itself is interactive, it will remain interactible even with a tooltip bound
+     * to it.
+     * :::note
+     * In order to display the tooltip, the tooltip element and its trigger element
+     * must be within the same document or document fragment.
+     * A good practice is to just place them next to each other like below:
+     * ```html
+     * <limel-button icon="search" id="tooltip-example" />
+     * <limel-tooltip label="Search" elementId="tooltip-example" />
+     * ```
+     * :::
+     * ## Usage
+     * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+     * Use them only when they add significant value.
+     * - A good tip is concise, helpful, and informative.
+     * Don't explain the obvious or simply repeat what is already on the screen.
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * - If the tip is essential to the primary tasks that the user is performing,
+     * such as warnings or important notes, include the information directly in the
+     * interface instead.
+     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * use that, not a tooltip.
+     * - Make sure to use the tooltip on an element that users naturally and
+     * effortlessly recognize can be hovered.
+     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-max-character
+     * @exampleComponent limel-example-tooltip-composite
+     * @private 
+     */
     interface LimelTooltip {
         /**
           * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
@@ -3309,6 +5446,10 @@ declare namespace LocalJSX {
          */
         "maxlength"?: number;
     }
+    /**
+     * This component is used internally by `limel-tooltip`.
+     * @private 
+     */
     interface LimelTooltipContent {
         /**
           * Read more in tooltip.tsx
@@ -3384,59 +5525,766 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * An action bar is a user interface element commonly found in software applications and websites.
+             * It typically appears at the top of the screen or within a specific section
+             * and serves as a centralized hub for accessing various actions and commands
+             * relevant to the current context or page.
+             * The action bar often contains a set of clickable icons or buttons (icons + labels)
+             * that represent specific actions, such as saving, deleting, editing, sharing,
+             * or bulk operations for selected items.
+             * The purpose of an action bar is to provide quick and convenient access to
+             * frequently used functionalities, enabling users to perform common tasks efficiently.
+             * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+             * The action bar's design and layout can vary based on the platform or application,
+             * but its primary goal remains consistent—to
+             * empower users to interact with the software and perform desired actions effortlessly.
+             * @exampleComponent limel-example-action-bar
+             * @exampleComponent limel-example-action-bar-overflow-menu
+             * @exampleComponent limel-example-action-bar-colors
+             * @exampleComponent limel-example-action-bar-floating
+             * @exampleComponent limel-example-action-bar-styling
+             * @exampleComponent limel-example-action-bar-as-primary-component
+             * @private 
+             */
             "limel-action-bar": LocalJSX.LimelActionBar & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
+            /**
+             * @private 
+             */
             "limel-action-bar-item": LocalJSX.LimelActionBarItem & JSXBase.HTMLAttributes<HTMLLimelActionBarItemElement>;
+            /**
+             * @private 
+             */
             "limel-action-bar-overflow-menu": LocalJSX.LimelActionBarOverflowMenu & JSXBase.HTMLAttributes<HTMLLimelActionBarOverflowMenuElement>;
+            /**
+             * The Badge component can be used to display a notification badge,
+             * optionally with a number or a text label.
+             * @exampleComponent limel-example-badge
+             * @exampleComponent limel-example-badge-number
+             * @exampleComponent limel-example-badge-string
+             */
             "limel-badge": LocalJSX.LimelBadge & JSXBase.HTMLAttributes<HTMLLimelBadgeElement>;
+            /**
+             * @exampleComponent limel-example-banner
+             */
             "limel-banner": LocalJSX.LimelBanner & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
+            /**
+             * @exampleComponent limel-example-button-basic
+             * @exampleComponent limel-example-button-primary
+             * @exampleComponent limel-example-button-outlined
+             * @exampleComponent limel-example-button-disabled
+             * @exampleComponent limel-example-button-icon
+             * @exampleComponent limel-example-button-loading
+             * @exampleComponent limel-example-button-click-success
+             * @exampleComponent limel-example-button-click-fail
+             * @exampleComponent limel-example-button-reduce-presence
+             * @exampleComponent limel-example-button-colors
+             * @exampleComponent limel-example-button-composite
+             */
             "limel-button": LocalJSX.LimelButton & JSXBase.HTMLAttributes<HTMLLimelButtonElement>;
+            /**
+             * A button group control is a linear set of two or more buttons.
+             * ## Usage
+             * Button groups are often used to display different views of the same thing. A
+             * common example of this component is when you switch between [ Map | Transit
+             * | Satellite ] views to look at an area on the map.
+             * In some cases, button groups may serve as quick filters as well. For example
+             * a list of contacts, in which the user can switch to [ All | Favorites
+             * | Frequently contacted ] can incorporate a button group to quickly filter out
+             * items and display subsets of them.
+             * ## Layout
+             * The button groups are usually placed in top headers and action bars,
+             * sometimes with other elements. Since the group items will always be rendered
+             * in a row, you must make sure not to have too many buttons in the group.
+             * Because if the container of your button group does not get enough space to
+             * fit in all its buttons, they will have to truncate their text and may appear
+             * very cramped together. Always think about how your button group will appear
+             * on a small screen such as phones.
+             * :::note
+             * Button can contain text or icons, but not both simultaneously!
+             * :::
+             * Within the group, icon buttons will all have the same width, while each text button
+             * inherits its width from its content.
+             * @exampleComponent limel-example-button-group-icons
+             * @exampleComponent limel-example-button-group
+             * @exampleComponent limel-example-button-group-mix
+             * @exampleComponent limel-example-button-group-badges
+             * @exampleComponent limel-example-button-group-composite
+             */
             "limel-button-group": LocalJSX.LimelButtonGroup & JSXBase.HTMLAttributes<HTMLLimelButtonGroupElement>;
+            /**
+             * Callouts—also known as Admonitions—are useful for including supportive or
+             * special content within a large piece of text, or even inside a user
+             * interface.
+             * When used in a document or text based user interface, the callout attracts
+             * the reader's attention to a particular piece of information, without
+             * significantly interrupting their flow of reading the document.
+             * In a user interface, a callout is more intrusive to the end-user. Still, it
+             * could be a good choice when you intend to slightly disturb the user's
+             * attention, and challenge them to pay extra attention to the information
+             * presented. In such cases, a callout should not be used as a static and
+             * constantly present element of the UI. Rather, it should be displayed when
+             * something unusual or remarkable demands the user's attention.
+             * @exampleComponent limel-example-callout-note
+             * @exampleComponent limel-example-callout-important
+             * @exampleComponent limel-example-callout-tip
+             * @exampleComponent limel-example-callout-caution
+             * @exampleComponent limel-example-callout-warning
+             * @exampleComponent limel-example-callout-rich-content
+             * @exampleComponent limel-example-callout-custom-heading
+             * @exampleComponent limel-example-callout-custom-icon
+             * @exampleComponent limel-example-callout-styles
+             * @exampleComponent limel-example-custom-type
+             * @exampleComponent limel-example-callout-composite
+             */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
+            /**
+             * @exampleComponent limel-example-checkbox
+             * @exampleComponent limel-example-checkbox-helper-text
+             */
             "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
+            /**
+             * @exampleComponent limel-example-chip-set
+             * @exampleComponent limel-example-chip-set-choice
+             * @exampleComponent limel-example-chip-set-filter
+             * @exampleComponent limel-example-chip-set-filter-badge
+             * @exampleComponent limel-example-chip-set-input
+             * @exampleComponent limel-example-chip-set-input-type-text
+             * @exampleComponent limel-example-chip-set-input-type-search
+             * @exampleComponent limel-example-chip-icon-color
+             * @exampleComponent limel-example-chip-set-composite
+             */
             "limel-chip-set": LocalJSX.LimelChipSet & JSXBase.HTMLAttributes<HTMLLimelChipSetElement>;
+            /**
+             * The circular progress component can be used to visualize the curent state of
+             * a progress in a scale; for example percentage of completion of a task.
+             * Its compact UI makes the component suitable when there is not enough screen
+             * space available to visualise such information.
+             * This component allows you to define your scale, from `0` to a desired
+             * `maxValue`; and also lets you chose a proper `suffix` for your scale.
+             * :::note
+             * The component will round up the value when it is displayed, and only shows
+             * one decimal digit.
+             * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
+             * Of course such numbers, if bigger than `maxValue` will be visualized as a
+             * full progress.
+             * :::
+             * @exampleComponent limel-example-circular-progress
+             * @exampleComponent limel-example-circular-progress-sizes
+             * @exampleComponent limel-example-circular-progress-props
+             * @exampleComponent limel-example-circular-progress-css-variables
+             * @exampleComponent limel-example-circular-progress-percentage-colors
+             */
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
+            /**
+             * Currently this component support syntax highlighting for `javascript`,
+             * `json` and `typescript` formats.
+             * @exampleComponent limel-example-code-editor
+             * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+             * @exampleComponent limel-example-code-editor-fold-lint
+             */
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
+            /**
+             * @exampleComponent limel-example-collapsible-section
+             * @exampleComponent limel-example-collapsible-section-actions
+             * @exampleComponent limel-example-collapsible-section-css-props
+             * @exampleComponent limel-example-collapsible-section-external-control
+             * @exampleComponent limel-example-collapsible-section-with-slider
+             */
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
+            /**
+             * This component enables you to select a swatch from out color palette, simply
+             * by clicking on it. You can then copy the css variable name of the chosen color
+             * and use it where desired.
+             * The color picker can also show you a preview of any valid color name or color value.
+             * :::note
+             * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+             * :::
+             * @exampleComponent limel-example-color-picker
+             * @exampleComponent limel-example-color-picker-readonly
+             */
             "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
+            /**
+             * @private 
+             */
             "limel-color-picker-palette": LocalJSX.LimelColorPickerPalette & JSXBase.HTMLAttributes<HTMLLimelColorPickerPaletteElement>;
+            /**
+             * @private 
+             */
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;
+            /**
+             * @exampleComponent limel-example-date-picker-datetime
+             * @exampleComponent limel-example-date-picker-date
+             * @exampleComponent limel-example-date-picker-time
+             * @exampleComponent limel-example-date-picker-week
+             * @exampleComponent limel-example-date-picker-month
+             * @exampleComponent limel-example-date-picker-quarter
+             * @exampleComponent limel-example-date-picker-year
+             * @exampleComponent limel-example-date-picker-formatted
+             * @exampleComponent limel-example-date-picker-programmatic-change
+             * @exampleComponent limel-example-date-picker-composite
+             * @exampleComponent limel-example-date-picker-custom-formatter
+             */
             "limel-date-picker": LocalJSX.LimelDatePicker & JSXBase.HTMLAttributes<HTMLLimelDatePickerElement>;
+            /**
+             * :::note
+             * Regarding the `close` event: When putting other elements that emit `close`
+             * events inside a dialog, those events must be caught and stopped inside the
+             * dialog. If not, they will bubble to the event handler listening for `close`
+             * events on the dialog, which will close the dialog too.
+             * See the example _Nested `close` events_.
+             * :::
+             * :::important
+             * Are you developing for
+             * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that
+             * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
+             * from Lime Web Components to open dialogs in Lime CRM.
+             * :::
+             * @exampleComponent limel-example-dialog
+             * @exampleComponent limel-example-dialog-nested-close-events
+             * @exampleComponent limel-example-dialog-heading
+             * @exampleComponent limel-example-dialog-form
+             * @exampleComponent limel-example-dialog-size
+             * @exampleComponent limel-example-dialog-fullscreen
+             * @exampleComponent limel-example-dialog-closing-actions
+             * @exampleComponent limel-example-dialog-action-buttons
+             */
             "limel-dialog": LocalJSX.LimelDialog & JSXBase.HTMLAttributes<HTMLLimelDialogElement>;
+            /**
+             * @exampleComponent limel-example-dock-basic
+             * @exampleComponent limel-example-dock-custom-component
+             * @exampleComponent limel-example-dock-notification
+             * @exampleComponent limel-example-dock-mobile
+             * @exampleComponent limel-example-dock-expanded
+             * @exampleComponent limel-example-dock-colors-css
+             */
             "limel-dock": LocalJSX.LimelDock & JSXBase.HTMLAttributes<HTMLLimelDockElement>;
+            /**
+             * @private 
+             */
             "limel-dock-button": LocalJSX.LimelDockButton & JSXBase.HTMLAttributes<HTMLLimelDockButtonElement>;
+            /**
+             * This component lets end-users select a *single* file from their device
+             * storage. Regardless of the user's device or operating system, this component
+             * opens up a file picker dialog that allows the user to choose a file.
+             * ## Using correct labels
+             * This file picker can be used in different contexts. The component's distinct
+             * visual design including the upload icon hints end-users that this is not a
+             * normal input field like other fields in the form for example.
+             * :::important
+             * you need to use a descriptive `label` that clarifies the
+             * functionality of the file picker, and/or provides users with clear
+             * instructions.
+             * Depending on the context, you may need to avoid labels such as:
+             * - File
+             * - Document
+             * and instead consider using labels like:
+             * - Attach a file
+             * - Upload a file
+             * - Choose a document
+             * - Choose a file
+             * and similar phrases...
+             * :::
+             * @exampleComponent limel-example-file
+             * @exampleComponent limel-example-file-custom-icon
+             * @exampleComponent limel-example-file-accepted-types
+             * @exampleComponent limel-example-file-composite
+             */
             "limel-file": LocalJSX.LimelFile & JSXBase.HTMLAttributes<HTMLLimelFileElement>;
+            /**
+             * This component is internal and only supposed to be used by
+             * the limel-date-picker. This component is needed in order for us
+             * to render the flatpickr calendar in a portal.
+             * @private 
+             */
             "limel-flatpickr-adapter": LocalJSX.LimelFlatpickrAdapter & JSXBase.HTMLAttributes<HTMLLimelFlatpickrAdapterElement>;
+            /**
+             * This component is deprecated and will be removed in a future version of
+             * Lime Elements. Please use CSS for your flexible container needs 🙂
+             * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+             * @deprecated 
+             * @private 
+             */
             "limel-flex-container": LocalJSX.LimelFlexContainer & JSXBase.HTMLAttributes<HTMLLimelFlexContainerElement>;
+            /**
+             * @exampleComponent limel-example-form
+             * @exampleComponent limel-example-nested-form
+             * @exampleComponent limel-example-list-form
+             * @exampleComponent limel-example-dynamic-form
+             * @exampleComponent limel-example-custom-component-form
+             * @exampleComponent limel-example-props-factory-form
+             * @exampleComponent limel-example-form-layout
+             * @exampleComponent limel-example-form-span-fields
+             * @exampleComponent limel-example-custom-error-message
+             * @exampleComponent limel-example-server-errors
+             * @exampleComponent limel-example-form-row-layout
+             */
             "limel-form": LocalJSX.LimelForm & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
+            /**
+             * The `limel-grid` component creates a grid which can be used to control the
+             * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+             * to enable easy configuration of its child-elements.
+             * @exampleComponent limel-example-grid
+             */
             "limel-grid": LocalJSX.LimelGrid & JSXBase.HTMLAttributes<HTMLLimelGridElement>;
+            /**
+             * A header is the top most visual element in a component, page, card, or a view.
+             * ## Usage
+             * A header is the first thing that clarifies a context for users.
+             * Due to their positions in the UI hierarchy, headers are the most
+             * prominent elements of a user interface; and because of that, they carry both
+             * vital information and fundamental controls for the area of the interface
+             * they represent.
+             * For example, when a header is placed on top of a card, it should quickly
+             * explain the card to the user. When placed on top of a modal, it should easily
+             * clarify what the modal is about. When displayed on top of a fullscreen view,
+             * it should indicate where in the system users are, and what part of the app
+             * they are looking at.
+             * ## Layout
+             * The vital information in a header is usually manifested in form of an icon,
+             * and a heading. A subheading also could be added to provide supplementary
+             * information. There is also a third place for displaying supplementary information
+             * or "supporting text", which will be rendered as a part of the subheading.
+             * Along with this information, headers can also include actions, controls, or
+             * menus.
+             * :::important
+             * Such actions or menus must affect the entire section of the interface
+             * which the header is representing. For example, a _Delete_ button on a card
+             * header must delete that entire card and its respective contents all together,
+             * not for example a selected item which is visible in the content of that card.
+             * :::
+             * :::warning
+             * Do not user background color on icons in the headers. It is much better and
+             * much easier for the eye if your icon itself has a color.
+             * Background colors behind icons make them look like "call to action" buttons
+             * and take a lot of attention from users.
+             * :::
+             * @exampleComponent limel-example-header
+             * @exampleComponent limel-example-header-colors
+             * @exampleComponent limel-example-header-responsive
+             * @exampleComponent limel-example-header-narrow
+             */
             "limel-header": LocalJSX.LimelHeader & JSXBase.HTMLAttributes<HTMLLimelHeaderElement>;
+            /**
+             * This is an internal and private component that many input fields
+             * use to display a helper text, along with a character counter below the
+             * input field.
+             * We created this to keep the visual styles the same everywhere
+             * and to avoid importing styles separately.
+             * Also this enables us to open the helper line in limel-portal,
+             * more easily without having to send the styles to the portal.
+             * :::note
+             * When the component has no content, it will get a `display: none`
+             * as styles to avoid creating empty holes in the UI of the parent component.
+             * For example, in a `flex` or `grid` component that has a `gap`,
+             * we don't want the empty `limel-helper-line` to render and cause unnecessary
+             * gaps in the UI.
+             * However, to be more resourceful, the parent component can choose not
+             * to render the helper-line as well.
+             * :::
+             * @exampleComponent limel-example-helper-line
+             * @exampleComponent limel-example-helper-line-invalid
+             * @exampleComponent limel-example-helper-line-long-text
+             * @exampleComponent limel-example-helper-line-long-text-no-counter
+             * @exampleComponent limel-example-helper-line-character-counter
+             * @private 
+             */
             "limel-helper-line": LocalJSX.LimelHelperLine & JSXBase.HTMLAttributes<HTMLLimelHelperLineElement>;
+            /**
+             * The recommended icon library for use with Lime Elements is the Windows 10 set
+             * from Icons8 (https://icons8.com/icons/windows). This set is included in the
+             * relevant Lime products. If you are using Lime Elements in a non-Lime product,
+             * you will have to supply your own icons.
+             * The size and color of the icon is set in CSS, however there are a few
+             * standard sizes defined that can be used with the `size` property.
+             * ### Setup
+             * To use **@lundalogik/lime-icons8**, the `/assets` folder from
+             * __@lundalogik/lime-icons8__ must be made available on the webserver.
+             * To use a different icon set, the icons must be placed in a folder structure
+             * that looks like this: `assets/icons/<name-of-icon>.svg`
+             * If `assets` is placed in the root, no other setup is needed. The icons will
+             * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
+             * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
+             * icons available is to use the HTML `base` element:
+             * ```
+             * <base href="/my/parent/path/">
+             * ```
+             * If this is not enough, or if the `base` element is already in use for
+             * something else, a global icon path can be configured with the `limel-config`
+             * element:
+             * ```
+             * <limel-config config={{iconPath: '/my/parent/path/'}} />
+             * ```
+             * ### Lime icons
+             * There are icons included in the **@lundalogik/lime-icons8** package which are
+             * designed by our designers at Lime.
+             * The names of these icons start with `-lime-`, which makes them easy to
+             * find using the Icon Finder tool below.
+             * :::note
+             * Some of the `-lime-` icons have multiple colors and use our own CSS variables
+             * instead of HEX or RGB values to visualize their colors. Thus, you must import
+             * our color palette css files into your project to render the icons properly.
+             * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
+             * and how to do this.
+             * :::
+             * ### Icon Finder
+             * Search for an icon and **click on it to copy its name to clipboard**.
+             * <limel-example-icon-finder />
+             * @exampleComponent limel-example-icon
+             * @exampleComponent limel-example-icon-background
+             */
             "limel-icon": LocalJSX.LimelIcon & JSXBase.HTMLAttributes<HTMLLimelIconElement>;
+            /**
+             * @exampleComponent limel-example-icon-button-basic
+             * @exampleComponent limel-example-icon-button-disabled
+             * @exampleComponent limel-example-icon-button-elevated
+             * @exampleComponent limel-example-icon-button-toggle-state
+             * @exampleComponent limel-example-icon-button-composite
+             */
             "limel-icon-button": LocalJSX.LimelIconButton & JSXBase.HTMLAttributes<HTMLLimelIconButtonElement>;
+            /**
+             * This component can be used on places such as a start page or a dashboard.
+             * It offers features for visualizing aggregated data along with supplementary
+             * information.
+             * If clicking on the component should navigate the user to
+             * a new screen or web page, you need to provide a URL,
+             * using the `link` property.
+             * @exampleComponent limel-example-info-tile
+             * @exampleComponent limel-example-info-tile-badge
+             * @exampleComponent limel-example-info-tile-progress
+             * @exampleComponent limel-example-info-tile-loading
+             * @exampleComponent limel-example-info-tile-styling
+             */
             "limel-info-tile": LocalJSX.LimelInfoTile & JSXBase.HTMLAttributes<HTMLLimelInfoTileElement>;
+            /**
+             * @exampleComponent limel-example-input-field-text
+             * @exampleComponent limel-example-input-field-placeholder
+             * @exampleComponent limel-example-input-field-text-multiple
+             * @exampleComponent limel-example-input-field-number
+             * @exampleComponent limel-example-input-field-autocomplete
+             * @exampleComponent limel-example-input-field-icon-leading
+             * @exampleComponent limel-example-input-field-icon-trailing
+             * @exampleComponent limel-example-input-field-icon-both
+             * @exampleComponent limel-example-input-field-showlink
+             * @exampleComponent limel-example-input-field-error-icon
+             * @exampleComponent limel-example-input-field-textarea
+             * @exampleComponent limel-example-input-field-suffix
+             * @exampleComponent limel-example-input-field-prefix
+             * @exampleComponent limel-example-input-field-search
+             * @exampleComponent limel-example-input-field-pattern
+             * @exampleComponent limel-example-input-field-focus
+             */
             "limel-input-field": LocalJSX.LimelInputField & JSXBase.HTMLAttributes<HTMLLimelInputFieldElement>;
+            /**
+             * @exampleComponent limel-example-linear-progress
+             * @exampleComponent limel-example-linear-progress-color
+             * @exampleComponent limel-example-linear-progress-indeterminate
+             */
             "limel-linear-progress": LocalJSX.LimelLinearProgress & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
+            /**
+             * @exampleComponent limel-example-list
+             * @exampleComponent limel-example-list-secondary
+             * @exampleComponent limel-example-list-selectable
+             * @exampleComponent limel-example-list-icons
+             * @exampleComponent limel-example-list-badge-icons
+             * @exampleComponent limel-example-list-checkbox
+             * @exampleComponent limel-example-list-checkbox-icons
+             * @exampleComponent limel-example-list-radio-button
+             * @exampleComponent limel-example-list-radio-button-icons
+             * @exampleComponent limel-example-list-action
+             * @exampleComponent limel-example-list-striped
+             * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
+             * @exampleComponent limel-example-list-grid
+             * @exampleComponent limel-example-list-primary-component
+             */
             "limel-list": LocalJSX.LimelList & JSXBase.HTMLAttributes<HTMLLimelListElement>;
+            /**
+             * @exampleComponent limel-example-menu-basic
+             * @exampleComponent limel-example-menu-disabled
+             * @exampleComponent limel-example-menu-open-direction
+             * @exampleComponent limel-example-menu-icons
+             * @exampleComponent limel-example-menu-badge-icons
+             * @exampleComponent limel-example-menu-grid
+             * @exampleComponent limel-example-menu-hotkeys
+             * @exampleComponent limel-example-menu-secondary-text
+             * @exampleComponent limel-example-menu-notification
+             * @exampleComponent limel-example-menu-composite
+             */
             "limel-menu": LocalJSX.LimelMenu & JSXBase.HTMLAttributes<HTMLLimelMenuElement>;
+            /**
+             * @private 
+             */
             "limel-menu-list": LocalJSX.LimelMenuList & JSXBase.HTMLAttributes<HTMLLimelMenuListElement>;
+            /**
+             * @private 
+             */
             "limel-menu-surface": LocalJSX.LimelMenuSurface & JSXBase.HTMLAttributes<HTMLLimelMenuSurfaceElement>;
+            /**
+             * @exampleComponent limel-example-picker-single
+             * @exampleComponent limel-example-picker-multiple
+             * @exampleComponent limel-example-picker-icons
+             * @exampleComponent limel-example-picker-empty-suggestions
+             * @exampleComponent limel-example-picker-leading-icon
+             * @exampleComponent limel-example-picker-static-actions
+             * @exampleComponent limel-example-picker-composite
+             */
             "limel-picker": LocalJSX.LimelPicker & JSXBase.HTMLAttributes<HTMLLimelPickerElement>;
+            /**
+             * A popover is an impermanent layer that is displayed on top of other content
+             * when user taps an element that triggers the popover. This element can be
+             * practically anything, a button, piece of text, and icon, etc.
+             * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer
+             * that darkens the content below them. Also for the same reason, they can be
+             * dismissed by tapping or clicking another part of the screen, but not by a
+             * clicking a button or link on the popover itself.
+             * :::warning
+             * The component is emitting a close event when you click outside its container
+             * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react
+             * properly on this event and hide the component (preferably by setting the
+             * property `open` to `false`).
+             * :::
+             * ## Usage
+             * Use a popover to show **options** or **information** related to the trigger
+             * onscreen. A typical use case for popovers is a tooltip, in which you show
+             * help text or contextual information to users.
+             * Popovers are most appropriate on larger screens but can be used on smaller
+             * screens too, as long as their content is responsive and takes into account
+             * the context they are displayed on.
+             * When a popover is displayed, interactions with other controls are blocked,
+             * until user dismisses the popover.
+             * ## Layout
+             * Popovers has only one slot in which you can import a custom web-component.
+             * :::note
+             * You must make sure that web-components that you import into the slot has
+             * a `width: 100%;` style so that it can horizontally stretch across the popover.
+             * However, `width` of the popover can be controlled by specifying a CSS variable
+             * of `--popover-surface-width`. If you don't specify any width, the popover
+             * will grow as wide as its content.
+             * :::
+             * :::important
+             * Do not make a popover too big. They should never take over the entire screen.
+             * If your content is that big, you should probably be using a Modal instead.
+             * :::
+             * @exampleComponent limel-example-popover
+             */
             "limel-popover": LocalJSX.LimelPopover & JSXBase.HTMLAttributes<HTMLLimelPopoverElement>;
+            /**
+             * @private 
+             */
             "limel-popover-surface": LocalJSX.LimelPopoverSurface & JSXBase.HTMLAttributes<HTMLLimelPopoverSurfaceElement>;
+            /**
+             * The portal component provides a way to render children into a DOM node that
+             * exist outside the DOM hierarchy of the parent component.
+             * There are some caveats when using this component
+             * Events might not bubble up as expected since the content is moved out to
+             * another DOM node.
+             * Any styling that is applied to content from the parent will be lost, if the
+             * content is just another web compoent it will work without any issues.
+             * Alternatively, use the
+             * `style=""` html attribute.
+             * Any component that is placed inside the container must have a style of
+             * `max-height: inherit`. This ensures that its placement is calculated
+             * correctly in relation to the trigger, and that it never covers its own
+             * trigger.
+             * When the node is moved in the DOM, `disconnectedCallback` and
+             * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
+             * to do any tear-down, the appropriate setup will have to be done again on
+             * `connectedCallback`.
+             * @private 
+             * @exampleComponent limel-example-portal
+             */
             "limel-portal": LocalJSX.LimelPortal & JSXBase.HTMLAttributes<HTMLLimelPortalElement>;
+            /**
+             * @exampleComponent limel-example-progress-flow-basic
+             * @exampleComponent limel-example-progress-flow-secondary-text
+             * @exampleComponent limel-example-progress-flow-disabled-step
+             * @exampleComponent limel-example-progress-flow-colors
+             * @exampleComponent limel-example-progress-flow-colors-css
+             * @exampleComponent limel-example-progress-flow-off-progress-steps
+             * @exampleComponent limel-example-progress-flow-narrow
+             */
             "limel-progress-flow": LocalJSX.LimelProgressFlow & JSXBase.HTMLAttributes<HTMLLimelProgressFlowElement>;
+            /**
+             * @private 
+             */
             "limel-progress-flow-item": LocalJSX.LimelProgressFlowItem & JSXBase.HTMLAttributes<HTMLLimelProgressFlowItemElement>;
+            /**
+             * @exampleComponent limel-example-select
+             * @exampleComponent limel-example-select-with-icons
+             * @exampleComponent limel-example-select-multiple
+             * @exampleComponent limel-example-select-with-empty-option
+             * @exampleComponent limel-example-select-preselected
+             * @exampleComponent limel-example-select-change-options
+             * @exampleComponent limel-example-select-narrow
+             * @exampleComponent limel-example-select-dialog
+             */
             "limel-select": LocalJSX.LimelSelect & JSXBase.HTMLAttributes<HTMLLimelSelectElement>;
+            /**
+             * This component can be used on places such as a start page or a dashboard.
+             * Clicking on the component should navigate the user to a new screen,
+             * to which you need to provide a URL, by specifying an `href` for the `link` property.
+             * By default, this navigation will happen within the same browser tab.
+             * However, it is possible to override that behavior, by specifying a `target`
+             * for the `link` property
+             * @exampleComponent limel-example-shortcut
+             * @exampleComponent limel-example-shortcut-notification
+             * @exampleComponent limel-example-shortcut-styling
+             * @exampleComponent limel-example-shortcut-with-click-handler
+             */
             "limel-shortcut": LocalJSX.LimelShortcut & JSXBase.HTMLAttributes<HTMLLimelShortcutElement>;
+            /**
+             * @exampleComponent limel-example-slider
+             * @exampleComponent limel-example-slider-multiplier
+             * @exampleComponent limel-example-slider-multiplier-percentage-colors
+             * @exampleComponent limel-example-slider-composite
+             */
             "limel-slider": LocalJSX.LimelSlider & JSXBase.HTMLAttributes<HTMLLimelSliderElement>;
+            /**
+             * A Snackbar –also known as "Toast"– is used to inform the end user
+             * about an action or a process in the system.
+             * The information could vary from announcing that a process has just started,
+             * is taking place now, has ended, or has been interrupted or canceled.
+             * The information that you provide using a snackbar should be:
+             * - temporary
+             * - contextual
+             * - short
+             * - and most importantly, ignorable.
+             * It means if the user misses the information, it shouldn't be a big deal.
+             * :::note
+             * If the information you want to display has a higher importance or priority,
+             * and you need to make sure that the user takes an action to dismiss it,
+             * consider using the [Banner](/#/component/limel-banner/) component instead.
+             * For more complex interactions and for delivering more detailed information,
+             * [Dialog](/#/component/limel-dialog/) is a better choice.
+             * :::
+             * @exampleComponent limel-example-snackbar
+             * @exampleComponent limel-example-snackbar-dismissible
+             * @exampleComponent limel-example-snackbar-with-action
+             * @exampleComponent limel-example-snackbar-with-changing-messages
+             * @exampleComponent limel-example-snackbar-positioning
+             */
             "limel-snackbar": LocalJSX.LimelSnackbar & JSXBase.HTMLAttributes<HTMLLimelSnackbarElement>;
+            /**
+             * @exampleComponent limel-example-spinner
+             * @exampleComponent limel-example-spinner-color
+             * @exampleComponent limel-example-spinner-size
+             */
             "limel-spinner": LocalJSX.LimelSpinner & JSXBase.HTMLAttributes<HTMLLimelSpinnerElement>;
+            /**
+             * A split button is a button with two components:
+             * a button and a side-menu attached to it.
+             * Clicking on the button runs a default action,
+             * and clicking on the arrow opens up a list of other possible actions.
+             * :::warning
+             * - Never use a split button for navigation purposes, such as going to next page.
+             * The button should only be used for performing commands!
+             * - Never use this component instead of a Select or Menu component!
+             * :::
+             * @exampleComponent limel-example-split-button-basic
+             * @exampleComponent limel-example-split-button-repeat-default-command
+             */
             "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;
+            /**
+             * @exampleComponent limel-example-switch
+             */
             "limel-switch": LocalJSX.LimelSwitch & JSXBase.HTMLAttributes<HTMLLimelSwitchElement>;
+            /**
+             * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
+             * :::warning
+             * Tab bars should be strictly used for navigation at the top levels.
+             * They should never be used to perform actions, or navigate away from the view which contains them.
+             * :::
+             * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
+             * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
+             * :::tip Other things to consider
+             * Never divide the content of a tab using a nested tab bar.
+             * Never place two tab bars within the same screen.
+             * Never use background color for icons in tabs.
+             * Avoid having long labels for tabs.
+             * A tab will never be removed or get disabled, even if there is no content under it.
+             * :::
+             * @exampleComponent limel-example-tab-bar
+             * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
+             * @exampleComponent limel-example-tab-bar-with-equal-tab-width
+             */
             "limel-tab-bar": LocalJSX.LimelTabBar & JSXBase.HTMLAttributes<HTMLLimelTabBarElement>;
+            /**
+             * The `limel-tab-panel` component uses the `limel-tab-bar` component together
+             * with custom slotted components and will display the content for the currently
+             * active tab. Each slotted component must have an id equal to the id of the
+             * corresponding tab it belongs to. These components should implement the
+             * [TabPanelComponent](#/type/TabPanelComponent/) interface.
+             * The `limel-tab-panel` component will automatically set each tab configuration
+             * on the corresponding slotted component as a property named `tab` so that the
+             * component can take action upon that. Sometimes it might be desirable to not
+             * load data or render anything until the tab is active.
+             * The slotted components can also emit the `changeTab` event to update anything
+             * inside the actual tab, e.g. to change the icon, color or badge.
+             * @exampleComponent limel-example-tab-panel
+             */
             "limel-tab-panel": LocalJSX.LimelTabPanel & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
+            /**
+             * @exampleComponent limel-example-table
+             * @exampleComponent limel-example-table-custom-components
+             * @exampleComponent limel-example-table-header-menu
+             * @exampleComponent limel-example-table-movable-columns
+             * @exampleComponent limel-example-table-sorting-disabled
+             * @exampleComponent limel-example-table-local
+             * @exampleComponent limel-example-table-remote
+             * @exampleComponent limel-example-table-activate-row
+             * @exampleComponent limel-example-table-selectable-rows
+             * @exampleComponent limel-example-table-default-sorted
+             * @exampleComponent limel-example-table-layout-default
+             * @exampleComponent limel-example-table-layout-stretch-last-column
+             * @exampleComponent limel-example-table-layout-stretch-columns
+             * @exampleComponent limel-example-table-layout-low-density
+             * @exampleComponent limel-example-table-interactive-rows
+             */
             "limel-table": LocalJSX.LimelTable & JSXBase.HTMLAttributes<HTMLLimelTableElement>;
+            /**
+             * A tooltip can be used to display a descriptive text for any element.
+             * The displayed content must be a brief and supplemental string of text,
+             * identifying the element or describing its function for the user,
+             * helping them better understand unfamiliar objects that aren't described
+             * directly in the UI.
+             * ## Interaction
+             * The tooltip appears after a slight delay, when the element is hovered;
+             * and disappears as soon as the cursor leaves the element.
+             * Therefore, users cannot interact with the tip, but if the trigger element
+             * itself is interactive, it will remain interactible even with a tooltip bound
+             * to it.
+             * :::note
+             * In order to display the tooltip, the tooltip element and its trigger element
+             * must be within the same document or document fragment.
+             * A good practice is to just place them next to each other like below:
+             * ```html
+             * <limel-button icon="search" id="tooltip-example" />
+             * <limel-tooltip label="Search" elementId="tooltip-example" />
+             * ```
+             * :::
+             * ## Usage
+             * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+             * Use them only when they add significant value.
+             * - A good tip is concise, helpful, and informative.
+             * Don't explain the obvious or simply repeat what is already on the screen.
+             * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+             * - If the tip is essential to the primary tasks that the user is performing,
+             * such as warnings or important notes, include the information directly in the
+             * interface instead.
+             * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+             * use that, not a tooltip.
+             * - Make sure to use the tooltip on an element that users naturally and
+             * effortlessly recognize can be hovered.
+             * @exampleComponent limel-example-tooltip
+             * @exampleComponent limel-example-tooltip-max-character
+             * @exampleComponent limel-example-tooltip-composite
+             * @private 
+             */
             "limel-tooltip": LocalJSX.LimelTooltip & JSXBase.HTMLAttributes<HTMLLimelTooltipElement>;
+            /**
+             * This component is used internally by `limel-tooltip`.
+             * @private 
+             */
             "limel-tooltip-content": LocalJSX.LimelTooltipContent & JSXBase.HTMLAttributes<HTMLLimelTooltipContentElement>;
         }
     }